From 2d0e4917af0b5153608760711b5addad994342fc Mon Sep 17 00:00:00 2001
From: yinq <yinq>
Date: Tue, 25 Jun 2024 17:53:17 +0800
Subject: [PATCH] =?UTF-8?q?change=20-=20=E7=94=B5=E6=B5=81=E7=94=B5?=
 =?UTF-8?q?=E5=8E=8B=E6=9B=B2=E7=BA=BF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ems/report/currentVoltageCurve/index.vue  | 366 +++++++-----------
 1 file changed, 140 insertions(+), 226 deletions(-)

diff --git a/src/views/ems/report/currentVoltageCurve/index.vue b/src/views/ems/report/currentVoltageCurve/index.vue
index e6e9f3b..2a4baa8 100644
--- a/src/views/ems/report/currentVoltageCurve/index.vue
+++ b/src/views/ems/report/currentVoltageCurve/index.vue
@@ -54,89 +54,27 @@
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
-        <!--        <el-row :gutter="10" class="mb8">-->
-        <!--          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
-        <!--        </el-row>-->
 
-<!--        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">-->
-<!--          <el-table-column type="selection" width="55" align="center"/>-->
-<!--          <el-table-column label="编号" align="center" prop="objId" v-if="columns[0].visible"/>-->
-<!--          <el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[1].visible" width="100"/>-->
-<!--          <el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[15].visible" width="120"/>-->
-<!--          <el-table-column label="采集时间" align="center" prop="collectTime" width="180" v-if="columns[2].visible">-->
-<!--            <template slot-scope="scope">-->
-<!--              <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
-<!--            </template>-->
-<!--          </el-table-column>-->
-<!--          <el-table-column label="A项电压" align="center" prop="va" v-if="columns[3].visible"/>-->
-<!--          <el-table-column label="B项电压" align="center" prop="vb" v-if="columns[4].visible"/>-->
-<!--          <el-table-column label="C项电压" align="center" prop="vc" v-if="columns[5].visible"/>-->
-<!--          <el-table-column label="A项电流" align="center" prop="ia" v-if="columns[6].visible"/>-->
-<!--          <el-table-column label="B项电流" align="center" prop="ib" v-if="columns[7].visible"/>-->
-<!--          <el-table-column label="C项电流" align="center" prop="ic" v-if="columns[8].visible"/>-->
-<!--          <el-table-column label="功率因数" align="center" prop="glys" v-if="columns[10].visible"/>-->
-<!--          <el-table-column label="正向有功" align="center" prop="zxyg" v-if="columns[11].visible"/>-->
-<!--          <el-table-column label="有功功率" align="center" prop="activePower" v-if="columns[12].visible"/>-->
-<!--          <el-table-column label="无功功率" align="center" prop="reactivePower" v-if="columns[13].visible"/>-->
-<!--          <el-table-column label="记录时间" align="center" prop="recordTime" width="180" v-if="columns[9].visible">-->
-<!--            <template slot-scope="scope">-->
-<!--              <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
-<!--            </template>-->
-<!--          </el-table-column>-->
-<!--          <el-table-column label="采集方式" align="center" prop="collectType" v-if="columns[14].visible">-->
-<!--            <template slot-scope="scope">-->
-<!--              <dict-tag :options="dict.type.collect_type" :value="scope.row.collectType"/>-->
-<!--            </template>-->
-<!--          </el-table-column>-->
-<!--          &lt;!&ndash;          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">&ndash;&gt;-->
-<!--          &lt;!&ndash;            <template slot-scope="scope">&ndash;&gt;-->
-<!--          &lt;!&ndash;              <el-button&ndash;&gt;-->
-<!--          &lt;!&ndash;                size="mini"&ndash;&gt;-->
-<!--          &lt;!&ndash;                type="text"&ndash;&gt;-->
-<!--          &lt;!&ndash;                icon="el-icon-edit"&ndash;&gt;-->
-<!--          &lt;!&ndash;                @click="handleUpdate(scope.row)"&ndash;&gt;-->
-<!--          &lt;!&ndash;                v-hasPermi="['ems/record:recordDnbInstant:edit']"&ndash;&gt;-->
-<!--          &lt;!&ndash;              >修改&ndash;&gt;-->
-<!--          &lt;!&ndash;              </el-button>&ndash;&gt;-->
-<!--          &lt;!&ndash;              <el-button&ndash;&gt;-->
-<!--          &lt;!&ndash;                size="mini"&ndash;&gt;-->
-<!--          &lt;!&ndash;                type="text"&ndash;&gt;-->
-<!--          &lt;!&ndash;                icon="el-icon-delete"&ndash;&gt;-->
-<!--          &lt;!&ndash;                @click="handleDelete(scope.row)"&ndash;&gt;-->
-<!--          &lt;!&ndash;                v-hasPermi="['ems/record:recordDnbInstant:remove']"&ndash;&gt;-->
-<!--          &lt;!&ndash;              >删除&ndash;&gt;-->
-<!--          &lt;!&ndash;              </el-button>&ndash;&gt;-->
-<!--          &lt;!&ndash;            </template>&ndash;&gt;-->
-<!--          &lt;!&ndash;          </el-table-column>&ndash;&gt;-->
-<!--        </el-table>-->
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
         <Chart ref="Chart1" class="chart1"/>
         <Chart ref="Chart2" class="chart2"/>
       </el-col>
     </el-row>
 
 
-
   </div>
 </template>
 
 <script>
 import {
   listRecordDnbInstant,
-  getRecordDnbInstant, dnbInstantList,
+  getRecordDnbInstant, dnbInstantList
 } from '@/api/ems/record/recordDnbInstant'
-import {getMonitorInfoTree} from '@/api/ems/base/baseMonitorInfo'
+import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import {parseTime} from '@/utils/ruoyi'
-import Chart from "@/components/Charts/Chart";
-import * as echarts from 'echarts';
+import { parseTime } from '@/utils/ruoyi'
+import Chart from '@/components/Charts/Chart'
+import * as echarts from 'echarts'
 
 export default {
   name: 'CurrentVoltageCurve',
@@ -152,6 +90,8 @@ export default {
       //左侧树结构List
       monitorInfoOptions: [],
       workUnitName: undefined,
+      //左侧树结构 检索设备名称
+      selectMonitorName: null,
       //计量设备信息
       baseMonitorInfoList: [],
       // 采集方式时间范围
@@ -176,16 +116,8 @@ export default {
       open: false,
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
         monitorCode: null,
         collectTime: null,
-        va: null,
-        vb: null,
-        vc: null,
-        ia: null,
-        ib: null,
-        ic: null,
         recordTime: null,
         glys: null,
         zxyg: null,
@@ -202,26 +134,26 @@ export default {
       // 表单校验
       rules: {
         objId: [
-          {required: true, message: '编号不能为空', trigger: 'blur'}
+          { required: true, message: '编号不能为空', trigger: 'blur' }
         ]
       },
       columns: [
-        {key: 0, label: `主键标识`, visible: false},
-        {key: 1, label: `计量设备编号`, visible: true},
-        {key: 2, label: `采集时间`, visible: true},
-        {key: 3, label: `A项电压`, visible: true},
-        {key: 4, label: `B项电压`, visible: true},
-        {key: 5, label: `C项电压`, visible: true},
-        {key: 6, label: `A项电流`, visible: true},
-        {key: 7, label: `B项电流`, visible: true},
-        {key: 8, label: `C项电流`, visible: true},
-        {key: 9, label: `记录时间`, visible: true},
-        {key: 10, label: `功率因数`, visible: true},
-        {key: 11, label: `正向有功`, visible: true},
-        {key: 12, label: `有功功率`, visible: false},
-        {key: 13, label: `无功功率`, visible: false},
-        {key: 14, label: `采集方式`, visible: true},
-        {key: 15, label: `计量设备名称`, visible: true}
+        { key: 0, label: `主键标识`, visible: false },
+        { key: 1, label: `计量设备编号`, visible: true },
+        { key: 2, label: `采集时间`, visible: true },
+        { key: 3, label: `A项电压`, visible: true },
+        { key: 4, label: `B项电压`, visible: true },
+        { key: 5, label: `C项电压`, visible: true },
+        { key: 6, label: `A项电流`, visible: true },
+        { key: 7, label: `B项电流`, visible: true },
+        { key: 8, label: `C项电流`, visible: true },
+        { key: 9, label: `记录时间`, visible: true },
+        { key: 10, label: `功率因数`, visible: true },
+        { key: 11, label: `正向有功`, visible: true },
+        { key: 12, label: `有功功率`, visible: false },
+        { key: 13, label: `无功功率`, visible: false },
+        { key: 14, label: `采集方式`, visible: true },
+        { key: 15, label: `计量设备名称`, visible: true }
       ]
     }
   },
@@ -258,18 +190,16 @@ export default {
         this.queryParams.params['beginCollectTime'] = this.daterangeCollectTime[0]
         this.queryParams.params['endCollectTime'] = this.daterangeCollectTime[1]
       }
-      listRecordDnbInstant(this.queryParams).then(response => {
-        this.dataList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
+      console.log(this.monitorInfoOptions)
       this.getChart()
     },
+
     // 取消按钮
     cancel() {
       this.open = false
       this.reset()
     },
+
     // 表单重置
     reset() {
       this.form = {
@@ -281,39 +211,19 @@ export default {
       }
       this.resetForm('form')
     },
+
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1
       this.getList()
     },
+
     /** 重置按钮操作 */
     resetQuery() {
       this.queryParams.monitorCode = null
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.objId)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = '添加电实时数据'
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const objId = row.objId || this.ids
-      getRecordDnbInstant(objId).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = '修改电实时数据'
-      })
-    },
+
     /** 导出按钮操作 */
     handleExport() {
       this.download('ems/record/recordDnbInstant/export', {
@@ -323,106 +233,109 @@ export default {
 
     /** 查询计量设备信息下拉树结构 */
     getTreeselect() {
-      getMonitorInfoTree({monitorType: 2}).then(response => {
+      getMonitorInfoTree({ monitorType: 2 }).then(response => {
         this.monitorInfoOptions = response.data
       })
     },
 
-    // 筛选节点
+    /** 筛选节点 */
     filterNode(value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
 
-    // 节点单击事件
+    /** 节点单击事件 */
     handleNodeClick(data) {
       this.queryParams.monitorCode = data.code
+      this.selectMonitorName = data.label
       this.handleQuery()
     },
 
-    async getChart(){
+    /** 电流电压曲线 */
+    async getChart() {
+      if (this.queryParams.monitorCode == null) {
+        return
+      }
       let query = JSON.parse(JSON.stringify(this.queryParams))
-      delete query.pageNum
-      delete query.pageSize
-      const {data} = await dnbInstantList(query)
+      const { data } = await dnbInstantList(query)
       let option1 = {
-        title:{
-          text:'电流曲线',
-          x:'center'
+        title: {
+          text: this.selectMonitorName + ' 电流曲线',
+          x: 'center'
         },
         grid: {
-          top: "15%",
-          bottom: "10%",
-          left:'3%',
-          right:'3%'
+          top: '15%',
+          bottom: '10%',
+          left: '3%',
+          right: '3%'
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "shadow",
+            type: 'shadow',
             label: {
-              show: true,
-            },
-          },
+              show: true
+            }
+          }
         },
-        dataZoom:[{
-          type:'slider'
+        dataZoom: [{
+          type: 'slider'
         }],
         legend: {
-          right:0
+          right: 0
         },
         xAxis: {
-          data: data.map(e=>e.collectTime),
+          data: data.map(e => e.collectTime),
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
-              color: "#000",
-            },
+              color: '#000'
+            }
           },
           axisTick: {
-            show: true, //隐藏X轴刻度
+            show: true //隐藏X轴刻度
           },
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#000", //X轴文字颜色
-            },
-          },
+              color: '#000' //X轴文字颜色
+            }
+          }
         },
         yAxis: [
           {
-            type: "value",
-            name: "电流（A）",
+            type: 'value',
+            name: '电流（A）',
             nameTextStyle: {
-              color: "#000",
+              color: '#000'
             },
             splitLine: {
-              show: false,
+              show: false
             },
             axisTick: {
-              show: true,
+              show: true
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: "#000",
-              },
+                color: '#000'
+              }
             },
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#000",
-              },
-            },
-          },
+                color: '#000'
+              }
+            }
+          }
         ],
         series: [
           {
-            name: "A相电流",
-            type: "line",
+            name: 'A相电流',
+            type: 'line',
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 10, //标记的大小
             // itemStyle: {
             //   //折线拐点标志的样式
@@ -434,14 +347,14 @@ export default {
             // areaStyle: {
             //   color: "rgba(5,140,255, 0.2)",
             // },
-            data: data.map(e=>e.ia),
+            data: data.map(e => e.ia)
           },
           {
-            name: "B相电流",
-            type: "line",
+            name: 'B相电流',
+            type: 'line',
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 10, //标记的大小
             // itemStyle: {
             //   //折线拐点标志的样式
@@ -453,14 +366,14 @@ export default {
             // areaStyle: {
             //   color: "rgba(5,140,255, 0.2)",
             // },
-            data: data.map(e=>e.ib),
+            data: data.map(e => e.ib)
           },
           {
-            name: "C相电流",
-            type: "line",
+            name: 'C相电流',
+            type: 'line',
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 10, //标记的大小
             // itemStyle: {
             //   color: "#058cff",
@@ -471,89 +384,89 @@ export default {
             // areaStyle: {
             //   color: "rgba(5,140,255, 0.2)",
             // },
-            data: data.map(e=>e.ic),
-          },
-        ],
+            data: data.map(e => e.ic)
+          }
+        ]
       }
       let option2 = {
-        title:{
-          text:'电压曲线',
-          x:'center'
+        title: {
+          text: this.selectMonitorName + ' 电压曲线',
+          x: 'center'
         },
         grid: {
-          top: "15%",
-          bottom: "10%",
-          left:'3%',
-          right:'3%'
+          top: '15%',
+          bottom: '10%',
+          left: '3%',
+          right: '3%'
         },
 
-        dataZoom:[{
-          type:'slider'
+        dataZoom: [{
+          type: 'slider'
         }],
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "shadow",
+            type: 'shadow',
             label: {
-              show: true,
-            },
-          },
+              show: true
+            }
+          }
         },
         legend: {
-          right:0
+          right: 0
         },
         xAxis: {
-          data: data.map(e=>e.collectTime),
+          data: data.map(e => e.collectTime),
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
-              color: "#000",
-            },
+              color: '#000'
+            }
           },
           axisTick: {
-            show: true, //隐藏X轴刻度
+            show: true //隐藏X轴刻度
           },
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#000", //X轴文字颜色
-            },
-          },
+              color: '#000' //X轴文字颜色
+            }
+          }
         },
         yAxis: [
           {
-            type: "value",
-            name: "电压（V）",
+            type: 'value',
+            name: '电压（V）',
             nameTextStyle: {
-              color: "#000",
+              color: '#000'
             },
             splitLine: {
-              show: false,
+              show: false
             },
             axisTick: {
-              show: true,
+              show: true
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: "#000",
-              },
+                color: '#000'
+              }
             },
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#000",
-              },
-            },
-          },
+                color: '#000'
+              }
+            }
+          }
         ],
         series: [
           {
-            name: "A相电压",
-            type: "line",
+            name: 'A相电压',
+            type: 'line',
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 10, //标记的大小
             // itemStyle: {
             //   //折线拐点标志的样式
@@ -565,14 +478,14 @@ export default {
             // areaStyle: {
             //   color: "rgba(5,140,255, 0.2)",
             // },
-            data: data.map(e=>e.va),
+            data: data.map(e => e.va)
           },
           {
-            name: "B相电压",
-            type: "line",
+            name: 'B相电压',
+            type: 'line',
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 10, //标记的大小
             // itemStyle: {
             //   //折线拐点标志的样式
@@ -584,14 +497,14 @@ export default {
             // areaStyle: {
             //   color: "rgba(5,140,255, 0.2)",
             // },
-            data: data.map(e=>e.vb),
+            data: data.map(e => e.vb)
           },
           {
-            name: "C相电压",
-            type: "line",
+            name: 'C相电压',
+            type: 'line',
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
+            symbol: 'circle', //标记的图形为实心圆
             symbolSize: 10, //标记的大小
             // itemStyle: {
             //   color: "#058cff",
@@ -602,19 +515,19 @@ export default {
             // areaStyle: {
             //   color: "rgba(5,140,255, 0.2)",
             // },
-            data: data.map(e=>e.vc),
-          },
-        ],
+            data: data.map(e => e.vc)
+          }
+        ]
       }
       this.$refs.Chart1.setData(option1)
       this.$refs.Chart2.setData(option2)
-      echarts.connect(this.$refs.Chart1.chart,this.$refs.Chart2.chart)
-      this.$refs.Chart1.chart.on('datazoom',(e)=>{
+      echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart)
+      this.$refs.Chart1.chart.on('datazoom', (e) => {
         option2.dataZoom[0].start = e.start
         option2.dataZoom[0].end = e.end
         this.$refs.Chart2.setData(option2)
       })
-      this.$refs.Chart2.chart.on('datazoom',(e)=>{
+      this.$refs.Chart2.chart.on('datazoom', (e) => {
         option1.dataZoom[0].start = e.start
         option1.dataZoom[0].end = e.end
         this.$refs.Chart1.setData(option1)
@@ -624,11 +537,12 @@ export default {
 }
 </script>
 <style>
-.chart1{
+.chart1 {
   width: 100%;
   height: 40vh;
 }
-.chart2{
+
+.chart2 {
   width: 100%;
   height: 40vh;
 }