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

2025-10-12 23:10:15 +08:00
parent 376b50c3b5
commit 679f8f2a07
7 changed files with 645 additions and 381 deletions
--- a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
+++ b/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;
    }
  }
 }
--- a/src/views/ems/dzjk/sbjk/dtdc/List.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/List.vue
@ -10,14 +10,17 @@
          v-for="(item, index) in tableData"
          :key="index + 'dtdcList'"
          :class="handleListClass(item)"
-          @click="chartDetail(item)"
        >
          <div style="font-size: 10px; font-weight: 600">
            {{ item.clusterDeviceId }}
          </div>
          <div>#{{ item.deviceId }}</div>
-          <div class="dy">{{ item.voltage }}V</div>
-          <div class="wd">{{ item.temperature }}℃</div>
+          <div class="dy pointer" @click="chartDetail(item, '电压 (V)')">
+            {{ item.voltage }}V
+          </div>
+          <div class="wd pointer" @click="chartDetail(item, '温度 (℃)')">
+            {{ item.temperature }}℃
+          </div>
        </div>
      </div>

@ -101,7 +104,7 @@ export default {
    //查看表格行图表
    chartDetail(row, dataType = "") {
      const { clusterDeviceId, deviceId } = row;
-      this.$emit("chart", { clusterDeviceId, deviceId, dataType });
+      this.$emit("chart", { ...row, dataType });
    },
  },
 };
@ -123,7 +126,6 @@ export default {
    box-sizing: content-box;
    min-width: 60px;
    width: auto;
-    cursor: pointer;
    &::before {
      display: block;
      content: "";
--- a/src/views/ems/dzjk/sbjk/dtdc/Table.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/Table.vue
@ -8,10 +8,10 @@
    >
      <el-table-column prop="deviceId" label="单体编号"> </el-table-column>
      <el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column>
-      <el-table-column prop="voltage" label="电压（V）">
+      <el-table-column prop="voltage" label="电压 (V)">
        <template slot-scope="scope">
          <el-button
-            @click="chartDetail(scope.row, 'voltage')"
+            @click="chartDetail(scope.row, '电压 (V)')"
            type="text"
            size="small"
          >
@ -19,10 +19,10 @@
          </el-button>
        </template>
      </el-table-column>
-      <el-table-column prop="temperature" label="温度（℃）">
+      <el-table-column prop="temperature" label="温度 (℃)">
        <template slot-scope="scope">
          <el-button
-            @click="chartDetail(scope.row, 'temperature')"
+            @click="chartDetail(scope.row, '温度 (℃)')"
            type="text"
            size="small"
          >
@ -30,10 +30,10 @@
          </el-button>
        </template>
      </el-table-column>
-      <el-table-column prop="soc" label="SOC（%）">
+      <el-table-column prop="soc" label="SOC (%)">
        <template slot-scope="scope">
          <el-button
-            @click="chartDetail(scope.row, 'soc')"
+            @click="chartDetail(scope.row, 'SOC (%)')"
            type="text"
            size="small"
          >
@ -41,10 +41,10 @@
          </el-button>
        </template>
      </el-table-column>
-      <el-table-column prop="soh" label="SOH（%）">
+      <el-table-column prop="soh" label="SOH (%)">
        <template slot-scope="scope">
          <el-button
-            @click="chartDetail(scope.row, 'soh')"
+            @click="chartDetail(scope.row, 'SOH (%)')"
            type="text"
            size="small"
          >
@ -52,13 +52,13 @@
          </el-button>
        </template>
      </el-table-column>
-      <el-table-column label="曲线图">
+      <!-- <el-table-column label="曲线图">
        <template slot-scope="scope">
          <el-button @click="chartDetail(scope.row)" type="text" size="small">
            展示
          </el-button>
        </template>
-      </el-table-column>
+      </el-table-column> -->
    </el-table>
    <!-- <el-pagination
      v-show="tableData.length > 0"
@ -116,7 +116,7 @@ export default {
    //查看表格行图表
    chartDetail(row, dataType = "") {
      const { clusterDeviceId, deviceId } = row;
-      this.$emit("chart", { clusterDeviceId, deviceId, dataType });
+      this.$emit("chart", { ...row, dataType });
    },
  },
 };
--- a/src/views/ems/dzjk/sbjk/dtdc/index.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/index.vue
@ -103,6 +103,7 @@
    >
    </el-pagination>
    <chart-detail ref="chartDetail" />
+    <point-chart ref="pointChart" :site-id="siteId" />
  </el-card>
 </template>

@ -117,10 +118,17 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import ChartDetail from "./ChartDetail.vue";
 import Table from "./Table.vue";
 import List from "./List.vue";
+import pointChart from "./../PointChart.vue";
 export default {
  name: "DzjkSbjkDtdc",
  mixins: [getQuerySiteId],
-  components: { BarChart, ChartDetail, DtdcTable: Table, DtdcList: List },
+  components: {
+    BarChart,
+    ChartDetail,
+    DtdcTable: Table,
+    DtdcList: List,
+    pointChart,
+  },
  computed: {
    pointIdList() {
      let obj = {};
@ -162,12 +170,14 @@ export default {
      activeBtn !== menu && (this.activeBtn = menu);
    },
    //查看表格行图表
-    chartDetail({ clusterDeviceId, deviceId, dataType = "" }) {
-      const { siteId } = this;
-      this.$refs.chartDetail.initChart(
-        { siteId, clusterDeviceId, deviceId },
-        dataType
-      );
+    chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
+      dataType &&
+        this.$refs.pointChart.showChart({
+          pointName: dataType,
+          categoryName: "单体电池",
+          deviceId: clusterDeviceId,
+          child: [deviceId],
+        });
    },
    // 分页
    handleSizeChange(val) {