update

src/components/area/windturbine/WindturbineDetailPages.vue

@@ -67,7 +67,12 @@
           </td>
         </tr>
       </table>
-
+      <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>
@@ -104,12 +109,13 @@
 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: {
     /* YawDetail, */
     BasicInformationDetail,
+    Worning,
   },
   props: {
     windturbine: Object,
@@ -188,4 +194,14 @@ 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/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,122 @@
+<template>
+    <div class="container">
+        <div class="dot"></div>
+        <div class="pulse"></div>
+    </div>
+</template>
+
+
+<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: relative;
+        width: 40px;
+        height: 40px;
+        /*border: 1px solid #000; hovertree.com */
+    }
+
+    .container:hover{
+        
+        background-color: yellow;
+    }
+
+    /* 保持大小不变的小圆圈 何问起 */
+    .dot {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        left: 42px;
+        top: 42px;
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        border: 2px solid red;
+        border-radius: 50%;
+        z-index: 2;
+        background-color: red;
+    }
+
+    /* 产生动画（向外扩散变大）的圆圈  */
+    .pulse {
+        position: absolute;
+        width: 80px;
+        height: 80px;
+        left: 2px;
+        top: 2px;
+        border: 6px solid red;
+        -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 30px red;
+    }
+</style>