单体电池图表、设备列表点位清单图表

src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue

@@ -10,13 +10,17 @@
     class="ems-dialog chart-detail-dialog"
     :before-close="handleColsed"
   >
-    <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+    <el-card
+      shadow="always"
+      class="common-card-container time-range-card"
+      style="margin-top: 20px"
+    >
       <div slot="header" class="time-range-header">
-      <span class="card-title"></span>
-        <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
+        <span class="card-title"></span>
+        <date-range-select ref="dateRangeSelect" @updateDate="updateDate" />
       </div>
       <div class="card-main" v-loading="loading">
-        <div id="lineChart" style="height: 310px;"></div>
+        <div id="lineChart" style="height: 310px"></div>
       </div>
     </el-card>
   </el-dialog>
@@ -28,7 +32,7 @@ import resize from "@/mixins/ems/resize";
 import { getSingleBatteryData } from "@/api/ems/dzjk";
 import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
-  components: {DateRangeSelect},
+  components: { DateRangeSelect },
   mixins: [resize],
   data() {
     return {
@@ -48,9 +52,9 @@ export default {
   },
   methods: {
     // 更新时间范围 重置图表
-    updateDate(data){
-      this.dateRange=data || []
-      this.getData()
+    updateDate(data) {
+      this.dateRange = data || [];
+      this.getData();
     },
     handleColsed(done) {
       if (!this.chart) {
@@ -94,7 +98,7 @@ export default {
       this.$nextTick(() => {
         !this.chart &&
           (this.chart = echarts.init(document.querySelector("#lineChart")));
-        this.$refs.dateRangeSelect.init()
+        this.$refs.dateRangeSelect.init();
       });
     },
     setOption(data) {
@@ -148,7 +152,6 @@ export default {
           },
         ];
       }
-
       this.chart &&
         this.chart.setOption({
           color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
@@ -186,10 +189,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.chart-detail-dialog{
-  ::v-deep{
-    .el-dialog__body{
-      padding-top:0;
+.chart-detail-dialog {
+  ::v-deep {
+    .el-dialog__body {
+      padding-top: 0;
     }
   }
 }