提交

src/pages/eq/view/no-query-detail.vue

 <template lang="pug">
-    .animation
-      .info-title
-        | {{dataForm.name}}
-        el-button(icon='el-icon-close' style='float:right;' type='text' @click='closeQueryDetailVisible')
-      div(style='height:40px; width:100%;padding-top:10px')
-        div(style='width:80px; float:left; line-height:40px; padding-left:10px;') 关联监控:
-      .info-form
-      .info-title 监控点信息
-      .info-form
-        .quDetailM
-          p.leftP 线路站点&nbsp;:&nbsp;&nbsp;
-            span {{dataForm.lineStation}}
-        .quDetailM
-          p.leftP 资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}
-        .quDetailM
-          p.leftP 资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}
-        .quDetailM
-          p.leftP 资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}
-        .quDetailM
-          p.leftP 资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}
-        .quDetailM
-          p.leftP 部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}
-
+.animation
+  .info-title
+    //- | {{ dataForm.name }}
+    | 空调
+    el-button(
+      icon="el-icon-close",
+      style="float: right",
+      type="text",
+      @click="closeQueryDetailVisible"
+    )
+  .info-form(style="text-align: center; border-bottom: 1px solid #c0c0c0")
+    img(src="../../../assets/images/kt.jpg")
+  .info-form(style="border-bottom: 1px solid #c0c0c0")
+    .quDetailM
+      p.leftP 设备名称&nbsp;:&nbsp;&nbsp; 室内机
+    .quDetailM
+      p.leftP 设备编号&nbsp;:&nbsp;&nbsp; CDSLAKS-009
+    .quDetailM
+      p.leftP 设备品牌：&nbsp;:&nbsp;&nbsp;格力
+    .quDetailM
+      p.leftP 设备型号：&nbsp;:&nbsp;&nbsp;晶弘33-1
+    .quDetailM
+      p.leftP 安装日期：&nbsp;:&nbsp;&nbsp;2020-01-04
+      p.leftP 维保日期：&nbsp;:&nbsp;&nbsp;2020-01-15
+  .info-form
+    el-row
+      el-col(:span="8")
+        .switch-warp
+          div(:class="[state == 1 ? 'on' : '']", @click="handleSwitch(1)") 打开
+          div(:class="[state == 2 ? 'on' : '']", @click="handleSwitch(2)") 关闭
+      el-col.text-size(:span="16", flex, justify-content="start")
+        div(style="width: 60px") 频率设置：
+        el-input(size="mini", style="width: 60px", v-model="speed")
+        span &nbsp;转
+        el-button(type="primary", size="mini", style="margin-left: 10px") 设定
+    el-row
+      el-col.text-size(:span="8") 当前已
+        span(v-if="state == 1") 打开
+        span(v-else) 关闭
+      el-col.text-size(:span="10") 当前频率：
+        span(style="color: blue") 2289
+        span &nbsp;转/分
+  .info-state
+    span(style="font-weight: bold") 空调运行状态
+    div
+      span.type 电压：
+      span.value 220 V
+    div
+      span.type 电流：
+      span.value 4 A
+    div
+      span.type 功率因数：
+      span.value 0.8 kw
+    div
+      span.type 功率：
+      span.value 0.8 kw
+    div
+      span.type 电能：
+      span.value 12 kw.h
 </template>
 
 <script>
@@ -32,6 +68,8 @@ export default {
   },
   data() {
     return {
+      speed: '',
+      state: 1,
       video1: 0,
       stationId: localStorage.getItem('stationId'),
       imgUrl: '',
@@ -71,11 +109,58 @@ export default {
 
     closeQueryDetailVisible() {
       this.$emit('closeQ')
+    },
+    handleSwitch(state) {
+      this.state = state
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+.switch-warp {
+  width: 80px;
+  height: 26px;
+  font-size: 12px;
+  line-height: 25px;
+  overflow: hidden;
+  border-radius: 13px;
+  background: #d3d3d3;
+  border: 1px solid rgba(0, 0, 0, 0.03);
+  box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  div {
+    width: 39px;
+    height: 24px;
+    line-height: 24px;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+  }
+  div.on {
+    background: #4cb527;
+    color: #fff;
+    border-radius: 13px;
+    border: 1px solid rgba(23, 41, 71, 0.02);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
+      0px 2px 0px 0px rgba(255, 255, 255, 0.15);
+  }
+}
+.text-size {
+  font-size: 12px;
+  line-height: 28px;
+}
+.info-state {
+  padding: 0 10px 10px;
+  .type {
+    font-size: 14px;
+    margin: 5px 0 0 10px;
+    display: inline-block;
+    width: 85px;
+  }
+  .value {
+    color: #47b320;
+  }
+}
 .el-table__header {
   width: 100% !important;
 }
@@ -286,7 +371,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r1:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r2 {
@@ -294,7 +379,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r2:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r3 {
@@ -302,7 +387,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r3:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r5 {
@@ -310,7 +395,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r5:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r6 {
@@ -318,7 +403,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r6:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 
@@ -329,7 +414,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r1b:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r2b {
@@ -339,7 +424,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r2b:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r3b {
@@ -349,7 +434,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r3b:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r5b {
@@ -359,7 +444,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r5b:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 .el-icon-wq-r6b {
@@ -369,7 +454,7 @@ export default {
   background-size: 65%;
 }
 .el-icon-wq-r6b:before {
-  content: '';
+  content: "";
   font-size: 16px;
 }
 </style>