产品检测详情

src/views/demo/productManage/productInfo/index.vue

@@ -135,85 +135,7 @@
 
                 <el-tabs v-model="runDataActiveName" @tab-click="runDataClick">
     <el-tab-pane label="实时数据" name="realData">
-      <h5 style="margin: 20px 0">历史定时任务数据</h5>
-      <div class="topCalc">
-        <div class="temp">
-          <div class="tempName">
-            <div>
-              <img src="../../../../assets/images/temp.png" alt="" style="width:10px;height:15px;">
-            </div>
-            <div>温度 (℃)</div>
-          </div>
-          <div class="tempDetail">
-            <div class="bottom">
-              <div>最高</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-            <div class="Separator"></div>
-            <div class="bottom">
-              <div>最低</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-            <div class="Separator"></div>
-            <div class="bottom">
-              <div>平均</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-          </div>
-        </div>
-
-
-        <div class="temp">
-          <div class="tempName">
-            <div>
-              <img src="../../../../assets/images/wet.png" alt="" style="width:10px;height:15px;">
-            </div>
-            <div>湿度 (%RH)</div>
-          </div>
-          <div class="tempDetail">
-            <div class="bottom">
-              <div>最高</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-            <div class="Separator"></div>
-            <div class="bottom">
-              <div>最低</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-            <div class="Separator"></div>
-            <div class="bottom">
-              <div>平均</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-          </div>
-        </div>
-
-
-        <div class="temp">
-          <div class="tempName">
-            <div>
-              <img src="../../../../assets/images/dew.png" alt="" style="width:10px;height:15px;">
-            </div>
-            <div>露点温度 (℃)</div>
-          </div>
-          <div class="tempDetail">
-            <div class="bottom">
-              <div>最高</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-            <div class="Separator"></div>
-            <div class="bottom">
-              <div>最低</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-            <div class="Separator"></div>
-            <div class="bottom">
-              <div>平均</div>
-              <div style="color:#008775;font-size:16px;font-weight: bolder;">28.4</div>
-            </div>
-          </div>
-        </div>
-      </div>
+       <real-time></real-time>
     </el-tab-pane>
     <el-tab-pane label="历史定时任务" name="hisTask">
                 <h5 style="margin: 20px 0">历史定时任务数据</h5>
@@ -444,162 +366,51 @@
       </el-dialog>
       <addDialog :dialogTitle="'产品基本信息'" ref="addDialog"/>
       <el-dialog title="检测详情" id="dialogStyle" width="800px" :visible.sync="checkDialog">
-        <!-- <detailTable ref="detailTable" :detail-table="checkInfo" :title="''" /> -->
-        <div class="panel-height-add">
-          <div style="padding: 2px">
-            <div class="detBox">
-              <div
-                v-for="(item, i) in checkInfo"
-                :key="i"
-                class="divF"
-                :style="{
-                  'line-height':
-                    (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
-                  height:
-                    (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
-                }"
-              >
-                <div>
-                  <div>{{ item.name }}</div>
-                </div>
-                <div :class="item.name1 == undefined ? 'long' : ''">
-                  <el-tooltip
-                    v-for="(data, len) in item.val"
-                    :key="len"
-                    effect="dark"
-                    :content="data"
-                    :disabled="(data + '').length < 20"
-                    placement="top"
-                  >
-                    <div>{{ data == null ? "" : data }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    effect="dark"
-                    :content="item.name1"
-                    :disabled="(item.name1 + '').length < 13"
-                    placement="top"
-                  >
-                    <div>{{ item.name1 }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    v-for="(data, index) in item.val1"
-                    :key="index"
-                    effect="dark"
-                    :content="data"
-                    :disabled="(data + '').length < 22"
-                    placement="top"
-                  >
-                    <div>{{ data == null ? "" : data }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    effect="dark"
-                    :content="item.name2"
-                    :disabled="(item.name2 + '').length < 13"
-                    placement="top"
-                  >
-                    <div>{{ item.name2 }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    v-for="(data, index) in item.val2"
-                    :key="index"
-                    effect="dark"
-                    :content="data"
-                    :disabled="(data + '').length < 22"
-                    placement="top"
-                  >
-                    <div>{{ data == null ? "" : data }}</div>
-                  </el-tooltip>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="panel-height-add">
-          <div style="padding: 2px">
-            <div class="detBox">
-              <div class="title" v-for="(item, i) in checkInfo1" :key="i">{{item.title}}</div>
-              <div
-                v-for="(item, i) in checkInfo1"
-                :key="i"
-                class="divF"
-                :style="{
-                  'line-height':
-                    (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
-                  height:
-                    (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
-                }"
-              >
-                <div>
-                  <div>{{ item.name }}</div>
-                </div>
-                <div :class="item.name1 == undefined ? 'long' : ''">
-                  <el-tooltip
-                    v-for="(data, len) in item.val"
-                    :key="len"
-                    effect="dark"
-                    :content="data"
-                    :disabled="(data + '').length < 20"
-                    placement="top"
-                  >
-                    <div>{{ data == null ? "" : data }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    effect="dark"
-                    :content="item.name1"
-                    :disabled="(item.name1 + '').length < 13"
-                    placement="top"
-                  >
-                    <div>{{ item.name1 }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    v-for="(data, index) in item.val1"
-                    :key="index"
-                    effect="dark"
-                    :content="data"
-                    :disabled="(data + '').length < 22"
-                    placement="top"
-                  >
-                    <div>{{ data == null ? "" : data }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    effect="dark"
-                    :content="item.name2"
-                    :disabled="(item.name2 + '').length < 13"
-                    placement="top"
-                  >
-                    <div>{{ item.name2 }}</div>
-                  </el-tooltip>
-                </div>
-                <div v-if="item.name1 != undefined">
-                  <el-tooltip
-                    v-for="(data, index) in item.val2"
-                    :key="index"
-                    effect="dark"
-                    :content="data"
-                    :disabled="(data + '').length < 22"
-                    placement="top"
-                  >
-                    <div>{{ data == null ? "" : data }}</div>
-                  </el-tooltip>
-                </div>
-              </div>
-            </div>
-          </div>
+      
+  
+        <table border="1" style="border-collapse: collapse;width:100%" class="detailTableStyle" v-if="detailData">
+         <tr >
+          <td width="20%">检测时间</td>
+          <td colspan="5" width="80%">{{detailData.dataTime}}</td>
+          
+         </tr>
+         <tr>
+          <td width="20%">最高温度(℃)</td>
+          <td width="14%">{{detailData.maxValue}}</td>
+          <td width="20%">最低温度(℃)</td>
+          <td width="13%">{{detailData.minValue}}</td>
+          <td width="20%">平均温度(℃)</td>
+          <td width="13%">{{detailData.avgValue}}</td>
+         </tr>
+         <tr>
+          <td width="20%">最高湿度(%RH)</td>
+          <td width="14%">{{detailData.maxWet}}</td>
+          <td width="20%">最低湿度(%RH)</td>
+          <td width="13%">{{detailData.minWet}}</td>
+          <td width="20%">平均湿度(%RH)</td>
+          <td width="13%">{{detailData.avgWet}}</td>
+         </tr>
+         <tr>
+          <td width="20%">最高露点温度(℃)</td>
+          <td width="14%">{{detailData.maxDew}}</td>
+          <td width="20%">最低露点温度(℃)</td>
+          <td width="13%">{{detailData.minDew}}</td>
+          <td width="20%">平均露点温度(℃)</td>
+          <td width="13%">{{detailData.avgDew}}</td>
+         </tr>
+       </table>
+
+       <div class="sbData"  v-for="(item,index) in sbDetailData" :key="index">
+        <div class="sbTitle">{{item.sign}}</div>
+        <div class="sbDetail">
+          <div class="sbDetailDiv">温度(℃)</div>
+          <div class="sbDetailDiv">{{item.tempValue}}</div>
+          <div class="sbDetailDiv">湿度(%RH)</div>
+          <div class="sbDetailDiv">{{item.wetValue}}</div>
+          <div class="sbDetailDiv">露点温度(℃)</div>
+          <div class="sbDetailDiv">{{item.dewValue}}</div>
         </div>
+       </div>
       </el-dialog>
     </d2-container>
   </div>
@@ -607,11 +418,12 @@
 <script>
 import addDialog from "../compontents/addDialog.vue";
 import api from "@/api";
+import realTime from "./realTime"
 
 import detailTable from "@/components/detailTable/index.vue";
 export default {
   name: "productInfo",
-  components: { detailTable ,addDialog},
+  components: { detailTable ,addDialog,realTime},
   data() {
     return {
       runDataActiveName:'realData',
@@ -626,47 +438,9 @@ export default {
       productData:[{}],
       productData1:[{}],
       activeName: "first",
-      checkInfo: [
-        {
-          name: "检测时间",
-          val: [""],
-        },
-        {
-          name: "最高温度(℃)",
-          val: [""],
-          name1: "最低温度(℃)",
-          val1: [""],
-          name2: "平均温度(℃)",
-          val2: [""],
-        },
-        {
-          name: "最高湿度(%RH)",
-          val: [""],
-          name1: "最低湿度(%RH)",
-          val1: [""],
-          name2: "平均湿度(%RH)",
-          val2: [""],
-        },
-        {
-          name: "最高露点温度(℃)",
-          val: [""],
-          name1: "最低露点温度(℃)",
-          val1: [""],
-          name2: "平均露点温度(℃)",
-          val2: [""],
-        },
-      ],
-      checkInfo1: [
-        {
-          title:'设备1（编号/标识/设备名称）',
-          name: "温度(℃)",
-          val: [""],
-          name1: "湿度(%RH)",
-          val1: [""],
-          name2: "露点温度(℃)",
-          val2: [""],
-        }
-      ],
+      detailData:{},
+      sbDetailData:[],
+     
       basicInfo: [
         {
           name: "产品ID",
@@ -792,54 +566,20 @@ export default {
       console.log(12);
       this.$set(this, "checkDialog", true);
       this.checkDialog = true;
-      this.checkInfo=[
-        {
-          name: "检测时间",
-          val: [row.dataTime],
-        },
-        {
-          name: "最高温度(℃)",
-          val: [row.maxValue],
-          name1: "最低温度(℃)",
-          val1: [row.minValue],
-          name2: "平均温度(℃)",
-          val2: [row.avgValue],
-        },
-        {
-          name: "最高湿度(%RH)",
-          val: [row.maxWet],
-          name1: "最低湿度(%RH)",
-          val1: [row.minWet],
-          name2: "平均湿度(%RH)",
-          val2: [row.avgWet],
-        },
-        {
-          name: "最高露点温度(℃)",
-          val: [row.maxDew],
-          name1: "最低露点温度(℃)",
-          val1: [row.minDew],
-          name2: "平均露点温度(℃)",
-          val2: [row.avgDew],
-        },
-      ]
+   
+      this.detailData=JSON.parse(JSON.stringify(row))
+
+      this.detailData.avgDew=(this.detailData.avgDew).toFixed(2)
+      this.detailData.avgValue=(this.detailData.avgValue).toFixed(2)
+      this.detailData.avgWet=(this.detailData.avgWet).toFixed(2)
+      console.log(row,"ooo")
       api.runDataDetail(row.id)
         .then((res) => {
           if (res.code == 200) {
-            let data=res.data
-            this.checkInfo1=[]
-            data.forEach(item=>{
-              this.checkInfo1.push(
-                {
-                  title:item.sign,
-                  name: "温度(℃)",
-                  val: [item.tempValue],
-                  name1: "湿度(%RH)",
-                  val1: [item.wetValue],
-                  name2: "露点温度(℃)",
-                  val2: [item.dewValue],
-                }
-              )
-            })
+            this.sbDetailData=res.data
+            console.log(res,"检测详情。")
+
+          
           }
         })
         .catch((err) => {
@@ -1106,49 +846,7 @@ export default {
         }
       }
     }
-    .topCalc{
-     display:flex;
-
-    .temp{
-      width: 250px;
-    height: 110px;
-    background-color:rgba(240, 240, 240, 1);
-    border:2px solid rgba(230, 230, 230, 1);
-      display: flex;
-    flex-direction: column;
-    font-size: 12px;
-    margin-right:20px;
   
-    .tempName{
-      height: 35px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color:#000000;
-    border-bottom:2px solid rgba(230, 230, 230, 1);
-
-    
-
-    }
-    .tempDetail{
-    height: 75px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .bottom{
-      height: 50px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    }
-    .Separator{
-      height:15px;
-      border:1px solid rgba(230, 230, 230, 1);
-    }
-    }
-    }
-   
-    }
   }
 }
 ::v-deep .el-tabs {
@@ -1286,4 +984,52 @@ export default {
         cursor: pointer;
     }
   }
+  .detailTableStyle {
+    tr{
+   
+  height:50px;
+  td{
+    border: 1px solid #ccc;
+    text-align: center;
+  }
+    }
+ 
+}
+.sbData{
+
+  height:60px;
+  
+  border: 2px solid rgb(238, 234, 234);
+  margin:10px 0;
+
+  .sbTitle{
+    padding-left:10px;
+    height:30px;
+    background-color:rgba(234, 234, 234, 1);
+  line-height:30px;
+  }
+  .sbDetail{
+    display:flex;
+    height:30px;
+    align-items: center;
+
+   
+    .sbDetailDiv{
+      flex: 1;
+      height:30px;
+      line-height:30px;
+      border-left:1px solid rgba(234, 234, 234, 1);
+      text-align: center;
+    }
+     .sbDetailDiv:first-child{
+     border:none;
+    }
+    .sbDetailDiv:nth-child(odd){
+     background:rgb(245, 243, 243);
+    }
+   
+  }
+}
+
 </style>
+

src/views/demo/productManage/productInfo/realTime/index.vue

@@ -0,0 +1,445 @@
+<template>
+  <div>
+    <h5 style="margin: 20px 0">全部设备平均实时数据</h5>
+    <div class="topCalc">
+      <div class="temp">
+        <div class="tempName">
+          <div>
+            <img
+              src="../../../../../assets/images/temp.png"
+              alt=""
+              style="width: 10px; height: 15px; margin-right: 5px"
+            />
+          </div>
+          <div>温度 (℃)</div>
+        </div>
+        <div class="tempDetail">
+          <div class="bottom">
+            <div>最高</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ maxTemp }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>最低</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ minTemp }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>平均</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ tempAve }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="temp">
+        <div class="tempName">
+          <div>
+            <img
+              src="../../../../../assets/images/wet.png"
+              alt=""
+              style="width: 10px; height: 15px; margin-right: 5px"
+            />
+          </div>
+          <div>湿度 (%RH)</div>
+        </div>
+        <div class="tempDetail">
+          <div class="bottom">
+            <div>最高</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ maxWet }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>最低</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ minWet }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>平均</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ wetAve }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="temp">
+        <div class="tempName">
+          <div>
+            <img
+              src="../../../../../assets/images/dew.png"
+              alt=""
+              style="width: 10px; height: 15px; margin-right: 5px"
+            />
+          </div>
+          <div>露点温度 (℃)</div>
+        </div>
+        <div class="tempDetail">
+          <div class="bottom">
+            <div>最高</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ maxDew }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>最低</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ minDew }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>平均</div>
+            <div style="color: #008775; font-size: 16px; font-weight: bolder">
+              {{ dewAve }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <h5 style="margin: 20px 0">单个测温湿设备实时数据</h5>
+    <div class="singleDevice" v-for="(item, index) in showData" :key="index">
+      <div class="top">
+        <div class="deviceName">
+          <span class="shu"></span>
+          {{item.sbName}}/{{item.device}}
+        </div>
+        <div class="deviceDetail">
+          <div class="bottom">
+            <div>温度 (℃)</div>
+            <div style="color: #008775; font-size: 14px; font-weight: bolder">
+              {{ item.tempValue }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>湿度 (%RH)</div>
+            <div style="color: #008775; font-size: 14px; font-weight: bolder">
+              {{ item.wetValue }}
+            </div>
+          </div>
+          <div class="Separator"></div>
+          <div class="bottom">
+            <div>露点温度 (℃)</div>
+            <div style="color: #008775; font-size: 14px; font-weight: bolder">
+              {{ item.dewValue }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import mqtt from "mqtt";
+import api from "@/api";
+export default {
+  data() {
+    return {
+      showData: [],
+      maxTemp: null,
+      minTemp: null,
+      maxWet: null,
+      minWet: null,
+      maxDew: null,
+      minDew: null,
+      tempAve: null,
+      dewAve: null,
+      wetAve: null,
+      //设备列表
+      sbList:[]
+    };
+  },
+  methods: {
+    connect() {
+      let options = {
+        //本地
+        username: "admin",
+        password: "public",
+        //测试
+        // username: "admin",
+        // password: "admin@123",
+        //生产
+        // username: "admin",
+        // password: "admin@2Ld&DDrsk",
+        cleanSession: true,
+        keepAlive: 60,
+        clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
+        connectTimeout: 4000,
+      };
+      //本地开发环境
+      this.client = mqtt.connect("ws://192.168.50.169:8083/mqtt", options);
+      //测试环境
+      // this.client = mqtt.connect('ws://172.16.0.5:8083/mqtt',options);
+      //正式环境
+      // this.client = mqtt.connect('ws://10.105.101.61:8083/mqtt',options);
+      this.client.on("connect", (e) => {
+        console.log("成功连接服务器2222222:", e);
+        //订阅三个名叫'top/#', 'three/#'和'#'的主题
+        this.client.subscribe(
+          [
+            // "/PUSH/c89512024085/DPUT/upload",
+            // "/PUSH/X1XXXQ2206090069/DPUT/upload",
+            "/PUSH/8951DQ2207200018/DPUT/upload",
+            "/PUSH/8951DQ2207200019/DPUT/upload",
+          ],
+          { qos: 1 },
+          (err) => {
+            if (!err) {
+              console.log("订阅成功");
+              //向主题叫“pubtop”发布一则内容为'hello,this is a nice day!'的消息
+              this.publish("pubtop", "hello,this is a nice day!");
+            } else {
+              console.log("消息订阅失败！");
+            }
+          }
+        );
+      });
+      //重新连接
+      this.reconnect();
+      //是否已经断开连接
+      this.mqttError();
+      //监听获取信息
+      this.getMessage();
+    },
+    //发布消息@topic主题  @message发布内容
+    publish(topic, message) {
+      if (!this.client.connected) {
+        console.log("客户端未连接");
+        return;
+      }
+      this.client.publish(topic, message, { qos: 1 }, (err) => {
+        if (!err) {
+          console.log("主题为" + topic + "发布成功");
+        }
+      });
+    },
+    //监听接收消息
+    getMessage() {
+      this.client.on("message", (topic, message) => {
+        if (message) {
+          let str = "8951DQ2207200019";
+          if (topic.indexOf(str) != -1) {
+            console.log("收到来着", topic, "的信息", message.toString());
+            var res = JSON.parse(message.toString());
+            console.log(res, "resssssss......");
+            if (res.data.length > 0) {
+              this.showData = res.data;
+              this.sbList.forEach(e=>{
+                this.showData.forEach(item=>{
+                    if(item.device==e.eqCode){
+                        item.sbName=e.eqName
+                    }
+                })
+              })
+              console.log(this.showData,"ggggg")
+              this.calcAve(this.showData);
+            } else {
+              this.$message({
+                message: "暂无数据",
+                type: "warning",
+              });
+            }
+          }
+
+          // 露点
+
+          // 温度
+          // 湿度
+        }
+      });
+    },
+    //监听服务器是否连接失败
+    mqttError() {
+      this.client.on("error", (error) => {
+        console.log("连接失败：", error);
+        this.client.end();
+      });
+    },
+    unsubscribe() {
+      this.client.unsubscribe(this.mtopic, (error) => {
+        console.log("主题为" + this.mtopic + "取消订阅成功", error);
+      });
+    },
+
+    //断开连接
+    unconnect() {
+      this.client.end();
+      this.client = null;
+      console.log("服务器已断开连接！");
+    },
+    //监听服务器重新连接
+    reconnect() {
+      this.client.on("reconnect", (error) => {
+        console.log("正在重连:", error);
+      });
+    },
+    //计算平均值
+    calcAve(arr) {
+      // maxTemp:null,
+      //  minTemp:null,
+      //  maxWet:null,
+      //  minWet:null,
+      //  maxDew:null,
+      //  minDew:null,
+      let tempArr = [];
+      let wetArr = [];
+      let dewArr = [];
+      let temp = 0;
+      let wet = 0;
+      let dew = 0;
+      let num = 0;
+      arr.forEach((item) => {
+        num++;
+        tempArr.push(parseInt(item.tempValue));
+        wetArr.push(parseInt(item.wetValue));
+        dewArr.push(parseInt(item.dewValue));
+        temp += parseInt(item.tempValue);
+        wet += parseInt(item.wetValue);
+        dew += parseInt(item.dewValue);
+      });
+      console.log(tempArr, wetArr, dewArr);
+      console.log(temp, wet, dew, num);
+      this.tempAve = (temp / num).toFixed(1);
+      this.dewAve = (dew / num).toFixed(1);
+      this.wetAve = (wet / num).toFixed(1);
+      tempArr = tempArr.sort();
+      wetArr = wetArr.sort();
+      dewArr = dewArr.sort();
+      // maxTemp:null,
+      //  minTemp:null,
+      //  maxWet:null,
+      //  minWet:null,
+      //  maxDew:null,
+      //  minDew:null,
+      this.maxTemp = tempArr[tempArr.length - 1];
+      this.minTemp = tempArr[0];
+      this.maxWet = wetArr[wetArr.length - 1];
+      this.minWet = wetArr[0];
+      this.maxDew = dewArr[dewArr.length - 1];
+      this.minDew = dewArr[0];
+      console.log(tempArr, wetArr, dewArr);
+    },
+  },
+  created() {
+    this.connect();
+    var condition = {};
+      condition.org_code = localStorage.getItem("orgCode");
+      condition = JSON.stringify(condition);
+      var data = {
+        pageIndex: 1,
+        pageSize: 999,
+        condition: condition,
+      };
+      api
+        .equipmentList(data)
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res,"设备。。")
+            this.sbList=res.data.records
+         
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+  },
+};
+</script>
+<style lang="scss" scoped>
+.topCalc {
+  display: flex;
+
+  .temp {
+    width: 15%;
+    height: 110px;
+    background-color: rgba(240, 240, 240, 1);
+    border: 2px solid rgba(230, 230, 230, 1);
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    margin-right: 20px;
+
+    .tempName {
+      height: 35px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #000000;
+      border-bottom: 2px solid rgba(230, 230, 230, 1);
+    }
+    .tempDetail {
+      height: 75px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .bottom {
+        height: 50px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+      }
+      .Separator {
+        height: 15px;
+        border: 1px solid rgba(230, 230, 230, 1);
+      }
+    }
+  }
+}
+.singleDevice {
+    width: 15%;
+  height: 110px;
+  margin: 10px 10px 10px 0;
+  background-color: rgba(240, 240, 240, 1);
+  border: 2px solid rgba(230, 230, 230, 1);
+  display: inline-block;
+  flex-direction: column;
+  font-size: 12px;
+  margin-right: 21px;
+ 
+  .top {
+  }
+  .deviceName {
+    .shu {
+      display: inline-block;
+      width: 3px;
+      height: 13px;
+      background: #008775;
+      margin: 0 5px;
+    }
+    height: 35px;
+    display: flex;
+
+    align-items: center;
+    color: #000000;
+    border-bottom: 2px solid rgba(230, 230, 230, 1);
+  }
+  .deviceDetail {
+    height: 75px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .bottom {
+      height: 50px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+    }
+    .Separator {
+      height: 15px;
+      border: 1px solid rgba(230, 230, 230, 1);
+    }
+  }
+}
+</style>

src/views/system/visualized/index.vue

@@ -48,21 +48,21 @@
     
         "
       >
-                <div class="cf-left">
+                <div class="cf-left" v-if="tableData.length>0">
                             
                   <div
                   v-for="(e, index) in tableData"
                             :key="index"
                     :class="{
-                      normalTemp: wetTempStatus == 1,
-                      normalTemp1: wetTempStatus == 0,
+                      normalTemp: e.wetTempStatus == 1,
+                      normalTemp1:e.wetTempStatus == 0,
                     }"
                   >
                     <div class="temp-title">
                       {{ index + 1 }}号点位温湿度
                     </div>
                     <div class="temp-list">
-                      <div class="list-left" v-if="wetTempStatus == 1">
+                      <div class="list-left" v-if="e.wetTempStatus == 1">
                         <div class="hxBig">
                           <img
                             class="sxxz"
@@ -71,7 +71,7 @@
                           />
                         </div>
                       </div>
-                      <div class="list-left" v-if="wetTempStatus == 0">
+                      <div class="list-left" v-if="e.wetTempStatus == 0">
                         <img
                           src="../../../assets/images/bigScreen/fault.png"
                           alt=""
@@ -288,9 +288,9 @@
         </div>
 
         <div class="left-bottom">
-          <lsyj v-bind:cfCode="cfCode" ref="lsyjCharts"></lsyj>
-          <yjxx ></yjxx>
-          <wsdbh></wsdbh>
+          <lsyj  ref="lsyjCharts"></lsyj>
+          <yjxx ref="warnInfo"></yjxx>
+          <wsdbh ref="tempWetChange"></wsdbh>
           <cn-temp></cn-temp>
         </div>
       </div>
@@ -412,7 +412,7 @@ export default {
     },
     seamlessScrollOption(){
       return {
-        step: 0.8, // 数值越大速度滚动越快
+        step: 0, // 数值越大速度滚动越快
         limitMoveNum:6, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
@@ -427,11 +427,13 @@ export default {
     //仓房下拉选改变时
 
     cfChange(val) {
-      console.log(val, "val..");
+   
       this.cfCode = val;
       console.log(this.cfCode,"选择的code")
       this.getPointList();
-      this.$refs.lsyjCharts.getHisWarning()
+      this.$refs.lsyjCharts.getHisWarning(this.cfCode)
+      this.$refs.warnInfo.getWarnInfo(this.cfCode)
+      this.$refs.tempWetChange.getTempWet(this.cfCode)
     },
     connect() {
       let options = {
@@ -990,35 +992,43 @@ export default {
 
     //公共方法(判断温湿度参数是否正常并添加属性)
     wetTempPublic(arr) {
+      console.log(arr,"arrr..")
       arr.forEach((ele) => {
         ele.forEach((item) => {
           if (this.tempParams) {
+           
             if (
               item.tempValue < this.tempParams.alarmValueMin ||
               item.tempValue > this.tempParams.alarmValueMax
             ) {
+          
               item.status = 0;
-              this.wetTempStatus = 0;
+              // this.wetTempStatus = 0;
               item.tempStatus = 0;
-            } else {
+            }
+             else {
+             
               item.tempStatus = 1;
               item.status = 1;
-              this.wetTempStatus = 1;
+              // this.wetTempStatus = 1;
             }
           }
 
           if (this.wetParams) {
+          
             if (
               item.wetValue < this.wetParams.alarmValueMin ||
               item.wetValue > this.wetParams.alarmValueMax
             ) {
+           
               item.status = 0;
               item.wetStatus = 0;
-              this.wetTempStatus = 0;
+              // this.wetTempStatus = 0;
             } else {
+          
               item.wetStatus = 1;
               item.status = 1;
-              this.wetTempStatus = 1;
+              // this.wetTempStatus = 1;
             }
           }
         });
@@ -1026,7 +1036,27 @@ export default {
 
       // //取整
       // this.rightDewValue=parseInt(this.rightDewValue/arr.length)
-      console.log(this.tableData, "添加状态");
+      console.log(arr, "添加状态");
+      this.isNormalImg(arr)
+    },
+    //添加判断是否显示正常图片的字段
+    isNormalImg(arr){
+     arr.forEach(e=>{
+      let a= e.some(item=>{
+      return item.tempStatus==1
+     })
+     if(a==true){
+      
+     }
+     console.log(a,"isNormal")
+     })
+    arr.forEach(e=>{
+      let b=e.some(item=>{
+      return item.wetStatus==1
+     })
+     console.log(b,"isNormal")
+     })
+   
     },
 
     //公共方法计算平均值
@@ -1040,7 +1070,7 @@ export default {
       arr.forEach((ele) => {
         ele.forEach((item) => {
           avgNum++;
-          console.log(item, "item");
+          
           item.dewValue = parseInt(item.dewValue);
           item.tempValue = parseInt(item.tempValue);
           item.wetValue = parseInt(item.wetValue);
@@ -1058,11 +1088,11 @@ export default {
         });
       });
       //取整
-      console.log(this.rightDewValue, avgNum, "wwwwww");
+     
       this.rightDewValue = parseInt(this.rightDewValue / avgNum);
       this.rightTempValue = parseInt(this.rightTempValue / avgNum);
       this.rightWetValue = parseInt(this.rightWetValue / avgNum);
-      console.log(this.rightDewValue, "//////");
+      
     },
 
     //热区
@@ -1212,11 +1242,13 @@ export default {
             this.deviceLists = res.data.records;
             this.form.cfValue = res.data.records[0].labelCode;
             this.cfCode=res.data.records[0].labelCode;
-            console.log(this.cfCode,"初始化仓房code")
+           
              //点位列表初始化
            this.getPointList();
-           this.$refs.lsyjCharts.getHisWarning()
-           console.log("到这儿了。。。")
+           this.$refs.lsyjCharts.getHisWarning(this.cfCode)
+           this.$refs.warnInfo.getWarnInfo(this.cfCode)
+           this.$refs.tempWetChange.getTempWet(this.cfCode)
+         
           }
         }
       })

src/views/system/visualized/lsyj/index.vue

@@ -16,12 +16,7 @@
 import * as echarts from "echarts";
 import api from "@/api";
 export default {
-  props:{
-    cfCode:{
-      type:String,
-      required:true
-    }
-  },
+
     data(){
         return{
          lsyjData:[],
@@ -31,9 +26,9 @@ export default {
     },
     methods:{
        //历史月趋势
-    getHisWarning() {
+    getHisWarning(code) {
       let params = {
-        labelCode:this.cfCode,
+        labelCode:code,
   
         orgCode: localStorage.getItem("orgCode"),
 

src/views/system/visualized/wsdbh/index.vue

@@ -58,10 +58,10 @@ export default {
         }
     },
     methods:{
-         //历史月趋势
-    getHisWarning() {
+         //温湿度变换趋势
+    getTempWet(code) {
       let params = {
-        labelCode: "307038864601222",
+        labelCode: code,
         orgCode: localStorage.getItem("orgCode"),
 
         round: 7,
@@ -180,11 +180,7 @@ export default {
     },
     },
     created(){
-        this.$nextTick(() => {
-     this.getHisWarning()
-
-
-    });
+    
     }
 }
 

src/views/system/visualized/yjxx/index.vue

@@ -56,12 +56,7 @@ export default {
     data(){
         return{
           tableData:[
-            {
-              temp:30,
-              shidu:36,
-              jcsj:"2021-10-25"
-
-            }
+            
           ]
         }
     },
@@ -80,10 +75,10 @@ export default {
     },
   },
     methods:{
-       //历史月趋势
-    getWarnInfo() {
+       //预警信息
+    getWarnInfo(code) {
       let params = {
-        labelCode: "307038864601222",
+        labelCode: code,
         orgCode: localStorage.getItem("orgCode"),
 
         pageSize: 5,
@@ -100,7 +95,7 @@ export default {
     },
     created(){
     
-        this.getWarnInfo()
+       // this.getWarnInfo()