展会大屏修改

src/views/MicroExhibition/child/LineChart.vue

@@ -53,31 +53,26 @@ const setCharts = ()=>{
             {
                 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]
             }
         ]

src/views/MicroExhibition/components/BarChart.vue

@@ -4,18 +4,30 @@
 
 <script setup lang='ts'>
 import { ref, getCurrentInstance, onMounted } from 'vue'
+
+const prop = defineProps({
+    xData: {
+        type: Array,
+        default: ['1050910', '1050269']
+    }
+})
+
 let LChartRef = ref(null);
 const { proxy } = getCurrentInstance() as any;
 let charts = null;
 const setCharts = () => {
     charts = proxy.$echarts.init(LChartRef.value, 'dark')
     let option = {
-        title: {
+        // title: {
-            text: '工作时间'
+        //     text: '工作时间'
+        // },
+        backgroundColor: '#0E0E0E',
+        legend: {
+            data: ['计划完成','实际完成']
         },
         xAxis: {
             type: 'category',
-            data: ['步进抬压脚电\r\n脑花样平缝机', '超高速全自\r\n动电脑包缝\r\n机(五线)'],
+            data: prop.xData,
             // axisLabel: {
             //     interval: 0, //控制X轴刻度全部显示
             //     rotate: 45, //倾斜角度
@@ -26,8 +38,14 @@ const setCharts = () => {
         },
         series: [
             {
+                name:'计划完成',
                 data: [120, 200],
                 type: 'bar'
+            },
+            {
+                name:'实际完成',
+                data: [130, 180],
+                type: 'bar'
             }
         ]
     };

src/views/MicroExhibition/components/DevCard.vue

@@ -47,6 +47,9 @@ const prop = defineProps({
     height: 100%;
     box-sizing: border-box;
 }
+.dev-right {
+    width: 60%;
+}
 
 .dev-right {
     display: flex;
@@ -83,5 +86,8 @@ const prop = defineProps({
     height: 35px;
     line-height: 35px;
     text-align: center;
-    background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
+    font-size: 18px;
+    font-weight: 700;
+    color: #02C1D7;
+    /* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
 }</style>

src/views/MicroExhibition/components/LineChart.vue

@@ -49,35 +49,30 @@ const setCharts = ()=>{
             {
                 name: '步进抬压脚电脑花样平缝机',
                 type: 'line',
-                stack: 'Total',
                 smooth: true,
                 data: [120, 132, 101, 134, 90, 230, 210]
             },
             {
                 name: '富怡全自动皮革缝纫机(任意转)整机',
                 type: 'line',
-                stack: 'Total',
                 smooth: true,
                 data: [220, 182, 191, 234, 290, 330, 310]
             },
             {
                 name: '富怡电脑绣花机(精密绣花机)',
                 type: 'line',
-                stack: 'Total',
                 smooth: true,
                 data: [150, 232, 201, 154, 190, 330, 410]
             },
             {
                 name: '超高速全自动电脑包缝机(五线)',
                 type: 'line',
-                stack: 'Total',
                 smooth: true,
                 data: [320, 332, 301, 334, 390, 330, 320]
             },
             {
                 name: '富怡全自动缝纫机(服装机)',
                 type: 'line',
-                stack: 'Total',
                 smooth: true,
                 data: [820, 932, 901, 934, 1290, 1330, 1320]
             }

src/views/MicroExhibition/components/NewBoder.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="newboder">
+    <img class="u305" src="./../images/u305.svg" alt="">
+    <img class="u290" src="./../images/u290.svg" alt="">
+    <div class="title">
+        <text class="title-text">{{ newTitle }}</text>
+    </div>
+    <div class="newboder-content">
+        <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { computed} from 'vue'
+let prop = defineProps({
+    title: {
+        type: String,
+        default: '裁剪设备'
+    }
+})
+
+let newTitle = computed(() => {
+    return prop.title.split('').join(' ')
+})
+
+</script>
+
+<style scoped>
+.newboder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.u305 {
+    width: 73px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+}
+.u290 {
+    width: 61px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: rotate(180deg);
+    opacity: 0.5;
+    z-index: 2;
+}
+.title {
+    width: 100%;
+    height: 50px;
+    text-align: left;
+    font-size: 20px;
+    color: #02C1D7;
+    display: flex;
+    align-items: center;
+}
+.title-text {
+    margin-left: 30px;
+    padding-left: 20px;
+    border-left: #02C1D7 solid 5px;
+    font-weight: bold;
+}
+
+.newboder-content {
+    flex: 1;
+}
+</style>

src/views/MicroExhibition/components/ringChart.vue

@@ -15,7 +15,6 @@
 import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 import { useI18n } from 'vue-i18n'
-import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
 let { t } = useI18n();
 let ringRef = ref();
 let ringChart = null;
@@ -28,6 +27,7 @@ const init = () => {
         tooltip: {
             trigger: "item",
         },
+        backgroundColor: '#0E0E0E',
         legend: {
             type: "scroll",
             bottom: "0",

src/views/MicroExhibition/images/u290.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="61px" height="87px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42" x2="58" y2="42" id="LinearGradient191">
+      <stop id="Stop192" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
+      <stop id="Stop193" stop-color="#00ffff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1847 -1012 )">
+    <path d="M 57.58803112269304 0.15649613942387075  L 26.45614035087719 1.6000000000000454  L 1 30.799999999999955  L 1 83.20000000000005  " stroke-width="2" stroke="url(#LinearGradient191)" fill="none" transform="matrix(1 0 0 1 1848 1013 )" />
+  </g>
+</svg>

src/views/MicroExhibition/images/u305.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="73px" height="88px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42.5" x2="70" y2="42.5" id="LinearGradient194">
+      <stop id="Stop195" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
+      <stop id="Stop196" stop-color="#00ffff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -666 -592 )">
+    <path d="M 69.58823529411764 1  L 30.88235294117647 1  L 0 35.19718310049065  L 0 85  " stroke-width="2" stroke="url(#LinearGradient194)" fill="none" transform="matrix(1 0 0 1 667 593 )" />
+  </g>
+</svg>

src/views/MicroExhibition/index.vue

@@ -2,21 +2,21 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'设备大屏展示系统'" :titleTip="titleTip"
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="[]"
                     :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
         <div class="content">
             <div class="left">
                 <div class="lt">
-                    <Card title="设备状态总览">
+                    <NewBoder :title="'裁剪设备'">
-                        <ringChart :data="ringData"></ringChart>
+                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
-                    </Card>
+                            <BarChart style="width: 100%;height: 100%;"></BarChart>
+                        </DevCard>
+                    </NewBoder>
                 </div>
                 <div class="lb">
-                    <Card title="设备列表">
+                    <NewBoder :title="'缝中设备'"></NewBoder>
-                        <scrollBoard :config="scrollBoardConfig"></scrollBoard>
-                    </Card>
                 </div>
             </div>
             <div class="center">
@@ -38,30 +38,26 @@
                         </div>
                     </div>
                 </div>
-                <LineChart class="cc" :config="{ title: '工作帧数' }"></LineChart>
+                <div class="cc">
-                <div class="cb">
+                    <NewBoder :title="'设备状态总览'">
-                    <Card title="富 怡 全 自 动 裁 床">
+                        <ringChart :data="ringData"></ringChart>
-                        <DevCard :dev_title="cc_title" :dev_value="cc_value">
+                    </NewBoder>
-                            <div class="progress">
-                                <dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
-                                <div class="progress-title">工作时间</div>
                 </div>
-                        </DevCard>
+                <div class="cb">
-                    </Card>
+                    <NewBoder :title="'板房设备'">
+                    </NewBoder>
                 </div>
             </div>
             <div class="right">
                 <div class="rt">
-                    <Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
+                    <NewBoder :title="'一次性拖鞋自动生产线'">
-                        <PbjCard></PbjCard>
-                    </Card>
-                </div>
-                <div class="rb">
-                    <Card title="缝纫设备">
                         <DevCard :dev_title="dev_title" :dev_value="dev_value">
                             <BarChart style="width: 100%;height: 100%;"></BarChart>
                         </DevCard>
-                    </Card>
+                    </NewBoder>
+                </div>
+                <div class="rb">
+                    <NewBoder :title="'座椅面套生产线'"></NewBoder>
                 </div>
             </div>
         </div>
@@ -70,127 +66,63 @@
 
 <script setup lang='ts'>
 import header2 from '@/components/headerBox/header2.vue'
-import Card from './components/Card.vue';
+import NewBoder from './components/NewBoder.vue';
-import LineChart from './components/LineChart.vue'
+import DevCard from "./components/DevCard.vue";
 import BarChart from './components/BarChart.vue'
 import ringChart from "./components/ringChart.vue";
-import DevCard from "./components/DevCard.vue";
+
-import PbjCard from './components/PbjCard.vue';
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
-import scrollBoard from "./components/scrollBoard.vue";
-import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
 import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
-import { getCismaList } from '@/http/cisma/index'
 
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
 const store = useMicroExhibitionStore()
-let titleTip = [
-    {
-        color: "#E43961",
-        name: t('messages.abnormal'),
-    },
-    {
-        color: "#20AEC5",
-        name: t('messages.NoAbnormal'),
-    },
-    {
-        color: "#A7A6BD",
-        name: t('messages.disconnection'),
-    },
-];
-document.title = '设备大屏展示系统';
 let ringData = ref([]);
 ringData.value = [
     { name: '工作', value: 7 },
-    { name: '停机', value: 6 },
+    { name: '停机', value: 7 },
     { name: '待机', value: 3 },
 ]
-let scrollBoardConfig = reactive({
+
-    header: ['序号', '设备名称', '机架号', '工作时长', '状态'],//, '故障率'
+let dev_title = ['设备名称', '设备编码', '稼动率', '状态']
-    headerBGC: 'rgb(52, 105, 243)',
-    oddRowBGC: '#100c2a',
-    evenRowBGC: '#100c2a',
-    wrap: [false, true, false, false, false],
-    columnWidth: [80, 290, 120, 120, 120, 120],
-    align: ['center', 'center', 'center', 'center', 'center', 'center'],
-    data: [
-        [1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
-    ],
-    rawData: []
-})
-let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
-let cc_title = ['机架号', '设备状态', '布料层数', '裁片数量']
-let cc_value = ref([[102014421, '待机', '40层', '1000片']])
 let dev_value = [
-    [102014423, '待机', '40层', '1000片'],
+    ['全自动针梭两用铺布机', '待机', '40层', '1000片'],
-    [102014424, '待机', '40层', '1000片'],
+    ['全自动9公分电脑裁床', '待机', '40层', '1000片'],
 ]
-
-let pond_config = reactive({
-    data: [55],
-    shape: 'round'
-})
-async function reqCismaList() {
-    let res: any = await getCismaList()
-    if (res.code === 200) {
-        store.setDevlist(res.data.devlist)
-        store.setDevnum(res.data.devnum)
-        changeRingData()
-        changescrollBoardConfig()
-    }
-
-}
-
-function changeRingData() {
-    ringData.value = [
-        { name: '工作', value: store.devnum.on },
-        { name: '停机', value: store.devnum.off },
-        { name: '待机', value: store.devnum.wait },
-    ]
-}
-function changescrollBoardConfig() {
-    scrollBoardConfig.data = store.devlist.map((item: any, index: number) => {
-        return [index + 1, item.name, item.label, item.runTime + '分', item.status]
-    })
-}
-onMounted(() => {
-    reqCismaList()
-})
 </script>
 
+<style>
+#app {
+    background-color: #0E0E0E;
+}
+</style>
 <style scoped>
 .container {
     height: 1080px;
     width: 1920px;
-    color: #20aec5;
+    color: #FFFFFF;
-    background-color: #100c2a;
+    background-color: #0E0E0E;
+
 }
 
 .header {
-    height: 150px;
+    height: 100px;
     width: 1920px;
 }
 
 .content {
-    height: 930px;
+    height: 980px;
     width: 1920px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
 }
 
 .left,
 .right {
-    height: 930px;
+    height: 980px;
     width: 600px;
     display: flex;
     flex-direction: column;
@@ -199,19 +131,19 @@ onMounted(() => {
 
 .center {
     flex: 1;
-    height: 930px;
+    height: 980px;
     margin: 0 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
-.lt {
+.lt,.rt {
     width: 100%;
-    height: 370px;
+    height: 450px;
 }
 
-.lb {
+.lb,.rb {
     width: 100%;
     height: 530px;
 }
@@ -223,6 +155,14 @@ onMounted(() => {
     flex-direction: row;
     justify-content: space-around;
 }
+.cc {
+    width: 100%;
+    height: 350px;
+}
+.cb {
+    width: 100%;
+    height: 500px;
+}
 
 .top-item {
     width: 30%;
@@ -253,6 +193,7 @@ h2 {
     /* color: #fff; */
     font-size: 18px;
     line-height: 1.5rem;
+    color: #02C1D7;
 }
 
 .on {
@@ -264,31 +205,4 @@ h2 {
     color: #797979;
     font-size: 3.5rem;
 }
-
-.cc,
-.cb {
-    width: 100%;
-    height: 400px;
-}
-
-.rt,
-.rb {
-    width: 100%;
-    height: 455px;
-}
-
-.progress {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-}
-
-.progress-title {
-    margin-top: 20px;
-    font-size: 16px;
-    color: #fff;
-}
 </style>

src/views/MicroExhibition/index1.vue

@@ -0,0 +1,294 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">
+                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'设备大屏展示系统'" :titleTip="titleTip"
+                    :typeFun="['time']" :alarmType="[]"></header2>
+            </div>
+        </div>
+        <div class="content">
+            <div class="left">
+                <div class="lt">
+                    <Card title="设备状态总览">
+                        <ringChart :data="ringData"></ringChart>
+                    </Card>
+                </div>
+                <div class="lb">
+                    <Card title="设备列表">
+                        <scrollBoard :config="scrollBoardConfig"></scrollBoard>
+                    </Card>
+                </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>{{ store.devnum.all }} {{ 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" :config="{ title: '工作帧数' }"></LineChart>
+                <div class="cb">
+                    <Card title="富 怡 全 自 动 裁 床">
+                        <DevCard :dev_title="cc_title" :dev_value="cc_value">
+                            <div class="progress">
+                                <dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
+                                <div class="progress-title">稼动率</div>
+                            </div>
+                        </DevCard>
+                    </Card>
+                </div>
+            </div>
+            <div class="right">
+                <div class="rt">
+                    <Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
+                        <PbjCard></PbjCard>
+                    </Card>
+                </div>
+                <div class="rb">
+                    <Card title="缝纫设备">
+                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
+                            <BarChart style="width: 100%;height: 100%;"></BarChart>
+                        </DevCard>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import header2 from '@/components/headerBox/header2.vue'
+import Card from './components/Card.vue';
+import LineChart from './components/LineChart.vue'
+import BarChart from './components/BarChart.vue'
+import ringChart from "./components/ringChart.vue";
+import DevCard from "./components/DevCard.vue";
+import PbjCard from './components/PbjCard.vue';
+import scrollBoard from "./components/scrollBoard.vue";
+import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
+import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
+import { getCismaList } from '@/http/cisma/index'
+
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+const store = useMicroExhibitionStore()
+let titleTip = [
+    {
+        color: "#E43961",
+        name: t('messages.abnormal'),
+    },
+    {
+        color: "#20AEC5",
+        name: t('messages.NoAbnormal'),
+    },
+    {
+        color: "#A7A6BD",
+        name: t('messages.disconnection'),
+    },
+];
+document.title = '设备大屏展示系统';
+let ringData = ref([]);
+ringData.value = [
+    { name: '工作', value: 7 },
+    { name: '停机', value: 6 },
+    { name: '待机', value: 3 },
+]
+let scrollBoardConfig = reactive({
+    header: ['序号', '设备名称', '机架号', '工作时长', '状态'],//, '故障率'
+    headerBGC: 'rgb(52, 105, 243)',
+    oddRowBGC: '#100c2a',
+    evenRowBGC: '#100c2a',
+    wrap: [false, true, false, false, false],
+    columnWidth: [80, 290, 120, 120, 120, 120],
+    align: ['center', 'center', 'center', 'center', 'center', 'center'],
+    data: [
+        [1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+    ],
+    rawData: []
+})
+let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
+let cc_title = ['机架号', '设备状态',  '裁片数量']
+let cc_value = ref([[102014421, '待机', '1000片']])
+let dev_value = [
+    [102014423, '待机', '40层', '1000片'],
+    [102014424, '待机', '40层', '1000片'],
+]
+
+let pond_config = reactive({
+    data: [55],
+    shape: 'round'
+})
+async function reqCismaList() {
+    let res: any = await getCismaList()
+    if (res.code === 200) {
+        store.setDevlist(res.data.devlist)
+        store.setDevnum(res.data.devnum)
+        changeRingData()
+        changescrollBoardConfig()
+    }
+
+}
+
+function changeRingData() {
+    ringData.value = [
+        { name: '工作', value: store.devnum.on },
+        { name: '停机', value: store.devnum.off },
+        { name: '待机', value: store.devnum.wait },
+    ]
+}
+function changescrollBoardConfig() {
+    scrollBoardConfig.data = store.devlist.map((item: any, index: number) => {
+        return [index + 1, item.name, item.label, item.runTime + '分', item.status]
+    })
+}
+onMounted(() => {
+    reqCismaList()
+})
+</script>
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #20aec5;
+    background-color: #100c2a;
+}
+
+.header {
+    height: 150px;
+    width: 1920px;
+}
+
+.content {
+    height: 930px;
+    width: 1920px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.left,
+.right {
+    height: 930px;
+    width: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.center {
+    flex: 1;
+    height: 930px;
+    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;
+}
+
+.rt,
+.rb {
+    width: 100%;
+    height: 455px;
+}
+
+.progress {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.progress-title {
+    margin-top: 20px;
+    font-size: 16px;
+    color: #fff;
+}
+</style>