feat：富阳看板对接；

src/styles/base/base.less

@@ -202,6 +202,11 @@
   src: url('../../assets/font/Alibaba-PuHuiTi-Heavy.ttf');
 }
 
+@font-face {
+  font-family: 'pmzt'; //庞门正体
+  src: url('../../assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf');
+}
+
 ::-webkit-scrollbar-corner {
   background: transparent;
 }

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>${
@@ -537,3 +537,176 @@ export const energyUsageDistribution = (data = []): IObject => {
     series: seriesData,
   };
 };
+
+export const yearUsageRank = (data = []): IObject => {
+  return {
+    grid: {
+      bottom: 45,
+      top: 30,
+      left: 40,
+    },
+    xAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#fff' }, show: true },
+      splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' } },
+    },
+    yAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisLine: { lineStyle: { color: '#fff' } },
+      axisLabel: { fontSize: 10 },
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
+        barWidth: 12,
+        itemStyle: {
+          normal: {
+            color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#1898C3',
+              },
+              {
+                offset: 1,
+                color: '#0B4F98',
+              },
+            ]),
+          },
+        },
+      },
+    ],
+  };
+};
+
+//能耗统计 扇形
+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/item.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="item-container">
+    <div class="wrapper" v-for="(val, index) in item.data || []" :key="index">
+      <img :src="$util.getImg('/src/assets/images/dashboard/item/' + index + '.png')" alt="" />
+      <div class="main">
+        <div class="title">{{ `${val.label}（${val.unit}）` }}</div>
+        <div class="value">{{ val.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue';
+import { IObject } from '@/types/interface';
+import utilService from '@/service/utilService';
+export default defineComponent({
+  name: 'item',
+  props: { item: { type: Object, default: () => ({}) }, dataForm: { type: Object, default: () => ({}) }, sizeType: { type: String, default: () => '1' } },
+  setup(props) {
+    const state = reactive({});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+});
+</script>
+
+<style scoped lang="less">
+.item-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+  // align-items: center;
+  > .wrapper {
+    display: flex;
+    flex: 1;
+    > img {
+      //width: 158px;
+      height: 120px;
+    }
+    > .main {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      > .title {
+        font-size: 16px;
+        color: #fff;
+      }
+      > .value {
+        font-family: 'pmzt';
+        background: linear-gradient(0deg, #1bc0fd 0%, #1eeaf1 100%);
+        font-size: 31px;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+}
+</style>

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

@@ -47,11 +47,12 @@ import ScreenAdapter from '@/components/screen-adapter.vue';
 import Block from './comp/block.vue';
 import Bar from './comp/bar.vue';
 import Pop from './comp/pop.vue';
+import Item from './comp/item.vue';
 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 } 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';
@@ -64,7 +65,7 @@ export default defineComponent({
     Tooltip,
     Block,
     Chart,
-
+    Item,
     Bar,
     Pop,
   },
@@ -73,7 +74,7 @@ export default defineComponent({
     const { generateSvg2Dom } = toolHooks();
 
     const state = reactive({
-      opt: { scale: 0.8 },
+      opt: { scale: 1.0 },
       dragStretch: null,
       toolTipData: {},
       timer: null,
@@ -86,30 +87,30 @@ export default defineComponent({
         {
           key: 'yearCarbon',
           icon: '',
-          label: '年碳排放量',
+          label: '年度综合能耗',
           value: '--',
-          unit: 'tCO₂',
+          unit: 'tce',
           toFixed: 2,
         },
         {
           key: 'monthConsumptionValue',
           icon: '',
-          label: '月综合能耗',
+          label: '光伏发电量',
           value: '--',
-          unit: 'tce',
+          unit: 'kWh',
         },
         {
           key: 'yearConsumptionValue',
           icon: '',
-          label: '年综合能耗',
+          label: '碳排放量',
           value: '--',
-          unit: 'tce',
+          unit: 'tCO₂',
         },
       ],
       left: [
         {
-          comp: 'bar',
-          title: '月用能统计',
+          comp: 'item',
+          title: '日用能统计',
           data: [
             {
               key: 'electricDayValue',
@@ -125,70 +126,19 @@ export default defineComponent({
               value: '',
               unit: 't',
             },
-            {
-              key: 'steamDayValue',
-              icon: 'steam',
-              label: '蒸汽用量',
-              value: '',
-              unit: 't',
-            },
-            {
-              key: 'airDayValue',
-              icon: 'air',
-              label: '压缩空气用量',
-              value: '',
-              unit: 'Nm³',
-            },
-            {
-              key: 'gasValue',
-              icon: 'gas',
-              label: '天然气用量',
-              value: '',
-              unit: 'Nm³',
-            },
           ],
         },
         {
-          title: '年用能统计',
-          comp: 'bar',
-          data: [
-            {
-              key: 'electricDayValue',
-              icon: 'elec',
-              label: '电用量',
-              value: '',
-              unit: 'kWh',
-            },
-            {
-              key: 'waterDayValue',
-              icon: 'water',
-              label: '水用量',
-              value: '',
-              unit: 't',
-            },
-            {
-              key: 'steamDayValue',
-              icon: 'steam',
-              label: '蒸汽用量',
-              value: '',
-              unit: 't',
-            },
-            {
-              key: 'airDayValue',
-              icon: 'air',
-              label: '压缩空气用量',
-              value: '',
-              unit: 'Nm³',
-            },
-            {
-              key: 'gasValue',
-              icon: 'gas',
-              label: '天然气用量',
-              value: '',
-              unit: 'Nm³',
-            },
-          ],
+          comp: 'chart',
+          title: '月度用能排行',
+          option: usageRanking(),
+          unit: 'kWh',
         },
+        // {
+        //   title: '年度用能排行',
+        //   comp: 'chart',
+        //   option: yearUsageRank(),
+        // },
         {
           comp: 'chart',
           title: '当日电力负荷',
@@ -200,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: {
@@ -230,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 = () => {
@@ -274,7 +191,9 @@ export default defineComponent({
           }
         },
       });
-      //月用能统计
+
+      //左侧
+      //日用能统计
       useFetch('/board/eachEnergy', {
         cb: (res: any) => {
           if (utilService.isValidObject(res)) {
@@ -284,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);
           }
         },
       });
@@ -356,16 +310,15 @@ export default defineComponent({
       const target = document.querySelector('.boards-container .center') as HTMLElement;
       generateSvg2Dom('/cdn/normal_bg.svg', target, () => {
         target.style.transform = 'scale(0.7)';
-
-        nextTick(() => {
-          init(state, target);
-          // document.getElementById("layer-d-animate").innerHTML = '<animate href="#path23264" attributeName="stroke-dashoffset" dur="15s" to="0" fill="freeze"></animate><animate href="#path23264-3" attributeName="stroke-dashoffset" dur="15s" to="0" fill="freeze"></animate>';
-        });
       });
     };
 
     onMounted(() => {
-      getSvg();
+      nextTick(() => {
+        const target = document.querySelector('.boards-container .center') as HTMLElement;
+
+        init(state, target);
+      });
       state.timer = setInterval(() => {
         changeType(state.dataForm.code);
         fn();
@@ -470,25 +423,10 @@ export default defineComponent({
         width: 1920px;
         height: 1080px;
         cursor: move;
-        //background: url("@/assets/images/njhl/bg.png");
-        //transform: translate(-50%, -50%);
-        /* 初始阴影设置（透明） */
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          border-radius: inherit;
-          //opacity: 0;
-          //transition: opacity 0.4s;
-          box-shadow: inset 0 0 80px 30px #000b31;
-        }
+        background: url('@/assets/images/dashboard/bg.png') no-repeat;
+        background-position: center 75%;
 
-        &:hover::before {
-          // opacity: 1;
-        }
+        //transform: translate(-50%, -50%);
       }
 
       .icon {
@@ -520,7 +458,7 @@ export default defineComponent({
 
         > * {
           margin: 0 40px;
-          background: rgba(#000b31, 0.7);
+          //background: rgba(#000b31, 0.7);
         }
       }