From f25827fa51faaac744fac07ab6b3d2c853b12656 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Wed, 23 Aug 2023 18:06:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=95=E4=BC=9A=E8=AE=BE=E5=A4=87=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                           |   5 +
 .../MicroExhibition/components/LineChart.vue  |  88 +++++++++
 src/views/MicroExhibition/index.vue           | 175 ++++++++++++++++++
 3 files changed, 268 insertions(+)
 create mode 100644 src/views/MicroExhibition/components/LineChart.vue
 create mode 100644 src/views/MicroExhibition/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 4ab98af..58dce72 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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"),
+      },
 
 
 
diff --git a/src/views/MicroExhibition/components/LineChart.vue b/src/views/MicroExhibition/components/LineChart.vue
new file mode 100644
index 0000000..8f50d0e
--- /dev/null
+++ b/src/views/MicroExhibition/components/LineChart.vue
@@ -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>
diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue
new file mode 100644
index 0000000..8f48c54
--- /dev/null
+++ b/src/views/MicroExhibition/index.vue
@@ -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>