风机详情界面

src/assets/style/main.css

@@ -40,4 +40,22 @@ body,
 .el-input__inner{
   background-color: rgb(100,100,100) !important;
   color: rgb(220, 220, 220) !important;
+}
+.el-tabs{
+  background-color: black !important;
+  border: none !important;
+  color: rgb(220,220,220) !important;
+}
+.el-tabs__item{
+  background-color: black !important;
+  border: none !important;
+  color: rgb(220,220,220) !important;
+} 
+/* .el-tabs__item:hover{
+  background-color: black !important;
+  border: none !important;
+} */
+.el-tabs__item.is-active{
+  background-color: rgb(29,106,235) !important;
+  border: none !important;
 }

src/components/CenterPage.vue

@@ -35,6 +35,7 @@
         </el-row>
       </el-col>
     </el-row>
+  <WindturbineDetailPages v-model="dialogVisible"></WindturbineDetailPages>
   </div>
 </template>
 <script>
@@ -44,8 +45,21 @@ import ControlArea from "./area/ControlArea.vue";
 import LabelArea from "./area/LabelArea.vue";
 import ProblemArea from "./area/ProblemArea.vue";
 import RecommendedArea from "./area/RecommendedArea.vue";
+import WindturbineDetailPages from "./area/windturbine/WindturbineDetailPages.vue"
+/* import wtbdp from './area/wtbDetailPages'; */
 
 export default {
+  data(){
+    return{
+      dialogVisible:false
+    }
+  },
+  mounted(){
+    /* var self=this;
+    wtbdp.$on("evnt",function(){
+      self.dialogVisible=true;
+    }); */
+  },
   components: {
     AlarmArea,
     CheckArea,
@@ -53,6 +67,7 @@ export default {
     LabelArea,
     ProblemArea,
     RecommendedArea,
+    WindturbineDetailPages
   },
   props: {
     /* temp: {

src/components/area/windturbine/BasicInformationDetail.vue

@@ -0,0 +1,205 @@
+<template>
+<div class="firstdiv">
+  <img
+    style="float: left;margin-left:30px;margin-top:100px;"
+    src="../../../assets/img/WindturbineDetailPages/变桨.png"
+    object-fit="fill"
+  />
+  <div class="twodiv">
+  <table>
+    <tr>
+      <th>温度信息</th>
+    </tr>
+    <tr>
+      <td>齿轮箱轴1温</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>齿轮箱轴2温</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>齿轮箱油温</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>电机轴承A温</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>电机轴承B温</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>机舱温度</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>液压油温度</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>冷却风温度</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>环境温度</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+    <tr>
+      <td>电机滑环温度</td>
+      <td>-200.00</td>
+      <td>°C</td>
+    </tr>
+  </table>
+  <table>
+    <tr>
+      <th>变桨信息</th>
+    </tr>
+    <tr>
+      <td>叶片1偏角</td>
+      <td>0.02</td>
+      <td>度</td>
+    </tr>
+    <tr>
+      <td>叶片2偏角</td>
+      <td>0.02</td>
+      <td>度</td>
+    </tr>
+    <tr>
+      <td>叶片3偏角</td>
+      <td>0.02</td>
+      <td>度</td>
+    </tr>
+  </table>
+  </div>
+  <div class="onediv">
+  <table>
+    <tr>
+      <th>基本信息</th>
+    </tr>
+    <tr>
+      <td>有功功率</td>
+      <td>189.73</td>
+      <td>Kw</td>
+    </tr>
+    <tr>
+      <td>风速</td>
+      <td>28.07</td>
+      <td>m/s</td>
+    </tr>
+    <tr>
+      <td>发电机转速</td>
+      <td>1135.40</td>
+      <td>rp</td>
+    </tr>
+    <tr>
+      <td>转子转速</td>
+      <td>11.39</td>
+      <td>rp</td>
+    </tr>
+    <tr>
+      <td>偏航位置</td>
+      <td>110.61</td>
+      <td>度</td>
+    </tr>
+    <tr>
+      <td></td>
+    </tr>
+        <tr>
+      <td></td>
+    </tr>
+  </table>
+  <table>
+    <tr>
+      <th>电网信息</th>
+    </tr>
+    <tr>
+      <td>U1项绕组电压</td>
+      <td>384.90</td>
+      <td>V</td>
+    </tr>
+    <tr>
+      <td>U1项绕组电流</td>
+      <td>179.00</td>
+      <td>A</td>
+    </tr>
+    <tr>
+      <td>电网无功功率</td>
+      <td>0.01</td>
+      <td>kw</td>
+    </tr>
+    <tr>
+      <td>功率因数</td>
+      <td>0.95</td>
+    </tr>
+    <tr>
+      <td>频率</td>
+      <td>49.97</td>
+      <td>Hz</td>
+    </tr>
+    <tr>
+      <td>总发电量</td>
+      <td>1598.14</td>
+      <td>万</td>
+    </tr>
+  </table>
+  </div>
+  </div>
+</template>
+<script>
+
+export default {
+  
+};
+</script>
+<style scoped>
+ .firstdiv{
+    height: 600px;
+ }
+ .onediv{
+     float: right;
+     margin-right: 80px;
+     margin-top:30px;
+ }
+ .twodiv{
+     float: right;
+     margin-right: 80px;
+     margin-top:30px;
+ }
+ div{
+
+     margin-top: 30px;
+ }
+ td:nth-child(1){
+     height: 30px;
+     width: 90px;
+     text-align: right;
+ }
+ td:nth-child(2){
+     width: 72px;
+     text-align: right;
+     color:rgb(5,176,71);
+ }
+ td:nth-child(3){
+     text-align: center;
+     width: 40px;
+ }
+ tr:nth-child(1){
+     font-size:20px;
+     width: 90px;
+     text-align: right;
+ }
+ th{
+     height: 50px;
+ }
+</style>

src/components/area/windturbine/WindturbineDetailPages.vue

@@ -1,26 +1,116 @@
 <template>
     <el-dialog
-    v-show="visible"
   title="风机详情"
   width="80%"
-  :show-close	="false">
-  <span>这是一段信息</span>
+  top="12vh"
+  >
+  <div style="background-color:black;">
+    <!-- <div class="titeldiv">
+      <div class="chunkdiv" width="15%">
+        <img src="../../../assets/img/WindturbineDetailPages/pic_01.png"/>
+        <div>MA B401</div>
+      </div>
+      <div class="chunkdiv" width="15%">
+        <div>所属线路&emsp;</div>
+        <div>某某某1线</div>
+      </div>
+      <div class="chunkdiv" width="15%">
+        <div>机型&emsp;</div>
+        <div>GW1000</div>
+      </div>
+      <div class="chunkdiv" width="15%">
+        <div>告警时间：</div>
+        <div>2021年5月10日&emsp;12：23：31</div>
+      </div>
+      <div class="chunkdiv" width="15%">
+        <div>告警内容：</div>
+        <div>通讯中断</div>
+      </div> -->
+      <table width="99.8%">
+        <tr>
+          <td>
+        <div class="chunkdiv">
+        <img src="../../../assets/img/WindturbineDetailPages/pic_01.png"/>
+        <div>MA B401</div>
+      </div>
+      </td>
+      <td>
+      <div class="chunkdiv">
+        <div>所属线路&emsp;</div>
+        <div>某某某1线</div>
+      </div>
+      </td>
+      <td>
+      <div class="chunkdiv">
+        <div>机型&emsp;</div>
+        <div>GW1000</div>
+      </div>
+      </td>
+      <td>
+      <div class="chunkdiv">
+        <div>告警时间：</div>
+        <div>2021年5月10日&ensp;12:23:31</div>
+      </div>
+      </td>
+      <td>
+      <div class="chunkdiv">
+        <div>告警内容：</div>
+        <div>通讯中断</div>
+      </div>
+      </td>
+      </tr>
+      </table>
+    
+    <el-tabs type="border-card" tab-position="bottom" stretch=true>
+    <el-tab-pane label="基本信息">
+      <BasicInformationDetail></BasicInformationDetail>
+    </el-tab-pane>
+    <el-tab-pane label="机舱信息">机舱信息</el-tab-pane>
+    <el-tab-pane label="故障信息">故障信息</el-tab-pane>
+    <el-tab-pane label="齿轮箱">齿轮箱</el-tab-pane>
+    <el-tab-pane label="变桨">变桨</el-tab-pane>
+    <el-tab-pane label="偏航">
+      <YawDetail></YawDetail>
+    </el-tab-pane>
+    <el-tab-pane label="液压">液压</el-tab-pane>
+    <el-tab-pane label="发电机">发电机</el-tab-pane>
+  </el-tabs>
+  </div>
 </el-dialog>
 </template>
 
 <script>
+import YawDetail from './YawDetail.vue'
+import BasicInformationDetail from './BasicInformationDetail.vue'
 
 export default{
-  data(){
-    return{
-      visible:false
-    }
-  },
-    props:{
-        
+  components: { 
+    YawDetail,
+    BasicInformationDetail
     },
-    methods:{
-
-    }
 }
 </script>
+<style scoped>
+/*   .titeldiv{
+    display: flex;
+    justify-content: space-around;
+  } */
+  .chunkdiv{
+    display: flex;
+    justify-content: center;
+    background-color:#363636;
+    margin: 1px;
+    padding: 2px;
+    color:rgb(220,220,220);
+  }
+  table{
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+  td{
+    width:20%;
+  }
+  el-tabs{
+    background-color: black;
+  }
+</style>

src/components/area/windturbine/YawDetail.vue

@@ -0,0 +1,54 @@
+<template>
+    <img style="float:left;" src="../../../assets/img/WindturbineDetailPages/偏航.png" object-fit="fill">
+    <table>
+        <tr>
+            <th>状态信息</th>
+        </tr>
+        <tr>
+            <td>左极限位置</td>
+            <td><green></green></td>
+        </tr>
+        <tr>
+            <td>右极限位置</td>
+            <td><red></red></td>
+        </tr>
+    </table>
+        <table>
+        <tr>
+            <th>状态信息</th>
+        </tr>
+        <tr>
+            <td>电机1保护OK</td>
+            <td><green></green></td>
+        </tr>
+        <tr>
+            <td>电机2保护OK</td>
+            <td><green></green></td>
+        </tr>
+    </table>
+        <table>
+        <tr>
+            <th>数值信息</th>
+        </tr>
+        <tr>
+            <td>对风偏差</td>
+            <td>28.07</td>
+            <td>度</td>
+        </tr>
+        <tr>
+            <td>对风偏差角度</td>
+            <td>710.07</td>
+            <td>度</td>
+        </tr>
+    </table>
+</template>
+<script>
+import red from './red.vue'
+import green from './green.vue'
+
+export default{
+    components: {
+        red,green
+    }
+}
+</script>

src/components/area/windturbine/green.vue

@@ -0,0 +1,3 @@
+<template>
+    <img style="float:left;" src="../../../assets/img/WindturbineDetailPages/green.png" object-fit="fill">
+</template>

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

@@ -12,6 +12,7 @@
             : 'card-unselect-' + item.status
         "
         @click="onSelectHandler(item)"
+        @dblclick="sendMsg"
       >
         <div
           class="card-left"
@@ -40,23 +41,36 @@
     </div>
     <div class="bottom"></div>
   </div>
+  <WindturbineDetailPages v-model="dialogVisible"></WindturbineDetailPages>
 </template>
 
 <script>
+/* import wtbdp from "../../wtbDetailPages" */
+import WindturbineDetailPages from "../WindturbineDetailPages.vue"
 export default {
   name: "ControlMatrixCard",
   props: { title: String, type: Number, datas: Object },
   data() {
     return {
       values: [],
+      dialogVisible:true
     };
   },
   created() {},
+  components:{
+    WindturbineDetailPages
+  },
   methods: {
     // 点击卡片事件
     onSelectHandler(item) {
       item.active = !item.active;
     },
+    sendMsg:function(){
+      this.dialogVisible=true;
+    },
+    /* sendMsg:function(){
+      wtbdp.$emit("event","first");
+    }, */
     filter(value, windturbineId) {
       var array = [];
       var flag = false;

src/components/area/windturbine/red.vue

@@ -0,0 +1,3 @@
+<template>
+    <img style="float:left;" src="../../../assets/img/WindturbineDetailPages/red.png" object-fit="fill">
+</template>

src/components/area/wtbDetailPages.js

@@ -0,0 +1,2 @@
+import Vue from 'Vue'
+export default new Vue;