From cf9854e005e81c489d8aa6c6ecbf9a86e75de194 Mon Sep 17 00:00:00 2001 From: zhaohy <1695786511@qq.com> Date: Tue, 20 Aug 2024 11:36:32 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E5=91=8A=E8=AD=A6ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hx-ai-intelligent/src/components/ns-steps.vue | 42 ++-- hx-ai-intelligent/src/icon/add.png | Bin 0 -> 356 bytes hx-ai-intelligent/src/icon/del.png | Bin 0 -> 352 bytes hx-ai-intelligent/src/icon/del.svg | 6 - .../energyAlarm/editConfigureEnergyAlarm.vue | 218 ++++++++++++-------- .../equipmentAlarm/editConfigureDeviceAlarm.vue | 224 +++++++++++++-------- .../equipmentAlarm/editeEquipmentAlarm.vue | 2 - .../src/view/alarmManagement/energyAlarm/index.vue | 9 +- .../src/view/alarmManagement/energyAlarm/look.vue | 49 +++-- .../view/alarmManagement/energyAlarm/status.vue | 18 +- .../view/alarmManagement/equipmentAlarm/index.vue | 9 +- .../view/alarmManagement/equipmentAlarm/look.vue | 53 +++-- .../view/alarmManagement/equipmentAlarm/status.vue | 18 +- .../view/alarmManagement/gatewayAlarm/index.vue | 9 +- .../src/view/alarmManagement/gatewayAlarm/look.vue | 51 +++-- .../view/alarmManagement/gatewayAlarm/status.vue | 18 +- 16 files changed, 473 insertions(+), 253 deletions(-) create mode 100644 hx-ai-intelligent/src/icon/add.png create mode 100644 hx-ai-intelligent/src/icon/del.png delete mode 100644 hx-ai-intelligent/src/icon/del.svg diff --git a/hx-ai-intelligent/src/components/ns-steps.vue b/hx-ai-intelligent/src/components/ns-steps.vue index 54c8ce3..57627d0 100644 --- a/hx-ai-intelligent/src/components/ns-steps.vue +++ b/hx-ai-intelligent/src/components/ns-steps.vue @@ -1,18 +1,33 @@ - + @@ -46,3 +46,10 @@ }, }; + diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue index af94130..f1058a7 100644 --- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue +++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue @@ -11,9 +11,7 @@
-
+
告警编号：{{ infoObject.alarmCode }}
@@ -21,7 +19,7 @@
-
+
@@ -134,8 +132,8 @@ }, }, grid: { - left: '10%', // 设置图表距离左边的距离 - right: '4%', // 设置图表距离右边的距离 + left: '9%', // 设置图表距离左边的距离 + right: '3%', // 设置图表距离右边的距离 top: '6%', borderWidth: 0, y2: 60, // 距离底边 @@ -213,19 +211,14 @@ //滑块样式 dataZoom: [ { - type: 'inside', - start: 0, - end: 100, - }, - { type: 'slider', // backgroundColor: 'yellow', // fillerColor: 'yellow', height: 12, // 设置slider的高度为15 start: 0, end: 100, - right: 60, - left: 60, + right: 10, + left: 10, bottom: 10, handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标 @@ -256,15 +249,20 @@ name: '电压值', type: 'line', itemStyle: { + color: '#fff', + borderColor: 'rgba(67, 136, 251, 1)', + borderWidth: 2, + }, + lineStyle: { normal: { - barBorderRadius: 0, - color: '#2778FF', + color: 'rgba(67, 136, 251, 1)', + width: 2, }, }, symbol: 'circle', // 数据点的形状，这里设置为圆形 symbolSize: 8, label: { - show: true, + show: false, color: 'rgb(89, 89, 89)', position: 'top', top: '10', @@ -272,6 +270,29 @@ return Number(energyAlarm[value.dataIndex]) + 'V'; }, }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(22, 127, 255, 0.4)', + }, + { + offset: 1, + color: 'rgba(22, 127, 255, 0)', + }, + ], + false, + ), + shadowColor: 'rgba(22, 127, 255, 0.4)', + shadowBlur: 20, + }, + }, data: energyAlarm, }, ], diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue index 40c73c5..b92981c 100644 --- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue +++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue @@ -143,15 +143,23 @@ infoObject.value = { ...logList.value[0] }; infoObject.value.state = infoObject.value.state.value; let colorMap = { - 1: '#ff7602', - 2: '#00a1e6', - 3: '#04d919', - 4: '#d9001b', - 5: '#a6a6a6', + 1: 'rgba(191, 205, 226, 1)', + 2: 'rgba(243, 97, 99, 1)', + 3: 'rgba(41, 196, 154, 1)', + 4: 'rgba(217, 0, 27,1)', + 5: 'rgba(166, 166, 166,1)', + }; + let bgColorMap = { + 1: 'rgba(191, 205, 226, 0.1)', + 2: 'rgba(243, 97, 99, 0.1)', + 3: 'rgba(41, 196, 154, 0.1)', + 4: 'rgba(217, 0, 27, 0.1)', + 5: 'rgba(166, 166, 166,0.1)', }; logList.value.forEach((item) => { item.stateName = item.state.label; item.color = colorMap[item.state.value]; + item.bgColor = bgColorMap[item.state]; item.src = 'state-' + item.state.value; }); config.value.dataSource = logList.value; diff --git a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue index 186d7f0..437e9d6 100644 --- a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue +++ b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/index.vue @@ -10,7 +10,7 @@ - + @@ -36,3 +36,10 @@ }, }; + diff --git a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue index 73256ae..dae7b8e 100644 --- a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue +++ b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/look.vue @@ -11,9 +11,7 @@
-
+
告警编号：{{ infoObject.alarmCode }}
@@ -21,7 +19,7 @@
-
+
@@ -127,8 +125,8 @@ }, }, grid: { - left: '10%', // 设置图表距离左边的距离 - right: '4%', // 设置图表距离右边的距离 + left: '3%', // 设置图表距离左边的距离 + right: '3%', // 设置图表距离右边的距离 top: '6%', borderWidth: 0, y2: 60, // 距离底边 @@ -201,19 +199,14 @@ //滑块样式 dataZoom: [ { - type: 'inside', - start: 0, - end: 100, - }, - { type: 'slider', // backgroundColor: 'yellow', // fillerColor: 'yellow', height: 12, // 设置slider的高度为15 start: 0, end: 100, - right: 60, - left: 60, + right: 11, + left: 10, bottom: 10, handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标 @@ -244,9 +237,14 @@ name: '状态', type: 'line', itemStyle: { + color: '#fff', + borderColor: 'rgba(67, 136, 251, 1)', + borderWidth: 2, + }, + lineStyle: { normal: { - barBorderRadius: 0, - color: '#2778FF', + color: 'rgba(67, 136, 251, 1)', + width: 2, }, }, symbol: 'circle', // 数据点的形状，这里设置为圆形 @@ -260,6 +258,29 @@ // return Number(energyAlarm[value.dataIndex]) ; // }, // }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: 'rgba(22, 127, 255, 0.4)', + }, + { + offset: 1, + color: 'rgba(22, 127, 255, 0)', + }, + ], + false, + ), + shadowColor: 'rgba(22, 127, 255, 0.4)', + shadowBlur: 20, + }, + }, data: energyAlarm, }, ], diff --git a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue index f160c3f..ff65aea 100644 --- a/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue +++ b/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue @@ -60,15 +60,23 @@ 5: '已关闭', }; let colorMap = { - 1: '#ff7602', - 2: '#00a1e6', - 3: '#04d919', - 4: '#d9001b', - 5: '#a6a6a6', + 1: 'rgba(191, 205, 226, 1)', + 2: 'rgba(243, 97, 99, 1)', + 3: 'rgba(41, 196, 154, 1)', + 4: 'rgba(217, 0, 27,1)', + 5: 'rgba(166, 166, 166,1)', + }; + let bgColorMap = { + 1: 'rgba(191, 205, 226, 0.1)', + 2: 'rgba(243, 97, 99, 0.1)', + 3: 'rgba(41, 196, 154, 0.1)', + 4: 'rgba(217, 0, 27, 0.1)', + 5: 'rgba(166, 166, 166,0.1)', }; logList.value.forEach((item) => { item.stateName = stateMap[item.state]; item.color = colorMap[item.state]; + item.bgColor = bgColorMap[item.state]; item.src = 'state-' + item.state; }); visible.value = true;