bug修复，功能补全

src/views/powerQuality/harmonicReport/curveCom.vue → src/views/powerQuality/harmonicReport/curveComA.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div style="text-align: center">A相电流（A）</div>
+    <div style="text-align: center;font-weight:bold">A相电流（A）</div>
     <div class="height300" id="worksChartRef" ref="worksChartRef" />
   </div>
 </template>
@@ -10,7 +10,7 @@ import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 
 export default defineComponent({
-  name: 'CurveCom',
+  name: 'CurveComB',
   setup() {
     const store = useStore()
 
@@ -39,8 +39,6 @@ export default defineComponent({
           },
         },
         legend: {
-          data: ['平均值', '95%', '最大值'],
-          // align: 'right',
           right: 60,
           itemWidth: 10,
           itemHeight: 10,

src/views/powerQuality/harmonicReport/curveComB.vue

@@ -0,0 +1,195 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div style="text-align: center;font-weight:bold">B相电流（A）</div>
+    <div class="height300" id="curveComB" ref="curveComB" />
+  </div>
+</template>
+<script>
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+import * as echarts from 'echarts'
+
+export default defineComponent({
+  name: 'CurveComA',
+  setup() {
+    const store = useStore()
+
+    // 总数
+    const total = computed(() => store.state.Home.worksChartData.total)
+    // num
+    const num = computed(() => store.state.Home.worksChartData.num)
+
+    // 读取数据 func
+    const loading = ref(true)
+    const getData = async () => {
+      // loading.value = true
+      // await store.dispatch("Home/queryWorksChartData");
+      loading.value = false;
+    }
+
+    onMounted(() => {
+      getData()
+      let myChart = echarts.init(document.getElementById('curveComB'))
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show:false,
+          data: ['平均值', '95%', '最大值'],
+          // align: 'right',
+          right: 60,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 35,
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              '1次',
+              '3次',
+              '5次',
+              '7次',
+              '9次',
+              '11次',
+              '13次',
+              '15次',
+              '17次',
+              '19次 ',
+            ],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#444',
+                width: 1,
+                type: 'solid',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              color: '#444',
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'A',
+            nameTextStyle: {
+              color: '#444',
+            },
+            axisLabel: {
+              formatter: '{value} ',
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#444',
+                width: 1,
+                type: 'solid',
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#444',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '平均值',
+            type: 'bar',
+            data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+            barWidth: 10, //柱子宽度
+            barGap: '1', //柱子之间间距
+            itemStyle: {
+              normal: {
+                color: '#5b82ee',
+                opacity: 1,
+              },
+            },
+          },
+          {
+            name: '95%',
+            type: 'bar',
+            data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+            barWidth: 10,
+            barGap: '1',
+            itemStyle: {
+              normal: {
+                color: '#f2e251',
+                opacity: 1,
+              },
+            },
+          },
+          {
+            name: '最大值',
+            type: 'bar',
+            data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+            barWidth: 10,
+            barGap: '1',
+            itemStyle: {
+              normal: {
+                color: '#fe8161',
+                opacity: 1,
+              },
+            },
+          },
+        ],
+      })
+      window.onresize = function () {
+        // 自适应大小
+        myChart.resize()
+      }
+    })
+
+    return {
+      loading,
+      total,
+      num,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+  margin-bottom: 24px;
+  ::v-deep(.el-card__header) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  ::v-deep(.el-card__body) {
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+  ::v-deep(.el-divider) {
+    margin: 8px 0;
+  }
+  .num {
+    font-size: 30px;
+    color: #515a6e;
+  }
+  .height300 {
+    height: 300px;
+  }
+}
+</style>

src/views/powerQuality/harmonicReport/curveComC.vue

@@ -0,0 +1,195 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div style="text-align: center;font-weight:bold">C相电流（A）</div>
+    <div class="height300" id="curveComC" ref="curveComC" />
+  </div>
+</template>
+<script>
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+import * as echarts from 'echarts'
+
+export default defineComponent({
+  name: 'CurveComC',
+  setup() {
+    const store = useStore()
+
+    // 总数
+    const total = computed(() => store.state.Home.worksChartData.total)
+    // num
+    const num = computed(() => store.state.Home.worksChartData.num)
+
+    // 读取数据 func
+    const loading = ref(true)
+    const getData = async () => {
+      // loading.value = true
+      // await store.dispatch("Home/queryWorksChartData");
+      loading.value = false;
+    }
+
+    onMounted(() => {
+      getData()
+      let myChart = echarts.init(document.getElementById('curveComC'))
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show:false,
+          data: ['平均值', '95%', '最大值'],
+          // align: 'right',
+          right: 60,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 35,
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              '1次',
+              '3次',
+              '5次',
+              '7次',
+              '9次',
+              '11次',
+              '13次',
+              '15次',
+              '17次',
+              '19次 ',
+            ],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#444',
+                width: 1,
+                type: 'solid',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              color: '#444',
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'A',
+            nameTextStyle: {
+              color: '#444',
+            },
+            axisLabel: {
+              formatter: '{value} ',
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#444',
+                width: 1,
+                type: 'solid',
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#444',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '平均值',
+            type: 'bar',
+            data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+            barWidth: 10, //柱子宽度
+            barGap: '1', //柱子之间间距
+            itemStyle: {
+              normal: {
+                color: '#5b82ee',
+                opacity: 1,
+              },
+            },
+          },
+          {
+            name: '95%',
+            type: 'bar',
+            data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+            barWidth: 10,
+            barGap: '1',
+            itemStyle: {
+              normal: {
+                color: '#f2e251',
+                opacity: 1,
+              },
+            },
+          },
+          {
+            name: '最大值',
+            type: 'bar',
+            data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+            barWidth: 10,
+            barGap: '1',
+            itemStyle: {
+              normal: {
+                color: '#fe8161',
+                opacity: 1,
+              },
+            },
+          },
+        ],
+      })
+      window.onresize = function () {
+        // 自适应大小
+        myChart.resize()
+      }
+    })
+
+    return {
+      loading,
+      total,
+      num,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+  margin-bottom: 24px;
+  ::v-deep(.el-card__header) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  ::v-deep(.el-card__body) {
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+  ::v-deep(.el-divider) {
+    margin: 8px 0;
+  }
+  .num {
+    font-size: 30px;
+    color: #515a6e;
+  }
+  .height300 {
+    height: 300px;
+  }
+}
+</style>

src/views/powerQuality/harmonicReport/index.vue

@@ -108,7 +108,9 @@
       表格
     </el-button>
     <div  v-if="num2 == 0">
-        <curve-com></curve-com>
+        <curve-comA></curve-comA>
+        <curve-comB></curve-comB>
+        <curve-comC></curve-comC>
     </div>
    
     <table-com v-if="num2 == 1"></table-com>
@@ -116,13 +118,17 @@
 </template>
 
 <script>
-import curveCom from './curveCom'
+import curveComA from './curveComA'
+import curveComB from './curveComB'
+import curveComC from './curveComC'
 import tableCom from './tableCom'
 
 export default {
   name: 'VariableList',
   components: {
-    curveCom,
+    curveComA,
+    curveComB,
+    curveComC,
     tableCom,
   },