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

@@ -537,3 +537,45 @@ 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',
+              },
+            ]),
+          },
+        },
+      },
+    ],
+  };
+};

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/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 } 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,69 +126,12 @@ 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³',
-            },
-          ],
+          title: '年度用能排行',
+          comp: 'chart',
+          option: yearUsageRank(),
         },
         {
           comp: 'chart',
@@ -356,16 +300,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 +413,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 +448,7 @@ export default defineComponent({
 
         > * {
           margin: 0 40px;
-          background: rgba(#000b31, 0.7);
+          //background: rgba(#000b31, 0.7);
         }
       }