update

src/components/area/windturbine/BasicInformationDetail.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="firstdiv">
-    <img
-      style="float: left; margin-left: 40px; margin-top: 90px;width:50vh;height:25vh;"
-      src="../../../assets/img/WindturbineDetailPages/变桨.png"
-      object-fit="fill"
-    />
+    <div v-for="(item, index) in warnList" :key="index">
+      <div :class="'worning' + item.type">
+        <Worning :worn="item.alertText"></Worning>
+      </div>
+    </div>
+    <img style="float: left; margin-left: 40px; margin-top: 90px;width:50vh;height:25vh;"
+      src="../../../assets/img/WindturbineDetailPages/变桨.png" object-fit="fill" />
     <div class="twodiv">
       <table>
         <tr>
@@ -49,113 +51,187 @@
         </tr>
       </table>
     </div>
+    <!-- <div>{{alarms[0].alertText}}</div> -->
   </div>
 </template>
 
 <script>
-import BackgroundData from "../../../assets/script/BackgroundData";
-
-export default {
-  name: "BasicInformationDetail",
-  props:{
-    alarms:Object,
-  },
-  data() {
-    return {
-      BasicInfo: {},
-      temperatureInfo: new Array() /* 温度信息 */,
-      pitchInfo: new Array() /* 变桨信息 */,
-      generalInfo: new Array() /* 基本信息 */,
-      powerGridInfo: new Array() /* 电网信息 */,
-    };
-  },
-  methods: {
-    start(bi) {
-      this.BasicInfo = bi;
-      this.bindData();
-
-      this.refreshData();
-      this.refreshTimer = setInterval(this.refreshData, 3000);
+  import BackgroundData from "../../../assets/script/BackgroundData";
+  import Worning from "./warning.vue"
+  export default {
+    name: "BasicInformationDetail",
+    components: {
+      Worning,
     },
-    end() {
-      clearInterval(this.refreshTimer);
+    props: {
+      alarms: Array,
     },
-
-    /* 刷新数据 */
-    refreshData() {
-      var bg = BackgroundData.getInstance();
-      bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
+    mounted() {
+      this.show()
+    },
+    data() {
+      return {
+        warnList: [],
+        BasicInfo: {},
+        temperatureInfo: new Array() /* 温度信息 */,
+        pitchInfo: new Array() /* 变桨信息 */,
+        generalInfo: new Array() /* 基本信息 */,
+        powerGridInfo: new Array() /* 电网信息 */,
+      };
     },
+    methods: {
+      show() {
+        // axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`)
+        // .then(msg=>{
+        //   var vs = msg.data;
+        //   if(vs.length<=0)return;
+        //   this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
+        //   this.alarmContent = vs[0].alertText;
+        //   this.alarms = msg.data;
+        //   console.log(this.alarms)
+        // })
+      },
+      start(bi) {
+        this.BasicInfo = bi;
+        this.bindData();
 
-    /* 获得数据 */
-    onMessage(msg) {
-      this.BasicInfo.BasicInfo.forEach((element) => {
-        element.param.forEach((im) => {
-          var val = msg[im.code];
-          if (typeof val !== "undefined") {
-            if (im.unit == "万度") {
-              im.value = (val.doubleValue / 10000).toFixed(2);
-            } else {
-              im.value = val.doubleValue.toFixed(2);
-            }
+        this.refreshData();
+        this.refreshTimer = setInterval(this.refreshData, 3000);
+      },
+      end() {
+        clearInterval(this.refreshTimer);
+      },
+      alarmd(bi) {
+        let warnList = []
+        bi.forEach(item => {
+          let data = {}
+          data.alertText = item.alertText
+          if (item.alertText.indexOf("变桨") >= 0) {
+            data.type = 1
+          } else if (item.alertText.indexOf("偏航") >= 0) {
+            data.type = 5
           }
+          else if (item.alertText.indexOf("发电机") >= 0) {
+            data.type = 3
+          }
+          else if (item.alertText.indexOf("齿轮箱") >= 0) {
+            data.type = 2
+          }
+          else if (item.alertText.indexOf("液压") >= 0) {
+            data.type = 4
+          }
+          data.type ? warnList.push(data) : ''
+        })
+        this.warnList = warnList
+      },
+      /* 刷新数据 */
+      refreshData() {
+        var bg = BackgroundData.getInstance();
+        bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
+      },
+
+      /* 获得数据 */
+      onMessage(msg) {
+        this.BasicInfo.BasicInfo.forEach((element) => {
+          element.param.forEach((im) => {
+            var val = msg[im.code];
+            if (typeof val !== "undefined") {
+              if (im.unit == "万度") {
+                im.value = (val.doubleValue / 10000).toFixed(2);
+              } else {
+                im.value = val.doubleValue.toFixed(2);
+              }
+            }
+          });
         });
-      });
-      console.log(msg);
-    },
+        console.log(msg);
+      },
 
-    bindData() {
-      this.BasicInfo.BasicInfo.forEach((element) => {
-        if (element.tag == "基本信息") {
-          this.generalInfo = element.param;
-        } else if (element.tag == "温度信息") {
-          this.temperatureInfo = element.param;
-        } else if (element.tag == "电网信息") {
-          this.powerGridInfo = element.param;
-        } else if (element.tag == "桨叶信息") {
-          this.pitchInfo = element.param;
-        }
-      });
+      bindData() {
+        this.BasicInfo.BasicInfo.forEach((element) => {
+          if (element.tag == "基本信息") {
+            this.generalInfo = element.param;
+          } else if (element.tag == "温度信息") {
+            this.temperatureInfo = element.param;
+          } else if (element.tag == "电网信息") {
+            this.powerGridInfo = element.param;
+          } else if (element.tag == "桨叶信息") {
+            this.pitchInfo = element.param;
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped>
-.firstdiv {
-  height: 50vh;
-}
-.onediv {
-  float: right;
-  margin-right: 30px;
-}
-.twodiv {
-  float: right;
-  margin-right: 30px;
-}
-td:nth-child(1) {
-  height: 25px;
-  width: 130px;
-  text-align: right;
-}
-td:nth-child(2) {
-  width: 78px;
-  text-align: right;
-  color: rgb(5, 176, 71);
-}
-td:nth-child(3) {
-  text-align: center;
-  width: 30px;
-}
-tr:nth-child(1) {
-  font-size: 20px;
-  width: 90px;
-  text-align: right;
-}
-th {
-  height: 40px;
-}
-table{
-  margin-top: 30px;
-}
-</style>
+  .firstdiv {
+    height: 50vh;
+  }
+
+  .onediv {
+    float: right;
+    margin-right: 30px;
+  }
+
+  .twodiv {
+    float: right;
+    margin-right: 30px;
+  }
+
+  td:nth-child(1) {
+    height: 25px;
+    width: 130px;
+    text-align: right;
+  }
+
+  td:nth-child(2) {
+    width: 78px;
+    text-align: right;
+    color: rgb(5, 176, 71);
+  }
+
+  td:nth-child(3) {
+    text-align: center;
+    width: 30px;
+  }
+
+  tr:nth-child(1) {
+    font-size: 20px;
+    width: 90px;
+    text-align: right;
+  }
+
+  th {
+    height: 40px;
+  }
+
+  table {
+    margin-top: 30px;
+  }
+  .worning1{
+    position: absolute;
+    top: 143px;
+    left: 119px;
+  }
+  .worning2{
+    position: absolute;
+    top: 210px;
+    left: 282px;
+  }
+  .worning3{
+    position: absolute;
+    top: 219px;
+    left: 348px;
+  }
+  .worning4{
+    position: absolute;
+    top: 273px;
+    left: 296px;
+  }
+  .worning5{
+    position: absolute;
+    top: 287px;
+    left: 252px;
+  }
+</style>

src/components/area/windturbine/WindturbineDetailPages.vue

@@ -46,12 +46,12 @@
           </td>
         </tr>
       </table>
-      <div class="worning1">
+      <!-- <div class="worning1">
         <Worning></Worning>
       </div>
       <div class="worning2">
         <Worning></Worning>
-      </div>
+      </div> -->
       <el-tabs type="border-card" tab-position="bottom" stretch="true">
         <el-tab-pane label="基本信息">
           <BasicInformationDetail ref="BasicInfo" :alarms="alarms"></BasicInformationDetail>
@@ -89,12 +89,12 @@ import UniformCodes from "../../../assets/script/UniformCodes";
 import {config} from '../../../config';
 import axios from 'axios';
 import BackgroundData from "../../../assets/script/BackgroundData";
-import Worning from "./warning.vue"
+// import Worning from "./warning.vue"
 export default {
   components: {
     YawDetail, 
     BasicInformationDetail,
-    Worning,
+    // Worning,
   },
   props: {
     windturbine: Object,
@@ -105,7 +105,7 @@ export default {
       line:"",
       alarmTime:"",
       alarmContent:"",
-      alarms:{},
+      alarms:[],
     };
   },
   created() {
@@ -142,6 +142,8 @@ export default {
         this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
         this.alarmContent = vs[0].alertText;
         this.alarms = msg.data;
+        this.$refs.BasicInfo.alarmd(this.alarms);
+        console.log(this.alarms)
       })
       .catch(err=>{
         console.log(err);
@@ -175,14 +177,4 @@ td {
 el-tabs {
   background-color: black;
 }
-.worning1{
-  position: absolute;
-  top: 202px;
-  left: 114px;
-}
-.worning2{
-  position: absolute;
-  top: 215px;
-  left: 295px;
-}
 </style>

src/components/area/windturbine/warning.vue

@@ -2,10 +2,17 @@
     <div class="container">
         <div class="dot"></div>
         <div class="pulse"></div>
+        <div class="content">{{worn}}</div>
     </div>
 </template>
 
-
+<script>
+    export default {
+        props: {
+            worn: String,
+        },
+    }
+</script>
 <style scoped>
     @keyframes warn {
         0% {
@@ -78,9 +85,17 @@
         /*border: 1px solid #000; hovertree.com */
     }
 
-    .container:hover{
-        
-        background-color: yellow;
+    .content{
+        display: none;
+    }
+
+    .container:hover .content{
+        padding: 10px;
+        width: 200px;
+        color: #000000;
+        background-color: #ffffff;
+        display: block;
+        min-height: 20px;
     }
 
     /* 保持大小不变的小圆圈 何问起 */