From 8d3a20cc01b4d97f1318fa73faad7c3c45a995e0 Mon Sep 17 00:00:00 2001
From: joylink_fanyuhong <18706759286@163.com>
Date: Wed, 19 Jan 2022 11:21:58 +0800
Subject: [PATCH] =?UTF-8?q?iscs=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../config/broadcast/centerHome.vue           |  59 ++++++++-
 .../config/broadcast/stateTable.vue           |   4 +-
 .../config/broadcast/stationHome.vue          | 114 +++++++++++++++++-
 .../iscs/iscsSystem/config/pis/mainScreen.vue |   6 +-
 4 files changed, 171 insertions(+), 12 deletions(-)

diff --git a/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue b/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
index 325213440..e4fe7c861 100644
--- a/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
@@ -21,7 +21,7 @@
                   <div class="pa-table-content" @click="clickArea(i,j)">
                     <div class="pa-table-content-inside" :style="{background: selectedAreaList.includes(i + '-' + j)? '#2EFF74':'#CDCDCD'}" />
                   </div>
-                  <div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">{{ deviceMap[i+ '-' +j].state }}</div>
+                  <div :id="'state-' +i + '-' + j" class="pa-tabel-state-box">{{ deviceMap[i+ '-' +j].state }}</div>
                 </div>
               </div>
             </div>
@@ -134,6 +134,53 @@ export default {
                     const index = this.iscsDeviceMap[item.code];
                     if (index) {
                         this.$set(this.deviceMap[index], 'state', item.state);
+                        const div = document.getElementById('state-' + index);
+                        if (div) {
+                            switch (item.state) {
+                            case '0':
+                                div.style.background = '#CCCCCC';
+                                break;
+                            case '1':
+                                div.style.background = '#FF0000';
+                                break;
+                            case '2':
+                                div.style.background = '#880000';
+                                break;
+                            case '3':
+                                div.style.background = '#0000FF';
+                                break;
+                            case '4':
+                                div.style.background = '#554488';
+                                break;
+                            case '5':
+                                div.style.background = '#44CC55';
+                                break;
+                            case '6':
+                                div.style.background = '#FF00FF';
+                                break;
+                            case '7':
+                                div.style.background = '#887711';
+                                break;
+                            case '8':
+                                div.style.background = '#006600';
+                                break;
+                            case '9':
+                                div.style.background = '#778877';
+                                break;
+                            case '10':
+                                div.style.background = '#555454';
+                                break;
+                            case '11':
+                                div.style.background = '#556688';
+                                break;
+                            case '12':
+                                div.style.background = '#887711';
+                                break;
+                            case '13':
+                                div.style.background = '#115577';
+                                break;
+                            }
+                        }
                     }
                 });
             }
@@ -562,4 +609,14 @@ export default {
 	.iscs-pa-table {
 		height: 32px;
 	}
+	.pa-tabel-state-box{
+		display: inline-block;
+		margin-left: 5px;
+		width: 20px;
+		text-align: center;
+		height: 18px;
+		line-height: 18px;
+		transform: translateY(-25%);
+		color: #000;
+	}
 </style>
diff --git a/src/views/iscs/iscsSystem/config/broadcast/stateTable.vue b/src/views/iscs/iscsSystem/config/broadcast/stateTable.vue
index 41a02e4a5..fda5e22b0 100644
--- a/src/views/iscs/iscsSystem/config/broadcast/stateTable.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/stateTable.vue
@@ -21,13 +21,13 @@
     <el-row style="margin-bottom: 10px" :gutter="10">
       <el-col :span="3"><div style="background: #0000FF;color: #000; text-align: center">3</div></el-col>
       <el-col :span="9"><div>环调话筒广播</div></el-col>
-      <el-col :span="3"><div style="background: #555454;color: #000; text-align: center">11</div></el-col>
+      <el-col :span="3"><div style="background: #555454;color: #000; text-align: center">10</div></el-col>
       <el-col :span="9"><div>车站普通预录</div></el-col>
     </el-row>
     <el-row style="margin-bottom: 10px" :gutter="10">
       <el-col :span="3"><div style="background: #554488;color: #000; text-align: center">4</div></el-col>
       <el-col :span="9"><div>中心紧急预录</div></el-col>
-      <el-col :span="3"><div style="background: #556688;color: #000; text-align: center">12</div></el-col>
+      <el-col :span="3"><div style="background: #556688;color: #000; text-align: center">11</div></el-col>
       <el-col :span="9"><div>ATS预录</div></el-col>
     </el-row>
     <el-row style="margin-bottom: 10px" :gutter="10">
diff --git a/src/views/iscs/iscsSystem/config/broadcast/stationHome.vue b/src/views/iscs/iscsSystem/config/broadcast/stationHome.vue
index da1d9c2ac..96a0088d3 100644
--- a/src/views/iscs/iscsSystem/config/broadcast/stationHome.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/stationHome.vue
@@ -20,37 +20,37 @@
         <el-col :span="3">
           <div v-if="checkHasDevice('LCD')" class="broadcast-mode-button" @click="selectedArea('LCD')">
             <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('LCD')? '#2EFF74':'#CDCDCD'}" />
-            <div style="position: relative; left: 25px;display: inline-block;color: #000;">{{ deviceMap['LCD'].state }}</div>
+            <div id="LCD" class="pa-state-box">{{ deviceMap['LCD'].state }}</div>
           </div>
         </el-col>
         <el-col :span="3">
           <div v-if="checkHasDevice('UP_STAND')" class="broadcast-mode-button" @click="selectedArea('UP_STAND')">
             <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('UP_STAND')? '#2EFF74':'#CDCDCD'}" />
-            <div style="position: relative; left: 25px;display: inline-block;color: #000;">{{ deviceMap['UP_STAND'].state }}</div>
+            <div id="UP_STAND" class="pa-state-box">{{ deviceMap['UP_STAND'].state }}</div>
           </div>
         </el-col>
         <el-col :span="3">
           <div v-if="checkHasDevice('DOWN_STAND')" class="broadcast-mode-button" @click="selectedArea('DOWN_STAND')">
             <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('DOWN_STAND')? '#2EFF74':'#CDCDCD'}" />
-            <div style="position: relative; left: 25px;display: inline-block;color: #000;">{{ deviceMap['DOWN_STAND'].state }}</div>
+            <div id="DOWN_STAND" class="pa-state-box">{{ deviceMap['DOWN_STAND'].state }}</div>
           </div>
         </el-col>
         <el-col :span="3">
           <div v-if="checkHasDevice('ADMINISTRATIVE_AREA')" class="broadcast-mode-button" @click="selectedArea('ADMINISTRATIVE_AREA')">
             <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('ADMINISTRATIVE_AREA')? '#2EFF74':'#CDCDCD'}" />
-            <div style="position: relative; left: 25px;display: inline-block;color: #000;">{{ deviceMap['ADMINISTRATIVE_AREA'].state }}</div>
+            <div id="ADMINISTRATIVE_AREA" class="pa-state-box">{{ deviceMap['ADMINISTRATIVE_AREA'].state }}</div>
           </div>
         </el-col>
         <el-col :span="3">
           <div v-if="checkHasDevice('GATE')" class="broadcast-mode-button" @click="selectedArea('GATE')">
             <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('GATE')? '#2EFF74':'#CDCDCD'}" />
-            <div style="position: relative; left: 25px;display: inline-block;color: #000;">{{ deviceMap['GATE'].state }}</div>
+            <div id="GATE" class="pa-state-box">{{ deviceMap['GATE'].state }}</div>
           </div>
         </el-col>
         <el-col :span="3">
           <div v-if="checkHasDevice('TRANSFER_CHANNEL')" class="broadcast-mode-button" @click="selectedArea('TRANSFER_CHANNEL')">
             <div class="pa-check-box" style="right: 10px;" :style="{background: enableAreaList.includes('TRANSFER_CHANNEL')? '#2EFF74':'#CDCDCD'}" />
-            <div style="position: relative; left: 25px;display: inline-block;color: #000;">{{ deviceMap['TRANSFER_CHANNEL'].state }}</div>
+            <div id="TRANSFER_CHANNEL" class="pa-state-box">{{ deviceMap['TRANSFER_CHANNEL'].state }}</div>
           </div>
         </el-col>
       </el-row>
@@ -251,6 +251,53 @@ export default {
                 this.iscsDeviceList.forEach(device => {
                     this.$set(device, 'state', this.iscsDeviceState[device.code] ? this.iscsDeviceState[device.code].state : '0');
                     this.iscsDeviceMap[device.code] = device;
+                    const div = document.getElementById(device.position);
+                    if (div) {
+                        switch (device.state) {
+                        case '0':
+                            div.style.background = '#CCCCCC';
+                            break;
+                        case '1':
+                            div.style.background = '#FF0000';
+                            break;
+                        case '2':
+                            div.style.background = '#880000';
+                            break;
+                        case '3':
+                            div.style.background = '#0000FF';
+                            break;
+                        case '4':
+                            div.style.background = '#554488';
+                            break;
+                        case '5':
+                            div.style.background = '#44CC55';
+                            break;
+                        case '6':
+                            div.style.background = '#FF00FF';
+                            break;
+                        case '7':
+                            div.style.background = '#887711';
+                            break;
+                        case '8':
+                            div.style.background = '#006600';
+                            break;
+                        case '9':
+                            div.style.background = '#778877';
+                            break;
+                        case '10':
+                            div.style.background = '#555454';
+                            break;
+                        case '11':
+                            div.style.background = '#556688';
+                            break;
+                        case '12':
+                            div.style.background = '#887711';
+                            break;
+                        case '13':
+                            div.style.background = '#115577';
+                            break;
+                        }
+                    }
                 });
             });
         },
@@ -265,6 +312,53 @@ export default {
                     const device = this.iscsDeviceMap[item.code];
                     if (device) {
                         this.$set(this.deviceMap[device.position], 'state', item.state);
+                        const div = document.getElementById(device.position);
+                        if (div) {
+                            switch (item.state) {
+                            case '0':
+                                div.style.background = '#CCCCCC';
+                                break;
+                            case '1':
+                                div.style.background = '#FF0000';
+                                break;
+                            case '2':
+                                div.style.background = '#880000';
+                                break;
+                            case '3':
+                                div.style.background = '#0000FF';
+                                break;
+                            case '4':
+                                div.style.background = '#554488';
+                                break;
+                            case '5':
+                                div.style.background = '#44CC55';
+                                break;
+                            case '6':
+                                div.style.background = '#FF00FF';
+                                break;
+                            case '7':
+                                div.style.background = '#887711';
+                                break;
+                            case '8':
+                                div.style.background = '#006600';
+                                break;
+                            case '9':
+                                div.style.background = '#778877';
+                                break;
+                            case '10':
+                                div.style.background = '#555454';
+                                break;
+                            case '11':
+                                div.style.background = '#556688';
+                                break;
+                            case '12':
+                                div.style.background = '#887711';
+                                break;
+                            case '13':
+                                div.style.background = '#115577';
+                                break;
+                            }
+                        }
                     }
                 });
             }
@@ -468,6 +562,7 @@ export default {
     }
     .pa-check-box{
         position: relative;
+		left: 2px;
         display: inline-block;
         width: 12px;
         height: 12px;
@@ -620,6 +715,13 @@ export default {
         width: 13%;
         font-size: 12px;
     }
+	.pa-state-box{
+		position: relative;
+		left: 30px;
+		display: inline-block;
+		color: #000;
+		width: 20px;
+	}
 </style>
 <style>
     .time-control-pa-home .el-date-editor.el-input, .el-date-editor.el-input__inner{
diff --git a/src/views/iscs/iscsSystem/config/pis/mainScreen.vue b/src/views/iscs/iscsSystem/config/pis/mainScreen.vue
index 980d782ac..6f5f3c5fc 100644
--- a/src/views/iscs/iscsSystem/config/pis/mainScreen.vue
+++ b/src/views/iscs/iscsSystem/config/pis/mainScreen.vue
@@ -20,10 +20,11 @@
                   <div class="screen_station_name">{{ station.stationName }}</div>
                 </div>
                 <div v-if="station.children&&station.children.length>0">
-                  <div v-for="(child,index) in station.children" :key="station.code+index" class="each_data_info" style="text-align: center;" @click="selectArea(station.code,index)">
-                    <div v-if="child.status==='default'" :id="station.code + '-' + index" class="button_default_content">
+                  <div v-for="(child,index) in station.children" :key="station.code+index" class="each_data_info" style="display: flex;align-items: center;justify-content: center;" @click="selectArea(station.code,index)">
+                    <div v-if="child.status==='default'" class="button_default_content">
                       <div class="button_default" :style="{background:selectedAreaList.includes(station.code + '-' + index)?'#2EFF74':'#CDCDCD'}" />
                     </div>
+                    <div :id="station.code + '-' + index" style="width: 14px;height: 14px;margin-left: 5px;" />
                   </div>
                 </div>
               </div>
@@ -401,7 +402,6 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
     border-bottom: 2px solid #898888;
 }
 .button_default_content{
-    margin:0 auto;
     height: 18px;
     width: 18px;
     background: #D4D4D4;