微调

src/assets/style/public.scss

@@ -113,6 +113,12 @@ $el-bg-color-4: #F2F6FC;
   .el-table__row > td {
     border: none;
   }
+  th{
+    background: rgba(0, 151, 255, 0.08);
+    font-size: 12px;
+    
+
+  }
 
   td::before {
     height: 0px;

src/pages/components/cardList.vue

@@ -36,15 +36,18 @@ export default {
   &-line {
     display: flex;
     justify-content: space-between;
-    padding: 17px 15px 17px 17px;
+    padding: 0 20px;
     border-bottom: 1px solid #d9d9d9;
+    background: #F2FAFF;
+        height: 45px;
+    line-height: 45px;
     .card-list-title {
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 16px;
       font-family: Microsoft YaHei;
-      font-weight: 400;
+      font-weight: 600;
       color: #000000;
     }
     .card-list-title::before {

src/pages/components/enTable.vue

@@ -41,9 +41,9 @@
         line-height: 3;
       "
     >
-      <div  class="record-color marg_r_18">共34860条记录</div>
+      <!-- <div  class="record-color marg_r_18">共34860条记录</div>
       <div class="record-color marg_r_8">共20页</div>
-      <div class="record-color">每页显示</div>
+      <div class="record-color">每页显示</div> -->
       <!-- background -->
       <el-pagination layout="sizes, prev, pager, next"  :total="1000">
       </el-pagination>

src/pages/kb/power/components/historyDataModal.vue

@@ -3,19 +3,20 @@
     title="历史数据"
     :visible.sync="historyDataModalVisible"
     :append-to-body="true"
+    @close="cancelhandle"
   >
     <el-form :inline="true">
-      <el-form-item label="设备名称：" :label-width="formLabelWidth">
+      <el-form-item label="设备名称：" style="margin-bottom:0">
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="设备编号：" :label-width="formLabelWidth">
+      <el-form-item label="设备编号：" style="margin-bottom:0">
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="数据起止阶段：" :label-width="formLabelWidth">
-        <el-date-picker style="width:157px" size="mini" type="date" placeholder="">
+      <el-form-item label="数据起止阶段：" >
+        <el-date-picker style="width:172px" size="mini" type="date" placeholder="">
         </el-date-picker>
         <span style="padding:0 10px">至</span>
-        <el-date-picker style="width:157px"  size="mini" type="date" placeholder="">
+        <el-date-picker style="width:172px"  size="mini" type="date" placeholder="">
         </el-date-picker>
       </el-form-item>
       <el-form-item >
@@ -64,7 +65,7 @@ export default {
   },
   data() {
     return {
-      formLabelWidth: "110px",
+      formLabelWidth: "0px",
       historyData,
       tableColums,
     };

src/pages/kb/power/components/statisticPicTableModal.vue

@@ -3,17 +3,18 @@
     title="统计图表"
     :visible.sync="statisticModalVisible"
     :append-to-body="true"
+    @close="cancelhandlePic"
   >
     <el-form :inline="true">
-      <el-form-item label="设备名称：" label-width="formLabelWidth">
+      <el-form-item label="设备名称：" style="margin-bottom:0">
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="设备编号：" label-width="formLabelWidth">
+      <el-form-item label="设备编号：" style="margin-bottom:0">
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="数据起止阶段：" label-width="formLabelWidth">
+      <el-form-item label="数据起止阶段：" >
         <el-date-picker
-          style="width: 157px"
+          style="width:172px"
           size="mini"
           type="date"
           placeholder=""
@@ -21,7 +22,7 @@
         </el-date-picker>
         <span style="padding: 0 10px">至</span>
         <el-date-picker
-          style="width: 157px"
+         style="width:172px"
           size="mini"
           type="date"
           placeholder=""
@@ -34,14 +35,14 @@
         >
       </el-form-item>
     </el-form>
-    <div id="categoryId" style="height: 200px"></div>
+    <div v-if="statisticModalVisible" id="categoryId" style="height: 200px"></div>
     <div slot="footer">
       <el-button @click="cancelhandlePic">取 消</el-button>
       <el-button type="primary" @click.stop="cancelhandlePic">确 定</el-button>
     </div>
   </el-dialog>
 </template>
-<script lang="ts">
+<script >
 export default {
   name: "statisticPicTableModal",
   props: ["statisticModalVisible"],
@@ -51,17 +52,22 @@ export default {
       category: null,
     };
   },
-  // watch: {
-  //   statisticModalVisible(value) {
-  //     if (value) {
-  //     }
-  //   },
-  // },
-
-  mounted() {
+  watch: {
+    statisticModalVisible(value) {
+      if (value) {
          setTimeout(() => {
       this.initCategory();
     }, 3000);
+      }else{
+        this.category = null
+      }
+    },
+  },
+
+  mounted() {
+    // setTimeout(() => {
+    //   this.initCategory();
+    // }, 3000);
   },
   methods: {
     cancelhandlePic() {
@@ -69,6 +75,7 @@ export default {
     },
     initCategory() {
       let gId = document.getElementById("categoryId");
+   
       this.category = this.$echarts.init(gId);
       const option = {
         xAxis: {