feat：看板调整；

src/service/dragStretchService.ts

@@ -1,4 +1,4 @@
-import { IObject } from "@/types/interface";
+import { IObject } from '@/types/interface';
 
 class DragStretchService {
   target: HTMLElement;
@@ -20,7 +20,7 @@ class DragStretchService {
     this.sourceX = 0;
     this.sourceY = 0;
     this.distanceY = opt?.distanceY || 0;
-    this.scale = opt?.scale || "1";
+    this.scale = opt?.scale || '1';
     this.transform = this.getTransform();
     this.init();
   }
@@ -29,7 +29,7 @@ class DragStretchService {
     return {
       distanceX: this.distanceX,
       distanceY: this.distanceY,
-      scale: this.scale
+      scale: this.scale,
     };
   }
 
@@ -39,10 +39,10 @@ class DragStretchService {
       : this.target.currentStyle[property];
   }
   getTransform() {
-    let transform = "",
+    let transform = '',
       i = 0;
-    const divStyle = document.createElement("div").style,
-      transformArr = ["transform", "webkitTransform", "MozTransform", "msTransform", "OTransform"],
+    const divStyle = document.createElement('div').style,
+      transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
       len = transformArr.length;
 
     for (; i < len; i++) {
@@ -57,18 +57,18 @@ class DragStretchService {
     let pos = { x: 0, y: 0 };
 
     const transformValue = this.getStyle(this.transform);
-    if (transformValue == "none") {
-      this.target.style[this.transform] = "translate(0, 0) scale(1)";
+    if (transformValue == 'none') {
+      this.target.style[this.transform] = 'translate(0, 0) scale(1)';
     }
     const matrixReg = /^matrix\((?:[-\d.]+,\s*){4}([-\d.]+),\s*([-\d.]+)\)$/;
     const scaleReg = /\d+(?:\.\d+)?(?=,)/;
     const temp = transformValue.match(matrixReg);
     const scale = transformValue.match(scaleReg);
-    console.log(scale, "scale");
+    console.log(scale, 'scale');
     pos = {
       x: parseInt(temp[1].trim()),
       y: parseInt(temp[2].trim()),
-      scale: parseFloat(scale[0])
+      scale: parseFloat(scale[0]),
     };
 
     return pos;
@@ -83,8 +83,8 @@ class DragStretchService {
       this.sourceX = pos.x;
       this.sourceY = pos.y;
       this.scale = pos.scale;
-      document.addEventListener("mousemove", move, false);
-      document.addEventListener("mouseup", end, false);
+      document.addEventListener('mousemove', move, false);
+      document.addEventListener('mouseup', end, false);
     };
 
     const move = (event: MouseEvent) => {
@@ -98,12 +98,12 @@ class DragStretchService {
     };
 
     const end = () => {
-      document.removeEventListener("mousemove", move);
-      document.removeEventListener("mouseup", end);
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', end);
       // do other things
     };
 
-    this.target.addEventListener("mousedown", start, false);
+    this.target.addEventListener('mousedown', start, false);
   }
   // 初始化
   init() {
@@ -121,7 +121,7 @@ class DragStretchService {
       const { clientWidth, clientHeight } = parentNode as HTMLElement;
       return {
         clientWidth,
-        clientHeight
+        clientHeight,
       };
     }
     return {};
@@ -192,7 +192,7 @@ class DragStretchService {
   // }
 
   stretch() {
-    this.target.addEventListener("mousewheel", (e: Event) => {
+    this.target.addEventListener('mousewheel', (e: Event) => {
       const ev: IObject = e;
       const up = ev.wheelDelta ? ev.wheelDelta >= 0 : ev.detail <= 0; // 定义一个标志，当滚轮向下滚时，执行一些操作
 
@@ -206,7 +206,7 @@ class DragStretchService {
         this.setTransform();
       } else {
         if (+this.scale <= 0.1) {
-          this.scale = "0.1";
+          this.scale = '0.1';
         } else {
           this.scale = (parseFloat(this.scale) - this.options.ratio).toFixed(2);
         }
@@ -222,7 +222,7 @@ class DragStretchService {
   }
 
   setTransform() {
-    console.log(this.scale, "this.scale");
+    console.log(this.scale, 'this.scale');
     //this.target.style.transform = `translate(${this.distanceX}px, ${this.distanceY}px)`;
     this.target.style.transform = `translate(${this.distanceX}px, ${this.distanceY}px) scale(${this.scale})`;
     //this.target.style.transformOrigin = "0 0";
@@ -231,7 +231,7 @@ class DragStretchService {
   reset() {
     this.distanceX = 0;
     this.distanceY = 0;
-    this.scale = "1";
+    this.scale = this.options.scale || '1';
     this.setTransform();
   }
 }

src/service/utilService.ts

@@ -433,8 +433,6 @@ class UtilService {
     return arr;
   }
 
-
-
   findParentElByCondition(element: any, condition: IFunction) {
     let currentElement = element;
     while (currentElement) {
@@ -446,6 +444,22 @@ class UtilService {
     return null;
   }
 
+  hexToRgba(h: string, alpha = 1): string {
+    // 去除可能存在的 # 符号
+    let hex = h.replace('#', '');
+
+    // 如果是 3 位的十六进制颜色值，扩展为 6 位
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+
+    // 解析红、绿、蓝分量
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
 }
 
 export default new UtilService();

src/views/dashboard/common/model.ts

@@ -1,7 +1,7 @@
 import dateService from '@/service/dateService';
 import utilService from '@/service/utilService';
 import { IObject } from '@/types/interface';
-import { smooth } from '@antv/x6/lib/registry/connector/smooth';
+import { Legend } from 'highcharts';
 import moment from 'moment';
 
 export const monthEnergyUsageTrend = (data = []): IObject => {
@@ -257,7 +257,7 @@ export const costStatistic = (data = []): IObject => {
   };
 };
 
-export const usageRanking = (data = []): IObject => {
+export const usageRanking = (data = [], unit?: string): IObject => {
   let yAxisData = [];
   let seriesData = [];
   if (utilService.isValidArray(data)) {
@@ -271,6 +271,20 @@ export const usageRanking = (data = []): IObject => {
       axisPointer: {
         type: 'shadow',
       },
+      formatter: (params: Array<IObject>) => {
+        if (utilService.isValidArray(params)) {
+          const [first] = params;
+          const { axisValue } = first;
+
+          let str = `<div>${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: 35,
@@ -336,7 +350,23 @@ export const elecPayload = (data = []): IObject => {
       top: 30,
       left: 40,
     },
-    tooltip: { trigger: 'axis' },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: Array<IObject>) => {
+        if (utilService.isValidArray(params)) {
+          const [first] = params;
+          const { axisValue } = first;
+
+          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>${item.marker}电力负荷：</span> <span><b>${data}</b> kWh</span></div>`;
+          }
+          return str + '</div>';
+        }
+        return '';
+      },
+    },
     xAxis: {
       name: '（时）',
       type: 'category',
@@ -376,3 +406,104 @@ export const elecPayload = (data = []): IObject => {
     ],
   };
 };
+export const energyUsageDistribution = (data = []): IObject => {
+  const length = 24;
+  const xAxisData = Array.from({ length }, (x, i) => i);
+  const seriesData = [];
+  if (utilService.isValidArray(data)) {
+    for (const day of xAxisData) {
+      let val;
+      for (const item of data) {
+        if (
+          typeof item.date === 'string' &&
+          item.date.includes(`${new dateService().addZero(day)}:00:00`)
+        ) {
+          val = item.value;
+        }
+      }
+    }
+  }
+  const energyMap: Array<IObject> = [
+    { key: 'A29hh', name: '电用量', unit: '万kWh', color: '#0084FF' },
+    { key: 'E3hh', name: '蒸汽用量', unit: 't', color: '#FFE777' },
+    { key: 'B2hh', name: '水用量', unit: 't', color: '#37FFC9' },
+    { key: 'C2hh', name: '压缩空气用量', unit: 'Nm³', color: '#19D6FF' },
+  ];
+
+  for (const key in data) {
+    const item = data[key] || [];
+    if (utilService.isValidArray(item)) {
+      const [first] = item;
+      const val = utilService.getTargetItemByKey(energyMap, first.attrKey, 'key');
+      const color = val.color;
+
+      seriesData.push({
+        name: val.name,
+        data: item.map((v) => v.val),
+        type: 'line',
+        smooth: true,
+        lineStyle: { width: 1, color },
+        areaStyle: {
+          opacity: 0.8,
+          color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { color: utilService.hexToRgba(color, 0.7), offset: 0 },
+            { color: utilService.hexToRgba(color, 0.2), offset: 1 },
+          ]),
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        showSymbol: false,
+        connectNulls: true,
+      });
+    }
+  }
+  const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
+  return {
+    grid: {
+      bottom: 45,
+      top: 30,
+      left: 40,
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: Array<IObject>) => {
+        if (utilService.isValidArray(params)) {
+          const [first] = params;
+          const { axisValue } = first;
+
+          let str = `<div>${yesterday} ${axisValue}时</div><div>`;
+          for (const item of params) {
+            const { seriesName, data } = item;
+            str += `<div style="display: flex;justify-content: space-between;"><span>${
+              item.marker
+            }${seriesName}：</span> <span><b>${data}</b> ${
+              utilService.getTargetItemByKey(energyMap, seriesName, 'name')?.unit || ''
+            }</span></div>`;
+          }
+          return str + '</div>';
+        }
+        return '';
+      },
+    },
+    legend: {
+      right: 15,
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    xAxis: {
+      name: '（时）',
+      type: 'category',
+      data: xAxisData,
+      axisLine: { lineStyle: { color: '#fff' } },
+      axisLabel: { fontSize: 10 },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#fff' }, show: true },
+      splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' } },
+    },
+    series: seriesData,
+  };
+};

src/views/dashboard/common/style.ts

@@ -285,5 +285,5 @@ export const init = (state: IObject, target: HTMLElement): void => {
   initLine();
   initCloseToolTip();
 
-  state.dragStretch = new dragStretchService(target);
+  state.dragStretch = new dragStretchService(target, state.opt);
 };

src/views/dashboard/comp/block.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="block" ref="blockRef">
+  <div class="block" ref="blockRef" :style="`background: url(${$util.getImg('/src/assets/images/njhl/block_' + sizeType + '.png')}) no-repeat center`">
     <div :class="['title']">
       <span>{{ item.title || '' }}</span>
 
@@ -15,22 +15,26 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, h, nextTick, onMounted, reactive, toRefs } from 'vue';
+import { computed, defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue';
 import { IObject } from '@/types/interface';
 import utilService from '@/service/utilService';
 export default defineComponent({
   name: 'block',
-  props: { item: { type: Object, default: () => ({}) }, dataForm: { type: Object, default: () => ({}) }, width: { type: String, default: () => '484px' }, height: { type: String, default: () => '318px' } },
+  props: { item: { type: Object, default: () => ({}) }, dataForm: { type: Object, default: () => ({}) }, sizeType: { type: String, default: () => '1' } },
   setup(props) {
     const state = reactive({
       blockRef: null,
     });
 
     const block = computed(() => {
-      return {
-        w: props.width,
-        h: props.height,
-      };
+      const img = utilService.getImg('/src/assets/images/njhl/block_' + props.sizeType + '.png');
+
+      switch (props.sizeType) {
+        case '2':
+          return { w: '884px', h: '318px', s: `url('${img}'))` };
+        default:
+          return { w: '484px', h: '318px', s: `url('${img}'))` };
+      }
     });
 
     return {
@@ -46,7 +50,7 @@ export default defineComponent({
 .block {
   width: v-bind('block.w');
   height: v-bind('block.h');
-  background: url('@/assets/images/njhl/block.png') no-repeat center;
+  // background: v-bind('block.s') no-repeat center;
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
@@ -57,7 +61,7 @@ export default defineComponent({
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 38px;
+    padding: 15px 38px 10px 38px;
     color: #fff;
 
     > span {

src/views/dashboard/main.vue

@@ -4,7 +4,7 @@
       <div class="boards-container">
         <div class="center" title="使用鼠标左键、滚轮实现拖拽、放大缩小。"></div>
         <div class="top">
-          <div class="title" @click="reset" title="点击此标题将鸟瞰图及管线恢复成初始状态。">{{ $store.state.user.tenantName || '平台看板' }}</div>
+          <div class="title" @click="reset" title="点击此标题将鸟瞰图恢复成初始状态。">{{ $store.state.user.tenantName || '平台看板' }}</div>
           <div class="time" v-if="timeCount && timeCount.ts > 0">
             <div class="time-left">
               {{ $m(timeCount.ts).format('HH:mm:ss') }}
@@ -30,6 +30,11 @@
             <component :is="item.comp" :key="index" :item="item" :option="item.option" tip-loop></component>
           </block>
         </div>
+        <div class="bottom">
+          <block size-type="2" :item="bottom">
+            <component :is="bottom.comp" :item="bottom" :option="bottom.option" tip-loop></component>
+          </block>
+        </div>
       </div>
       <tooltip :data="toolTipData" />
     </screen-adapter>
@@ -46,7 +51,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 } from './common/model';
+import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution } from './common/model';
 import { IObject } from '@/types/interface';
 import moment from 'moment';
 import toolHooks from '@/hooks/tool';
@@ -68,6 +73,7 @@ export default defineComponent({
     const { generateSvg2Dom } = toolHooks();
 
     const state = reactive({
+      opt: { scale: 0.8 },
       dragStretch: null,
       toolTipData: {},
       timer: null,
@@ -212,6 +218,11 @@ export default defineComponent({
           unit: 'kWh',
         },
       ],
+      bottom: {
+        comp: 'chart',
+        title: '24小时用能分布情况',
+        option: energyUsageDistribution(),
+      },
     }) as IObject;
 
     const changeType = (type: string) => {
@@ -242,7 +253,9 @@ export default defineComponent({
         },
         cb: (res: any) => {
           if (utilService.isValidArray(res)) {
-            state.right[1].option = usageRanking(res);
+            const c = state.dataForm.code;
+            const u = state.dataForm.codeMap[c];
+            state.right[1].option = usageRanking(res, u);
           }
         },
       });
@@ -306,6 +319,19 @@ export default defineComponent({
       });
     };
 
+    //24小时用能分布情况
+    useFetch('/board/dayEnergy/trend', {
+      data: {
+        //day: '2025-04-01',
+        day: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+      },
+      cb: (res: any) => {
+        if (utilService.isValidObject(res)) {
+          state.bottom.option = energyUsageDistribution(res);
+        }
+      },
+    });
+
     changeType(state.dataForm.code);
     fn();
 
@@ -326,8 +352,8 @@ export default defineComponent({
 
     const getSvg = () => {
       const target = document.querySelector('.boards-container .center') as HTMLElement;
-      generateSvg2Dom('/cdn/njhl_bg.svg', target, () => {
-        target.style.transform = 'scale(1.2)';
+      generateSvg2Dom('/cdn/normal_bg.svg', target, () => {
+        target.style.transform = 'scale(0.7)';
 
         nextTick(() => {
           init(state, target);
@@ -475,6 +501,7 @@ export default defineComponent({
 
         > * {
           margin: 0 40px;
+          background: rgba(#000b31, 0.7);
         }
       }
 
@@ -486,8 +513,14 @@ export default defineComponent({
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        background: rgba(#000b31, 0.7);
       }
 
+      .bottom {
+        > * {
+          background-color: rgba(#000b31, 0.7) !important;
+        }
+      }
       .left {
         //left: 0;
         left: 16px;
@@ -497,6 +530,17 @@ export default defineComponent({
         //right: 0;
         right: 16px;
       }
+
+      .bottom {
+        position: absolute;
+        bottom: 20px;
+        width: 100%;
+        height: 318px;
+        left: 0;
+        > * {
+          margin: 0 auto;
+        }
+      }
     }
   }
 }