调整样式

src/common/const.js

 // 常量
 // const server_ip = '8.130.25.40'; // 测试服务器
-const server_ip = '192.168.192.128'; // 线上内网ip
+const server_ip = '22.57.64.22:8256'; // 线上内网ip
 // const server_ip = '192.168.43.122:8258';
 
 export const CONFIG = {
@@ -30,8 +30,12 @@ export const ButtonMap = {
 // 首页图表样式
 export const ChartStyle = {
   loadingColor: 'rgba(0, 0, 0, 0.5)', // 加载动画颜色
-  color: ['#509FFF', '#E5394C', '#0011A5', '#FF57BF', '#43C6AC', '#AA076B', '#0ED2F7', '#9733EE', '#0cff34', '#aa4e03', '#fce00b', '#11ffcc'], // 数据颜色
-  color2: ['#6AF6FE', '#F0724D', '#00BAE6', '#FF8B7C', '#F8FFAE', '#E991C3', '#92FE9D', '#C3A0FF', '#bdff23', '#e55f12', '#d6a800', '#06c5ff'], // 数据渐变颜色
+  color: ['#509FFF', '#E5394C', '#0011A5', '#FF57BF', '#43C6AC', '#AA076B', '#0ED2F7', '#9733EE', '#0cff34',
+    '#aa4e03', '#fce00b', '#11ffcc'
+  ], // 数据颜色
+  color2: ['#6AF6FE', '#F0724D', '#00BAE6', '#FF8B7C', '#F8FFAE', '#E991C3', '#92FE9D', '#C3A0FF', '#bdff23',
+    '#e55f12', '#d6a800', '#06c5ff'
+  ], // 数据渐变颜色
   // 标题样式
   title: {
     color: '#93FCFF',
@@ -45,7 +49,7 @@ export const ChartStyle = {
   // 轴样式
   axis: {
     color: '#5caac3',
-    fontSize: 10,
+    fontSize: 12,
     lineHeight: 14,
   },
   // 数据文字样式
@@ -209,7 +213,11 @@ export const DefaultDateSelect = () => [Date.now() - 3600 * 1000, Date.now()]; /
 
 // 全厂监测测点配置
 export const FactoryMConfig = {
-  power: ['有功功率'], // 功率
+  // 顶部
+  top: [
+    ['转速'],
+    ['有功功率'],
+  ],
   // 框框
   list: [
     ["上导X向摆度"],
@@ -243,28 +251,26 @@ export const CrewMConfig = {
   ],
   // 框框左上
   listLeftTop: [
-    ["上导X向摆度"],
-    ["上导Y向摆度"],
-    ["下导X向摆度"],
-    ["下导Y向摆度"],
-    ["法兰X向摆度"],
-    ["法兰Y向摆度"],
-    ["水导X向摆度"],
-    ["水导Y向摆度"],
     ["上机架X向振动"],
     ["上机架Y向振动"],
     ["上机架Z向振动"],
+    ["下机架X向振动"],
+    ["下机架Y向振动"],
+    ["下机架Z向振动"],
+    ["瓦架X向振动"],
+    ["瓦架Z向振动"],
   ],
   // 框框右上
   listRightTop: [
+    ["上导X向摆度"],
+    ["上导Y向摆度"],
+    ["下导X向摆度", "法兰X向摆度"],
+    ["下导Y向摆度", "法兰Y向摆度"],
+    ["水导X向摆度"],
+    ["水导Y向摆度"],
     ["大轴轴向位移A"],
     ["大轴轴向位移B"],
     ["大轴轴向位移C"],
-    ["下机架X向振动"],
-    ["下机架Y向振动"],
-    ["下机架Z向振动"],
-    ["瓦架X向振动"],
-    ["瓦架Z向振动"],
   ],
   // 框框左下
   listLeftBottom: [
@@ -274,12 +280,6 @@ export const CrewMConfig = {
     ["定子基座Y向振动"],
     ["定子铁芯X向振动"],
     ["定子铁芯Y向振动"],
-    ["蜗壳进口压力脉动"],
-    ["蜗壳差压"],
-    ["导叶后压力脉动"]
-  ],
-  // 框框右下
-  listRightBottom: [
     ["顶盖碰磨Z向振动"],
     ["顶盖碰磨X向振动"],
     ["顶盖X向振动"],
@@ -287,7 +287,13 @@ export const CrewMConfig = {
     ["顶盖Z向振动X"],
     ["顶盖Z向振动Y"],
     ["顶盖Z向振动"],
+  ],
+  // 框框右下
+  listRightBottom: [
     ["顶盖下压力脉动"],
+    ["蜗壳进口压力脉动"],
+    ["蜗壳差压"],
+    ["导叶后压力脉动"],
     ["尾水管X向振动"],
     ["尾水管进口压力脉动"],
     ["尾水管出口压力脉动"],
@@ -310,44 +316,44 @@ export const CrewMConfig = {
   ],
   // 图表右上
   rightTop: [
-    ["上机架X向振动"],
-    ["上机架Y向振动"],
-    ["上机架Z向振动"],
-    ["定子机座X向振动"],
-    ["定子机座Y向振动"],
-    ["定子基座X向振动"],
-    ["定子基座Y向振动"],
-    ["定子铁芯X向振动"],
-    ["定子铁芯Y向振动"]
+    [
+      [{name: "上导X向摆度", defaultMax: 560}],
+      [{name: "上导Y向摆度", defaultMax: 560}],
+    ],
+    [
+      [{name: "下导X向摆度", defaultMax: 1500}, {name: "法兰X向摆度", defaultMax: 906}],
+      [{name: "下导Y向摆度", defaultMax: 1500}, {name: "法兰Y向摆度", defaultMax: 906}],
+    ],
+    [
+      [{name: "水导X向摆度", defaultMax: 703}],
+      [{name: "水导Y向摆度", defaultMax: 703}],
+    ]
   ],
   // 图表右中
   rightCenter: [
-    ["顶盖碰磨Z向振动"],
-    ["顶盖碰磨X向振动"],
-    ["顶盖X向振动"],
-    ["顶盖Y向振动"],
-    ["顶盖Z向振动X"],
-    ["顶盖Z向振动Y"],
-    ["顶盖Z向振动"],
-    ["尾水管X向振动"],
-    ["顶盖下压力脉动"],
-    ["尾水管进口压力脉动"],
-    ["尾水管出口压力脉动"],
-    ["尾水管出口压力"],
-    ["蜗壳进口压力脉动"],
-    ["蜗壳差压"],
-    ["导叶后压力脉动"]
+    [
+      [{name: "顶盖X向振动", defaultMax: 203}],
+      [{name: "顶盖Y向振动", defaultMax: 203}],
+      [{name: "顶盖Z向振动X", defaultMax: 293}],
+      [{name: "顶盖Z向振动Y", defaultMax: 293}],
+      [{name: "顶盖Z向振动", defaultMax: 293}],
+    ],
+    [
+      [{name: "上机架X向振动", defaultMax: 156}],
+      [{name: "上机架Y向振动", defaultMax: 156}],
+      [{name: "上机架Z向振动", defaultMax: 141}],
+    ],
+    [
+      [{name: "下机架X向振动", defaultMax: 125}],
+      [{name: "下机架Y向振动", defaultMax: 125}],
+      [{name: "下机架Z向振动", defaultMax: 125}],
+    ]
   ],
   // 图表右下
   rightBottom: [
-    ["上导X向摆度"],
-    ["上导Y向摆度"],
     ["上导瓦温"],
-    ["下导X向摆度"],
-    ["下导Y向摆度"],
+    ["下导瓦温"],
     ["推力瓦温"],
-    ["水导X向摆度"],
-    ["水导Y向摆度"],
-    ["水导瓦温"]
+    ["水导瓦温"],
   ],
 }

src/common/util.js

@@ -680,18 +680,41 @@ export function makeMap(str, lowerCase) {
  * @param {Object} crew 全部测点数据里的机组，之所以要传，是为了不用每次都找一次机组
  * @param {String} name 测点名关键词
  * @return {String} kks 测点kks
+ * @return {Boolean} type 是否模糊匹配 0精准，1模糊
  */
-export function getCharacterFromCrew(crew, name, kks) {
+export function getCharacterFromCrew(crew, name, kks, type) {
   let res = crew.tSdb.find(i => {
-    if(name) return i.cpName.indexOf(name) != -1;
-    if(kks) return i.kksCode.indexOf(kks) != -1;
+    if(name && type) return i.cpName.indexOf(name) != -1;
+    if(name && !type) return i.cpName == name;
+    if(kks && type) return i.kksCode.indexOf(kks) != -1;
+    if(kks && !type) return i.kksCode == kks;
   });
-  if(!res) return false; // 如果没有查出值，则跳过
-  // 补数据
-  if(!res.kksValueR) {
-    let str = res.kksValue?.value?.toString();
-    res.state = str ? parseInt(str.substr(-2)) : 0; // 信号状态
-    res.kksValueR = str ? parseFloat(str.substr(0, str.length - 2)) : 0; // 真实值
-  }
+  if(!res) return false; // 如果没有查出匹配的测点，则返回
+  if(!res.kksValueR) chatValueHandler(res); // 补数据，只补一次
   return res;
+}
+
+/**
+ * @auto 刘彬瑜
+ * @todo 将测点值处理成信号状态和真实值
+ * @param {Object} chat 测点对象
+ * @return {Object} chat 处理后的对象
+ */
+export function chatValueHandler(chat) {
+  if(!chat) return chat;
+  let val = parseFloat(chat.kksValue?.value); // 数据库返回的值
+  let str = val.toString(); // 字符串格式
+  if(!val || str === 'NaN') chat.kksValueR = chat.state = 0; // 如果没有值，正常应该是肯定有值的
+  // 正常值处理
+  else {
+    // 如果是无状态测点或者值的长度小于3（因为正常带信号状态的值最少也是1.01）
+    if(parseInt(chat.cpType) === 0 || str.length < 3) {
+      chat.state = 0;
+      chat.kksValueR = val;
+    }else{
+      chat.state = parseInt(str.substr(-2)); // 信号状态
+      chat.kksValueR = parseFloat(str.substr(0, str.length - 2)); // 真实值
+    }
+  }
+  return chat;
 }
\ No newline at end of file

src/components/Charts/ChartBarPic.vue

@@ -46,6 +46,7 @@
                       }
                   },
                   yAxis: {
+                      splitNumber: 3,
                       axisLine: {
                           show: false
                       },

src/components/Charts/ChartBarSingle.vue

+<!-- 胶囊图的单个柱图 -->
+<template>
+  <div :id="id" class="chart-single" />
+</template>
+
+<script>
+  import ChartBase from '@/components/Base/ChartsBase.js';
+  import {
+    ChartStyle
+  } from '@/common/const.js';
+  import {
+    getWarnColor,
+  } from '@/common/util.js';
+  import echarts from 'echarts';
+
+  export default {
+    mixins: [ChartBase],
+    methods: {
+      setOptions(chartData) {
+        if (!this.chart || !chartData) return;
+        const colors = getWarnColor(chartData.state, 1);
+        const minN = -2000000000;
+        const max = chartData.earlywarningruleminvalue > minN ? chartData.earlywarningruleminvalue : chartData.alertRuleMinValue >
+          minN ? chartData.alertRuleMinValue : chartData.protectRuleMinValue > minN ? chartData.protectRuleMinValue : chartData.defaultMax;
+        let option = {
+          tooltip: {
+            formatter: params => {
+              return chartData.cpName + (chartData.cpUnit ? '（' + chartData.cpUnit + '）' : '') + '<br/>' + '当前值：' +
+                params.value + '，阈值：' + max;
+            },
+          },
+          title: {
+            text: chartData.cpName + (chartData.cpUnit ? '（' + chartData.cpUnit + '）' : ''),
+            textStyle: {
+              color: ChartStyle.axis.color,
+              fontSize: ChartStyle.axis.fontSize,
+              fontWeight: 400
+            },
+            left: '5%',
+          },
+          xAxis: {
+            type: 'value',
+            max: max,
+            min: 0,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          },
+          yAxis: {
+            type: 'category',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          series: [{
+            type: 'bar',
+            data: [chartData.kksValueR],
+            label: {
+              show: true,
+              position: 'insideLeft',
+              color: '#000',
+              fontSize: 10,
+              padding: [2, 0, 0, 0],
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: colors[0]
+              }, {
+                offset: 1,
+                color: colors[1]
+              }]),
+              barBorderRadius: [50, chartData.kksValueR > max ? 50 : 0, chartData.kksValueR > max ? 50 : 0, 50]
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(255,255,255,0.7)',
+              barBorderRadius: 50
+            },
+            barMaxWidth: 13
+            // }, {
+            //   type: 'pictorialBar',
+            //   data: [3000],
+            //   label: {
+            //     show: true,
+            //     position: 'right',
+            //     color: ChartStyle.label.color,
+            //     fontSize: 10,
+            //     formatter: params => {
+            //       return chartData.kksValueR;
+            //     }
+            //   },
+            //   itemStyle: {
+            //     color: 'transparent'
+            //   },
+            //   barMaxWidth: 13
+          }],
+          grid: {
+            top: '10%',
+            left: '5%',
+            right: '5%',
+            bottom: '0%',
+            containLabel: true
+          }
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .chart-single {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/components/NumberFlipper/index.vue

@@ -4,7 +4,11 @@
         <div class="up" v-if="title" :class="direction ? 'up-flex' : ''">
             <div class="i" />{{title}}
         </div>
-        <div class="down">
+        <div v-if="simple" class="down">
+            <div class="simple" :style="{color: getWarnColor(state)}">{{animatedNumber}}</div>
+            <span class="unit" style="bottom: 0.5rem;">{{unit}}</span>
+        </div>
+        <div v-else class="down">
             <num :number="relNumber" />
             <span class="unit">{{unit}}</span>
         </div>
@@ -12,7 +16,11 @@
 </template>
 
 <script>
+  import {
+      getWarnColor,
+  } from '@/common/util.js';
     import Num from './num.vue'
+    import Gsap from '../../assets/js/gsap.js';
     export default {
         components: {
             Num,
@@ -22,6 +30,7 @@
                 type: String,
                 default: '',
             },
+            // 方向
             direction: {
               type: String | Number | Boolean,
             },
@@ -33,22 +42,41 @@
                 type: Number | String,
                 default: 0,
             },
+            state: {
+                type: Number,
+            },
             // 小数位数
             point: {
                 type:Number,
-                default: 0,
+            },
+            // 简单版
+            simple: {
+              type: String | Number | Boolean,
             }
         },
         data() {
             return {
+                getWarnColor: getWarnColor,
                 relNumber: 0,
+                tweenedNumber: 0,
             }
         },
+        computed: {
+          animatedNumber() {
+            const newLen = this.number.toString().split('.')?.[1]?.length ?? 0;
+            return this.tweenedNumber.toFixed(newLen);
+          }
+        },
         watch: {
             number: {
                 immediate: true,
                 handler(val) {
-                    this.relNumber = parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
+                  if(!val) return;
+                  if(this.simple) {
+                    Gsap.to(this.$data, { duration: 1, tweenedNumber: parseFloat(val) });
+                  } else {
+                    this.relNumber = this.point === undefined ? parseFloat(val) : parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
+                  }
                 }
             }
         },
@@ -58,6 +86,7 @@
     .number-flipper {
         $up-m-b: 0.5rem;
         .up{
+            font-size: 1.2rem;
             color: $color-cyan;
             @extend %flex-center;
             margin-bottom: $up-m-b;
@@ -84,8 +113,18 @@
             .unit{
                 font-size: 0.875rem;
                 color: $color-cyan;
+                position: relative;
             }
         }
+        
+        .simple{
+          font-size: 1.5rem;
+          background-color: rgba(10,23,55,0.80);
+          border: 1px solid rgba(9,77,148,0.50);
+          padding: 0.5rem;
+          color: $color-cyan;
+          margin-right: 0.5rem;
+        }
     }
     .flex{
       display: flex;

src/components/NumberFlipper/num.vue

 <!-- 数字翻牌器单个数字 -->
 <template>
     <div id="dataNums" class="number">
-        <div :class="item.num != '.' ? 'n-bg' : 'p-bg'" v-for="(item,index) in list" :key="index">
-            <div v-if="item.num != '.'" class="nums" :style="{transition:'all 1s ease-in-out 0s',top:'-'+item.top+'px'}">
+        <div :class="item.num == '.' ? 'p-bg' : item.num == '-' ? 'f-bg' : 'n-bg'" v-for="(item,index) in list" :key="index">
+            <div v-if="item.num == '.'" class="point"></div>
+            <div v-if="item.num == '-'" class="negative"></div>
+            <div v-if="item.num != '.' && item.num != '-'" class="nums" :style="{transition:'all 1s ease-in-out 0s',top:'-'+item.top+'px'}">
                 <span v-for="(item2,index2) in numList" :key="index2">{{item2}}</span>
             </div>
-            <div v-else class="point"></div>
         </div>
     </div>
 </template>
@@ -85,6 +86,12 @@
             height: $bg-height;
             margin-right: 0.5rem;
         }
+        .f-bg{
+          position: relative;
+          width: 1rem;
+          height: $bg-height;
+          margin-right: 0.5rem;
+        }
         
         .nums {
             position: absolute;
@@ -111,5 +118,15 @@
             height: 0.3rem;
             background: $color-cyan;
         }
+        
+        .negative{
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+          width: 100%;
+          height: 0.3rem;
+          background: $color-cyan;
+        }
     }
 </style>

src/components/ScrollWindow/index.vue

 <!-- 滚动窗口 -->
 <template>
     <div class="scroll-window">
-        <img v-if="direction" class="top top-right" src="../../assets/img/win-right-top.png" />
-        <img v-else class="top top-left" src="../../assets/img/win-left-top.png" />
+        <img v-if="direction" class="top top-right" src="../../assets/img/line-right-top.png" />
+        <img v-else class="top top-left" src="../../assets/img/line-left-top.png" />
         <div class="main">
           <slot />
         </div>
-        <img v-if="direction" class="bottom bottom-left" src="../../assets/img/win-right-bottom.png" />
-        <img v-else class="bottom bottom-right" src="../../assets/img/win-left-bottom.png" />
+        <!-- 右下 -->
+        <img v-if="!direction && !isTop" class="icon icon-bottom bottom-right" src="../../assets/img/win-right-bottom.png" />
+        <!-- 右上 -->
+        <img v-if="!direction && isTop" class="icon icon-top bottom-right" src="../../assets/img/win-right-top.png" />
+        <!-- 左下 -->
+        <img v-if="direction && !isTop" class="icon icon-bottom bottom-left" src="../../assets/img/win-left-bottom.png" />
+        <!-- 左上 -->
+        <img v-if="direction && isTop" class="icon icon-top bottom-left" src="../../assets/img/win-left-top.png" />
     </div>
 </template>
 
 <script>
     export default {
         // 方向，0为左边，1为右边
-        props: ['direction'],
+        props: ['direction', 'isTop'],
     }
 </script>
 
@@ -36,10 +42,16 @@
         .top-right {
             right: 0;
         }
-        .bottom{
+        
+        .icon {
             width: 5.75rem;
             height: auto;
             position: absolute;
+        }
+        .icon-top{
+          top: -0.6rem;
+        }
+        .icon-bottom{
             bottom: -0.75rem;
         }
         .bottom-left {
@@ -51,7 +63,7 @@
         
         .main{
             height: 100%;
-            background-color: rgba(10,23,55,0.80);
+            // background-color: rgba(10,23,55,0.80);
             border: 1px solid rgba(9,77,148,0.50);
             box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
             padding: 0.5rem 0;

src/style/index.scss

@@ -10,6 +10,11 @@
         font-size: 10px;
     }
 }
+@media (max-width: 1200px) {
+    html {
+        font-size: 8px;
+    }
+}
 
 #app {
     width: 100%;
@@ -34,6 +39,8 @@ body {
 $color-cyan: #93FCFF;
 $color-blue: #0984FF;
 $color-deep-blue: #1C529D;
+$color-green: #00de6b;
+$color-red: #E53B4C;
 $txt-color: #eeeeee;
 
 // 背景图片居中

src/views/Factory.vue

@@ -87,26 +87,24 @@
       },
       // 初始化socket
       initSocket() {
-        try{
-          this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/runningState/deviceInfo', [this.$x_user.token.split(' ')[1]]);
-          this.socket.onopen = () => console.log('socket_factory success');
-          this.socket.onerror = e => console.log('socket_factory error', e);
-          this.socket.onmessage = msg => {
-            try{
-              const data = JSON.parse(msg.data);
-              // console.log('socket_factory data', msg);
-              // console.log('socket_factory data', data);
-              if (!data) return;
-              this.socketData = data;
-              this.initData();
-            }catch(e){
-              console.log(e);
-            }
-          }
-        }catch(e){
-          console.log(e);
+        this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/runningState/deviceInfo', [this.$x_user.token.split(' ')[1]]);
+        this.socket.onopen = () => console.log('socket_factory success');
+        this.socket.onerror = e => {
+          console.log('socket_factory error', e);
           User.getRoleList(); // 捕获错误，然后发送一个请求，因为可能是token导致的socket连接错误，发送请求后如果是token过期，会自动注销用户
         }
+        this.socket.onmessage = msg => {
+          try{
+            const data = JSON.parse(msg.data);
+            // console.log('socket_factory data', msg);
+            // console.log('socket_factory data', data);
+            if (!data) return;
+            this.socketData = data;
+            this.initData();
+          }catch(e){
+            console.log(e);
+          }
+        }
       },
       // 关闭socket
       closeSocket() {
@@ -394,6 +392,9 @@
           width: 1px;
           background-color: $line-color;
           position: absolute;
+          top: 0;
+          bottom: 0;
+          margin: auto;
           left: 4.5rem;
         }
       }

src/views/FactoryMonitoring.vue

@@ -9,11 +9,15 @@
       <el-carousel-item class="swiper-item" v-for="page in Math.ceil(crewList.length / 4)" :key="page">
         <div class="crew-item" v-for="item of crewList.slice(page * 4 - 4, page * 4)" :key="item.deviceId">
           <img src="../assets/img/crew.png" @click="goPage(item)" />
-          <number-flipper class="number" title="有功功率" unit="kW" :number="item.power" :point="1" direction="1" />
-          <div class="name" @click="goPage(item)">{{item.deviceName}}</div>
+          <div class="numbers">
+            <number-flipper class="number" title="转速" unit="r/min" :number="item.top ? item.top[0].kksValueR : 0" :state="item.top ? item.top[0].state : 0" :point="1" />
+            <number-flipper class="number" title="有功功率" unit="kW" :number="item.top ? item.top[1].kksValueR : 0" :state="item.top ? item.top[1].state : 0" :point="1" />
+          </div>
+          <div class="name" :class="item.top && item.top[0].kksValueR > 0 ? 'name-run' : 'name-stop' " @click="goPage(item)">{{item.deviceName}}</div>
           <scroll-window class="roll-top">
+            <div class="roll-title">报警值</div>
             <el-scrollbar class="win-list" v-if="item.vListW && item.vListW.length">
-              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW">
+              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW" :key="v.kksCode">
                 <div class="left">{{v.cpName}}</div>
                 <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
               </div>
@@ -21,8 +25,9 @@
             <div class="win-list no-data" v-else>暂无报警</div>
           </scroll-window>
           <scroll-window class="roll-bottom">
+            <div class="roll-title">实测值</div>
             <el-scrollbar class="win-list">
-              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">
+              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList" :key="v.kksCode">
                 <div class="left">{{v.cpName}}</div>
                 <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
               </div>
@@ -94,11 +99,13 @@
             // 报警
             i.vListW = i.vList.filter(i => i.state == 3 || i.state == 4 || i.state == 5);
             // 功率
-            i.power = 0;
-            FactoryMConfig.power.forEach(key => {
-              let res = getCharacterFromCrew(crew, key);
-              if(res) i.power = res.kksValueR;
-            })
+            i.top = FactoryMConfig.top.map(arr => {
+              for (let key of arr) {
+                let res = getCharacterFromCrew(crew, key);
+                if(res) return res;
+              }
+              return false;
+            });
           })
         }
         this.crewList = crewList;
@@ -186,6 +193,7 @@
         top: 0;
         bottom: 0;
         cursor: pointer;
+        transform: translateY(-3rem);
       }
 
       .name {
@@ -199,30 +207,52 @@
         @extend %pos-center;
         top: 0;
         bottom: 0;
-        transform: translateY(6rem);
+        transform: translateY(3rem);
         cursor: pointer;
       }
-
-      .number {
+      .name-run{
+        border-color: $color-green;
+        background: rgba($color: $color-green, $alpha: 0.3);
+        // color: $color-green;
+      }
+      .name-stop{
+        border-color: $color-red;
+        background: rgba($color: $color-red, $alpha: 0.3);
+        // color: $color-red;
+      }
+      
+      .numbers{
         @extend %pos-center;
         top: 0.5rem;
-        transform: scale(0.8);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .number {
+          transform: scale(0.8);
+        }
       }
       
       .roll-top{
         @extend %pos-center;
         width: 80%;
-        height: 21vh;
-        top: 4rem;
+        height: 12vh;
+        top: 6rem;
       }
       
       .roll-bottom{
         @extend %pos-center;
         width: 80%;
-        height: 27vh;
+        height: 30vh;
         bottom: 0;
       }
       
+      .roll-title{
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        color: $color-cyan;
+      }
+      
       .win-list{
         height: 100%;
         line-height: 1.5rem;
@@ -241,6 +271,7 @@
       }
       .no-data{
         @extend %flex-center;
+        color: #b8b8b8;
       }
       
       /deep/.el-scrollbar__wrap {

src/views/Index.vue

@@ -90,7 +90,8 @@
   import {
     getWarnItem,
     getDeviceNameById,
-    randomData
+    randomData,
+    chatValueHandler
   } from '@/common/util.js'
   import UserInfo from '@/components/UserInfo'
   import User from '@/api/user.js';
@@ -137,27 +138,25 @@
     methods: {
       // 初始化socket
       initSocket() {
-        try{
-          this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/all/measure/point/' + this.$x_factory.plantId, [this.$x_user.token.split(' ')[1]]);
-          this.socket.onopen = () => console.log('socket_all success');
-          this.socket.onerror = e => console.log('socket_all error', e);
-          this.socket.onmessage = msg => {
-            try{
-              const data = JSON.parse(msg.data);
-              // console.log('socket_all data', msg);
-              // console.log('socket_all data', data);
-              if (!data) return;
-              this.$store.commit('allData', data);
-              if(this.dialogShow) this.initTableData();
-              // this.initTableData();
-            }catch(e){
-              console.log(e);
-            }
-          }
-        }catch(e){
-          console.log(e);
+        this.socket = new WebSocket('ws://' + CONFIG.SOCKET + '/all/measure/point/' + this.$x_factory.plantId, [this.$x_user.token.split(' ')[1]]);
+        this.socket.onopen = () => console.log('socket_all success');
+        this.socket.onerror = e => {
+          console.log('socket_all error', e);
           User.getRoleList(); // 捕获错误，然后发送一个请求，因为可能是token导致的socket连接错误，发送请求后如果是token过期，会自动注销用户
         }
+        this.socket.onmessage = msg => {
+          try{
+            const data = JSON.parse(msg.data);
+            // console.log('socket_all data', msg);
+            // console.log('socket_all data', data);
+            if (!data) return;
+            this.$store.commit('allData', data);
+            if(this.dialogShow) this.initTableData();
+            // this.initTableData();
+          }catch(e){
+            console.log(e);
+          }
+        }
       },
       // 关闭socket
       closeSocket() {
@@ -223,12 +222,8 @@
           for (let j = 0; j < this.$x_allData[i].tSdb.length; j++) {
             const item = this.$x_allData[i].tSdb[j]; // 当前测点
             if(!item.kksValue) continue; // 如果没有查出值，则跳过
-            if(!item.kksValueR) {
-              let str = item.kksValue.value.toString();
-              item.state = parseInt(str.substr(-2));
-              item.kksValueR = parseFloat(str.substr(0, str.length - 2));
-            }
-            if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId);
+            if(!item.kksValueR) chatValueHandler(item); // 补数据，只补一次
+            if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId); // 添加机组名
             // tableData3.push(item); // 全部
             if(warnStateMap[item.state]) tableData1.push(item); // 报警
             if(item.state == 2) tableData2.push(item); // 无效