综合大屏接口对接

.eslintrc.js

@@ -54,6 +54,7 @@
     "onUnmounted": true,
     "onUnsubscribe": true,
     "onUpdated": true,
+    "parseGear": true,
     "provide": true,
     "reactive": true,
     "readonly": true,

src/views/big-screen/single.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg">
     <div class="top-bg" @click="backMainPage">
-      <div class="device-name">豫中云 - YZ1F-0000001</div>
+      <div class="device-name">豫中云 - {{ deviceCode }}</div>
     </div>
     <div class="left">
       <div class="left_top">
@@ -11,7 +11,7 @@
         <span style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
           大车机构
         </span>
-        <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;">
+        <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between;">
           <div style="display: flex;flex-direction: column;">
             <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
               大车行程
@@ -46,19 +46,19 @@
               </div>
               <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                 <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
-                  {{ craneBrakeData.length > 0 ? craneBrakeData.value : '未知' }}
+                  {{ craneBrakeData.value!=null ? craneBrakeData.value : '未知' }}
                 </span>
               </div>
             </div>
           </div>
-          <div style="width: 1px;height: 100%;background-color: #306AF7;margin: 0px 42px;" />
+          <div style="width: 1px;height: 100%;background-color: #306AF7;" />
           <div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
             <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
               频率
             </span>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
-                {{ craneFrequencyData.length > 0 ? craneFrequencyData.value : '0.00'}}
+                {{ craneFrequencyData.value != null ? craneFrequencyData.value : '0.00'}}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                 Hz
@@ -69,7 +69,7 @@
             </span>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
-                {{craneCurrentData.length > 0 ? craneCurrentData.value : '0.00'}}
+                {{craneCurrentData.value != null ? craneCurrentData.value : '0.00'}}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                 A
@@ -77,11 +77,15 @@
             </div>
           </div>
         </div>
-        <div class="left_bottom_grid">
-          <div v-for="item in craneSwitchVariablesData" :key="item.id" class="left_bottom_grid_item" :class="getColor(item)">
-            <span>{{ item.variableName }}</span>
-          </div>
-        </div>
+        <el-carousel indicator-position="outside" :height="'204px'" :interval="10000" style="margin-top: 30px">
+          <el-carousel-item v-for="(group, index) in craneSwitchVariablesData" :key="index">
+            <div class="left_bottom_grid">
+              <div v-for="item in group" :key="item.id" :class="['left_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
+                <span>{{ formatStr(item.variableName) }}</span>
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </div>
     <div class="middle">
@@ -91,25 +95,17 @@
           <div style="padding-left: 100px;padding-top: 4px;color: white;font-size: 18px;font-family: Alibaba-PuHuiTi-B;font-style: normal;text-transform: none;">
             起升机构
           </div>
-          <div style="display: flex;margin-right: 35px;margin-top: -10px;">
-            <div class="middle_bottom_right_top">
-              <span>总接触器</span>
-            </div>
-            <div class="middle_bottom_right_top" style="margin-left: 15px">
-              <span>安全间距</span>
-            </div>
-          </div>
         </div>
-        <div style="display: flex;align-items: center;justify-content: space-between;padding: 50px 30px 30px 30px;">
-          <div style="display: flex;align-items: center">
+        <div style="display: flex;align-items: center;justify-content: space-between;padding: 50px 30px 0px 30px;">
+          <div style="display: flex;align-items: center;">
             <!-- <img style="width: 41px;height: 234px;" src="../../assets/img/screen_middle_bottom_left.png"> -->
-            <div style="display: flex;flex-direction: column;margin-left: 20px;">
+            <div style="display: flex;flex-direction: column;margin-left: 20px;min-width: 130px;">
             <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
               起升高度
             </span>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
-                00.00
+                {{ hoistStrokeData.value}}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                 m
@@ -124,7 +120,7 @@
               </div>
               <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                 <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
-                  左行一档
+                  {{ formatGears(hoistGearData) }}
                 </span>
               </div>
             </div>
@@ -137,7 +133,7 @@
               </div>
               <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                 <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
-                  闭合
+                  {{ hoistBrakeData.value!=null ? hoistBrakeData.value : '未知' }}
                 </span>
               </div>
             </div>
@@ -149,14 +145,14 @@
             </div>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
-                00.00
+                {{ hoistWeightData.value!=null ? hoistWeightData.value : '0.00' }}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                 t
               </span>
             </div>
           </div>
-          <div style="margin-right: 20px;">
+          <div style="margin-right: 20px;min-width: 390px;">
             <div style="display: flex">
               <div style="display: flex;">
                 <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
@@ -167,7 +163,7 @@
                 <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">        
                   <div>
                     <span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
-                      00.00
+                      {{ hoistFrequencyData.value != null ? hoistFrequencyData.value : '0.00'}}
                     </span>
                     <span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
                       Hz
@@ -175,7 +171,7 @@
                   </div>
                 </div>
               </div>
-              <div style="display: flex;margin-left: 23px;">
+              <div style="display: flex;margin-left: 30px;">
                 <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
                   <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                     电流
@@ -184,7 +180,7 @@
                 <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">        
                   <div>
                     <span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
-                      00.00
+                      {{ hoistCurrentData.value != null ? hoistCurrentData.value : '0.00'}}
                     </span>
                     <span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
                       A
@@ -193,68 +189,69 @@
                 </div>
               </div>
             </div>
-            <div class="middle_bottom_right_grid">
-              <div v-for="item in middle_bottom_right_grid_list" :key="item.id" class="middle_bottom_right_grid_item">
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
+            <el-carousel indicator-position="outside" :height="'180px'" :interval="10000" style="margin-top: 20px">
+              <el-carousel-item v-for="(group, index) in hoistSwitchVariablesData" :key="index">
+                <div class="middle_bottom_right_grid">
+                  <div v-for="item in group" :key="item.id" :class="['middle_bottom_right_grid_item', item.value ? item.trueLight : item.falseLight]">
+                    <span>{{ formatStr(item.variableName) }}</span>
+                  </div>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
           </div>
         </div>
       </div>
     </div>
     <div class="right">
       <div class="right_top">
-        <div style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;width: 65%;padding: 10px 0px;border-right:1px solid #306AF7;">
-          <div>
-              <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
-                本次工作
+          <div style="display: flex;justify-content: space-between;align-items: center;">
+              <div style="display: flex;align-items: center;">
+                <div style="width: 8px;height: 8px;background-color: #02803A;margin-right: 15px;" />
+                <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
+                  本次工作
+                </span>
               </div>
               <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
-                0天 0时 0分 0秒
+                {{ dutyCycleData.currentDuration }}
               </span>
           </div>
-          <div>
-              <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
-                累计工作
+          <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
+              <div style="display: flex;align-items: center;">
+                <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
+                <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
+                  累计工作
+                </span>
               </div>
               <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
-                0天 0时 0分 0秒
+                {{ dutyCycleData.totalDuration }}
               </span>
           </div>
-        </div>
-        <div style="height: 100%;width: 35%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;padding: 10px 0px;">
-          <div>
-            <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
-              工作循环
-            </div>
-            <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;float: right">
-              0次
-            </span>
-          </div>
-          <div>
-            <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
-              扫描周期
-            </div>
-            <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;float: right">
-              100ms
-            </span>
+          <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
+              <div style="display: flex;align-items: center;">
+                <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
+                <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
+                  工作循环
+                </span>
+              </div>
+              <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
+                {{ dutyCycleData.totalCount+' 次' }}
+              </span>
           </div>
-        </div>
-        </div>
+      </div>
       <div class="right_alert">
         <el-carousel height="110px">
-          <el-carousel-item v-for="item in right_alert" :key="item.id">
+          <el-carousel-item v-for="item in alarmRecordArr" :key="item.id">
             <div class="right_alert_item">
               <div style="height: 65%;display: flex;flex-direction: column;justify-content: space-between;">
                 <div style="font-size: 24px;color: white;font-family: YouSheBiaoTiHei;">
-                  {{ item.type }}
+                  报警
                 </div>
                 <div>
                   <div style="font-size: 15px;color: white;font-family: Alibaba-PuHuiTi-R;font-style: normal;text-transform: none;">
                     {{ item.time }}
                   </div>
                   <div style="font-size: 16px;color: white;font-family: Alibaba-PuHuiTi-R;">
-                    {{ item.name }}
+                    {{ item.message }}
                   </div>  
                 </div>
               </div>
@@ -266,17 +263,17 @@
         </el-carousel>
       </div>
       <div class="right_small">
-        <span style="margin-right: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
+        <span style="margin-right: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;text-align: right;">
           小车机构
         </span>
-        <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;">
+        <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between">
           <div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
             <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
               频率
             </span>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
-                00.00
+                {{ trolleyFrequencyData.value != null ? trolleyFrequencyData.value : '0.00'}}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                 Hz
@@ -287,27 +284,27 @@
             </span>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
-                00.00
+                {{trolleyCurrentData.value != null ? trolleyCurrentData.value : '0.00'}}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                 A
               </span>
             </div>
           </div>
-          <div style="width: 1px;height: 100%;background-color: #306AF7;margin: 0px 42px;" />
+          <div style="width: 1px;height: 100%;background-color: #306AF7;" />
           <div style="display: flex;flex-direction: column;">
             <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
               小车行程
             </span>
             <div style="margin-top: 5px;">
               <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
-                00.00
+                {{ trolleyStrokeData.value}}
               </span>
               <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                 m
               </span>
             </div>
-            <div style="display: flex;margin-top: 50px;flex-direction: column;">
+            <div style="display: flex;margin-top: 40px;flex-direction: column;">
               <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                 <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                 <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
@@ -316,7 +313,7 @@
               </div>
               <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                 <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
-                  左行一档
+                  {{ formatGears(trolleyGearData) }}
                 </span>
               </div>
             </div>
@@ -327,28 +324,34 @@
                   制动器
                 </span>
               </div>
-              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px';">        
+              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
                 <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
-                  闭合
+                  {{ trolleyBrakeData.value != null ? trolleyBrakeData.value : '未知' }}
                 </span>
               </div>
             </div>
           </div>
         </div>
-        <div style="height: 200px;width: 100%;display: flex;justify-content: center;align-items: center">
-          <div class="right_small_grid">
-            <div v-for="item in right_samll_list" :key="item.id" class="right_small_grid_item">
-              <span>{{ item.name }}</span>
+        <el-carousel indicator-position="outside" :height="'80px'" :interval="10000" style="margin-top: 15px">
+          <el-carousel-item v-for="(group, index) in trolleySwitchVariablesData" :key="index">
+            <div class="right_small_grid">
+            <div v-for="item in group" :key="item.id" :class="['right_small_grid_item', item.value ? item.trueLight : item.falseLight]">
+              <span>{{ formatStr(item.variableName) }}</span>
             </div>
           </div>
-        </div>
+          </el-carousel-item>
+        </el-carousel>
       </div>
       <div class="right_bottom">
-        <div class="right_bottom_grid">
-          <div v-for="item in right_bottom_list" :key="item.id" class="right_bottom_grid_item">
-            <span>{{ item.name }}</span>
-          </div>
-        </div>
+        <el-carousel indicator-position="outside" :height="'80px'" :interval="10000" style="margin-top: 20px;width: 360px">
+          <el-carousel-item v-for="(group, index) in otherSwitchData" :key="index">
+            <div class="right_bottom_grid">
+              <div v-for="item in group" :key="item.id" :class="['right_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
+                <span>{{ formatStr(item.variableName) }}</span>
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </div>
   </div>
@@ -360,8 +363,8 @@
   import router from '@/router';
   const deviceId = ref(0)
   const deviceCode = ref('')
-
   const deviceData: any = ref({})
+  //大车变量
   const craneData: any = ref({})
   const craneStrokeData: any = ref({})
   const craneGearData: any = ref({})
@@ -369,28 +372,30 @@
   const craneFrequencyData: any = ref({})
   const craneCurrentData: any = ref({})
   const craneSwitchVariablesData: any = ref([])
-
-  const switchVariableArr: any = ref([])
-
-  const workingCurrentArr: any = ref([])
-
+  //小车变量
+  const trolleyData: any = ref({})
+  const trolleyStrokeData: any = ref({})
+  const trolleyGearData: any = ref({})
+  const trolleyBrakeData: any = ref({})
+  const trolleyFrequencyData: any = ref({})
+  const trolleyCurrentData: any = ref({})
+  const trolleySwitchVariablesData: any = ref([])
+  //起升变量
+  const hoistData: any = ref({})
+  const hoistStrokeData: any = ref({})
+  const hoistWeightData: any = ref({})
+  const hoistGearData: any = ref({})
+  const hoistBrakeData: any = ref({})
+  const hoistFrequencyData: any = ref({})
+  const hoistCurrentData: any = ref({})
+  const hoistSwitchVariablesData: any = ref([])
+  //总配电变量
+  const otherSwitchData: any = ref([])
+  //工作循环
+  const dutyCycleData: any = ref({})
+  //报警集合
   const alarmRecordArr: any = ref([]);
 
-  const valueVariableArr: any = ref([]);
-
-  /**
-   * 拆分数组
-   * @param array 数组
-   * @param size 拆分的数量
-   */
-  const chunkArray = (array: any, size: number) => {
-      const arr: any = []
-      for (let index = 0; index < array.length; index += size) {
-          arr.push(array.slice(index, index + size));
-      }
-      return arr;
-  }
-
 
   onMounted(async () => {
     deviceId.value = parseInt(useQuery('id'))
@@ -402,14 +407,6 @@
 
   })
 
-  const getColor = (item:any) => {
-    if(item.value){
-      return item.trueLight
-    }else{
-      return item.falseLight
-    }
-  }
-
   const getData = async () => {
     const res: any = await getRealtime({ deviceId: deviceId.value })
     deviceData.value = res
@@ -432,22 +429,82 @@
       craneCurrentData.value = craneData.value.current
     }
     //大车开关量
-    craneSwitchVariablesData.value = craneData.value.switchVariables
-
+    craneSwitchVariablesData.value = chunkArray(craneData.value.switchVariables,10)
+    //小车数据
+    trolleyData.value = deviceData.value.trolley
+    //小车行程
+    trolleyStrokeData.value = trolleyData.value.stroke
+    //小车挡位
+    trolleyGearData.value = trolleyData.value.gear
+    //小车制动器
+    if(trolleyData.value.brake){
+      trolleyBrakeData.value = trolleyData.value.brake
+    }
+    //小车频率
+    if(trolleyData.value.frequency){
+      trolleyFrequencyData.value = trolleyData.value.frequency
+    }
+    //小车电流
+    if(trolleyData.value.current){
+      trolleyCurrentData.value = trolleyData.value.current
+    }
+    //小车开关量
+    trolleySwitchVariablesData.value = chunkArray(trolleyData.value.switchVariables,16)
+    //起升数据
+    hoistData.value = deviceData.value.hoist
+    //起升重量
+    if(hoistData.value.weight){
+      hoistWeightData.value = hoistData.value.weight
+    }
+    //起升行程
+    hoistStrokeData.value = hoistData.value.stroke
+    //起升挡位
+    hoistGearData.value = hoistData.value.gear
+    //起升制动器
+    if(hoistData.value.brake){
+      hoistBrakeData.value = hoistData.value.brake
+    }
+    //起升频率
+    if(hoistData.value.frequency){
+      hoistFrequencyData.value = hoistData.value.frequency
+    }
+    //起升电流
+    if(hoistData.value.current){
+      hoistCurrentData.value = hoistData.value.current
+    }
+    //起升开关量
+    hoistSwitchVariablesData.value = chunkArray(hoistData.value.switchVariables,12)
+    //总配电开关量
+    otherSwitchData.value = chunkArray(deviceData.value.otherSwitchData,6)
+    //工作云环
+    dutyCycleData.value = deviceData.value.dutyCycle
+    //获取报警信息
     const record = await getAlertRecordsByDevice({ deviceId: deviceId.value, maxCount: 10 })
     alarmRecordArr.value = record
 
     onSubscribe([`Json/${deviceCode.value}`], (topic: string, payload: any) => {
-        console.log('1111'+JSON.stringify(JSON.parse(payload)))
         const jsonArray = JSON.parse(payload).Items
         parseMqttData(jsonArray)
     })
   }
-
+  /**
+   * 拆分数组
+   * @param array 数组
+   * @param size 拆分的数量
+   */
+  const chunkArray = (array: any, size: number) => {
+      const arr: any = []
+      for (let index = 0; index < array.length; index += size) {
+          arr.push(array.slice(index, index + size));
+      }
+      return arr;
+  }
   //解析数据
   const parseMqttData = (jsonArray: any) => {
+    console.log(JSON.stringify(jsonArray))
       jsonArray.forEach((res: any) => {
           const { Value, Code } = res
+          
           //大车档位
           const craneGear = craneGearData.value
           if (craneGear) {
@@ -488,71 +545,135 @@
             }
           }
           //大车开关量
-          craneSwitchVariablesData.value.forEach((item: any) => {
+          const craneSwitchVariables = craneSwitchVariablesData.value
+          if(craneSwitchVariables){
+            craneSwitchVariables.forEach((item: any) => {
               const result = item.find((item: any) => item.code == Code)
               if (result) {
                   result.value = result.isReverse != Value
                   return
               }
-          })
-          //小车
-          // deviceData.value.trolleys.forEach((item: any) => {
-          //     //档位
-          //     if (parseGear(item.gear, Code, Value)) {
-          //         return
-          //     }
-          //     //吊钩
-          //     item.hoists.forEach((item: any) => {
-          //         //档位
-          //         if (parseGear(item.gear, Code, Value)) {
-          //             return
-          //         }
-          //         //重量
-          //         const weight = item.weight
-          //         if (weight?.code == Code) {
-          //             weight.value = formatValue(Value, weight.translate)
-          //             return
-          //         }
-          //         //超载
-          //         const light = weight?.light
-          //         if (light?.code == Code) {
-          //             light.value = light.isReverse != Value
-          //             return
-          //         }
-          //     })
-          // })
-
-          //开关量
-          switchVariableArr.value.forEach((item: any) => {
+            });
+          }
+          //小车档位
+          const trolleyGear = trolleyGearData.value
+          if (trolleyGear) {
+              if (parseGear(trolleyGear, Code, Value)) {
+                  return
+              }
+          }
+          //小车车行程
+          const trolleyStroke = trolleyStrokeData.value
+          if(trolleyStroke) {
+            if (trolleyStroke.code == Code) {
+                trolleyStroke.value = formatValue(Value, trolleyStroke.translate)
+                return
+            }
+          }
+          //小车制动器
+          const trolleyBrake = trolleyBrakeData.value
+          if(trolleyBrake) {
+            if (trolleyBrake.code == Code) {
+                trolleyBrake.value = formatValue(Value, trolleyBrake.translate)
+                return
+            }
+          }
+          //小车频率
+          const trolleyFrequency = trolleyFrequencyData.value
+          if(trolleyFrequency) {
+            if (trolleyFrequency.code == Code) {
+              trolleyFrequency.value = formatValue(Value, trolleyFrequency.translate)
+                return
+            }
+          }
+          //小车电流
+          const trolleyCurrent = trolleyCurrentData.value
+          if(trolleyCurrent) {
+            if (trolleyCurrent.code == Code) {
+                trolleyCurrent.value = formatValue(Value, trolleyCurrent.translate)
+                return
+            }
+          }
+          //小车开关量
+          const trolleySwitchVariables = trolleySwitchVariablesData.value
+          if(trolleySwitchVariables){
+            trolleySwitchVariables.forEach((item: any) => {
               const result = item.find((item: any) => item.code == Code)
               if (result) {
                   result.value = result.isReverse != Value
                   return
               }
-          })
-
-          //工作电流
-          workingCurrentArr.value.forEach((item: any) => {
+            });
+          }
+          //起升档位
+          const hoistGear = hoistGearData.value
+          if (hoistGear) {
+              if (parseGear(hoistGear, Code, Value)) {
+                  return
+              }
+          }
+          //起升重量
+          const hoistWeight = hoistWeightData.value
+          if(hoistWeight) {
+            if (hoistWeight.code == Code) {
+                hoistWeight.value = formatValue(Value, hoistWeight.translate)
+                return
+            }
+          }
+          //起升行程
+          const hoistStroke = hoistStrokeData.value
+          if(hoistStroke) {
+            if (hoistStroke.code == Code) {
+                hoistStroke.value = formatValue(Value, hoistStroke.translate)
+                return
+            }
+          }
+          //起升制动器
+          const hoistBrake = hoistBrakeData.value
+          if(hoistBrake) {
+            if (hoistBrake.code == Code) {
+                hoistBrake.value = formatValue(Value, hoistBrake.translate)
+                return
+            }
+          }
+          //起升频率
+          const hoistFrequency = hoistFrequencyData.value
+          if(hoistFrequency) {
+            if (hoistFrequency.code == Code) {
+              hoistFrequency.value = formatValue(Value, hoistFrequency.translate)
+                return
+            }
+          }
+          //起升电流
+          const hoistCurrent = hoistCurrentData.value
+          if(hoistCurrent) {
+            if (hoistCurrent.code == Code) {
+                hoistCurrent.value = formatValue(Value, hoistCurrent.translate)
+                return
+            }
+          }
+          //起升开关量
+          const hoistSwitchVariables = hoistSwitchVariablesData.value
+          if(hoistSwitchVariables){
+            hoistSwitchVariables.forEach((item: any) => {
               const result = item.find((item: any) => item.code == Code)
               if (result) {
-                  console.log(res)
-                  result.value = formatValue(Value, result.translate)
+                  result.value = result.isReverse != Value
                   return
               }
-          })
-
-          //模拟量
-          valueVariableArr.value.forEach((item: any) => {
+            });
+          }
+          //总配电开关量
+          const otherSwitch = otherSwitchData.value
+          if(otherSwitch){
+            otherSwitch.forEach((item: any) => {
               const result = item.find((item: any) => item.code == Code)
               if (result) {
-                  if (result.variableType == 10) {
-                      result.value = Value === true ? '开启' : '闭合'
-                  } else {
-                      result.value = formatValue(Value, result.translate)
-                  }
+                  result.value = result.isReverse != Value
                   return
               }
-          })
+            });
+          }
       })
   }
 
@@ -563,6 +684,10 @@
   const backMainPage = () => {
     router.go(-1)
   }
+
+  const formatStr = (value:string) => {
+    return value.replace('大车','').replace('副小车','').replace('主起升','').replace('配电','')
+  }
 </script>
 
 <style lang="less" scoped>
@@ -625,7 +750,6 @@
     padding: 10px 39px;
   }
   .left_bottom_grid {
-    margin-top: 43px;
     display: grid;
     grid-template-rows: 32px 32px 32px 32px 32px;
     grid-template-columns: 180px 180px;
@@ -636,18 +760,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #ABC0E0;
     font-size: 16px;
     font-family: Alibaba-PuHuiTi-R;
   }
-  .red{
-    background-color: red;
-    border: 1px solid #455A7A;
-  }
-  .green{
-    background-color: green;
-    border: 1px solid #455A7A;
-  }
   .middle {
     top: 77px;
     left: 50%;
@@ -678,15 +793,12 @@
     justify-content: center
   }
   .middle_bottom_right_grid {
-    margin-top: 20px;
     display: grid;
     grid-template-rows: 32px 32px 32px 32px;
     grid-template-columns: 120px 120px 120px;
     gap: 11px;
   }
   .middle_bottom_right_grid_item {
-    background-color: #334A6C;
-    border: 1px solid #455A7A;
     border-radius: 5px;
     display: flex;
     align-items: center;
@@ -714,8 +826,10 @@
     background-image: url(../../assets/img/screen_right_top_bg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    padding: 30px 45px;
+    padding: 40px 45px;
     display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
   .right_alert {
     width: 100%;
@@ -734,25 +848,22 @@
     justify-content: space-between;
   }
   .right_small {
-    width: 100%;
+    width: 450px;
     height: 502px;
     background-image: url(../../assets/img/screen_right_small_bg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
     padding: 10px 39px;
   }
   .right_small_grid {
     display: grid;
     grid-template-rows: 32px 32px;
-    grid-template-columns: 110px 110px 110px;
+    grid-template-columns: 115px 115px 115px;
     gap: 11px;
   }
   .right_small_grid_item {
-    background-color: #334A6C;
-    border: 1px solid #455A7A;
     border-radius: 5px;
     display: flex;
     align-items: center;
@@ -762,7 +873,7 @@
     font-family: Alibaba-PuHuiTi-R;
   }
   .right_bottom {
-    width: 100%;
+    width: 450px;
     height: 151px;
     background-image: url(../../assets/img/screen_right_bottom_bg.png);
     background-repeat: no-repeat;
@@ -772,19 +883,17 @@
     justify-content: center;
   }
   .right_bottom_grid {
+    height: 70px;
     display: grid;
     grid-template-rows: 32px 32px;
     grid-template-columns: 110px 110px 110px;
     gap: 11px;
   }
   .right_bottom_grid_item {
-    background-color: #334A6C;
-    border: 1px solid #455A7A;
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #ABC0E0;
     font-size: 16px;
     font-family: Alibaba-PuHuiTi-R;
   }
@@ -804,6 +913,26 @@
   .middle_bottom_right_top.is-active {
     background-color: #158E4B;
   }
+  .red{
+    color:rgb(251, 104, 104);
+    background-color: rgba(125, 32, 32,0.2);
+    border: 1px solid #FD4142;
+  }
+  .green{
+    color: #26F884;
+    background: rgba(21, 142, 75, 0.2);
+    border: 1px solid #02803A;
+  }
+  .yellow{
+    color: #fba34a;
+    background-color: rgba(240, 128, 15, 0.2);
+    border: 1px solid #fc7e03;
+  }
+  .gray{
+    color: #ABC0E0;
+    background-color: rgba(51, 74, 108, 0.2);
+    border: 1px solid #455A7A;
+  }
 </style>
 <style lang="less">
   .right_alert {
@@ -817,8 +946,9 @@
       height: 5px;
     }
     .el-carousel__indicators--horizontal {
-      left: 130px;
+      left: 95px;
       top: 20px;
+      transform:none
     }
   }
 </style>

src/views/big-screen/synthesis.vue

@@ -174,42 +174,42 @@
 
             <div class="device_type_coatinner">
 
-              <div class="device_type_left" v-if="deviceTypeData.length > 3">
-                <div class="column_center">
+              <div class="device_type_left">
+                <div class="column_center" v-if="deviceTypeData.length >= 1">
                     <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[0].count
                     }}</div>
                     <div class="row_center">
-                      <div style="width: 15px;height: 10px;background: #306AF7;border-radius: 3px;"></div>
+                      <div style="width: 10px;height: 10px;background: #306AF7;border-radius: 3px;"></div>
                       <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[0].categoryName }}
                       </div>
                     </div>
                   </div>
-                  <div class="column_center">
+                  <div class="column_center" v-if="deviceTypeData.length >= 2">
                     <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[1].count
                     }}</div>
                     <div class="row_center">
-                      <div style="width: 15px;height: 10px;background: #0AC97E;border-radius: 3px;"></div>
+                      <div style="width: 10px;height: 10px;background: #0AC97E;border-radius: 3px;"></div>
                       <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[1].categoryName }}
                       </div>
                     </div>
                   </div>
               </div>
               <div class="device_type_chart" ref="deviceTypeChartRef"></div>
-              <div class="device_type_right" v-if="deviceTypeData.length > 3">
-                  <div class="column_center">
+              <div class="device_type_right">
+                  <div class="column_center" v-if="deviceTypeData.length >= 3">
                     <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[2].count
                     }}</div>
                     <div class="row_center">
-                      <div style="width: 15px;height: 10px;background: #F4C766;border-radius: 3px;"></div>
+                      <div style="width: 10px;height: 10px;background: #F4C766;border-radius: 3px;"></div>
                       <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[2].categoryName }}
                       </div>
                     </div>
                   </div>
-                  <div class="column_center">
+                  <div class="column_center" v-if="deviceTypeData.length >= 4">
                     <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[3].count
                     }}</div>
                     <div class="row_center">
-                      <div style="width: 15px;height: 10px;background: #97CB7C;border-radius: 3px;"></div>
+                      <div style="width: 10px;height: 10px;background: #97CB7C;border-radius: 3px;"></div>
                       <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[3].categoryName }}
                       </div>
                     </div>
@@ -318,6 +318,10 @@ onMounted(async () => {
       let b = a + 1
       let c = b == 4 ? 0 : b
       alarmCountTabClick(c)
+      let e = alarmCountTabsIndexChart.value
+      let f = e + 1
+      let g = f == 4 ? 0 : f
+      alarmCountTabClickChart(g)
     }
   }, 1000 * 10)
 
@@ -382,71 +386,61 @@ const getDeviceAreaStatisticsData = async () => {
 
 
 const getDeviceStateStatisticsData = async () => {
-  //let data: any = await GetDeviceStateStatistics()
-  let data: any = {
-        "keyDatas": [
-            "10月",
-            "11月",
-            "12月",
-            "1月",
-            "2月",
-            "3月"
-        ],
-        "faultDatas": [
-            3,
-            6,
-            43,
-            5,
-            5,
-            5
-        ],
-        "repairDatas": [
-            2,
-            5,
-            10,
-            60,
-            3,
-            4
-        ],
-        "inspectionDatas": [
-            10,
-            20,
-            33,
-            23,
-            16,
-            80
-        ],
-        "planDatas": [
-            95,
-            30,
-            57,
-            65,
-            11,
-            25
-        ],
-        "lifeDatas": [
-            88,
-            65,
-            81,
-            12,
-            15,
-            87
-        ]
-    }
+  let data: any = await GetDeviceStateStatistics()
+  // let data: any = {
+  //       "keyDatas": [
+  //           "10月",
+  //           "11月",
+  //           "12月",
+  //           "1月",
+  //           "2月",
+  //           "3月"
+  //       ],
+  //       "faultDatas": [
+  //           3,
+  //           6,
+  //           43,
+  //           5,
+  //           5,
+  //           5
+  //       ],
+  //       "repairDatas": [
+  //           2,
+  //           5,
+  //           10,
+  //           60,
+  //           3,
+  //           4
+  //       ],
+  //       "planDatas": [
+  //           95,
+  //           30,
+  //           57,
+  //           65,
+  //           11,
+  //           25
+  //       ],
+  //       "lifeDatas": [
+  //           88,
+  //           65,
+  //           81,
+  //           12,
+  //           15,
+  //           87
+  //       ]
+  //   }
   let a = Math.max(...data.faultDatas)
   let b = Math.max(...data.repairDatas)
-  let c = Math.max(...data.inspectionDatas)
-  let d = Math.max(...data.planDatas)
-  let e = Math.max(...data.lifeDatas)
+  let c = Math.max(...data.planDatas)
+  let d = Math.max(...data.lifeDatas)
   //取最大值最为y轴的最大值
-  let maxValue = Math.max(a, b, c, d, e)
-  deviceStateOption.yAxis.max = maxValue == 0 ? maxValue + 5 : Math.ceil(maxValue * 1.4)
+  let maxValue = Math.max(a, b, c, d)
+  deviceStateOption.yAxis.max = maxValue == 0 ? maxValue + 4 : Math.ceil(maxValue * 1.4)
   deviceStateOption.xAxis.data = data.keyDatas
   deviceStateOption.series[0].data = data.faultDatas
   deviceStateOption.series[1].data = data.repairDatas
-  deviceStateOption.series[2].data = data.inspectionDatas
-  deviceStateOption.series[3].data = data.planDatas
-  deviceStateOption.series[4].data = data.lifeDatas
+  deviceStateOption.series[2].data = data.planDatas
+  deviceStateOption.series[3].data = data.lifeDatas
   deviceStateStatisticsChart.value.setOption(deviceStateOption)
 }
 
@@ -527,29 +521,29 @@ const getMonthAddDeviceProgressData = async () => {
 
 
 const getDeviceTypeData = async () => {
-  // let data: any = await getDeviceType()
-  let data: any = [
-        {
-            "categoryId": 2,
-            "categoryName": "门机",
-            "count": 0
-        },
-        {
-            "categoryId": 3,
-            "categoryName": "桥机",
-            "count": 4
-        },
-        {
-            "categoryId": 4,
-            "categoryName": "葫芦",
-            "count": 83
-        },
-        {
-            "categoryId": 5,
-            "categoryName": "卷扬式",
-            "count": 6
-        }
-    ]
+  let data: any = await getDeviceType()
+  // let data: any = [
+  //       {
+  //           "categoryId": 2,
+  //           "categoryName": "门机",
+  //           "count": 0
+  //       },
+  //       {
+  //           "categoryId": 3,
+  //           "categoryName": "桥机",
+  //           "count": 4
+  //       },
+  //       {
+  //           "categoryId": 4,
+  //           "categoryName": "葫芦",
+  //           "count": 83
+  //       },
+  //       {
+  //           "categoryId": 5,
+  //           "categoryName": "卷扬式",
+  //           "count": 6
+  //       }
+  //   ]
   deviceTypeData.value = data
 
 
@@ -765,7 +759,7 @@ let deviceStateOption = {
   },
   yAxis: {
     type: 'value',
-    max: 5,
+    max: 4,
     axisLabel: {
       textStyle: {
         color: '#417CC4',
@@ -807,20 +801,6 @@ let deviceStateOption = {
       barGap:'50%',
       data: [31, 31, 31, 31, 31, 31]
     },
-    {
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(79, 128, 248, 0.2)'
-      },
-      name: '待年检',
-      type: 'bar',
-      itemStyle: {
-        color: '#0AC97E'
-      },
-      barWidth: 10,
-      barGap:'50%',
-      data: [45, 45, 45, 45, 45, 45]
-    },
     {
       showBackground: true,
       backgroundStyle: {
@@ -1242,25 +1222,26 @@ let alarmCountOption = {
     height: 100%;
     display: flex;
     justify-content: space-between;
+    padding: 20px;
   }
   .device_type_chart {
-    width: 55%;
+    width: 50%;
     height: 100%;
     display: flex;
   }
   .device_type_right {
-    width: 30%;
+    width: 25%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-evenly;
+    justify-content: space-between;
   }
   .device_type_left {
-    width: 30%;
+    width: 25%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-evenly;
+    justify-content: space-between;
   }
   .middle {
     width: calc(100% - 80px);