优化覆冰微气象页面

src/views/iceWeather/weather/index.vue

@@ -150,20 +150,28 @@
               </el-form>
             </div>
             <div class="termalBox">
-              <h3>当前监测终端</h3>
+              <p>
-              <el-descriptions direction="vertical" :column="4" border>
+                <span class="text"
-                <el-descriptions-item label="线路">{{
+                  >线路:{{ childMsg.lineName || childMsg.lineName }}</span
-                  childMsg.lineName
+                >
-                }}</el-descriptions-item>
+                <span class="text"
-                <el-descriptions-item label="杆塔">{{
+                  >杆塔:{{ childMsg.towerName || childMsg.name }}</span
-                  childMsg.towerName
+                >
-                }}</el-descriptions-item>
+                <span class="text">终端:{{ childMsg.cmdid }}</span>
-                <el-descriptions-item label="终端">{{
+              </p>
-                  childMsg.cmdid
+              <div class="gropBtn">
-                }}</el-descriptions-item>
+                <el-button type="text" @click="onWdLine" icon="el-icon-odometer"
-              </el-descriptions>
+                  >温度趋势</el-button
+                >
+                <el-button
+                  type="text"
+                  @click="onSdLine"
+                  icon="el-icon-heavy-rain"
+                  >湿度趋势</el-button
+                >
+              </div>
             </div>
-            <div class="echartsBox">
+            <!-- <div class="echartsBox">
               <div class="btnbox">
                 <el-button type="primary" @click="onWdLine"
                   >温度变化趋势</el-button
@@ -175,16 +183,16 @@
               </div>
               <div id="wDechart" class="chartClass" v-show="wdFlag"></div>
               <div id="sDechart" class="chartClass" v-show="sdFlag"></div>
-            </div>
+            </div> -->
+
             <div class="childTableShowBox">
-              <h3>气象数据列表</h3>
               <el-table
                 :data="childTableDate"
                 style="width: 100%"
                 v-loading="loading"
-                height="calc(100% - 40px)"
+                height="calc(100% - 2px)"
               >
-                <el-table-column prop="updateTime" label="时间">
+                <el-table-column prop="updateTime" label="时间" width="138px">
                   <template slot-scope="scope">
                     <span v-if="scope.row.updateTime">
                       {{
@@ -278,6 +286,12 @@
               >
               </el-pagination>
             </div>
+            <el-dialog title="温度折线图" :visible.sync="wdFlag">
+              <div id="wDechart" class="chartClass"></div>
+            </el-dialog>
+            <el-dialog title="湿度折线图" :visible.sync="sdFlag">
+              <div id="sDechart" class="chartClass"></div>
+            </el-dialog>
           </div>
         </div>
       </div>
@@ -310,7 +324,7 @@ export default {
       childParma: "",
       childMsg: "",
       echartsData: "", //echarts数据
-      wdFlag: true,
+      wdFlag: false,
       sdFlag: false,
     };
   },
@@ -363,12 +377,13 @@ export default {
         this.getWeatherData(weatherParams);
       } else {
         console.log("装置-杆塔");
-        weatherParams = {
+        // weatherParams = {
-          pageNum: 1,
+        //   pageNum: 1,
-          pageSize: this.pageSize,
+        //   pageSize: this.pageSize,
-          towerId: data.towerid,
+        //   towerId: data.towerid,
-        };
+        // };
-        this.getWeatherData(weatherParams);
+        this.moreDataClick(data);
+        // this.getWeatherData(weatherParams);
       }
       //this.getAllData(data);
     },
@@ -523,10 +538,6 @@ export default {
         .then((res) => {
           console.log(res);
           this.echartsData = res.data.list;
-
-          //获取温度折线图
-          this.getEchart4(this.echartsData);
-          this.getEchart5(this.echartsData);
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -535,10 +546,13 @@ export default {
     onWdLine() {
       this.wdFlag = true;
       this.sdFlag = false;
+      //获取温度折线图
+      this.getEchart4(this.echartsData);
     },
     onSdLine() {
       this.wdFlag = false;
       this.sdFlag = true;
+      this.getEchart5(this.echartsData);
     },
     onHidden() {
       this.wdFlag = false;
@@ -733,6 +747,10 @@ export default {
     border-left: 1px solid #ddd;
     .el-table .el-table__cell {
       text-align: center;
+      -webkit-user-select: text;
+      -moz-user-select: text;
+      -ms-user-select: text;
+      user-select: text;
     }
     .dataBox {
       width: calc(100% - 24px);
@@ -745,23 +763,24 @@ export default {
     }
     .childBox {
       height: 100%;
-      .echartsBox {
+      .chartClass {
-        display: flex;
+        height: 450px;
-        flex-direction: column;
+        width: 100%;
-        align-items: center;
-
-        .btnbox {
-          display: flex;
-          margin-bottom: 8px;
-          .el-button--primary {
-            width: auto;
-          }
-        }
-        .chartClass {
-          height: 450px;
-          width: 800px;
-        }
       }
+      // .echartsBox {
+      //   display: flex;
+      //   flex-direction: column;
+      //   align-items: center;
+
+      //   .btnbox {
+      //     display: flex;
+      //     margin-bottom: 8px;
+      //     .el-button--primary {
+      //       width: auto;
+      //     }
+      //   }
+
+      // }
       .childTableShowBox {
         h3 {
           font-size: 16px;
@@ -771,27 +790,21 @@ export default {
           color: #666;
           margin-top: 16px;
         }
-        height: calc(100% - 200px);
+        height: calc(100% - 124px);
       }
       .termalBox {
-        h3 {
+        margin-bottom: 4px;
-          font-size: 16px;
+        display: flex;
-          font-weight: normal;
+        align-items: center;
-          margin-bottom: 4px;
+        line-height: 32px;
-          text-align: center;
+        p {
-          color: #666;
+          .text {
-        }
+            margin-right: 12px;
-        .el-descriptions {
-          margin-bottom: 16px;
-          .el-descriptions-item__label.is-bordered-label {
-            color: #333;
-          }
-          .el-descriptions__body
-            .el-descriptions__table
-            .el-descriptions-item__cell {
-            text-align: center;
           }
         }
+        .gropBtn {
+          //margin-left: auto;
+        }
       }
     }
   }