添加故障报警以及其他修改

src/views/modules_guAn/visualization/index.vue

@@ -6,6 +6,10 @@
         <span class="text">高温高湿试验项目</span>
       </div>
     </div>
+    <!-- 报警按钮 -->
+    <div class="alarm-btn u-flex-jac" @click="clickAlarmBtn">
+      <div>故障<br/>报警</div>
+    </div>
     <!-- 数据内容区域 -->
     <div class="content-container u-flex">
       <!-- 左侧区域 -->
@@ -26,47 +30,14 @@
       </div>
       <!-- 中间部分 -->
       <div class="center-container">
+        <!-- 中上 -->
         <div class="important">
-          <!-- 我是3D区域 -->
-          <!-- <div class="u-flex" style="color: #fff;width: 100%; height: 100%;flex-direction: column;align-items: center;">
-            <div class="u-flex-cjac" style="width: 100%;">
-              <div style="height: 30px;">I机组</div>
-              <div class="u-flex-jaa" style="width: 100%;">
-                <div>
-                  <div class="f1">I1压机吸气：(111) bar</div>
-                  <div class="f1">I2压机吸气：(2) bar</div>
-                  <div class="f1">J1压机吸气：(11) bar</div>
-                  <div class="f1">J1压机排气：() bar</div>
-                </div>
-                <div>
-                  <div class="f1">I2压机排气：(4)bar</div>
-                  <div class="f1">J2压机吸气：(0) bar</div>
-                  <div class="f1">J2压机排气：() bar</div>
-                  <div class="f1">I1压机排气:(33333333333333333333)bar</div>
-                </div>
-              </div>
-            </div>
-            <div class="u-flex-cjac" style="width: 100%;">
-              <div style="height: 30px;">I机组</div>
-              <div class="u-flex-jaa" style="width: 100%;">
-                <div>
-                  <div class="f1">I1压机吸气：(1111111111) bar</div>
-                  <div class="f1">I2压机吸气：(2) bar</div>
-                  <div class="f1">J1压机吸气：(11) bar</div>
-                  <div class="f1">J1压机排气：() bar</div>
-                </div>
-                <div>
-                  <div class="f1">I2压机排气：(4)bar</div>
-                  <div class="f1">J2压机吸气：(0) bar</div>
-                  <div class="f1">J2压机排气：() bar</div>
-                  <div class="f1">I1压机排气:(33333333333)bar</div>
-                </div>
-              </div>
-            </div>
-          </div> -->
+          <!-- 顶部信息+3D -->
+          <alarm-modal-list ref="alarmList"></alarm-modal-list>
+          <info-3D :data="dataAll"></info-3D>
         </div>
         <div class="centen-bottom-con u-flex-jab">
-          <!-- 中间 -->
+          <!-- 中下 -->
           <div class="center-bottom-left">
             <running-state :data="dataAll"></running-state>
           </div>
@@ -95,9 +66,11 @@
 </template>
 
 <script>
+import AlarmModalList from "./modules/AlarmModalList.vue";
 import YuzhiCurve from './modules/YuzhiCurve.vue'
 import RealTimeCurve from './modules/RealTimeCurve.vue'
 import FullCurve from './modules/FullCurve.vue'
+import Info3D from './modules/3DInfo.vue'
 import RunningState from './modules/RunningState.vue'
 import EquipmentInfo from './modules/EquipmentInfo.vue'
 import ModeInfo from './modules/ModeInfo.vue'
@@ -110,9 +83,11 @@ import { getAction } from '@/api/manage'
 export default {
   name: '',
   components: {
+    AlarmModalList,
     YuzhiCurve,
     RealTimeCurve,
     FullCurve,
+    Info3D,
     RunningState,
     EquipmentInfo,
     ModeInfo,
@@ -147,6 +122,10 @@ export default {
       })
       
     },
+    // 点击报警按钮触发弹窗
+    clickAlarmBtn(){
+      this.$refs.alarmList.visible = true
+    },
      // websocket
      initWebSocket () { // 初始化weosocket(必须)
       // 请根据实际项目需要进行修改
@@ -196,6 +175,7 @@ export default {
     height: 100vh;
     background: url('~@/assets/visualization/pageBg.png') no-repeat;
     background-size: cover;
+    position: relative;
     // 头部标题区域
     .top-title-container{
       position: fixed;
@@ -203,7 +183,7 @@ export default {
       left: 0;
       right: 0;
       // border: 1px solid #000;
-      height: 72px;
+      height: 80px;
       text-align: center;
       // line-height: 22px;
       .title-content{
@@ -240,6 +220,27 @@ export default {
         }
       }
     }
+    // 报警按钮
+    .alarm-btn{
+      position: absolute;
+      top: 26px;
+      left: calc(25% + 94px);
+      width: 50px;
+      height: 50px;
+      background: url('~@/assets/visualization/alarm.png') no-repeat;
+      background-size: contain;
+      cursor: pointer;
+      z-index: 9999;
+      div{
+        color: #20EEF9;
+        text-align: center;
+        font-size: 10px;
+        line-height: 12px;
+        font-style: italic;
+        padding-right: 3px;
+        padding-bottom: 2px;
+      }
+    }
     // 数据内容区域
     .content-container{
       height: 100%;
@@ -259,11 +260,13 @@ export default {
         }
         .left-center-con{
           height: 33.3%;
-          padding-bottom: 12px;
+          padding-top: 6px;
+          padding-bottom: 6px;
         }
         .left-bottom-con{
           height: 33.3%;
-          padding-bottom: 20px;
+          padding-top: 6px;
+          padding-bottom: 12px;
         }
       }
       .center-container{
@@ -277,7 +280,7 @@ export default {
         }
         .centen-bottom-con{
           height: 30%;
-          padding: 0 12px 20px;
+          padding: 0 12px 12px;
           .center-bottom-left{
             flex: 1.4;
             height: 100%;
@@ -296,15 +299,17 @@ export default {
         .right-top-con{
           height: 33.3%;
           padding-top: 60px;
-          padding-bottom: 12px;
+          padding-bottom: 6px;
         }
         .right-center-con{
           height: 33.3%;
-          padding-bottom: 12px;
+          padding-top: 6px;
+          padding-bottom: 6px;
         }
         .right-bottom-con{
           height: 33.3%;
-          padding-bottom: 20px;
+          padding-top: 6px;
+          padding-bottom: 12px;
         }
       }
     }

src/views/modules_guAn/visualization/modules/3DInfo.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="info-3D-module">
+    <!-- 顶部信息 -->
+    <div class="u-flex-jab info-content">
+      <div v-for="(item, index) in raelDate" :key="index" class="item-info">
+        {{ item.name }}：{{ item.value }}
+      </div>
+    </div>
+    <!-- 3D区域 -->
+    <div></div>
+
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      staticData: [
+        { name: '试验类型', webName: '试验类型', value: '' },
+        { name: '试验条件', webName: '试验条件', value: '' },
+        { name: '试验进度', webName: '试验进度', value: '' },
+        { name: '设备状态', webName: '设备状态', value: '' },
+        { name: '预计结束时间', webName: '预计结束时间', value: '' },
+        { name: '试验运行时间', webName: '试验运行时间', value: '' },
+      ],
+      raelDate: []
+    }
+  },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        this.changeData(newValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    // 获取并处理改变数据
+    changeData(newValue){
+      var newArr = this.staticData.map(item=>{
+        var findObj = newValue.find(val=>val.Name === item.webName)
+        // 如果页面为“-”则表示数据没有找到
+        return {
+          name: item.name,
+          value: findObj?findObj.Value:'-'
+        }
+      })
+      this.raelDate = newArr
+      // this.raelDate = this.staticData
+      // console.log(this.raelDate)
+    },
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+  .info-3D-module{
+    width: 100%;
+    height: 100%;
+    padding-top: 80px;
+    position: relative;
+    // 顶部信息
+    .info-content{
+      width: 100%;
+      padding: 2px 16px;
+      background-color: rgba(9,79,141,.55);
+      border-radius: 2px;
+      .item-info{
+        color: #fff;
+      }
+    }
+    // 3D区域
+  }
+</style>

src/views/modules_guAn/visualization/modules/AlarmModalList.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="alarm-list">
+    <a-modal
+      v-model="visible"
+      title="故障警告"
+      @ok="handleOk"
+      :footer="null"
+      width="60%">
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{x:true}"
+        bordered
+        :rowKey="(record, index) => { return index }"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        class="j-table-force-nowrap">
+        <template>
+          <div>
+            
+          </div>
+        </template>
+      </a-table>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  data () {
+    return {
+      visible: false,
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: "center",
+          customRender: function (t,r,index) {
+            return parseInt(index)+1;
+          }
+        },
+        {
+          title: '测点名称',
+          align: "center",
+          dataIndex: 'Name',
+        },
+        {
+          title: '警报时间',
+          align: "center",
+          dataIndex: 'Time',
+        },
+        {
+          title: '警报等级',
+          align: "center",
+          dataIndex: 'AlarmPriority',
+        },
+        {
+          title: '警报确认状态',
+          align: "center",
+          dataIndex: 'AckStatus',
+        },
+        {
+          title: '警报群组',
+          align: "center",
+          dataIndex: 'AlarmGroup',
+        },
+        {
+          title: '警报值',
+          align: "center",
+          dataIndex: 'AlarmValue',
+        },
+        {
+          title: '警报设定值',
+          align: "center",
+          dataIndex: 'AlarmLimit',
+        },
+        {
+          title: '警报种类',
+          align: "center",
+          dataIndex: 'AlarmType',
+        },
+        {
+          title: '监控节点名称',
+          align: "center",
+          dataIndex: 'NodeName',
+        },
+        {
+          title: '警报锁定',
+          align: "center",
+          dataIndex: 'Locked',
+        },
+      ],
+      dataSource: [
+        {
+          name: 'John Brown',
+          age: 32,
+          address: 'New York No. 1 Lake Park',
+          tags: ['nice', 'developer'],
+        },
+        {
+          name: 'Jim Green',
+          age: 42,
+          address: 'London No. 1 Lake Park',
+          tags: ['loser'],
+        },
+        {
+          key: '3',
+          name: 'Joe Black',
+          age: 32,
+          address: 'Sidney No. 1 Lake Park',
+          tags: ['cool', 'teacher'],
+        },
+      ],
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    handleOk(e) {
+      console.log(e);
+      this.visible = false;
+    },
+  }
+}
+</script>
+
+<!-- <style scoped>
+</style> -->
+<style lang="less" scoped>
+// @import '~@/assets/less/uStyle.less';
+.alarm-list{
+  
+}
+</style>

src/views/modules_guAn/visualization/modules/FullCurve.vue

@@ -61,7 +61,7 @@ export default {
       this.uOption = {
         color: ['#07D626', '#E30106', '#E39106'], // legend对应颜色
         grid: {
-          // top: '70',
+          top: '80',
           left: '46',
           bottom: '40'
         },

src/views/modules_guAn/visualization/modules/RealTimeCurve.vue

@@ -60,7 +60,7 @@ export default {
       this.uOption = {
         color: ['rgb(255, 0, 255)', 'rgb(255, 105, 5)', 'rgb(91, 255, 255)'], // legend对应颜色
         grid: {
-          // top: '70',
+          top: '80',
           left: '46',
           bottom: '40'
         },

src/views/modules_guAn/visualization/modules/TestStatusInfo.vue

@@ -7,7 +7,7 @@
           <div class="item-title">{{zuji.title}}</div>
           <div class="children-con u-flex-jaa">
             <div class="item-data" v-for="(item, index) in zuji.children" :key="index">
-              {{ item.name }}：{{ item.value }} bar
+              {{ item.name }}：{{ item.value }} {{item.unit}}
             </div>
           </div>
         </div>
@@ -30,72 +30,86 @@ export default {
   },
   data () {
     return {
+      // name为大屏显示名称，webName为点位名称（后端传来的参数名），无英文，所以需要用中文做对应判断
       staticData: [
         {
           title: 'A组机',
           children: [
-            { name: 'A1压机吸气', value: '0.01' },
-            { name: 'A2压机吸气', value: '12' },
-            { name: 'A1压机排气', value: '363' },
-            { name: 'A2压机排气', value: '0.1' },
-            { name: 'B1压机吸气', value: '0.12' },
-            { name: 'B2压机吸气', value: '0.11' },
-            { name: 'B1压机排气', value: '0.001' },
-            { name: 'B2压机排气', value: '22' },
+            { name: 'A1压机吸气', webName: 'A1压机吸气压力采集值', value: '0.01', unit: 'bar' },
+            { name: 'A2压机吸气', webName: 'A2压机吸气压力采集值', value: '12', unit: 'bar' },
+            { name: 'A1压机排气', webName: 'A1压机排气压力采集值', value: '363', unit: 'bar' },
+            { name: 'A2压机排气', webName: 'A2压机排气压力采集值', value: '0.1', unit: 'bar' },
+            { name: 'B1压机吸气', webName: 'B1压机吸气压力采集值', value: '0.12', unit: 'bar' },
+            { name: 'B2压机吸气', webName: 'B2压机吸气压力采集值', value: '0.11', unit: 'bar' },
+            { name: 'B1压机排气', webName: 'B1压机排气压力采集值', value: '0.001', unit: 'bar' },
+            { name: 'B2压机排气', webName: 'B2压机排气压力采集值', value: '22', unit: 'bar' },
           ]
         },
         {
           title: 'C组机',
           children: [
-            { name: 'C1压机吸气', value: '0.01' },
-            { name: 'C2压机吸气', value: '3' },
-            { name: 'C1压机排气', value: '12' },
-            { name: 'C2压机排气', value: '52' },
-            { name: 'D1压机吸气', value: '22' },
-            { name: 'D2压机吸气', value: '6.555' },
-            { name: 'D1压机排气', value: '2.23' },
-            { name: 'D2压机排气', value: '0.001' },
+            { name: 'C1压机吸气', webName: 'C1压机吸气压力采集值', value: '0.01', unit: 'bar' },
+            { name: 'C2压机吸气', webName: 'C2压机吸气压力采集值', value: '3', unit: 'bar' },
+            { name: 'C1压机排气', webName: 'C1压机排气压力采集值', value: '12', unit: 'bar' },
+            { name: 'C2压机排气', webName: 'C2压机排气压力采集值', value: '52', unit: 'bar' },
+            { name: 'D1压机吸气', webName: 'D1压机吸气压力采集值', value: '22', unit: 'bar' },
+            { name: 'D2压机吸气', webName: 'D2压机吸气压力采集值', value: '6.555', unit: 'bar' },
+            { name: 'D1压机排气', webName: 'D1压机排气压力采集值', value: '2.23', unit: 'bar' },
+            { name: 'D2压机排气', webName: 'D2压机排气压力采集值', value: '0.001', unit: 'bar' },
           ]
         },
         {
           title: 'E组机',
           children: [
-            { name: 'E1压机吸气', value: '' },
-            { name: 'E2压机吸气', value: '' },
-            { name: 'E1压机排气', value: '' },
-            { name: 'E2压机排气', value: '' },
-            { name: 'F1压机吸气', value: '' },
-            { name: 'F2压机吸气', value: '' },
-            { name: 'F1压机排气', value: '' },
-            { name: 'F2压机排气', value: '' },
+            { name: 'E1压机吸气', webName: 'E1压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'E2压机吸气', webName: 'E2压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'E1压机排气', webName: 'E1压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'E2压机排气', webName: 'E2压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'F1压机吸气', webName: 'F1压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'F2压机吸气', webName: 'F2压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'F1压机排气', webName: 'F1压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'F2压机排气', webName: 'F2压机排气压力采集值', value: '', unit: 'bar' },
           ]
         },
         {
           title: 'G组机',
           children: [
-            { name: 'G1压机吸气', value: '' },
-            { name: 'G2压机吸气', value: '' },
-            { name: 'G1压机排气', value: '' },
-            { name: 'G2压机排气', value: '' },
-            { name: 'H1压机吸气', value: '' },
-            { name: 'H2压机吸气', value: '' },
-            { name: 'H1压机排气', value: '' },
-            { name: 'H2压机排气', value: '' },
+            { name: 'G1压机吸气', webName: 'G1压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'G2压机吸气', webName: 'G2压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'G1压机排气', webName: 'G1压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'G2压机排气', webName: 'G2压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'H1压机吸气', webName: 'H1压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'H2压机吸气', webName: 'H2压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'H1压机排气', webName: 'H1压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'H2压机排气', webName: 'H2压机排气压力采集值', value: '', unit: 'bar' },
           ]
         },
         {
           title: 'I机组',
           children: [
-            { name: 'I1压机吸气', value: '' },
-            { name: 'I2压机吸气', value: '' },
-            { name: 'I1压机排气', value: '' },
-            { name: 'I2压机排气', value: '' },
-            { name: 'J1压机吸气', value: '' },
-            { name: 'J2压机吸气', value: '' },
-            { name: 'J1压机排气', value: '' },
-            { name: 'J2压机排气', value: '' },
+            { name: 'I1压机吸气', webName: 'I1压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'I2压机吸气', webName: 'I2压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'I1压机排气', webName: 'I1压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'I2压机排气', webName: 'I2压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'J1压机吸气', webName: 'J1压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'J2压机吸气', webName: 'J2压机吸气压力采集值', value: '', unit: 'bar' },
+            { name: 'J1压机排气', webName: 'J1压机排气压力采集值', value: '', unit: 'bar' },
+            { name: 'J2压机排气', webName: 'J2压机排气压力采集值', value: '', unit: 'bar' },
           ]
         },
+        {
+          title: '',
+          children: [
+            { name: '氧浓度1', webName: '氧浓度1采集值', value: '', unit: '%' },
+            { name: '氧浓度2', webName: '氧浓度2采集值', value: '', unit: '%' },
+            { name: '氧浓度3', webName: '氧浓度3采集值', value: '', unit: '%' },
+            { name: '氧浓度4', webName: '氧浓度4采集值', value: '', unit: '%' },
+            { name: '前风道变频器', webName: '前风道鼓风变频器HZ', value: '', unit: 'Hz' },
+            { name: '后风道变频器', webName: '后风道鼓风变频器HZ', value: '', unit: 'Hz' },
+            { name: '压差1', webName: '压差1采集值', value: '', unit: 'Pa' },
+            { name: '压差2', webName: '压差2采集值', value: '', unit: 'Pa' },
+          ]
+        }
       ],
       raelDate: []
     }
@@ -118,10 +132,12 @@ export default {
     changeData(newValue){
       var newArr = this.staticData.map(res=>{
         var childrenArr = res.children.map(item=>{
-          var findObj = newValue.find(val=>val.Name === item.name+'压力采集值')
+          var findObj = newValue.find(val=>val.Name === item.webName)
+          // 如果页面为“-”则表示数据没有找到
           return {
             name: item.name,
-            value: findObj.Value
+            value: findObj?findObj.Value:'-',
+            unit: item.unit
           }
         })
         return {
@@ -129,8 +145,8 @@ export default {
           children: childrenArr
         }
       })
-      // this.raelDate = newArr
-      this.raelDate = this.staticData
+      this.raelDate = newArr
+      // this.raelDate = this.staticData
       // console.log(this.raelDate)
     }
   }
@@ -154,6 +170,8 @@ export default {
         color: #FEFFFE;
         font-size: 10px;
         .item-title{
+          height: 15px;
+          line-height: 15px;
           text-align: center;
         }
         .children-con{

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -60,7 +60,7 @@ export default {
       this.uOption = {
         color: ['#0102c8', '#cfa809', '#49e4e9'], // legend对应颜色
         grid: {
-          // top: '70',
+          top: '80',
           left: '46',
           bottom: '40'
         },