单体电池表格曲线图，统计报表概览统计没有数据返回隐藏

2025-07-17 17:47:18 +08:00
parent e9c8b10d29
commit 62eb0e7e7d
4 changed files with 179 additions and 3 deletions
--- a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
@ -0,0 +1,150 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogTableVisible"
+    :close-on-click-modal="false"
+    show-close
+    destroy-on-close
+    lock-scroll
+    append-to-body
+    width="700px"
+    class="ems-dialog"
+    :before-close="handleColsed"
+  >
+    <div>
+      <el-form size="medium" label-width="100px" inline>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            value-format="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getData">搜索</el-button>
+          <el-button @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div id="lineChart" style="height: 360px;width: 100%;"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import {getSingleBatteryData} from '@/api/ems/dzjk'
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      loading: false,
+      siteId:'',
+      deviceId:'',
+      clusterDeviceId:'',
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      dialogTableVisible: false,
+      dateRange: [],
+      defaultDateRange:[]
+    }
+  },
+  methods: {
+    handleColsed(done){
+      if (!this.chart) {
+        return done()
+      }
+      this.chart.dispose()
+      this.chart = null
+      done()
+    },
+    getData(){
+      if(this.loading) return
+      this.loading = true;
+      this.chart.showLoading()
+      const {siteId, deviceId,clusterDeviceId,dateRange:[startDate='',endDate='']}=this;
+      getSingleBatteryData({siteId, deviceId,clusterDeviceId,startDate,endDate}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>{
+        this.loading = false;
+        this.chart.hideLoading()
+      })
+    },
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.getData()
+    },
+    initChart({siteId, clusterDeviceId, deviceId}) {
+      this.siteId=siteId
+      this.clusterDeviceId=clusterDeviceId
+      this.deviceId=deviceId
+      this.dateRange=[]
+      this.dialogTableVisible = true
+      this.$nextTick(()=>{
+        !this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
+        this.getData()
+      })
+    },
+    setOption(data) {
+      const source = [['日期','电压','温度','SOC','SOH']]
+      data.forEach(item => {
+        source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
+      })
+      this.chart && this.chart.setOption({
+        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
+        legend: {
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value',
+        },
+        dataset:{
+          source
+        },
+        series: [
+          {
+            name:'电压',
+            type: 'line',
+
+          },{
+            name:'温度',
+            type: 'line',
+          },
+          {
+            name:'SOC',
+            type: 'line',
+
+          },{
+            name:'SOH',
+            type: 'line',
+          }]
+      })
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  }
+}
+</script>