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

src/views/ems/site/sblb/PointTable.vue

@@ -1,6 +1,7 @@
 <!--电位展示图表-->
 <template>
-  <el-dialog
+  <div>
+    <el-dialog
       v-loading="loading"
       :close-on-click-modal="false"
       :visible.sync="show"
@@ -11,56 +12,84 @@
       show-close
       title="点位清单"
       width="800px"
-  >
+    >
+      <el-form :inline="true" label-width="85px">
+        <el-form-item label="点位名称">
+          <el-input
+            v-model="form.dataPointName"
+            clearable
+            placeholder="请输入点位名称"
+            style="width: 150px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="点位">
+          <el-input
+            v-model="form.dataPoint"
+            clearable
+            placeholder="请输入点位"
+            style="width: 150px"
+          ></el-input>
+        </el-form-item>
+        <br />
+        <el-form-item label="最小值">
+          <el-input
+            v-model="form.lower"
+            clearable
+            placeholder="请输入最小值"
+            style="width: 150px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="最大值">
+          <el-input
+            v-model="form.upper"
+            clearable
+            placeholder="请输入最大值"
+            style="width: 150px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item style="margin-left: 20px">
+          <el-button type="primary" @click="search">搜索</el-button>
+        </el-form-item>
+      </el-form>
 
-    <el-form :inline="true" label-width="85px">
-      <el-form-item label="点位名称">
-        <el-input v-model="form.dataPointName" clearable placeholder="请输入点位名称" style="width: 150px"></el-input>
-      </el-form-item>
-      <el-form-item label="点位">
-        <el-input v-model="form.dataPoint" clearable placeholder="请输入点位" style="width: 150px"></el-input>
-      </el-form-item>
-      <br>
-      <el-form-item label="最小值">
-        <el-input v-model="form.lower" clearable placeholder="请输入最小值" style="width: 150px"></el-input>
-      </el-form-item>
-      <el-form-item label="最大值">
-        <el-input v-model="form.upper" clearable placeholder="请输入最大值" style="width: 150px"></el-input>
-      </el-form-item>
-      <el-form-item style="margin-left: 20px">
-        <el-button type="primary" @click="search">搜索</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table
+      <el-table
         :data="tableData"
         class="common-table"
         max-height="400px"
         stripe
-        style="width: 100%;"
-        :default-sort = "{prop: 'updateTime', order: 'descending'}"
-        @sort-change="changeSort">
-      <el-table-column
-          label="数据点位"
-          prop="dataPoint">
-      </el-table-column>
-      <el-table-column
-          label="数据点位名称"
-          prop="pointName">
-      </el-table-column>
-      <el-table-column
-          label="最新值"
-          prop="pointValue">
-      </el-table-column>
-      <el-table-column
-          label="更新时间"
-          prop="updateTime"
-          sortable="custom"
+        style="width: 100%"
+        :default-sort="{ order: 'descending' }"
+        @sort-change="changeSort"
       >
-      </el-table-column>
-    </el-table>
-    <el-pagination
-        v-show="tableData.length>0"
+        <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
+        <el-table-column label="数据点位名称" prop="pointName">
+        </el-table-column>
+        <el-table-column
+          label="最新值"
+          prop="pointValue"
+          align="right"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            <span
+              class="pointer"
+              @click="
+                showChart(
+                  scope.row.pointName,
+                  scope.row.deviceName,
+                  scope.row.deviceId
+                )
+              "
+              >{{ scope.row.pointValue }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" prop="unit"></el-table-column>
+        <el-table-column label="更新时间" prop="updateTime" sortable="custom">
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-show="tableData.length > 0"
         :current-page="pageNum"
         :page-size="pageSize"
         :page-sizes="[10, 20, 30, 40]"
@@ -69,35 +98,40 @@
         background
         layout="total, sizes, prev, pager, next, jumper"
         small
-        style="margin-top:15px;text-align: center"
+        style="margin-top: 15px; text-align: center"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-    >
-    </el-pagination>
-  </el-dialog>
+      >
+      </el-pagination>
+    </el-dialog>
+    <point-chart ref="pointChart" :site-id="siteId" />
+  </div>
 </template>
 <script>
-import {getDevicePointList} from "@/api/ems/site";
+import { getDevicePointList } from "@/api/ems/site";
+import pointChart from "@/views/ems/dzjk/sbjk/PointChart.vue";
 
 export default {
+  components: { pointChart },
   watch: {
     show(val) {
       if (!val) {
-        this.tableData = []
-        this.deviceId = ''
-        this.deviceName = ''
-        this.siteId = ''
-        this.pageSize = 10
-        this.pageNum = 1
-        this.totalSize = 0
+        this.tableData = [];
+        this.deviceId = "";
+        this.deviceName = "";
+        this.siteId = "";
+        this.pageSize = 10;
+        this.pageNum = 1;
+        this.totalSize = 0;
         this.form = {
-          sortMethod: 'desc',//升序不传或者asc、降序desc）
-          dataPointName: '',//点位名称
-          dataPoint: '',//点位名称
-          lower: '',//
-          upper: '',//
-        }
-        this.loading = false
+          valueSortMethod: "desc", //升序不传或者asc、降序desc）
+          sortMethod: "desc", //升序不传或者asc、降序desc）
+          dataPointName: "", //点位名称
+          dataPoint: "", //点位名称
+          lower: "", //
+          upper: "", //
+        };
+        this.loading = false;
       }
     },
   },
@@ -106,81 +140,104 @@ export default {
       show: false,
       loading: false,
       form: {
-        sortMethod: 'desc',//升序不传或者asc、降序desc）
-        dataPointName: '',//点位名称
-        dataPoint: '',//点位名称
-        lower: '',//
-        upper: '',//
+        valueSortMethod: "desc", //最新值升序不传或者asc、降序desc）
+        sortMethod: "desc", //升序不传或者asc、降序desc）
+        dataPointName: "", //点位名称
+        dataPoint: "", //点位名称
+        lower: "", //
+        upper: "", //
       },
-      deviceCategory: '',
-      deviceName: '',
-      deviceId: '',
-      siteId: '',
+      deviceCategory: "",
+      deviceName: "",
+      deviceId: "",
+      siteId: "",
       tableData: [],
-      pageSize: 10,//分页栏当前每个数据总数
-      pageNum: 1,//分页栏当前页数
-      totalSize: 0,//table表格数据总数
-    }
+      pageSize: 10, //分页栏当前每个数据总数
+      pageNum: 1, //分页栏当前页数
+      totalSize: 0, //table表格数据总数
+    };
   },
   methods: {
+    showChart(pointName, deviceName, deviceId) {
+      console.log("点击查询图表", pointName, deviceName, deviceId);
+      pointName &&
+        this.$refs.pointChart.showChart({ pointName, deviceName, deviceId });
+    },
     changeSort(c) {
-      console.log('切换排序方式', c)
-      if(c.prop === "updateTime" && c.order){
-        this.form.sortMethod = c.order === 'descending' ? 'desc' : 'asc'
-        this.getData()
+      console.log("切换排序方式", c);
+      if (c.prop === "updateTime" && c.order) {
+        this.form.sortMethod = c.order === "descending" ? "desc" : "asc";
+        this.getData();
+      } else if (c.prop === "pointValue" && c.order) {
+        this.form.valueSortMethod = c.order === "descending" ? "desc" : "asc";
+        this.getData();
       }
     },
     search() {
-      this.pageNum = 1
-      this.getData()
+      this.pageNum = 1;
+      this.getData();
     },
-    showTable({deviceCategory, siteId, deviceId, deviceName}) {
-      this.deviceCategory = deviceCategory
-      this.siteId = siteId
-      this.deviceId = deviceId
-      this.deviceName = deviceName
-      this.show = true
-      this.getData()
+    showTable({ deviceCategory, siteId, deviceId, deviceName }) {
+      this.deviceCategory = deviceCategory;
+      this.siteId = siteId;
+      this.deviceId = deviceId;
+      this.deviceName = deviceName;
+      this.show = true;
+      this.getData();
     },
     getData() {
-      this.loading = true
+      this.loading = true;
       const {
         siteId,
         deviceId,
         deviceCategory,
         pageNum,
         pageSize,
-        form: {sortMethod, dataPointName, dataPoint, lower, upper}
-      } = this
+        form: {
+          valueSortMethod,
+          sortMethod,
+          dataPointName,
+          dataPoint,
+          lower,
+          upper,
+        },
+      } = this;
       getDevicePointList({
         siteId,
         deviceId,
         deviceCategory,
         pageNum,
         pageSize,
-        sortMethod, dataPointName, dataPoint, lower, upper
-      }).then(response => {
-        this.tableData = response?.rows || [];
-        this.totalSize = response?.total || 0
-      }).finally(() => {
-        this.loading = false
+        valueSortMethod,
+        sortMethod,
+        dataPointName,
+        dataPoint,
+        lower,
+        upper,
       })
+        .then((response) => {
+          this.tableData = response?.rows || [];
+          this.totalSize = response?.total || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     // 分页
     handleSizeChange(val) {
       this.pageSize = val;
       this.$nextTick(() => {
-        this.getData()
-      })
+        this.getData();
+      });
     },
     handleCurrentChange(val) {
-      this.pageNum = val
+      this.pageNum = val;
       this.$nextTick(() => {
-        this.getData()
-      })
+        this.getData();
+      });
     },
-  }
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
 ::v-deep {
@@ -188,5 +245,4 @@ export default {
     line-height: 40px;
   }
 }
-
-</style>
+</style>