hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

展会设备大屏

Browse Source
This commit is contained in:
hzz 2023-08-23 18:06:47 +08:00
parent 9e7cf96d3a
commit f25827fa51
3 changed files with 268 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/router/index.ts
View File

@ -268,6 +268,11 @@ const routes: Array<RouteRecordRaw> = [
name: "MicEnvironment",
component: () => import("../views/MicEnvironment/index.vue"),
},
{
path: "/MicroExhibition",
name: "MicroExhibition",
component: () => import("../views/MicroExhibition/index.vue"),
},

88
src/views/MicroExhibition/components/LineChart.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div ref="LChartRef"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = ()=>{
charts = proxy.$echarts.init(LChartRef.value, 'dark')
let option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
charts.setOption(option);
}
onMounted(() => {
setCharts()
})
</script>
<style scoped>
.cc {
width: 400px;
height: 400px;
}
</style>

175
src/views/MicroExhibition/index.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.微工厂环境实时监测系统')"
:titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
<div class="left">
<div class="lt">
<Border13>
</Border13>
</div>
<div class="lb">
<Border13>
</Border13>
</div>
</div>
<div class="center">
<div class="ct">
<div class="top-item">
<h2>设备总数</h2>
<div class="div_p" style="color: #ff9e5b;font-size: 40px;">
<!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> -->
<h5>{{ 14 }} {{ t('messages.units') }}</h5>
</div>
</div>
<div class="top-item">
<h2>网关状态</h2>
<div class="div_p">
<i :class="true
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
"></i>
</div>
</div>
</div>
<LineChart class="cc"></LineChart>
<div class="cb"></div>
</div>
<div class="right"></div>
</div>
</div>
</template>
<script setup lang='ts'>
import header2 from '@/components/headerBox/header2.vue'
import Border13 from '@/components/border/Border13.vue'
import LineChart from './components/LineChart.vue'
import {ref,getCurrentInstance} from 'vue'
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
},
{
color: "#A7A6BD",
name: t('messages.disconnection'),
},
];
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
}
.header {
height: 150px;
width: 1920px;
background-color: #100c2a;
}
.content {
height: 930px;
width: 1920px;
background-color: #100c2a;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left,
.right {
height: 930px;
width: 600px;
background-color: #100c2a;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.center {
flex: 1;
height: 930px;
background-color: #100c2a;
margin: 0 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.lt {
width: 100%;
height: 370px;
}
.lb {
width: 100%;
height: 530px;
}
.ct {
width: 100%;
height: 110px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.top-item {
width: 30%;
height: 100%;
background-image: url(@/assets/img/u8.png);
background-size: 100% 100%;
box-sizing: border-box;
padding: 5px;
}
.top-item .div_p {
height: 60%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.div_p .div-p-tip {
position: absolute;
font-size: 1.5rem;
top: 10%;
left: 20%;
}
h2 {
/* color: #fff; */
font-size: 18px;
line-height: 1.5rem;
}
.on {
color: #20AEC5;
font-size: 3.5rem;
}
.off {
color: #797979;
font-size: 3.5rem;
}
.cc,.cb {
width: 100%;
height: 400px;
background-color: #100c2a;
}
</style>