From df7125e470b1512fa981c6e9dc8b5078d078c987 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Tue, 12 Sep 2023 10:58:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=BA=E5=86=85=E7=8E=AF=E5=9B=BE=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E4=BF=AE=E6=94=B9=20=20=E5=B1=95=E4=BC=9A=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/InPlantProducts/content/bottom.vue  |   6 +-
 .../MicroExhibition/components/DevCard.vue    |  27 +-
 src/views/MicroExhibition/index1.vue          | 294 ------------------
 3 files changed, 21 insertions(+), 306 deletions(-)
 delete mode 100644 src/views/MicroExhibition/index1.vue

diff --git a/src/views/InPlantProducts/content/bottom.vue b/src/views/InPlantProducts/content/bottom.vue
index cdf0bc6..54fa440 100644
--- a/src/views/InPlantProducts/content/bottom.vue
+++ b/src/views/InPlantProducts/content/bottom.vue
@@ -18,14 +18,14 @@
           <el-col :span="24"
             ><installtable
               ref="install1"
-              :color="['#ee6666', '#a14646']"
+              :color="['#91cc75', '#658c52']"
               :title="t('messages.QiCheDevSchedule')"
             ></installtable
           ></el-col>
           <el-col :span="24"
             ><installtable
               ref="install2"
-              :color="['#5470C6', '#384a81']"
+              :color="['#91cc75', '#658c52']"
               :title="t('messages.FuZhuangDevSchedule')"
             ></installtable
           ></el-col>
@@ -37,7 +37,7 @@
       <el-col :span="5">
         <installtable
           ref="install3"
-          :color="['#FAC858', '#ac8b40']"
+          :color="['#91cc75', '#658c52']"
           :title="t('messages.JiaFangDevSchedule')"
         ></installtable>
         <installtable
diff --git a/src/views/MicroExhibition/components/DevCard.vue b/src/views/MicroExhibition/components/DevCard.vue
index be3356c..ae05ad3 100644
--- a/src/views/MicroExhibition/components/DevCard.vue
+++ b/src/views/MicroExhibition/components/DevCard.vue
@@ -9,9 +9,11 @@
                     <div class="key" v-for="item in dev_title">{{ item }}</div>
                 </div>
                 <div class="dev-content" v-for="(items, index) in (dev_value as any)">
-                    <div v-for="(item,index) in items" :class="{status:index == (items.length - 1)}" 
-                    :style="{background:index == (items.length - 1)?status_color[item]:''}"
-                    >{{ index == (items.length - 1)?'':item}}</div>
+                    <div v-for="(item, index) in items" class="dev_value">
+                        <div :class="{ status: index == (items.length - 1) }"
+                            :style="{ background: index == (items.length - 1) ? status_color[item] : '' }">{{ index ==
+                                (items.length - 1) ? '' : item }}</div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -33,10 +35,10 @@ const prop = defineProps({
     },
 })
 const status_color = {
-    '0':'#FF6E76',
-    '1':'#FDDD60',
-    '2':'#7CFFB2',
-    '3':'#FDDD60',
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
 }
 </script>
 
@@ -55,6 +57,7 @@ const status_color = {
     height: 100%;
     box-sizing: border-box;
 }
+
 .dev-right {
     width: 60%;
 }
@@ -88,6 +91,12 @@ const status_color = {
     align-items: center;
     font-weight: bold;
 }
+.dev_value {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
 .key {
     width: 75px;
@@ -101,8 +110,8 @@ const status_color = {
 }
 
 .status {
-    width:24px;
-    height:24px;
+    width: 24px;
+    height: 24px;
     border-radius: 50%;
 }
 </style>
diff --git a/src/views/MicroExhibition/index1.vue b/src/views/MicroExhibition/index1.vue
deleted file mode 100644
index 17ef6c2..0000000
--- a/src/views/MicroExhibition/index1.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<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>