用电数据

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

@@ -6,14 +6,14 @@
     @close="cancelhandlePic"
   >
     <el-form :inline="true">
-      <el-form-item label="设备名称：" style="margin-bottom:0">
+      <el-form-item label="设备名称：" style="margin-bottom: 0">
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="设备编号：" style="margin-bottom:0">
+      <el-form-item label="设备编号：" style="margin-bottom: 0">
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="数据起止阶段：" >
-        <el-date-picker
+      <el-form-item label="数据起止阶段：">
+        <!-- <el-date-picker
           style="width:172px"
           size="mini"
           type="date"
@@ -27,7 +27,7 @@
           type="date"
           placeholder=""
         >
-        </el-date-picker>
+        </el-date-picker> -->
       </el-form-item>
       <el-form-item>
         <el-button size="mini" type="primary" icon="el-icon-search"
@@ -35,7 +35,9 @@
         >
       </el-form-item>
     </el-form>
-    <div v-if="statisticModalVisible" id="categoryId" style="height: 200px"></div>
+    <div v-if="statisticModalVisible" id="categoryId" style="height: 400px">
+      <chart id="111" :data="data" title="能耗数据" color="#21ACFC"></chart>
+    </div>
     <div slot="footer">
       <el-button @click="cancelhandlePic">取 消</el-button>
       <el-button type="primary" @click.stop="cancelhandlePic">确 定</el-button>
@@ -43,25 +45,37 @@
   </el-dialog>
 </template>
 <script >
+import chart from '@/pages/components/chart.vue'
 export default {
-  name: "statisticPicTableModal",
-  props: ["statisticModalVisible"],
+  name: 'statisticPicTableModal',
+  props: ['statisticModalVisible'],
+  components: {
+    chart
+  },
   data() {
     return {
-      formLabelWidth: "120px",
+      formLabelWidth: '120px',
       category: null,
-    };
+      data: [
+        ['2019-8-14 8:00:00', 70],
+        ['2019-8-14 8:00:01', 60],
+        ['2019-8-14 8:00:02', 30],
+        ['2019-8-14 8:00:03', 79],
+        ['2019-8-14 8:00:06', 10],
+        ['2019-8-14 8:00:20', 31]
+      ]
+    }
   },
   watch: {
     statisticModalVisible(value) {
       if (value) {
         setTimeout(() => {
-      this.initCategory();
-    }, 3000);
-      }else{
+          this.initCategory()
+        }, 1000)
+      } else {
         this.category = null
       }
-    },
+    }
   },
 
   mounted() {
@@ -71,29 +85,29 @@ export default {
   },
   methods: {
     cancelhandlePic() {
-      this.$emit("cancelhandlePic");
-    },
-    initCategory() {
-      let gId = document.getElementById("categoryId");
+      this.$emit('cancelhandlePic')
+    }
+    // initCategory() {
+    //   let gId = document.getElementById('categoryId')
 
-      this.category = this.$echarts.init(gId);
-      const option = {
-        xAxis: {
-          type: "category",
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-        },
-        yAxis: {
-          type: "value",
-        },
-        series: [
-          {
-            data: [150, 230, 224, 218, 135, 147, 260],
-            type: "line",
-          },
-        ],
-      };
-      this.category.setOption(option);
-    },
-  },
-};
+    //   this.category = this.$echarts.init(gId)
+    //   const option = {
+    //     xAxis: {
+    //       type: 'category',
+    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    //     },
+    //     yAxis: {
+    //       type: 'value'
+    //     },
+    //     series: [
+    //       {
+    //         data: [150, 230, 224, 218, 135, 147, 260],
+    //         type: 'line'
+    //       }
+    //     ]
+    //   }
+    //   this.category.setOption(option)
+    // }
+  }
+}
 </script>