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 0000000..9f712af Binary files /dev/null and b/src/assets/images/njhl/block_2.png differ 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 @@