From 809897c2ec67c55f7badac67ac1bddbce8679c07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 25 Jun 2024 17:20:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jsconfig.json                                 |  19 +
 package.json                                  |   2 +-
 src/components/Charts/Chart.vue               |  35 ++
 .../ems/report/currentVoltageCurve/index.vue  | 348 ++++++++++++++++--
 4 files changed, 371 insertions(+), 33 deletions(-)
 create mode 100644 jsconfig.json
 create mode 100644 src/components/Charts/Chart.vue

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..4aafc5f
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
diff --git a/package.json b/package.json
index d9f6b64..f0a3beb 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "af-table-column": "^1.0.3",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
-    "core-js": "3.25.3",
+    "core-js": "^3.37.1",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
diff --git a/src/components/Charts/Chart.vue b/src/components/Charts/Chart.vue
new file mode 100644
index 0000000..0899129
--- /dev/null
+++ b/src/components/Charts/Chart.vue
@@ -0,0 +1,35 @@
+<template>
+  <div />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  expose: ['setData'],
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setData(option) {
+      this.initChart(option)
+    },
+    initChart(option) {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/src/views/ems/report/currentVoltageCurve/index.vue b/src/views/ems/report/currentVoltageCurve/index.vue
index 00427bb..ee85e43 100644
--- a/src/views/ems/report/currentVoltageCurve/index.vue
+++ b/src/views/ems/report/currentVoltageCurve/index.vue
@@ -54,9 +54,9 @@
             <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-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"/>
@@ -109,17 +109,19 @@
           <!--            </template>-->
           <!--          </el-table-column>-->
         </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>
 
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
   </div>
 </template>
@@ -127,17 +129,20 @@
 <script>
 import {
   listRecordDnbInstant,
-  getRecordDnbInstant,
+  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 {parseTime} from '@/utils/ruoyi'
+import Chart from "@/components/Charts/Chart";
+import * as echarts from 'echarts';
 
 export default {
   name: 'CurrentVoltageCurve',
   dicts: ['collect_type'],
   components: {
+    Chart,
     Treeselect
   },
   data() {
@@ -197,26 +202,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,6 +263,7 @@ export default {
         this.total = response.total
         this.loading = false
       })
+      this.getChart()
     },
     // 取消按钮
     cancel() {
@@ -317,7 +323,7 @@ export default {
 
     /** 查询计量设备信息下拉树结构 */
     getTreeselect() {
-      getMonitorInfoTree({ monitorType: 2 }).then(response => {
+      getMonitorInfoTree({monitorType: 2}).then(response => {
         this.monitorInfoOptions = response.data
       })
     },
@@ -332,8 +338,286 @@ export default {
     handleNodeClick(data) {
       this.queryParams.monitorCode = data.code
       this.handleQuery()
-    }
+    },
 
+    async getChart(){
+      let query = JSON.parse(JSON.stringify(this.queryParams))
+      delete query.pageNum
+      delete query.pageSize
+      const {data} = await dnbInstantList(query)
+      let option1 = {
+        grid: {
+          top: "10%",
+          bottom: "10%",
+          left:'3%',
+          right:'3%'
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+            },
+          },
+        },
+        dataZoom:[{
+          type:'slider'
+        }],
+        legend: {},
+        xAxis: {
+          data: data.map(e=>e.collectTime),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: "#000",
+            },
+          },
+          axisTick: {
+            show: true, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#000", //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "电流",
+            nameTextStyle: {
+              color: "#000",
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#000",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#000",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "A电流",
+            type: "line",
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 10, //标记的大小
+            // itemStyle: {
+            //   //折线拐点标志的样式
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e=>e.ia),
+          },
+          {
+            name: "B电流",
+            type: "line",
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 10, //标记的大小
+            // itemStyle: {
+            //   //折线拐点标志的样式
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e=>e.ib),
+          },
+          {
+            name: "C电流",
+            type: "line",
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 10, //标记的大小
+            // itemStyle: {
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e=>e.ic),
+          },
+        ],
+      }
+      let option2 = {
+        grid: {
+          top: "10%",
+          bottom: "10%",
+          left:'3%',
+          right:'3%'
+        },
+
+        dataZoom:[{
+          type:'slider'
+        }],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+            },
+          },
+        },
+        legend: {},
+        xAxis: {
+          data: data.map(e=>e.collectTime),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: "#000",
+            },
+          },
+          axisTick: {
+            show: true, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#000", //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "电压",
+            nameTextStyle: {
+              color: "#000",
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#000",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#000",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "A电压",
+            type: "line",
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 10, //标记的大小
+            // itemStyle: {
+            //   //折线拐点标志的样式
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e=>e.va),
+          },
+          {
+            name: "B电压",
+            type: "line",
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 10, //标记的大小
+            // itemStyle: {
+            //   //折线拐点标志的样式
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e=>e.vb),
+          },
+          {
+            name: "C电压",
+            type: "line",
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 10, //标记的大小
+            // itemStyle: {
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            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)=>{
+        option2.dataZoom[0].start = e.start
+        option2.dataZoom[0].end = e.end
+        this.$refs.Chart2.setData(option2)
+      })
+      this.$refs.Chart2.chart.on('datazoom',(e)=>{
+        option1.dataZoom[0].start = e.start
+        option1.dataZoom[0].end = e.end
+        this.$refs.Chart1.setData(option1)
+      })
+    }
   }
 }
 </script>
+<style>
+.chart1{
+  width: 100%;
+  height: 40vh;
+}
+.chart2{
+  width: 100%;
+  height: 40vh;
+}
+</style>