feat：富阳看板对接；

src/views/dashboard/common/model.ts

@@ -27,7 +27,7 @@ export const monthEnergyUsageTrend = (data = [], unit?: string): IObject => {
           const [first] = params;
           const { axisValue } = first;
 
-          let str = `<div>${axisValue}日</div><div>`;
+          let str = `<div>${new dateService().getYear()}年${+new dateService().getMonth()}月${axisValue}日</div><div>`;
           for (const item of params) {
             const { data } = item;
             str += `<div style="display: flex;justify-content: space-between;"><span>${
@@ -307,7 +307,7 @@ export const usageRanking = (data = [], unit?: string): IObject => {
             const { data } = item;
             str += `<div style="display: flex;justify-content: space-between;"><span>${
               item.marker
-            }</span> <span><b>${data ?? '--'}</b> ${unit}</span></div>`;
+            }</span> <span><b>${data ?? '--'}</b> ${''}</span></div>`;
           }
           return str + '</div>';
         }
@@ -320,7 +320,7 @@ export const usageRanking = (data = [], unit?: string): IObject => {
       left: 70,
     },
     xAxis: {
-      name: '（万）',
+      name: '',
       type: 'value',
       boundaryGap: [0, 0.01],
       axisLine: { lineStyle: { color: '#fff' }, show: true },
@@ -344,7 +344,7 @@ export const usageRanking = (data = [], unit?: string): IObject => {
         barWidth: 16,
         itemStyle: {
           normal: {
-            color: '#25DDFF',
+            color: '#27A8B1',
             barBorderRadius: [10, 10, 10, 10],
           },
         },
@@ -385,7 +385,7 @@ export const elecPayload = (data = []): IObject => {
           const [first] = params;
           const { axisValue } = first;
 
-          let str = `<div>${moment().format('YYYY-MM-DD')} ${axisValue}时</div><div>`;
+          let str = `<div>${moment().format('YYYY年MM月DD')} ${axisValue}时</div><div>`;
           for (const item of params) {
             const { seriesName, data } = item;
             str += `<div style="display: flex;justify-content: space-between;"><span>${
@@ -579,3 +579,134 @@ export const yearUsageRank = (data = []): IObject => {
     ],
   };
 };
+
+//能耗统计 扇形
+export const energyUsageStatistic = (data = []) => {
+  return {
+    legend: {
+      // data: data.map((v) => ({ name: v.name })),
+      type: 'scroll',
+      bottom: 15,
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    tooltip: {
+      formatter: (params) => {
+        if (params.name !== '') {
+          return (
+            params.marker +
+            params.name +
+            ' : ' +
+            (params.value ?? '--') +
+            ' tce \n' +
+            '(' +
+            params.percent +
+            '%)'
+          );
+        }
+      },
+    },
+    series: [
+      {
+        name: '能耗统计（月）',
+        center: ['50%', '40%'],
+        type: 'pie',
+        radius: '70%',
+        itemStyle: {
+          borderRadius: 8,
+        },
+        data: data.map((v) => ({ name: v.name, value: v.value })),
+        // emphasis: { scale: false },
+        label: {
+          show: true,
+          position: 'inside', // 文字位置：'inside'（内部）、'outside'（外部）
+          color: '#fff', // 文字颜色
+          fontSize: 12, // 文字大小: '{b}' + ' ' + '{c}',
+          formatter: (params) => {
+            if (params.name !== '') {
+              return (
+                params.name +
+                ' : ' +
+                (params.value ?? '--') +
+                ' tce \n' +
+                '(' +
+                params.percent +
+                '%)'
+              );
+            }
+          },
+        },
+      },
+    ],
+  };
+};
+
+//光伏用能（月）
+export const photovoltaicEnergyUse = (data = [], unit?: string) => {
+  const length = new dateService().getDateCountByMonth()[+new dateService().getMonth()];
+  const xAxisData = Array.from({ length }, (x, i) => i + 1);
+  const seriesData = [];
+  if (utilService.isValidArray(data)) {
+    for (const day of xAxisData) {
+      let val;
+      for (const item of data) {
+        if (day === +moment(item.date).format('D')) {
+          val = item.value;
+        }
+      }
+      seriesData.push(val);
+    }
+  }
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: Array<IObject>) => {
+        if (utilService.isValidArray(params)) {
+          const [first] = params;
+          const { axisValue } = first;
+
+          let str = `<div>${new dateService().getYear()}年${+new dateService().getMonth()}月${axisValue}日</div><div>`;
+          for (const item of params) {
+            const { data } = item;
+            str += `<div style="display: flex;justify-content: space-between;"><span>${
+              item.marker
+            }</span> <span><b>${data ?? '--'}</b> ${unit}</span></div>`;
+          }
+          return str + '</div>';
+        }
+        return '';
+      },
+    },
+    grid: {
+      bottom: 45,
+      top: 30,
+      left: 60,
+    },
+    xAxis: {
+      name: '（日）',
+      type: 'category',
+      data: xAxisData,
+      axisLine: { lineStyle: { color: '#fff' } },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#fff' }, show: true },
+      splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' } },
+    },
+    series: [
+      {
+        color: '#27A8B1',
+        data: seriesData,
+        type: 'line',
+        smooth: true,
+        lineStyle: { width: 3 },
+        emphasis: {
+          focus: 'series',
+        },
+        showSymbol: true,
+      },
+    ],
+  };
+};

src/views/dashboard/comp/pop.vue

@@ -101,7 +101,7 @@ export default defineComponent({
 
   &:first-child {
     b {
-      font-size: 20px !important;
+      //   font-size: 20px !important;
     }
   }
 }

src/views/dashboard/main.vue

@@ -52,7 +52,7 @@ import timeCountHooks from '@/hooks/time-count';
 import { useFetch } from '@/hooks/fetch';
 import utilService from '@/service/utilService';
 import Chart from '@/components/chart.vue';
-import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution, yearUsageRank } from './common/model';
+import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution, yearUsageRank, energyUsageStatistic, photovoltaicEnergyUse } from './common/model';
 import { IObject } from '@/types/interface';
 import moment from 'moment';
 import toolHooks from '@/hooks/tool';
@@ -129,10 +129,16 @@ export default defineComponent({
           ],
         },
         {
-          title: '年度用能排行',
           comp: 'chart',
-          option: yearUsageRank(),
+          title: '月度用能排行',
+          option: usageRanking(),
+          unit: 'kWh',
         },
+        // {
+        //   title: '年度用能排行',
+        //   comp: 'chart',
+        //   option: yearUsageRank(),
+        // },
         {
           comp: 'chart',
           title: '当日电力负荷',
@@ -144,22 +150,20 @@ export default defineComponent({
         {
           comp: 'chart',
           title: '能耗统计（月）',
-          option: costStatistic(),
-          unit: '',
+          option: energyUsageStatistic(),
+          unit: 'tce',
         },
         {
           comp: 'chart',
-          title: '用能排行（月）',
-          option: usageRanking(),
+          title: '光伏用能（月）',
+          option: photovoltaicEnergyUse(),
           unit: 'kWh',
-          select: true,
         },
         {
-          title: '当月用能趋势',
+          title: '当年用能趋势',
           comp: 'chart',
           option: monthEnergyUsageTrend(),
           unit: 'kWh',
-          select: true,
         },
       ],
       bottom: {
@@ -174,37 +178,6 @@ export default defineComponent({
       const u = state.dataForm.codeMap[c];
       state.left[2].unit = u;
       state.right[1].unit = u;
-
-      //当月用能趋势
-      useFetch('/board/monthEnergy/analyse', {
-        data: {
-          month: moment().format('YYYY-MM'),
-          type,
-        },
-        cb: (res: any) => {
-          if (utilService.isValidObject(res) && utilService.isValidArray(res.currentMonthData)) {
-            const d = res.currentMonthData;
-            const c = state.dataForm.code;
-            const u = state.dataForm.codeMap[c];
-            state.right[2].option = monthEnergyUsageTrend(d, u);
-          }
-        },
-      });
-
-      //用能排行（月）
-      useFetch('/board/monthEnergy/ranking', {
-        data: {
-          day: moment().format('YYYY-MM'),
-          type,
-        },
-        cb: (res: any) => {
-          if (utilService.isValidArray(res)) {
-            const c = state.dataForm.code;
-            const u = state.dataForm.codeMap[c];
-            state.right[1].option = usageRanking(res, u);
-          }
-        },
-      });
     };
 
     const fn = () => {
@@ -218,7 +191,9 @@ export default defineComponent({
           }
         },
       });
-      //月用能统计
+
+      //左侧
+      //日用能统计
       useFetch('/board/eachEnergy', {
         cb: (res: any) => {
           if (utilService.isValidObject(res)) {
@@ -228,38 +203,73 @@ export default defineComponent({
           }
         },
       });
-      //年用能统计
-      useFetch('/board/eachEnergyYear', {
+      //月度用能排行
+      useFetch('/board/monthEnergy/ranking', {
+        data: {
+          month: moment().format('YYYY-MM'),
+          type: '电',
+        },
         cb: (res: any) => {
-          if (utilService.isValidObject(res)) {
-            for (const item of state.left[1].data) {
-              item.value = res[item.key] ?? '--';
+          if (utilService.isValidArray(res)) {
+            const c = state.dataForm.code;
+            const u = state.dataForm.codeMap[c];
+            state.left[1].option = usageRanking(res, u);
           }
+        },
+      });
+
+      //当日电力负荷
+      useFetch('/board/qcDayLoad/analyse', {
+        data: {
+          day: moment().format('YYYY-MM-DD'),
+        },
+        cb: (res: any) => {
+          if (utilService.isValidObject(res) && utilService.isValidArray(res.currentMonthData)) {
+            const d = res.currentMonthData;
+            state.left[2].option = elecPayload(d);
           }
         },
       });
 
-      //能耗费用统计
+      //右侧
+      //能耗统计（月）
       useFetch('/board/energyCost', {
         data: {
           day: moment().format('YYYY-MM-DD'),
         },
         cb: (res: any) => {
           if (utilService.isValidArray(res)) {
-            state.right[0].option = costStatistic(res);
+            state.right[0].option = energyUsageStatistic(res);
           }
         },
       });
 
-      //当日电力负荷
-      useFetch('/board/qcDayLoad/analyse', {
+      //光伏用能（月）
+      useFetch('/board/photovoltaic', {
         data: {
           day: moment().format('YYYY-MM-DD'),
         },
+        cb: (res: any) => {
+          if (utilService.isValidArray(res)) {
+            const c = state.dataForm.code;
+            const u = state.dataForm.codeMap[c];
+            state.right[1].option = photovoltaicEnergyUse(res, u);
+          }
+        },
+      });
+
+      //当年用能趋势
+      useFetch('/board/eachEnergyYear', {
+        data: {
+          day: moment().format('YYYY-MM-DD'),
+          type: '电',
+        },
         cb: (res: any) => {
           if (utilService.isValidObject(res) && utilService.isValidArray(res.currentMonthData)) {
             const d = res.currentMonthData;
-            state.left[2].option = elecPayload(d);
+            const c = state.dataForm.code;
+            const u = state.dataForm.codeMap[c];
+            state.right[2].option = monthEnergyUsageTrend(d, u);
           }
         },
       });