调整样式，最终版

src/common/const.js

@@ -8,7 +8,7 @@ export const CONFIG = {
   SOCKET: server_ip + '/socket', // 线上
   // SOCKET: server_ip, // 本地
   API_URL: '/plant/',
-  TITLE: '湖南三厂机组实时监测系统', // 项目名称
+  TITLE: '湖南水电公司机组状态监测系统', // 项目名称
   CHARACTER_TAB: '#', // 测点名字里的标识，比如1F定子CA线电压，中的"F"，因为会根据这个标识来分割测点名字，可以为空，也可以为多个字符
 }
 
@@ -16,6 +16,7 @@ export const CONFIG = {
 export const RouteMap = {
   FactoryMonitoring: '全厂监测',
   CrewMonitoring: '机组监测',
+  FactoryInfo: '数据一览',
   TrendAnalysis: '趋势分析',
   AlarmRecord: '报警记录',
   UserManage: '用户管理',
@@ -97,9 +98,9 @@ export const WarningConfig = {
   // 高高报警（一级）
   protect: {
     name: '一级报警',
-    color: '#FF636B',
-    color2: '#823237',
-    state: 5,
+    color: '#ffff00',
+    color2: '#828200',
+    state: 3,
     warnLevel: 1, // 报警等级，会依次按照这个字段统计报警数量，用于阈值更新里的测试
   },
   // 高报警（二级）
@@ -113,9 +114,9 @@ export const WarningConfig = {
   // 预报警（三级）
   earlywarning: {
     name: '三级报警',
-    color: '#ffff00',
-    color2: '#828200',
-    state: 3,
+    color: '#FF636B',
+    color2: '#823237',
+    state: 5,
     warnLevel: 3,
   },
   // // 上趋势报警

src/common/util.js

@@ -609,7 +609,7 @@ export function gaosi(value) {
  * @auto 刘彬瑜
  * @todo 根据机组id获取机组名
  * @param {String} id 机组id(code)
- * @param {Boolean} short 是否使用简称：1#，2#，默认不使用
+ * @param {Boolean} short 是否使用简称,默认不使用
  * @return {String} name 机组名
  */
 export function getDeviceNameById(id, short = false) {
@@ -619,7 +619,7 @@ export function getDeviceNameById(id, short = false) {
   } else if (store.state.$x_factoryList) {
     store.state.$x_factoryList.forEach(f => {
       f.plantDevices.forEach(i => {
-        if(i.deviceId == id) name = i.deviceName;
+        if(i.deviceId == id) name = (short && i.shortName) ? i.shortName : i.deviceName;
         return;
       })
       if(name) return;

src/components/NumberFlipper/index.vue

 <!-- 数字翻牌器 -->
 <template>
     <div class="number-flipper" :class="direction ? 'flex' : ''">
-        <div class="up" v-if="title" :class="direction ? 'up-flex' : ''">
-            <div class="i" />{{title}}
+        <div class="up" v-if="title" :class="[direction ? 'up-flex' : '', simple ? 'flex' : '']">
+            <!-- <div class="i" /> -->{{title}}
         </div>
         <div v-if="simple" class="down">
             <div class="simple" :style="{color: getWarnColor(state)}">{{animatedNumber}}</div>
@@ -45,6 +45,10 @@
             state: {
                 type: Number,
             },
+            // 整数位数
+            len: {
+                type: Number,
+            },
             // 小数位数
             point: {
                 type:Number,
@@ -57,7 +61,7 @@
         data() {
             return {
                 getWarnColor: getWarnColor,
-                relNumber: 0,
+                relNumber: '0',
                 tweenedNumber: 0,
             }
         },
@@ -71,11 +75,20 @@
             number: {
                 immediate: true,
                 handler(val) {
+                  if(this.len) for (let i = 0; i < this.len - 1; i++) this.relNumber = '0' + this.relNumber; // 补0
+                  // 补小数
+                  if(this.point) {
+                    this.relNumber += '.';
+                    for (let i = 0; i < this.point; i++) this.relNumber += '0';
+                  }
                   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);
+                    let num = this.point === undefined ? parseFloat(val) : parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
+                    let tmpLen = num.toString().split('.')[0].length; // 整数部分的长度
+                    if(this.len && tmpLen < this.len) for (let i = 0; i < this.len - tmpLen; i++) num = '0' + num; // 补0
+                    this.relNumber = num;
                   }
                 }
             }
@@ -88,8 +101,8 @@
         .up{
             font-size: 1.2rem;
             color: $color-cyan;
-            @extend %flex-center;
             margin-bottom: $up-m-b;
+            text-align: left;
             
             .i {
                 width: 0.2rem;

src/components/Sidebar/index.vue

@@ -20,7 +20,7 @@
               <div class="line-x-item"></div>
               <el-submenu :index="index + '_' + index2">
                 <template slot="title">
-                  <span>{{ crew.deviceName }}</span>
+                  <span>{{ crew.shortName }}</span>
                 </template>
                 <div class="sub-menu" v-for="(character, index3) of crew.characters" :key="index3">
                   <div v-if="index3 == crew.characters.length - 1" class="line-y-item"></div>

src/components/UserInfo/index.vue

@@ -85,6 +85,7 @@
 
             .dropdown-txt {
                 color: $color-cyan;
+                cursor: pointer;
             }
         }
     }

src/router/index.js

@@ -52,6 +52,16 @@ const roleRoutes = [{
     path: 'index',
     component: () => import('@/views/CrewMonitoring'),
   }]
+}, {
+  // 全厂数据一览
+  path: '/FactoryInfo',
+  name: 'FactoryInfo',
+  component: Index,
+  redirect: '/FactoryInfo/index',
+  children: [{
+    path: 'index',
+    component: () => import('@/views/FactoryInfo'),
+  }]
 }, {
   // 趋势分析
   path: '/TrendAnalysis',
@@ -144,14 +154,16 @@ function initLocal() {
   // 获取用户信息
   let user = JSON.parse(localStorage.getItem('electric_user'));
   let token = localStorage.getItem('electric_user_token');
-  if (!user || !token || user.endTime < Date.now()) return 1; // 如果没有用户和token，或者过期，说明未登录，则返回1，意味着需要跳转到登录页
+  // if (!user || !token || user.endTime < Date.now()) return 1; // 如果没有用户和token，或者过期，说明未登录，则返回1，意味着需要跳转到登录页
+  if (!user || !token) return 1; // 如果没有用户和token，说明未登录，则返回1，意味着需要跳转到登录页
   user.data.token = token; // 将token放入user里，方便全局取
   user.data.checkPermission = makeMap(user.data.permission); // 添加一个查询权限的参数
   store.commit('user', user.data);
   // 获取电厂信息
   let factoryList = JSON.parse(localStorage.getItem('electric_factoryList'));
   let factory = JSON.parse(localStorage.getItem('electric_factory'));
-  if (!factory || !factoryList || factory.endTime < Date.now()) return 2; // 如果没有电厂和设备列表，或者过期，说明未选择电厂，则返回2，意味着需要跳转到电厂选择页
+  // if (!factory || !factoryList || factory.endTime < Date.now()) return 2; // 如果没有电厂和设备列表，或者过期，说明未选择电厂，则返回2，意味着需要跳转到电厂选择页
+  if (!factory || !factoryList) return 2; // 如果没有电厂和设备列表，说明未选择电厂，则返回2，意味着需要跳转到电厂选择页
   store.commit('factory', factory.data);
   store.commit('factoryList', factoryList.data);
   initRoleRoute();

src/style/index.scss

@@ -41,6 +41,7 @@ $color-blue: #0984FF;
 $color-deep-blue: #1C529D;
 $color-green: #00de6b;
 $color-red: #E53B4C;
+$color-grey: #cccccc;
 $txt-color: #eeeeee;
 
 // 背景图片居中

src/views/AlarmRecord.vue

@@ -6,7 +6,7 @@
         <el-button class="btn" @click="goPage">趋势分析</el-button>
       </div>
       <div class="center">
-        {{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.deviceName : ''}} - 报警记录
+        {{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.shortName : ''}} - 报警记录
         <!-- {{$x_factory.plantName}} - 报警记录 -->
       </div>
       <div class="right">
@@ -28,7 +28,13 @@
           <el-table-column prop="kkscode.cpName" label="测点名称" min-width="20%" align="center"></el-table-column>
           <el-table-column prop="kkscode.kksCode" label="测点编码" min-width="20%" align="center"></el-table-column>
           <el-table-column prop="kkscode.cpUnit" label="单位" min-width="5%" align="center"></el-table-column>
-          <el-table-column prop="value" label="报警值" min-width="10%" align="center"> </el-table-column>
+          <el-table-column prop="value" label="报警值" min-width="10%" align="center">
+			  <template v-slot="scope">
+				  <div class="warn-state" :style="{color: getWarnColor(scope.row.alertStat)}">
+					<i class="el-icon-warning-outline" />{{scope.row.value}}
+				  </div>
+			  </template>
+		  </el-table-column>
           <el-table-column label="报警时刻" min-width="15%" align="center">
             <template v-slot="scope">
                 {{scope.row.valueTime | dateFormat('YYYY/MM/DD HH:mm:ss')}}
@@ -52,7 +58,8 @@
   } from '@/common/const.js';
   import {
     dateFormat,
-    getDeviceNameById
+    getDeviceNameById,
+	getWarnColor
   } from '@/common/util.js';
   import Warn from '@/api/warn.js';
   export default {
@@ -73,6 +80,7 @@
         pointListMax: 12, // 报警最多选择数量
         // 报警表格是否可选，小于5个点可选，大于5个点，则已选的点可选
         tableCanSelect: row => this.pointList.length < this.pointListMax || this.pointList.find(i => i.id ==row.id),
+		getWarnColor: getWarnColor,
       };
     },
     created() {
@@ -301,6 +309,7 @@
 
     .header {
       height: 4.25rem;
+	  line-height: 4.25rem;
       background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
       padding: 0 1.875rem;
       box-sizing: border-box;
@@ -348,7 +357,11 @@
 
       .table {
         height: calc(100% - 40px);
-
+		.warn-state{
+			i{
+				margin-right: 0.3rem;
+			}
+		}
         .table-btn {
           color: $color-cyan;
         }

src/views/CrewMonitoring.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="crew-monitoring">
     <div class="title">
-      {{$x_factory.plantName}} - {{$x_crew ? $x_crew.deviceName : ''}}
+      {{$x_factory.plantName}} - {{$x_crew ? $x_crew.shortName : ''}}
     </div>
     <!-- <div class="number">
       <number-flipper class="num" title="机组转速" unit="r/min" :number="dataTop ? dataTop[0].kksValueR : 0" :point="1" />
@@ -10,6 +10,7 @@
     </div> -->
     <div class="model">
       <img src="../assets/img/crew.png" />
+      <div class="name" :class="dataTop && getCrewState(dataTop[0]) ? (getCrewState(dataTop[0]) == 1 ? 'name-run' : 'name-stop') : 'name-error' ">{{$x_crew ? $x_crew.shortName : ' '}}</div>
       <scroll-window class="roll-left-top">
         <div class="win-list flex-down" v-if="listLeftTop">
         <!-- <el-scrollbar class="win-list flex-down" v-if="listLeftTop"> -->
@@ -64,7 +65,7 @@
     </div>
     <div class="block right">
       <div class="border-sm">
-        <div class="chart-title">发电机监测</div>
+        <div class="chart-title">机组摆度监测</div>
         <div class="chart-main" style="flex-direction: column;">
           <div class="single-row" v-for="(row,index) of dataRightTop" :key="index">
             <div class="single-col" :style="{width: (100 / getArrMaxLen(dataRightTop)) + '%'}" v-for="(v,index2) of row" :key="index2">
@@ -76,7 +77,7 @@
         </div>
       </div>
       <div class="border-sm">
-        <div class="chart-title">水轮机监测</div>
+        <div class="chart-title">机组振动监测</div>
         <div class="chart-main" style="flex-direction: column;">
           <div class="single-row" v-for="(row,index) of dataRightCenter" :key="index">
             <div class="single-col" :style="{width: (100 / getArrMaxLen(dataRightCenter)) + '%'}" v-for="(v,index2) of row" :key="index2">
@@ -160,6 +161,7 @@
         handler(val) {
           if (!val) this.$router.push('/FactoryMonitoring');
           else {
+            this.clearChart(); // 清空图表
             // this.initRandomData(); // 模拟数据
             this.initData(); // 图表数据
             this.closeSocket();
@@ -180,7 +182,7 @@
     methods: {
       initData() {
         if(!this.$x_crew || !this.$x_allData.length) return;
-        // this.dataTop = this.initDataList('top');
+        this.dataTop = this.initDataList('top');
         this.dataLeftBottom = this.initDataList('leftBottom', 9);
         this.dataRightTop = this.initDataChartSingle('rightTop', 3);
         this.dataRightCenter = this.initDataChartSingle('rightCenter', 3);
@@ -253,7 +255,8 @@
             // console.log('socket_crew data', msg);
             // console.log('socket_crew data', data);
             if (!data) return;
-            data.xAxis = data.xaxis.map(i => dateFormat(new Date(i * 1000), 'YY/MM/DD\nHH:mm:ss'));
+            data.xAxis = data.xaxis.map(i => dateFormat(new Date(i * 1000), 'YY/MM/DD\nHH:mm:ss')); // 时间转换
+			data.dataList.sort((a,b) => a.name.localeCompare(b.name));
             this.dataLeftTop = data;
           }catch(e){
             console.log(e);
@@ -274,6 +277,25 @@
           this.timer = null;
         }
       },
+      // 清空图表
+      clearChart() {
+        this.dataTop = null;
+        this.dataLeftTop = null;
+        this.dataLeftBottom = null;
+        this.dataRightTop = null;
+        this.dataRightCenter = null;
+        this.dataRightBottom = null;
+        this.countLeftBottom = null;
+        this.countRightTop = null;
+        this.countRightCenter = null;
+        this.countRightBottom = null;
+        this.listLeftTop = null;
+        this.listLeftBottom = null;
+        this.listRightTop = null;
+        this.listRightBottom = null;
+      	if (this.$refs.ChartLeftTop) this.$refs.ChartLeftTop.clear();
+      	if (this.$refs.ChartRightBottom) this.$refs.ChartRightBottom.clear();
+      },
       // 初始化虚拟数据
       initRandomData() {
         this.clearTimer();
@@ -481,6 +503,12 @@
           if(i.length > max) max = i.length;
         })
         return max;
+      },
+      // 获取机组状态,传入转速测点,1正常，0维修，2停机
+      getCrewState(chat) {
+        if(!chat.kksValue || (Date.now() - chat.kksValue.timestamp) > (24 * 3600 * 1000) ) return 0;
+        if(chat.kksValueR > 1) return 1;
+        return 2;
       }
     }
   }
@@ -526,6 +554,43 @@
         transform: translateX(-1.5rem);
       }
       
+      .name {
+        width: 6rem;
+        height: 2.25rem;
+        border-radius: 4px;
+        background: rgba(0, 0, 0, 0.20);
+        border: 1px dashed $color-cyan;
+        @extend %flex-center;
+        @extend %pos-center;
+        top: 62%;
+      }
+      
+      .name-run{
+        border-color: $color-red;
+        background: rgba($color: $color-red, $alpha: 0.3);
+        animation: switch 2s infinite;
+      }
+      .name-stop{
+        border-color: $color-green;
+        background: rgba($color: $color-green, $alpha: 0.3);
+      }
+      .name-error{
+        border-color: $color-grey;
+        background: rgba($color: $color-grey, $alpha: 0.3);
+      }
+      @keyframes switch
+      {
+      	0% {
+          background: rgba($color: $color-red, $alpha: 0.3);
+        }
+      	50% {
+          background: rgba($color: $color-red, $alpha: 0.7);
+        }
+        100% {
+          background: rgba($color: $color-red, $alpha: 0.3);
+        }
+      }
+      
       $win-width: 40%;
       $win-pos: 0;
       .roll-left-top {
@@ -665,7 +730,7 @@
     .chart-title {
       font-size: 1.125rem;
       color: $color-cyan;
-      line-height: 2.5rem;
+      line-height: 3rem;
     }
   }
 </style>

src/views/Factory.vue

@@ -4,6 +4,7 @@
     <img class="left-border" src="../assets/img/border-left.png" />
     <img class="right-border" src="../assets/img/border-right.png" />
     <div class="title">
+	  <img class="logo" src="../assets/img/logo-small.png" />
       <span class="txt">{{title}}</span>
     </div>
     <user-info class="user-info" />
@@ -20,23 +21,24 @@
       <!-- 展开 -->
       <transition name="item">
         <div v-if="factoryShow" class="factory-block factory-sign" @mouseleave="closeFactory" @click="goPage(factoryItem)">
+        <!-- <div v-if="factoryShow" class="factory-block factory-sign" @click="goPage(factoryItem)"> -->
           <div class="factory-name">{{factoryItem.plantName}}</div>
           <div class="y-line" :style="{height: (factoryItem.plantDevices.length > 11 ? 10 * 4.75 + 'rem' : (factoryItem.plantDevices.length - 1) * 4.75 + 'rem')}"></div>
           <div class="crew-list">
-            <div class="crew-item" v-for="(dev,i) of factoryItem.plantDevices.slice(0,11)" :class="dev.runstate ? 'crew-item-run' : 'crew-item-stop'"
+            <div class="crew-item" v-for="(dev,i) of factoryItem.plantDevices.slice(0,11)" :class="dev.runstate == null ? 'crew-item-error' : dev.runstate ? 'crew-item-run' : 'crew-item-stop'"
               :style="{'align-self': i % 2 !== 1 ? 'flex-start' : 'flex-end'}" :key="dev.deviceId">
-              <span>{{dev.deviceName}}</span>
-              <span>{{dev.runstate ? '运行' : '停机'}}</span>
+              <span>{{dev.shortName}}</span>
+              <span>{{dev.runstate == null ? '检修' : dev.runstate ? '运行' : '停机'}}</span>
               <div class="x-line" :class="i % 2 !== 1 ? 'x-line-s' : 'x-line-l'">
                 <img class="x-line-arrow" src="../assets/img/arrow-double-s.png" />
               </div>
             </div>
           </div>
           <div class="crew-list crew-list2" v-if="factoryItem.plantDevices.length > 11">
-            <div class="crew-item" v-for="(dev,i) in factoryItem.plantDevices.slice(11)" :class="dev.runstate ? 'crew-item-run' : 'crew-item-stop'"
+            <div class="crew-item" v-for="(dev,i) in factoryItem.plantDevices.slice(11)" :class="dev.runstate == null ? 'crew-item-error' : dev.runstate ? 'crew-item-run' : 'crew-item-stop'"
               :style="{'align-self': i % 2 !== 1 ? 'flex-start' : 'flex-end'}" :key="dev.deviceId">
-              <span>{{dev.deviceName}}</span>
-              <span>{{dev.runstate ? '运行' : '停机'}}</span>
+              <span>{{dev.shortName}}</span>
+              <span>{{dev.runstate == null ? '检修' : dev.runstate ? '运行' : '停机'}}</span>
               <div class="x-line x-line-m"></div>
             </div>
           </div>
@@ -121,8 +123,14 @@
           res.forEach(i => {
             i.name = i.plantName;
             i.value = [i.latitude, i.longitude];
+            // 电厂简称
             let arr = i.plantName.match(/国网(.+)厂/);
             i.shortName = arr ? arr[1] : i.plantName;
+            // 机组简称
+            i.plantDevices.forEach(j => {
+              let arr2 = j.deviceName.match(/^.+(\d.+)/);
+              j.shortName = arr2 ? arr2[1] : j.deviceName;
+            })
           })
           this.factoryList = res;
         } catch (e) {
@@ -220,10 +228,19 @@
 
     .title {
       @extend %pos-center;
-      width: 58.75rem;
+      // width: 58.75rem;
+      width: 64rem;
       height: 4.875rem;
       background-image: url(../assets/img/title-bg.png);
       @extend %background-center;
+	  
+	  .logo{
+		  width: auto;
+		  height: 3rem;
+		  margin-right: 0.5rem;
+		  position: relative;
+		  top: 0.5rem;
+	  }
 
       .txt {
         font-size: 2.5rem;
@@ -290,10 +307,12 @@
           .crew-item-run {
             background-image: url(../assets/img/crew-run.png);
           }
-
           .crew-item-stop {
             background-image: url(../assets/img/crew-stop.png);
           }
+          .crew-item-error {
+            background-image: url(../assets/img/crew-error.png);
+          }
         }
 
         .crew-list2 {
@@ -307,6 +326,9 @@
           height: 1px;
           background-color: $line-color;
           position: absolute;
+		  top: 0;
+		  bottom: 0;
+		  margin: auto;
           display: flex;
           justify-content: center;
           align-items: center;

src/views/FactoryMonitoring2.vue → src/views/FactoryInfo.vue

-<!-- 全厂监测 -->
+<!-- 全厂数据一览 -->
 <template>
   <div class="factory-monitoring">
-    <div class="title">
+    <!-- <div class="title">
       {{$x_factory.plantName}} - 全部机组
-    </div>
+    </div> -->
     <transition name="fade">
       <div class="crew-list" v-show="crewListShow">
-        <div class="crew-item" v-for="item of crewList" :key="item.deviceId">
-          <img src="../assets/img/crew.png" />
-          <div class="name" @click="goPage(item)">{{item.deviceName}}</div>
-          <number-flipper class="number" unit="kW" :number="item.power" :point="1" />
+        <div class="crew-item" v-for="item of $x_allData" :key="item.deviceId" @click="goPage(item.deviceId)">
+          <!-- <img src="../assets/img/crew.png" /> -->
+          <div class="name" :class="item.runstate ? (item.runstate == 1 ? 'name-run' : 'name-stop') : 'name-error'">{{item.deviceName}}</div>
+          <!-- <number-flipper class="number" unit="kW" :number="item.power" :point="1" /> -->
           <scroll-window class="roll-left">
             <el-scrollbar class="win-list">
-              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div>
+              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.tSdb">
+                <div class="left">{{v.cpName}}</div>
+                <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
+              </div>
             </el-scrollbar>
           </scroll-window>
         </div>
@@ -72,20 +75,25 @@
         immediate: true,
         handler(val) {
           this.crewListShow = false;
-          this.initData(); // 图表数据
+          // this.initData(); // 图表数据
           // 延迟执行,因为动画
           setTimeout(()=> {
             this.crewListShow = true;
           }, 200)
         }
       },
-      $x_allData: {
-        handler(val) {
-          this.initData();
-        }
-      }
+      // $x_allData: {
+      //   handler(val) {
+      //     this.initData();
+      //   }
+      // }
     },
     methods: {
+      // 跳转到机组
+      goPage(item) {
+        this.$store.commit('crew', item);
+        this.$router.push('/CrewMonitoring');
+      },
       // 处理页面数据
       initData() {
         let crewList = [...this.$x_factory.plantDevices];
@@ -110,9 +118,10 @@
         }
         this.crewList = crewList;
       },
-      // 跳转到机组
-      goPage(item) {
-        this.$store.commit('crew', item);
+      // 跳转到机组，这里去匹配factory里的机组，因为这里是alldata里的机组
+      goPage(id) {
+        const crew = this.$x_factory.plantDevices.find(i => i.deviceId == id);
+        this.$store.commit('crew', crew);
         this.$router.push('/CrewMonitoring');
       },
       // 显示小窗口
@@ -154,8 +163,8 @@
     .crew-list {
       @extend %pos-center;
       bottom: 0;
-      height: 96%;
-      padding: 0 2% 1% 2%;
+      height: 100%;
+      padding: 1% 2%;
       box-sizing: border-box;
       display: flex;
       flex-wrap: wrap;
@@ -164,6 +173,7 @@
         position: relative;
         width: 20%;
         height: 50%;
+        cursor: pointer;
         
         img {
           width: auto;
@@ -173,16 +183,41 @@
         }
         
         .name {
-          width: 6rem;
-          height: 2.25rem;
+          width: 8rem;
+          height: 2rem;
           border-radius: 4px;
           background: rgba(0, 0, 0, 0.20);
           border: 1px dashed $color-cyan;
           @extend %flex-center;
-          position: absolute;
-          top: 7%;
-          left: 5%;
-          cursor: pointer;
+          @extend %pos-center;
+          top: 0.5rem;
+          // position: absolute;
+          // left: 5%;
+        }
+        .name-run{
+          border-color: $color-red;
+          background: rgba($color: $color-red, $alpha: 0.3);
+          animation: switch 2s infinite;
+        }
+        .name-stop{
+          border-color: $color-green;
+          background: rgba($color: $color-green, $alpha: 0.3);
+        }
+        .name-error{
+          border-color: $color-grey;
+          background: rgba($color: $color-grey, $alpha: 0.3);
+        }
+        @keyframes switch
+        {
+        	0% {
+            background: rgba($color: $color-red, $alpha: 0.3);
+          }
+        	50% {
+            background: rgba($color: $color-red, $alpha: 0.7);
+          }
+          100% {
+            background: rgba($color: $color-red, $alpha: 0.3);
+          }
         }
         
         .number{
@@ -193,14 +228,26 @@
         }
         
         .roll-left {
-          width: 90%;
-          height: 80%;
+          width: 97%;
+          height: calc(100% - 3rem);
           @extend %pos-center;
           bottom: 0;
           
           .win-list{
             height: 100%;
-            line-height: 2rem;
+            line-height: 1.5rem;
+            .win-item{
+              display: flex;
+              align-items: center;
+              .left {
+                text-align: right;
+                margin-right: 1rem;
+                width: 55%;
+              }
+              .right {
+                text-align: left;
+              }
+            }
           }
           
           /deep/.el-scrollbar__wrap {

src/views/FactoryMonitoring.vue

@@ -10,18 +10,20 @@
         <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)" />
           <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" />
+            <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" :len="3" />
+            <number-flipper class="number" title="有功功率" unit="MW" :number="item.top ? item.top[1].kksValueR : 0" :state="item.top ? item.top[1].state : 0" :point="1" :len="3" />
           </div>
-          <div class="name" :class="item.top && item.top[0].kksValueR > 0 ? 'name-run' : 'name-stop' " @click="goPage(item)">{{item.deviceName}}</div>
+          <div class="name" :class="item.top && getCrewState(item.top[0]) ? (getCrewState(item.top[0]) == 1 ? 'name-run' : 'name-stop') : 'name-error' " @click="goPage(item)">{{item.shortName}}</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-list flex-down" v-if="item.vListW && item.vListW.length">
+            <!-- <el-scrollbar class="win-list flex-down" v-if="item.vListW && item.vListW.length"> -->
               <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>
-            </el-scrollbar>
+            <!-- </el-scrollbar> -->
+            </div>
             <div class="win-list no-data" v-else>暂无报警</div>
           </scroll-window>
           <scroll-window class="roll-bottom">
@@ -97,7 +99,8 @@
               return false;
             }).filter(i => !!i);
             // 报警
-            i.vListW = i.vList.filter(i => i.state == 3 || i.state == 4 || i.state == 5);
+            // i.vListW = i.vList.filter(i => i.state == 1 || i.state == 4 || i.state == 5);
+            i.vListW = crew.tSdbWarn;
             // 功率
             i.top = FactoryMConfig.top.map(arr => {
               for (let key of arr) {
@@ -115,6 +118,12 @@
         this.$store.commit('crew', item);
         this.$router.push('/CrewMonitoring');
       },
+      // 获取机组状态,传入转速测点,1正常，0维修，2停机
+      getCrewState(chat) {
+        if(!chat.kksValue || (Date.now() - chat.kksValue.timestamp) > (24 * 3600 * 1000) ) return 0;
+        if(chat.kksValueR > 1) return 1;
+        return 2;
+      },
     },
   }
 </script>
@@ -197,7 +206,7 @@
       }
 
       .name {
-        width: 8rem;
+        width: 6rem;
         height: 2.25rem;
         padding: 0 0.5rem;
         border-radius: 4px;
@@ -211,14 +220,29 @@
         cursor: pointer;
       }
       .name-run{
+        border-color: $color-red;
+        background: rgba($color: $color-red, $alpha: 0.3);
+        animation: switch 2s infinite;
+      }
+      .name-stop{
         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;
+      .name-error{
+        border-color: $color-grey;
+        background: rgba($color: $color-grey, $alpha: 0.3);
+      }
+      @keyframes switch
+      {
+      	0% {
+          background: rgba($color: $color-red, $alpha: 0.3);
+        }
+      	50% {
+          background: rgba($color: $color-red, $alpha: 0.7);
+        }
+        100% {
+          background: rgba($color: $color-red, $alpha: 0.3);
+        }
       }
       
       .numbers{
@@ -235,7 +259,7 @@
       .roll-top{
         @extend %pos-center;
         width: 80%;
-        height: 12vh;
+        height: 14vh;
         top: 6rem;
       }
       
@@ -262,13 +286,18 @@
           .left {
             text-align: right;
             margin-right: 1rem;
-            width: 50%;
+            width: 55%;
           }
           .right {
             text-align: left;
           }
         }
       }
+      .flex-down{
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
       .no-data{
         @extend %flex-center;
         color: #b8b8b8;

src/views/Index.vue

@@ -4,6 +4,7 @@
     <img class="left-border" src="../assets/img/border-left.png" />
     <img class="right-border" src="../assets/img/border-right.png" />
     <div class="title">
+	  <img class="logo" src="../assets/img/logo-small.png" />
       <span class="txt">{{title}}</span>
     </div>
     <user-info class="user-info" />
@@ -19,12 +20,13 @@
           <div class="btn left-bg left-pos2" :class="$route.path == '/CrewMonitoring/index' ? 'left-bg2' : ''">
             <el-select v-model="crewValue" :popper-append-to-body="false" @change="changeCrew">
               <el-option label="全部机组" :value="0" />
-              <el-option v-for="item of $x_factory.plantDevices" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" @click.native="clickCrew(item.deviceId)" />
+              <el-option v-for="item of $x_factory.plantDevices" :key="item.deviceId" :label="item.shortName" :value="item.deviceId" @click.native="clickCrew(item.deviceId)" />
             </el-select>
           </div>
-          <div class="btn left-bg left-pos3" :class="$route.path == '/TrendAnalysis/index' ? 'left-bg2' : ''" @click="goPage('/TrendAnalysis')">趋势分析</div>
+          <div class="btn left-bg left-pos3" :class="$route.path == '/FactoryInfo/index' ? 'left-bg2' : ''" @click="goPage('/FactoryInfo')">数据一览</div>
         </div>
         <div class="block">
+          <div class="btn right-bg right-pos3" :class="$route.path == '/TrendAnalysis/index' ? 'right-bg2' : ''" @click="goPage('/TrendAnalysis')">趋势分析</div>
           <div class="btn right-bg right-pos2" :class="$route.path == '/AlarmRecord/index' ? 'right-bg2' : ''" @click="goPage('/AlarmRecord')">报警记录</div>
           <div class="btn right-bg" :class="$route.path == '/UserManage/index' ? 'right-bg2' : ''" @click="goPage('/UserManage')">用户管理</div>
         </div>
@@ -151,8 +153,8 @@
             // console.log('socket_all data', data);
             if (!data) return;
             this.$store.commit('allData', data);
-            if(this.dialogShow) this.initTableData();
-            // this.initTableData();
+            // if(this.dialogShow) this.initTableData();
+            this.initTableData();
           }catch(e){
             console.log(e);
           }
@@ -208,7 +210,7 @@
       // 打开弹窗
       showDialog() {
         this.dialogShow = true;
-        this.initTableData();
+        // this.initTableData();
       },
       // 切换标签
       changeTab(i) {
@@ -218,16 +220,29 @@
       // 处理表格数据
       initTableData() {
         let tableData1 = [], tableData2 = [], tableData3 = [], warnStateMap = {3:true,4:true,5:true};
+        // 遍历机组
         for (let i = 0; i < this.$x_allData.length; i++) {
+          let warnList = []; // 存放报警测点,放入全局的alldata
+          // 遍历测点
           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) chatValueHandler(item); // 补数据，只补一次
-            if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId); // 添加机组名
-            // tableData3.push(item); // 全部
-            if(warnStateMap[item.state]) tableData1.push(item); // 报警
+            if(!item.deviceName) item.deviceName = getDeviceNameById(item.deviceId, true); // 添加机组名
+            // 根据转速判断机组状态
+            if(item.cpName == '转速') {
+              if(!item.kksValue || (Date.now() - item.kksValue.timestamp) > (24 * 3600 * 1000)) this.$x_allData[i].runstate = 0;
+              else if(item.kksValueR > 1) this.$x_allData[i].runstate = 1;
+              else this.$x_allData[i].runstate = 2;
+            }
+            // tableData3.push(item); // 全部，因为allData里是按机组分类的，所以这里重新放了一次展开的
+            // 放入报警
+            if(warnStateMap[item.state]) {
+              tableData1.push(item);
+              warnList.push(item);
+            }
             if(item.state == 2) tableData2.push(item); // 无效
           }
+          this.$x_allData[i].tSdbWarn = warnList;
         }
         // 排序
         tableData1.sort((a, b) => a.kksCode.localeCompare(b.kksCode));
@@ -297,10 +312,19 @@
 
     .title {
       @extend %pos-center;
-      width: 58.75rem;
+      // width: 58.75rem;
+	  width: 64rem;
       height: 4.875rem;
       background-image: url(../assets/img/title-bg.png);
       @extend %background-center;
+	  
+	  .logo{
+		  width: auto;
+		  height: 3rem;
+		  margin-right: 0.5rem;
+		  position: relative;
+		  top: 0.5rem;
+	  }
 
       .txt {
         font-size: 2.5rem;
@@ -437,6 +461,10 @@
             position: relative;
             right: -1.875rem;
           }
+          .right-pos3{
+            position: relative;
+            right: -3.75rem;
+          }
         }
       }
 

src/views/Login.vue

@@ -2,6 +2,7 @@
 <template>
   <div class="login">
     <div class="title">{{title}}</div>
+	<img class="logo" src="../assets/img/logo-big.png" />
     <div class="main">
       <div class="line">
         <div class="circle-o">
@@ -100,6 +101,14 @@
       @extend %txt-gradients;
     }
 
+	.logo{
+		width: 30rem;
+		height: auto;
+		position: absolute;
+		top: 2rem;
+		left: 2rem;
+	}
+	
     .main {
       width: 58.6875rem;
       height: 39.625rem;

src/views/RoleManage.vue

@@ -212,6 +212,7 @@
 
     .header {
       height: 4.25rem;
+	  line-height: 4.25rem;
       background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
       padding: 0 1.875rem;
       box-sizing: border-box;

src/views/TrendAnalysis.vue

@@ -205,6 +205,7 @@
 
     .header {
       height: 4.25rem;
+      line-height: 4.25rem;
       background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
       padding: 0 1.875rem;
       box-sizing: border-box;
@@ -257,6 +258,7 @@
 
       .charts {
         width: calc(100% - 30rem);
+		height: 100%;
         overflow: hidden;
 
         .btns {

src/views/UserManage.vue

@@ -272,6 +272,7 @@
 
     .header {
       height: 4.25rem;
+	  line-height: 4.25rem;
       background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
       padding: 0 1.875rem;
       box-sizing: border-box;