添加图表

5 months ago · 809897c2ec
parent 570f252741
commit 809897c2ec
4 changed files with 371 additions and 33 deletions
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- 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",
--- a/src/components/Charts/Chart.vue
+++ 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>
--- 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>