能源统计页面功能完善

src/views/energyManage/energyStatistics/branch.vue

@@ -60,7 +60,7 @@
             </el-card>
         </el-col>
         <el-col :md="24" :lg="18" style="height: calc(50%);margin-bottom: 20px;">
-            <el-card class="card-area" style="height: 100%;" :body-style="{ height: '100%' }">
+            <el-card class="card-area" style="height: 100%;" :body-style="{ height: '100%' }" v-loading="twoChartLoading">
                 <div class="card-area-header" style="margin-bottom: 20px;">
                     <img class="image" src="@/assets/images/energyManage/onThatDay.png" alt="整体图片">
                     <div class="title">支路用电</div>
@@ -74,10 +74,15 @@
                 </div>
 
                 <div class="card-area-center" style="height: calc(100% - 40px);">
-                    <countChart ref="twoChartRef" class="chart" height="100%" style="width: 75%;" :chartData="twoChartData"
-                        v-loading="twoChartLoading" />
+                    <countChart ref="twoChartRef" class="chart" height="100%" style="width: 75%;"
+                        :chartData="twoChartData" />
                     <div style="width: 25%;height: 100%;">
-
+                        <div style="height: 50%;">
+                            <pieChart2 ref="treeChartRef" class="chart" height="100%" :chartData="treeChartData" />
+                        </div>
+                        <div style="height: 50%;">
+                            <pieChart2 ref="fourChartRef" class="chart" height="100%" :chartData="fourChartData" />
+                        </div>
                     </div>
                 </div>
             </el-card>
@@ -91,6 +96,7 @@ import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue
 /*----------------------------------接口引入-----------------------------------*/
 /*----------------------------------组件引入-----------------------------------*/
 import pieChart from './components/pieChart.vue'
+import pieChart2 from './components/pieChart2.vue'
 import countChart from './components/countChart.vue'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
@@ -137,12 +143,36 @@ const state = reactive({
                 }
             },
         ]
-    }
+    },
+    treeChartData: {
+        text: '今日',
+        constValue: 100,
+        unit: "kWh",
+        seriesData: [
+            { value: 1048, name: '尖', selected: true },
+            { value: 1048, name: '峰' },
+            { value: 1048, name: '平' },
+            { value: 1048, name: '谷' },
+        ]
+    },
+    fourChartData: {
+        text: '昨日',
+        constValue: 100,
+        unit: "kWh",
+        seriesData: [
+            { value: 1048, name: '尖' },
+            { value: 1048, name: '峰' },
+            { value: 1048, name: '平' },
+            { value: 1048, name: '谷' },
+        ]
+    },
 })
-const { oneChartLoading, oneChartData, twoChartLoading, twoChartData, timeRangeType, pieChartData } = toRefs(state)
+const { oneChartLoading, oneChartData, twoChartLoading, twoChartData, timeRangeType, pieChartData, treeChartData, fourChartData } = toRefs(state)
 
 function initChartData() {
     proxy.$refs["pieChartRef"].initEcharts()
+    proxy.$refs["treeChartRef"].initEcharts()
+    proxy.$refs["fourChartRef"].initEcharts()
 
 
     state.timeRangeType.value = 'dayValue'

src/views/energyManage/energyStatistics/components/countChart.vue

@@ -0,0 +1,117 @@
+<template>
+  <div shadow="never" class="homeBoxCard">
+    <div class="height400" ref="lineChartBanlance" :style="{ height: props.height }" />
+  </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  chartData: Object,
+  height: Number
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+let lineChartBanlance = ref(null)
+
+function initEcharts() {
+  let myChart = echarts.init(lineChartBanlance.value)
+  // 绘制图表
+  myChart.setOption({
+    // backgroundColor: "pink",
+    color: ['#41BED8', '#FCD011'],
+    title: {
+      subtext: props.chartData.subtext
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      bottom: '0',
+      data: props.chartData.legendData
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      top: '40',
+      bottom: '30',
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        // prettier-ignore
+        data: props.chartData.xAxisData,
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        align: 'center',
+        axisLabel: {
+          align: 'center'  // 设置标签居中
+        },
+      }
+    ],
+    series: props.chartData.seriesData
+  })
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
+
+function writeValue(val) {
+  // getData()
+  initEcharts()
+}
+
+//监听变化
+watch(
+  () => props.chartData,
+  (newVal, oldVal, clear) => {
+    // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+    clear(() => clearTimeout(writeValue(newVal, oldVal)))
+  },
+  { lazy: true }
+)
+
+// 暴露变量
+defineExpose({
+  initEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+
+  ::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;
+  }
+
+  .height400 {
+    height: 255px;
+  }
+}
+</style>

src/views/energyManage/energyStatistics/components/pieChart.vue

@@ -0,0 +1,95 @@
+<template>
+    <div shadow="never" class="homeBox">
+        <div class="chart" ref="lineChartBanlance" :style="{ height: props.height }" />
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    height: Number,
+    chartData: Object
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+let lineChartBanlance = ref(null)
+
+function initEcharts() {
+    let myChart = echarts.init(lineChartBanlance.value)
+    // 绘制图表
+    myChart.setOption({
+        color: ['#41BED8', '#FCD011'],
+        title: {
+            text: props.chartData.text,
+            left: 'left',
+            textStyle: {
+                fontSize: 12,
+                color: '#666666',
+            },
+        },
+        tooltip: {
+            show: false,
+            trigger: 'item'
+        },
+        legend: {
+            show: false,
+            bottom: '0',
+            left: 'center'
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '70%'], // 控制环形的内外半径，形成环形图效果
+                center: ['50%', '50%'], // 设置图表中心位置
+                label: {
+                    show: true,
+                    position: 'center',
+                    formatter: function (parms) {
+                        return `${parms.data.value}% \n\n ${parms.data.name}`;
+                    },
+                    fontSize: 14,
+                    fontWeight: 'bold',
+                    color: '#666666'
+                },
+                data: props.chartData.seriesData
+            },
+        ],
+    })
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+function writeValue(val) {
+    // getData()
+    initEcharts()
+}
+
+//监听变化
+watch(
+    () => props.chartData,
+    (newVal, oldVal, clear) => {
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(writeValue(newVal, oldVal)))
+    },
+    { lazy: true }
+)
+
+// 暴露变量
+defineExpose({
+    initEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.homeBox {
+    .chart {
+        height: 440px;
+    }
+}
+</style>

src/views/energyManage/energyStatistics/components/pieChart2.vue

@@ -0,0 +1,116 @@
+<template>
+    <div shadow="never" class="homeBox">
+        <div class="chart" ref="lineChartBanlance" :style="{ height: props.height }" />
+        <div class="center-area">
+            <div class="value">{{ props.chartData.constValue }}</div>
+            <div class="unit">{{ props.chartData.unit }}</div>
+        </div>
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    height: Number,
+    chartData: Object
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+let lineChartBanlance = ref(null)
+
+function initEcharts() {
+    let myChart = echarts.init(lineChartBanlance.value)
+    // 绘制图表
+    myChart.setOption({
+        color: ['#ee6666', '#ffba9d', '#8ad4c7', '#88a9f8'],
+        title: {
+            text: props.chartData.text,
+            left: 'right',
+            textStyle: {
+                fontSize: 12,
+                color: '#666666',
+            },
+        },
+        tooltip: {
+            show: true,
+            trigger: 'item'
+        },
+        legend: {
+            show: false,
+            bottom: '0',
+            left: 'center'
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '70%'], // 控制环形的内外半径，形成环形图效果
+                center: ['50%', '50%'], // 设置图表中心位置
+                label: {
+                    show: true,
+                    position: 'inner',
+                    fontSize: 12,
+                    color: '#FFFFFF'
+                },
+                data: props.chartData.seriesData
+            },
+        ],
+    })
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+function writeValue(val) {
+    // getData()
+    initEcharts()
+}
+
+//监听变化
+watch(
+    () => props.chartData,
+    (newVal, oldVal, clear) => {
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(writeValue(newVal, oldVal)))
+    },
+    { lazy: true }
+)
+
+// 暴露变量
+defineExpose({
+    initEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.homeBox {
+    position: relative;
+    display: flex;
+    justify-content: center;
+
+    .chart {
+        height: 440px;
+    }
+
+    .center-area {
+        position: absolute;
+        top: 40%;
+        width: 100%;
+        text-align: center;
+
+        .value {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+
+        .unit {
+            font-size: 14px;
+        }
+    }
+}
+</style>