展会设备大屏
This commit is contained in:
hzz
parent
9e7cf96d3a
commit
f25827fa51
@ -268,6 +268,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "MicEnvironment",
|
name: "MicEnvironment",
|
||||||
component: () => import("../views/MicEnvironment/index.vue"),
|
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
88
src/views/MicroExhibition/components/LineChart.vue
Normal 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
175
src/views/MicroExhibition/index.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user