From 8e4bad6422c9bf9b02b7e7f6addb74f2b48f42cc Mon Sep 17 00:00:00 2001 From: YOU <15501379989@163.com> Date: Tue, 15 Apr 2025 16:16:17 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=9C=8B=E6=9D=BF=E8=B0=83?= =?UTF-8?q?=E6=95=B4=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/cdn/normal_bg.svg | 4 + .../images/njhl/{block.png => block_1.png} | Bin src/assets/images/njhl/block_2.png | Bin 0 -> 16029 bytes src/service/dragStretchService.ts | 40 ++--- src/service/utilService.ts | 18 ++- src/views/dashboard/common/model.ts | 137 +++++++++++++++++- src/views/dashboard/common/style.ts | 2 +- src/views/dashboard/comp/block.vue | 22 +-- src/views/dashboard/main.vue | 54 ++++++- 9 files changed, 237 insertions(+), 40 deletions(-) create mode 100644 public/cdn/normal_bg.svg rename src/assets/images/njhl/{block.png => block_1.png} (100%) create mode 100644 src/assets/images/njhl/block_2.png diff --git a/public/cdn/normal_bg.svg b/public/cdn/normal_bg.svg new file mode 100644 index 0000000..ebe4b7a --- /dev/null +++ b/public/cdn/normal_bg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/njhl/block.png b/src/assets/images/njhl/block_1.png similarity index 100% rename from src/assets/images/njhl/block.png rename to src/assets/images/njhl/block_1.png diff --git a/src/assets/images/njhl/block_2.png b/src/assets/images/njhl/block_2.png new file mode 100644 index 0000000000000000000000000000000000000000..9f712afb49814f7fd108d6c06554e5107a267dd2 GIT binary patch literal 16029 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 literal 0 HcmV?d00001 diff --git a/src/service/dragStretchService.ts b/src/service/dragStretchService.ts index 4a9b94a..0e20cfa 100644 --- a/src/service/dragStretchService.ts +++ b/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(); } } diff --git a/src/service/utilService.ts b/src/service/utilService.ts index c64c10a..9b6db5e 100644 --- a/src/service/utilService.ts +++ b/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(); diff --git a/src/views/dashboard/common/model.ts b/src/views/dashboard/common/model.ts index a0ec0e7..fb6c86e 100644 --- a/src/views/dashboard/common/model.ts +++ b/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) => { + if (utilService.isValidArray(params)) { + const [first] = params; + const { axisValue } = first; + + let str = `
${axisValue}
`; + for (const item of params) { + const { data } = item; + str += `
${item.marker} ${data} ${unit}
`; + } + return str + '
'; + } + 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) => { + if (utilService.isValidArray(params)) { + const [first] = params; + const { axisValue } = first; + + let str = `
${moment().format('YYYY-MM-DD')} ${axisValue}时
`; + for (const item of params) { + const { seriesName, data } = item; + str += `
${item.marker}电力负荷: ${data} kWh
`; + } + return str + '
'; + } + 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 = [ + { 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) => { + if (utilService.isValidArray(params)) { + const [first] = params; + const { axisValue } = first; + + let str = `
${yesterday} ${axisValue}时
`; + for (const item of params) { + const { seriesName, data } = item; + str += `
${ + item.marker + }${seriesName}: ${data} ${ + utilService.getTargetItemByKey(energyMap, seriesName, 'name')?.unit || '' + }
`; + } + return str + '
'; + } + 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, + }; +}; diff --git a/src/views/dashboard/common/style.ts b/src/views/dashboard/common/style.ts index 4414327..1efeef6 100644 --- a/src/views/dashboard/common/style.ts +++ b/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); }; diff --git a/src/views/dashboard/comp/block.vue b/src/views/dashboard/comp/block.vue index 65c908c..8907b27 100644 --- a/src/views/dashboard/comp/block.vue +++ b/src/views/dashboard/comp/block.vue @@ -1,5 +1,5 @@