Merge branch 'master' of http://49.4.49.126:3000/GYEE_R.D/neic

src/assets/style/main.css

@@ -56,12 +56,12 @@ body,
   border-color: black !important;
 } 
 .el-tabs__item:hover{
-  background-color: rgb(29,106,235) !important;
-}
-.el-tabs__item.is-active{
   background-color: rgb(36,36,36) !important;
   border-color: black !important;
 }
+.el-tabs__item.is-active{
+  background-color: rgb(29,106,235) !important;
+}
 
 
 .el-table--border:after,.el-table--group:after,.el-table:before {

src/components/area/AlarmArea.vue

@@ -18,6 +18,8 @@
                 'border-bottom':'solid 1px black'
               }"
       :cell-style="{ background: '#1e1e1e', color: 'rgb(220,220,220)',padding:'3px',fontSize:'12px'}"
+      @row-dblclick="itemDblclick"
+      @cell-click="itemChecked"
       >
       <el-table-column
         prop="lastUpdateTime"
@@ -35,38 +37,36 @@
         prop="address"
         align="center"
         label="确认">
-        <input type="checkbox" disabled="disabled" />
+        <input type="checkbox"/>
       </el-table-column>
     </el-table>
     </div>
-<!--     <div>
-      <table class="table-main">
-        <tr>
-          <td width="150px">时间</td>
-          <td idth="400px">描述</td>
-          <td width="50px">确认</td>
-        </tr>
-        <tr v-for="v in values" :key="v">
-          <td width="150px">{{ v.lastUpdateTime }}</td>
-          <td width="400px">{{ v.alertText }}</td>
-          <td width="50px"><input type="checkbox" disabled="disabled" /></td>
-        </tr>
-      </table>
-    </div> -->
   </gy-card>
+  <WindturbineDetailPages
+    v-model="dialogVisible"
+    :windturbine="currentWindturbine"
+  ></WindturbineDetailPages>
 </template>
 
 <script>
 import MessageBridge from "../../assets/script/MessageBridge";
+import WindturbineDetailPages from '../area/windturbine/WindturbineDetailPages.vue'
+import BackgroundData from '../../assets/script/BackgroundData'
+
 export default {
   name: "AlarmArea",
+  components:{
+    WindturbineDetailPages,
+  },
   created: function () {
     this.initData();
   },
   props: {},
   data() {
     return {
-      values: ['-','-','-','-','-','-']
+      values: ['-','-','-','-','-','-'],
+      dialogVisible:false,
+      currentWindturbine: {},
     };
   },
   methods: {
@@ -87,6 +87,28 @@ export default {
       }
       console.log(val);
     },
+    /* 行双击 */
+    itemDblclick(row){
+      if(row.category1!='FJ')return;
+      this.dialogVisible = true;
+      this.currentWindturbine=row;
+    },
+    /* 报警确认 */
+    itemChecked(row, column){
+      if(column.label!="确认")return;
+      var bd = BackgroundData.getInstance();
+      if(!bd.LoginUser){
+        this.$notify({
+          title: "请登录",
+          message: "确认报警需要先登录！",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+        });
+        return;
+      }
+      console.log(row);
+    }
   },
 };
 </script>

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,73 +51,162 @@
         </tr>
       </table>
     </div>
+    <!-- <div>{{alarms[0].alertText}}</div> -->
   </div>
 </template>
 
 <script>
-import BackgroundData from "../../../assets/script/BackgroundData";
-
-export default {
-  name: "BasicInformationDetail",
-  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 dataList = []
+        let warnList = []
+        let date1 = {
+          type: 1,
+          alertText :[]
+        }
+        let date2 = {
+          type: 2,
+          alertText :[]
+        }
+        let date3 = {
+          type: 3,
+          alertText :[]
+        }
+        let date4 = {
+          type: 4,
+          alertText :[]
+        }
+        let date5 = {
+          type: 5,
+          alertText :[]
+        }
+        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) : ''
+        })
+        warnList.forEach(item =>{
+          switch (item.type) {
+            case 1:
+              date1.alertText.push(item.alertText)
+              break;
+            case 2:
+              date2.alertText.push(item.alertText)
+              break;
+            case 3:
+              date3.alertText.push(item.alertText)
+              break;
+            case 4:
+              date4.alertText.push(item.alertText)
+              break;
+            case 5:
+              date5.alertText.push(item.alertText)
+              break;
+          }
+        })
+        dataList.push(date1)
+        dataList.push(date2)
+        dataList.push(date3)
+        dataList.push(date4)
+        dataList.push(date5)
+        this.warnList = dataList
+      },
+      /* 刷新数据 */
+      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>
@@ -158,4 +249,4 @@ th {
 table{
   margin-top: 30px;
 }
-</style>
+</style>

src/components/area/windturbine/WindturbineDetailPages.vue

@@ -30,6 +30,7 @@
         <div>告警内容：</div>
         <div>通讯中断</div>
       </div> -->
+    <div style="background-color: black;margin-top:-30px;margin-left:-10px;margin-right:-10px;margin-bottom:-30px;">
       <table width="99.8%">
         <tr>
           <td>
@@ -69,10 +70,15 @@
       </table>
 
       <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail>
-      <!-- 
+      <!--<div class="worning1">
+        <Worning></Worning>
+      </div>
+      <div class="worning2">
+        <Worning></Worning>
+      </div>
       <el-tabs type="border-card" tab-position="bottom" stretch="true">
         <el-tab-pane label="基本信息">
-          <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail>
+          <BasicInformationDetail ref="BasicInfo" :alarms="alarms"></BasicInformationDetail>
         </el-tab-pane>
         <el-tab-pane label="机舱信息" disabled>
         </el-tab-pane>
@@ -90,6 +96,7 @@
         </el-tab-pane>
       </el-tabs> -->
     </div>
+    </div>
   </el-dialog>
 </template>
 
@@ -99,11 +106,12 @@ import BasicInformationDetail from "./BasicInformationDetail.vue";
 import UniformCodes from "../../../assets/script/UniformCodes";
 import {config} from '../../../config';
 import axios from 'axios';
-import BackgroundData from "../../../assets/script/BackgroundData"
-
+import BackgroundData from "../../../assets/script/BackgroundData";
+// import Worning from "./warning.vue"
 export default {
   components: {
     BasicInformationDetail,
+    // Worning,
   },
   props: {
     windturbine: Object,
@@ -114,6 +122,7 @@ export default {
       line:"",
       alarmTime:"",
       alarmContent:"",
+      alarms:[],
     };
   },
   created() {
@@ -143,12 +152,15 @@ export default {
     initData(){
       axios.get(`http://${config.calcUrl}/windturbine/line/${this.windturbine.windturbineId}`)
       .then(msg=>this.line=msg.data);
-      axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=1`)
+      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;
+        this.$refs.BasicInfo.alarmd(this.alarms);
+        console.log(this.alarms)
       })
       .catch(err=>{
         console.log(err);

src/components/area/windturbine/control/ControlMatrixCard.vue

@@ -247,7 +247,7 @@ export default {
   color:rgb(0, 0, 0,0.5);
 }
 .card-left-unselect-0 {
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(255, 255, 255, .5);
   color:rgb(0, 0, 0);
 }
 /*  右边卡片选中和未选中 */
@@ -255,34 +255,36 @@ export default {
   border-left: 2px dashed rgb(255, 255, 255, 0.5);
 }
 .card-right-unselect-0 {
-  border-left: 2px dashed rgb(255, 255, 255);
+  border-left: 2px dashed rgb(255, 255, 255, .5);
+  background-color: rgb(255, 255, 255, .15);
 }
 
 /* ***********颜色************ */
 /* *********************** */
 /*  最外层卡片选中和未选中 */
 .card-select-1 {
-  border: 2px solid rgb(121, 73, 81, 0.5);
+  border: 2px solid rgb(197, 48, 200, 0.5);
 }
 .card-unselect-1 {
-  border: 2px solid rgb(121, 73, 81);
+  border: 2px solid rgb(197, 48, 200);
 }
 .card-select-1 {
-  border: 2px solid rgb(121, 73, 81, 0.5);
+  border: 2px solid rgb(197, 48, 200, 0.5);
 }
 /*  左边卡片选中和未选中 */
 .card-left-select-1 {
-  background-color: rgb(121, 73, 81, 0.5);
+  background-color: rgb(197, 48, 200, 0.5);
 }
 .card-left-unselect-1 {
-  background-color: rgb(121, 73, 81);
+  background-color: rgb(197, 48, 200, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-1 {
-  border-left: 2px dashed rgb(121, 73, 81, 0.5);
+  border-left: 2px dashed rgb(197, 48, 200, 0.5);
 }
 .card-right-unselect-1 {
-  border-left: 2px dashed rgb(121, 73, 81);
+  border-left: 2px dashed rgb(197, 48, 200, .5);
+  background-color: rgb(197, 48, 200, .15);
 }
 
 /* ***********颜色************ */
@@ -302,14 +304,15 @@ export default {
   background-color: rgb(05, 187, 76, 0.5);
 }
 .card-left-unselect-2 {
-  background-color: rgb(05, 187, 76);
+  background-color: rgb(05, 187, 76, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-2 {
   border-left: 2px dashed rgb(05, 187, 76, 0.5);
 }
 .card-right-unselect-2 {
-  border-left: 2px dashed rgb(05, 187, 76);
+  border-left: 2px dashed rgb(05, 187, 76, .5);
+  background-color: rgb(05, 187, 76,.15);
 }
 
 /* ***********颜色************ */
@@ -329,14 +332,15 @@ export default {
   background-color: rgb(05, 187, 76, 0.5);
 }
 .card-left-unselect-3 {
-  background-color: rgb(05, 187, 76);
+  background-color: rgb(05, 187, 76, 0.5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-3 {
   border-left: 2px dashed rgb(05, 187, 76, 0.5);
 }
 .card-right-unselect-3 {
-  border-left: 2px dashed rgb(05, 187, 76);
+  border-left: 2px dashed rgba(88, 160, 115, 0.5);
+  background-color: rgb(05, 187, 76,.15);
 }
 
 /* ***********颜色************ */
@@ -356,14 +360,15 @@ export default {
   background-color: rgb(75, 85, 174, 0.5);
 }
 .card-left-unselect-4 {
-  background-color: rgb(75, 85, 174);
+  background-color: rgb(75, 85, 174, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-4 {
   border-left: 2px dashed rgb(75, 85, 174, 0.5);
 }
 .card-right-unselect-4 {
-  border-left: 2px dashed rgb(75, 85, 174);
+  border-left: 2px dashed rgb(75, 85, 174, .5);
+  background-color: rgb(75, 85, 174, .15);
 }
 
 /* ***********颜色************ */
@@ -383,14 +388,15 @@ export default {
   background-color: rgb(186, 50, 55, 0.5);
 }
 .card-left-unselect-5 {
-  background-color: rgb(186, 50, 55);
+  background-color: rgb(186, 50, 55,.5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-5 {
   border-left: 2px dashed rgb(186, 50, 55, 0.5);
 }
 .card-right-unselect-5 {
-  border-left: 2px dashed rgb(186, 50, 55);
+  border-left: 2px dashed rgb(186, 50, 55, .5);
+  background-color: rgb(186, 50, 55,.15);
 }
 
 /* ***********颜色************ */
@@ -410,40 +416,42 @@ export default {
   background-color: rgb(225, 125, 36, 0.5);
 }
 .card-left-unselect-6 {
-  background-color: rgb(225, 125, 36);
+  background-color: rgb(225, 125, 36, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-6 {
   border-left: 2px dashed rgb(225, 125, 36, 0.5);
 }
 .card-right-unselect-6 {
-  border-left: 2px dashed rgb(225, 125, 36);
+  border-left: 2px dashed rgb(225, 125, 36, .5);
+  background-color: rgb(225, 125, 36, .15);
 }
 
 /* ***********颜色************ */
 /* *********************** *
 /*  最外层卡片选中和未选中 */
 .card-select-7 {
-  border: 2px solid rgb(159, 163, 165, 0.5);
+  border: 2px solid rgb(96, 103, 105, 0.5);
 }
 .card-unselect-7 {
-  border: 2px solid rgb(159, 163, 165);
+  border: 2px solid rgb(96, 103, 105);
 }
 .card-select-7 {
-  border: 2px solid rgb(159, 163, 165, 0.5);
+  border: 2px solid rgb(96, 103, 105, 0.5);
 }
 /*  左边卡片选中和未选中 */
 .card-left-select-7 {
-  background-color: rgb(159, 163, 165, 0.5);
+  background-color: rgb(96, 103, 105, 0.5);
 }
 .card-left-unselect-7 {
-  background-color: rgb(159, 163, 165);
+  background-color: rgb(96, 103, 105, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-7 {
-  border-left: 2px dashed rgb(159, 163, 165, 0.5);
+  border-left: 2px dashed rgb(96, 103, 105, 0.5);
 }
 .card-right-unselect-7 {
-  border-left: 2px dashed rgb(159, 163, 165);
+  border-left: 2px dashed rgb(96, 103, 105, .5);
+  background-color: rgb(96, 103, 105, .15);
 }
 </style>

src/components/area/windturbine/problem/ProblemMatrixCard.vue

@@ -238,7 +238,7 @@ export default {
   color:rgb(0, 0, 0,0.5);
 }
 .card-left-unselect-0 {
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(255, 255, 255, .5);
   color:rgb(0, 0, 0);
 }
 /*  右边卡片选中和未选中 */
@@ -246,34 +246,36 @@ export default {
   border-left: 2px dashed rgb(255, 255, 255, 0.5);
 }
 .card-right-unselect-0 {
-  border-left: 2px dashed rgb(255, 255, 255);
+  border-left: 2px dashed rgb(255, 255, 255, .5);
+  background-color: rgb(255, 255, 255, .15);
 }
 
 /* ***********颜色************ */
 /* *********************** */
 /*  最外层卡片选中和未选中 */
 .card-select-1 {
-  border: 2px solid rgb(121, 73, 81, 0.5);
+  border: 2px solid rgb(197, 48, 200, 0.5);
 }
 .card-unselect-1 {
-  border: 2px solid rgb(121, 73, 81);
+  border: 2px solid rgb(197, 48, 200);
 }
 .card-select-1 {
-  border: 2px solid rgb(121, 73, 81, 0.5);
+  border: 2px solid rgb(197, 48, 200, 0.5);
 }
 /*  左边卡片选中和未选中 */
 .card-left-select-1 {
-  background-color: rgb(121, 73, 81, 0.5);
+  background-color: rgb(197, 48, 200, 0.5);
 }
 .card-left-unselect-1 {
-  background-color: rgb(121, 73, 81);
+  background-color: rgb(197, 48, 200, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-1 {
-  border-left: 2px dashed rgb(121, 73, 81, 0.5);
+  border-left: 2px dashed rgb(197, 48, 200, 0.5);
 }
 .card-right-unselect-1 {
-  border-left: 2px dashed rgb(121, 73, 81);
+  border-left: 2px dashed rgb(197, 48, 200, .5);
+  background-color: rgb(197, 48, 200, .15);
 }
 
 /* ***********颜色************ */
@@ -293,14 +295,15 @@ export default {
   background-color: rgb(05, 187, 76, 0.5);
 }
 .card-left-unselect-2 {
-  background-color: rgb(05, 187, 76);
+  background-color: rgb(05, 187, 76, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-2 {
   border-left: 2px dashed rgb(05, 187, 76, 0.5);
 }
 .card-right-unselect-2 {
-  border-left: 2px dashed rgb(05, 187, 76);
+  border-left: 2px dashed rgb(05, 187, 76, .5);
+  background-color: rgb(05, 187, 76,.15);
 }
 
 /* ***********颜色************ */
@@ -320,14 +323,15 @@ export default {
   background-color: rgb(05, 187, 76, 0.5);
 }
 .card-left-unselect-3 {
-  background-color: rgb(05, 187, 76);
+  background-color: rgb(05, 187, 76,.5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-3 {
   border-left: 2px dashed rgb(05, 187, 76, 0.5);
 }
 .card-right-unselect-3 {
-  border-left: 2px dashed rgb(05, 187, 76);
+  border-left: 2px dashed rgb(05, 187, 76, .5);
+  background-color: rgb(05, 187, 76,.15);
 }
 
 /* ***********颜色************ */
@@ -347,14 +351,15 @@ export default {
   background-color: rgb(75, 85, 174, 0.5);
 }
 .card-left-unselect-4 {
-  background-color: rgb(75, 85, 174);
+  background-color: rgb(75, 85, 174, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-4 {
   border-left: 2px dashed rgb(75, 85, 174, 0.5);
 }
 .card-right-unselect-4 {
-  border-left: 2px dashed rgb(75, 85, 174);
+  border-left: 2px dashed rgb(75, 85, 174, .5);
+  background-color: rgb(75, 85, 174, .15);
 }
 
 /* ***********颜色************ */
@@ -374,14 +379,15 @@ export default {
   background-color: rgb(186, 50, 55, 0.5);
 }
 .card-left-unselect-5 {
-  background-color: rgb(186, 50, 55);
+  background-color: rgb(186, 50, 55, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-5 {
   border-left: 2px dashed rgb(186, 50, 55, 0.5);
 }
 .card-right-unselect-5 {
-  border-left: 2px dashed rgb(186, 50, 55);
+  border-left: 2px dashed rgb(186, 50, 55, .5);
+  background-color: rgb(186, 50, 55,.15);
 }
 
 /* ***********颜色************ */
@@ -401,40 +407,42 @@ export default {
   background-color: rgb(225, 125, 36, 0.5);
 }
 .card-left-unselect-6 {
-  background-color: rgb(225, 125, 36);
+  background-color: rgb(225, 125, 36, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-6 {
   border-left: 2px dashed rgb(225, 125, 36, 0.5);
 }
 .card-right-unselect-6 {
-  border-left: 2px dashed rgb(225, 125, 36);
+  border-left: 2px dashed rgb(225, 125, 36, .5);
+  background-color: rgb(225, 125, 36, .15);
 }
 
 /* ***********颜色************ */
 /* *********************** *
 /*  最外层卡片选中和未选中 */
 .card-select-7 {
-  border: 2px solid rgb(159, 163, 165, 0.5);
+  border: 2px solid rgb(96, 103, 105, 0.5);
 }
 .card-unselect-7 {
-  border: 2px solid rgb(159, 163, 165);
+  border: 2px solid rgb(96, 103, 105);
 }
 .card-select-7 {
-  border: 2px solid rgb(159, 163, 165, 0.5);
+  border: 2px solid rgb(96, 103, 105, 0.5);
 }
 /*  左边卡片选中和未选中 */
 .card-left-select-7 {
-  background-color: rgb(159, 163, 165, 0.5);
+  background-color: rgb(96, 103, 105, 0.5);
 }
 .card-left-unselect-7 {
-  background-color: rgb(159, 163, 165);
+  background-color: rgb(96, 103, 105, .5);
 }
 /*  右边卡片选中和未选中 */
 .card-right-select-7 {
-  border-left: 2px dashed rgb(159, 163, 165, 0.5);
+  border-left: 2px dashed rgb(96, 103, 105, 0.5);
 }
 .card-right-unselect-7 {
-  border-left: 2px dashed rgb(159, 163, 165);
+  border-left: 2px dashed rgb(96, 103, 105, .5);
+  background-color: rgb(96, 103, 105, .15);
 }
 </style>

src/components/area/windturbine/warning.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="container">
+        <div class="dot"></div>
+        <div class="pulse"></div>
+        <div class="content" v-for="(item , index) in worn" :key="index">{{item}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            worn: Array,
+        },
+    }
+</script>
+<style scoped>
+    @keyframes warn {
+        0% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.0;
+        }
+
+        25% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.1;
+        }
+
+        50% {
+            transform: scale(0.5);
+            -webkit-transform: scale(0.5);
+            opacity: 0.3;
+        }
+
+        75% {
+            transform: scale(0.8);
+            -webkit-transform: scale(0.8);
+            opacity: 0.5;
+        }
+
+        100% {
+            transform: scale(1);
+            -webkit-transform: scale(1);
+            opacity: 0.0;
+        }
+    }
+
+    @keyframes warn1 {
+        0% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.0;
+        }
+
+        25% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.1;
+        }
+
+        50% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.3;
+        }
+
+        75% {
+            transform: scale(0.5);
+            -webkit-transform: scale(0.5);
+            opacity: 0.5;
+        }
+
+        100% {
+            transform: scale(0.8);
+            -webkit-transform: scale(0.8);
+            opacity: 0.0;
+        }
+    }
+
+    .container {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        z-index: 99;
+        /*border: 1px solid #000; hovertree.com */
+    }
+
+    .content{
+        position: relative;
+        display: none;
+        z-index: 9999;
+    }
+
+    .container:hover .content{
+        /* position: absolute;  */
+        padding: 10px;
+        width: 200px;
+        color: #000000;
+        background-color: #ffffff;
+        display: block;
+        min-height: 20px;
+        z-index: 9999;
+        margin-left: 40px;
+    }
+
+    /* 保持大小不变的小圆圈 何问起 */
+    .dot {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        left: 42px;
+        top: 42px;
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        /* border: 2px solid rgba(255,0,0,.5); */
+        border-radius: 50%;
+        z-index: 2;
+        background-color: rgba(255,0,0,.8);
+    }
+
+    /* 产生动画（向外扩散变大）的圆圈  */
+    .pulse {
+        position: absolute;
+        width: 80px;
+        height: 80px;
+        left: 2px;
+        top: 2px;
+        border: 3px solid rgba(255,0,0,.8);
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        z-index: 1;
+        opacity: 0;
+        -webkit-animation: warn 1.5s linear;
+        -moz-animation: warn 1.5s linear;
+        animation: warn 1.5s linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        box-shadow: 1px 1px 15px rgba(255,0,0,.8);
+    }
+</style>