fix:添加设备告警 换图标 设备告警详情 状态流程 按钮权限
This commit is contained in:
zhaohy
107
hx-ai-intelligent/src/components/ns-steps.vue
Normal file
107
hx-ai-intelligent/src/components/ns-steps.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<a-steps direction="vertical" :current="size">
|
||||
<template v-for="(item, index) in dataSource" :key="index">
|
||||
<a-step>
|
||||
<template #icon>
|
||||
<img :style="{ width: item.status === '2' ? '19px' : '20px' }" :src="getSrc(item)" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div
|
||||
style="
|
||||
width: 400px;
|
||||
min-height: 0px;
|
||||
background-color: #f8fafc;
|
||||
margin-left: 20px;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
padding: 12px;
|
||||
">
|
||||
<div style="width: 100%; height: 30px; display: flex; position: relative">
|
||||
<a-tag
|
||||
style="width: 60px; height: 20px; text-align: center"
|
||||
:color="getColor(item)"
|
||||
>{{ getStatus(item) }}</a-tag
|
||||
>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
left: 35%;
|
||||
top: -2px;
|
||||
transform: translateX(-50%);
|
||||
color: #3a3a3a;
|
||||
"
|
||||
>{{ item.name }}</div
|
||||
>
|
||||
<div style="position: absolute; right: 10px; top: -2px; color: #ff7602"
|
||||
>2024-03-11 11:30:06</div
|
||||
>
|
||||
</div>
|
||||
<div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto">
|
||||
工单已完成并通过验收</div
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</a-step>
|
||||
</template>
|
||||
</a-steps>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs } from 'vue';
|
||||
|
||||
type Props = {
|
||||
dataSource: any;
|
||||
size: any;
|
||||
};
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
const getColor = (item: any) => {
|
||||
switch (item.status) {
|
||||
case '0':
|
||||
return '#ff7602';
|
||||
case '1':
|
||||
return '#00a1e6';
|
||||
case '2':
|
||||
return '#04d919';
|
||||
case '3':
|
||||
return '#d9001b';
|
||||
case '4':
|
||||
return '#a6a6a6';
|
||||
}
|
||||
};
|
||||
const getSrc = (item: any) => {
|
||||
return '../../../../src/icon/status-' + item.status + '.svg';
|
||||
};
|
||||
const getStatus = (item: any) => {
|
||||
switch (item.status) {
|
||||
case '0':
|
||||
return '待处理';
|
||||
case '1':
|
||||
return '处理中';
|
||||
case '2':
|
||||
return '已完成';
|
||||
case '3':
|
||||
return '超时';
|
||||
case '4':
|
||||
return '已关闭';
|
||||
}
|
||||
};
|
||||
const { dataSource } = toRefs(props);
|
||||
const { size } = toRefs(props);
|
||||
|
||||
defineExpose({});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-steps-vertical {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
:deep(.ant-steps-item-tail) {
|
||||
position: absolute !important;
|
||||
top: -10px !important;
|
||||
left: 16px !important;
|
||||
width: 1px !important;
|
||||
height: 150% !important;
|
||||
}
|
||||
:deep(.ant-steps-item) {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"> <image id="image0" width="36" height="36" x="0" y="0"
|
||||
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
|
||||
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAASUExURQAAAI2Vo46Wo4uXo42Wo////3MrvScAAAAEdFJO
|
||||
UwCAv0BHJ479AAAAAWJLR0QF+G/pxwAAAAd0SU1FB+gHBAISL9sg4ewAAABSSURBVCjPY2CgCxBU
|
||||
cVJGFRFxAQIUMUYXMBBAV+Ti4ogQYXZxQVfGBBNygAuZwIQQOlXwCDnBhVzgAL+QA8vQFcIELi4Y
|
||||
nsQUcnHBEMMiREsAALpDPLVxCYzSAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI0LTA3LTA0VDAyOjE4
|
||||
OjQ3KzAwOjAwPdooNQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNy0wNFQwMjoxODo0NyswMDow
|
||||
MEyHkIkAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjQtMDctMDRUMDI6MTg6NDcrMDA6MDAbkrFW
|
||||
AAAAAElFTkSuQmCC" />
|
||||
</svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721184652893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10631" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 916.48h1024v71.68H0v-71.68z m71.68-76.8H947.2v71.68H71.68v-71.68zM512 35.84c-199.68 0-363.52 163.84-363.52 363.52v404.48H332.8V440.32h71.68v363.52h476.16V404.48C875.52 199.68 711.68 35.84 512 35.84z" p-id="10632"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 563 B |
6
hx-ai-intelligent/src/icon/gaojingtonglan.svg
Normal file
6
hx-ai-intelligent/src/icon/gaojingtonglan.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -485 -23 )">
|
||||
<path d="M 47 42.32727272727272 C 47.78181818181818 45.381818181818176 45.381818181818176 47.78181818181818 42.54545454545455 47 L 5.454545454545454 47 C 2.6181818181818186 47.78181818181818 0.21818181818181742 45.381818181818176 1 42.32727272727272 L 1 29 L 47 29 L 47 42.32727272727272 Z M 29.89090909090909 41 L 29.89090909090909 36 L 6.1090909090909085 36 L 6.1090909090909085 41 L 29.89090909090909 41 Z M 41.89090909090909 41.89090909090909 L 41.89090909090909 36 L 36 36 L 36 41.89090909090909 L 41.89090909090909 41.89090909090909 Z M 1 26 L 1 5.454545454545454 C 0.21818181818181742 2.399999999999999 2.6181818181818186 0 5.454545454545454 0 L 42.54545454545455 0 C 45.38181818181818 0 47.78181818181818 2.399999999999999 47 5.454545454545454 L 47 26 L 1 26 Z M 5.454545454545454 19.418181818181814 L 9.818181818181818 21.818181818181817 L 14.181818181818183 14.399999999999999 L 24.218181818181822 21.16363636363636 L 29.67272727272728 12.654545454545453 L 40.36363636363637 18.76363636363636 L 42.763636363636365 14.399999999999995 L 27.92727272727273 5.018181818181814 L 22.90909090909091 13.745454545454539 L 12 7.85454545454545 L 5.454545454545454 19.418181818181814 Z " fill-rule="nonzero" fill="#d9001b" stroke="none" transform="matrix(1 0 0 1 485 23 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
hx-ai-intelligent/src/icon/status-0.svg
Normal file
6
hx-ai-intelligent/src/icon/status-0.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -305 -366 )">
|
||||
<path d="M 8.03885714285714 0.641142857142857 L 8.03885714285714 0.64 C 12.1181901007502 0.64 15.4251428571429 3.94695275639267 15.4251428571429 8.02628571428571 C 15.4251430928625 8.02704758957974 15.4251432107223 8.02780946489393 15.4251432107223 8.02857134022442 C 15.4251432107223 12.1085354806887 12.117678779758 15.415999911653 8.03771463929375 15.415999911653 C 3.95775049882947 15.415999911653 0.650286067865178 12.1085354806887 0.650286067865178 8.02857134022442 C 0.650286067865178 3.94860719976014 3.95775049882947 0.64114276879585 8.03771463929375 0.64114276879585 C 8.03809547381657 0.64114276879585 8.03847630833888 0.641142798244853 8.03885714285714 0.641142857142857 Z M 8 6.85714285714286 C 7.36881742876481 6.85714285714286 6.85714285714286 7.36881742876481 6.85714285714286 8 C 6.85714285714286 8.63118257123519 7.36881742876481 9.14285714285714 8 9.14285714285714 C 8.63118257123519 9.14285714285714 9.14285714285714 8.63118257123519 9.14285714285714 8 C 9.14285714285714 7.36881742876481 8.63118257123519 6.85714285714286 8 6.85714285714286 Z M 11.4285714285714 6.85714285714286 C 10.7973888573362 6.85714285714286 10.2857142857143 7.36881742876481 10.2857142857143 8 C 10.2857142857143 8.63118257123519 10.7973888573362 9.14285714285714 11.4285714285714 9.14285714285714 C 12.0597539998066 9.14285714285714 12.5714285714286 8.63118257123519 12.5714285714286 8 C 12.5714285714286 7.36881742876481 12.0597539998066 6.85714285714286 11.4285714285714 6.85714285714286 Z M 4.57142857142857 6.85714285714286 C 3.94024600019338 6.85714285714286 3.42857142857143 7.36881742876481 3.42857142857143 8 C 3.42857142857143 8.63118257123519 3.94024600019338 9.14285714285714 4.57142857142857 9.14285714285714 C 5.20261114266376 9.14285714285714 5.71428571428571 8.63118257123519 5.71428571428571 8 C 5.71428571428571 7.36881742876481 5.20261114266376 6.85714285714286 4.57142857142857 6.85714285714286 Z " fill-rule="nonzero" fill="#ff7602" stroke="none" transform="matrix(1 0 0 1 305 366 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
hx-ai-intelligent/src/icon/status-1.svg
Normal file
6
hx-ai-intelligent/src/icon/status-1.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -305 -340 )">
|
||||
<path d="M 15.52 8 C 15.52 3.848 12.152 0.48 8 0.48 C 3.848 0.48 0.48 3.848 0.48 8 C 0.48 12.152 3.848 15.52 8 15.52 C 12.152 15.52 15.52 12.152 15.52 8 Z M 11.608 9.256 C 11.84 9.368 11.936 9.648 11.832 9.88 C 11.72 10.112 11.44 10.216 11.208 10.104 L 7.8 8.48 C 7.632 8.392 7.52 8.216 7.512 8.024 L 7.512 2.648 C 7.512 2.392 7.72 2.176 7.984 2.176 C 8.24 2.176 8.456 2.384 8.456 2.648 L 8.456 7.752 L 11.608 9.256 Z " fill-rule="nonzero" fill="#009de1" stroke="none" transform="matrix(1 0 0 1 305 340 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
hx-ai-intelligent/src/icon/status-2.svg
Normal file
6
hx-ai-intelligent/src/icon/status-2.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -305 -264 )">
|
||||
<path d="M 12.8044865917969 12.8044945019531 C 15.7317833056641 9.87949759277344 15.7317833056641 5.12019596191406 12.8044865917969 2.19521370117188 C 11.3984961283515 0.787326048146557 9.48966705506673 -0.00260805552580251 7.4999560546875 3.046875E-05 C 5.50996955094545 -0.00406567496305449 3.60061659376305 0.786091774555939 2.19546946289063 2.19521370117188 C -0.731548930664062 5.12021061035156 -0.731548930664062 9.87951224121094 2.19546946289063 12.8044945019531 C 3.60067093003941 14.2135352022771 5.50998850312976 15.0036780086136 7.4999560546875 14.999677734375 C 9.49029165514025 15.0054765279533 11.4002873723065 14.2150596299848 12.8044865917969 12.8044945019531 Z M 11.9376369140625 5.54019552246094 L 6.89940004394531 10.9003754150391 C 6.87578802320076 10.9269018017654 6.84623229984903 10.9474623058395 6.81315013183594 10.9603753564453 C 6.78748609863281 10.9776751464844 6.77046462890625 10.9949895849609 6.73585041503906 11.003060859375 C 6.67362025830789 11.0304200226738 6.60651003916783 11.0449431326059 6.53853616699219 11.0457610107422 C 6.47426031328986 11.0436752198275 6.41062363711127 11.0323076485925 6.34960082519531 11.0120110400391 L 6.28960088378906 10.9773821777344 C 6.25364523541476 10.9604965742554 6.21927871922921 10.9404159360992 6.18691545410156 10.9173822363281 L 3.30259719726562 8.07866452148437 C 3.20194835437246 7.98256406662991 3.14591207112094 7.8488594603371 3.14796845214844 7.70971472167969 C 3.14796845214844 7.57240041503906 3.20046839355469 7.43510075683594 3.29421830566406 7.34076490722656 C 3.50055541080613 7.14332002945278 3.8257661663423 7.14332002945278 4.03210327148437 7.34076490722656 L 6.52210063476562 9.79326232910156 L 11.1824668212891 4.83721775390625 C 11.3839239859071 4.63706235688665 11.705600292055 4.62599539544477 11.9203371386719 4.81183204101562 C 12.0250169736047 4.90583460723342 12.0845359910269 5.04009087589488 12.0839014160156 5.18078184082031 C 12.0834323759743 5.31515796660418 12.0310295272497 5.44414958696638 11.9376515625 5.54078145996094 Z " fill-rule="nonzero" fill="#04d719" stroke="none" transform="matrix(1 0 0 1 305 264 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
hx-ai-intelligent/src/icon/status-3.svg
Normal file
6
hx-ai-intelligent/src/icon/status-3.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -305 -315 )">
|
||||
<path d="M 15 7.5 C 15 3.358125 11.641875 0 7.5 0 C 3.358125 0 0 3.358125 0 7.5 C 0 11.641875 3.358125 15 7.5 15 C 11.641875 15 15 11.641875 15 7.5 Z M 6.96437500488281 8.4375 L 6.96437500488281 3.8840625 C 6.96454594411788 3.81021458429416 7.02427767945776 3.75034328445354 7.09812499511719 3.75 L 7.90187500488281 3.75 C 7.97572232054224 3.75034328445354 8.03545405588212 3.81021458429416 8.03562499511719 3.8840625 L 8.03562499511719 8.4375 C 8.03545405588212 8.51134791570584 7.97572232054224 8.57121921554647 7.90187500488281 8.5715625 L 7.09812499511719 8.5715625 C 7.02427767945776 8.57121921554647 6.96454594411788 8.51134791570584 6.96437500488281 8.4375 Z M 7.5 11.25 C 7.05616214821327 11.2499137187178 6.69640622993007 10.8900878577318 6.69640622993007 10.4462499975586 C 6.69640622993007 10.0023511201461 7.05625737014613 9.64249997993007 7.50015624755859 9.64249997993007 C 7.94415034690392 9.64258627639936 8.30390626518712 10.0024121373854 8.30390626518712 10.4462499975586 C 8.30390626518712 10.8901488749711 7.94405512497106 11.2500000151871 7.50015624755859 11.2500000151871 Z " fill-rule="nonzero" fill="#d8001b" stroke="none" transform="matrix(1 0 0 1 305 315 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
hx-ai-intelligent/src/icon/status-4.svg
Normal file
6
hx-ai-intelligent/src/icon/status-4.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="15px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -305 -289 )">
|
||||
<path d="M 14.8828125 7.5 C 14.8828125 3.42891475341797 11.571085246582 0.1171875 7.5 0.1171875 C 3.42942502441406 0.1171875 0.1171875 3.42891475341797 0.1171875 7.5 C 0.1171875 11.571085246582 3.42891475341797 14.8828125 7.5 14.8828125 C 11.5705749755859 14.8828125 14.8828125 11.571085246582 14.8828125 7.5 Z M 8.24725339416504 7.50209775695801 L 10.5116636334229 9.77390681030273 C 10.717328404541 9.98062045166015 10.7167897888184 10.3139079473877 10.5106147631836 10.5195727185059 C 10.4077965582275 10.6218806689453 10.2733136187744 10.6735590710449 10.1383204248047 10.6735590710449 C 10.0027886151123 10.6735590710449 9.86779542114258 10.6218806524658 9.76494885498047 10.5185238317871 L 7.49736364379883 8.24407840576172 L 5.22240794677735 10.4947965600586 C 5.11958974182129 10.5960556237793 4.98561707336426 10.6471954266357 4.85167274963379 10.6471954266357 C 4.71563066894531 10.6471954266357 4.58009887573242 10.5949784088135 4.47674203857422 10.490572701416 C 4.27212613769531 10.2833204443359 4.27371362365723 9.9500329486084 4.4809658972168 9.74490679321289 L 6.75328522155762 7.49736362731933 L 4.4893852532959 5.22609317321777 C 4.28372048217773 5.01988978637695 4.28425909790039 4.68609203613281 4.49043412353516 4.48042726501465 C 4.69663751037598 4.27422387817383 5.02989664489746 4.27530110961914 5.23610003173828 4.4814761352539 L 7.50314662719727 6.75538294555664 L 9.77810232421875 4.50469313598633 C 9.98481596557617 4.29956698059082 10.319152331543 4.30166472106934 10.5237682324219 4.5089169946289 C 10.7288943878174 4.71616925170898 10.7267966473389 5.04996700195312 10.5195443737793 5.25458290283203 L 8.24725339416504 7.50209775695801 Z " fill-rule="nonzero" fill="#a6a6a6" stroke="none" transform="matrix(1 0 0 1 305 289 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -15,7 +15,6 @@ const alarmManagement = {
|
||||
{
|
||||
path: 'index',
|
||||
name: 'alarmOverviewIndex',
|
||||
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
||||
component: () => import('/@/view/alarmManagement/alarmOverview/index.vue'),
|
||||
meta: {
|
||||
title: '告警总览',
|
||||
@@ -26,16 +25,15 @@ const alarmManagement = {
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'equipmentAlarm ',
|
||||
path: 'equipmentAlarm',
|
||||
name: 'EquipmentAlarm',
|
||||
meta: { title: '设备告警', hideChildren: true, icon: 'gaojingguanli' },
|
||||
component: Base,
|
||||
redirect: { name: 'equipmentAlarmIndex' },
|
||||
redirect: { name: 'EquipmentAlarmIndex' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'equipmentAlarmIndex',
|
||||
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
||||
name: 'EquipmentAlarmIndex',
|
||||
component: () => import('/@/view/alarmManagement/equipmentAlarm/index.vue'),
|
||||
meta: {
|
||||
title: '设备告警',
|
||||
@@ -55,11 +53,34 @@ const alarmManagement = {
|
||||
{
|
||||
path: 'index',
|
||||
name: 'alarmSettingsIndex',
|
||||
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
||||
component: () => import('/@/view/alarmManagement/alarmSettings/index.vue'),
|
||||
meta: {
|
||||
title: '告警设置',
|
||||
keepAlive: true,
|
||||
operates: [
|
||||
{ title: '设备告警新增', code: 'equipmentAlarmAdd' },
|
||||
{ title: '设备告警导入', code: 'equipmentAlarmImport' },
|
||||
{ title: '设备告警导出', code: 'equipmentAlarmExports' },
|
||||
{ title: '设备告警删除', code: 'equipmentAlarmDel' },
|
||||
{ title: '设备告警编辑', code: 'equipmentAlarmEdit' },
|
||||
{ title: '能源告警新增', code: 'energyAlarmAdd' },
|
||||
{ title: '能源告警导入', code: 'energyAlarmImport' },
|
||||
{ title: '能源告警导出', code: 'energyAlarmExports' },
|
||||
{ title: '能源告警删除', code: 'energyAlarmDel' },
|
||||
{ title: '能源告警编辑', code: 'energyAlarmEdit' },
|
||||
{ title: '设备告警规则新增', code: 'configureEquipmentAlarmAdd' },
|
||||
{ title: '设备告警规则导入', code: 'configureEquipmentAlarmImport' },
|
||||
{ title: '设备告警规则导出', code: 'configureEquipmentAlarmExports' },
|
||||
{ title: '设备告警规则批量删除', code: 'configureEquipmentAlarmDels' },
|
||||
{ title: '设备告警规则编辑', code: 'configureEquipmentAlarmEdit' },
|
||||
{ title: '设备告警规则删除', code: 'configureEquipmentAlarmDel' },
|
||||
{ title: '能源告警规则新增', code: 'configureEnergyAlarmAdd' },
|
||||
{ title: '能源告警规则导入', code: 'configureEnergyAlarmImport' },
|
||||
{ title: '能源告警规则导出', code: 'configureEnergyAlarmExports' },
|
||||
{ title: '能源告警规则批量删除', code: 'configureEnergyAlarmDels' },
|
||||
{ title: '能源告警规则编辑', code: 'configureEnergyAlarmEdit' },
|
||||
{ title: '能源告警规则删除', code: 'configureEnergyAlarmDel' },
|
||||
],
|
||||
// backApi: [],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-box-right">
|
||||
<img width="54px" height="54px" src="../../../../src/icon/gaojingguanli.svg" />
|
||||
<img width="54px" height="54px" src="../../../../src/icon/gaojingtonglan.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +45,7 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
defineOptions({
|
||||
name: 'alarmOverview', // 与页面路由name一致缓存才可生效
|
||||
name: 'alarmOverviewIndex', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
|
||||
const info = ref({});
|
||||
@@ -134,13 +134,13 @@
|
||||
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'RoleTypeAdd',
|
||||
name: 'configureEnergyAlarmAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
editConfigureEnergyAlarms.value.toggle(null, configureEnergyAlarmsData.value);
|
||||
@@ -114,7 +114,7 @@
|
||||
},
|
||||
{
|
||||
label: '导入',
|
||||
name: 'groupImport',
|
||||
name: 'configureEnergyAlarmImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
// api: props.postImportApi, // 导入接口名
|
||||
@@ -131,7 +131,7 @@
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
name: 'groupExports',
|
||||
name: 'configureEnergyAlarmExports',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||
@@ -140,7 +140,7 @@
|
||||
{
|
||||
label: '批量删除',
|
||||
type: 'primary',
|
||||
name: 'userBatchDel',
|
||||
name: 'configureEnergyAlarmDels',
|
||||
confirm: true,
|
||||
dynamicDisabled: (data: any) => {
|
||||
return data.list.length === 0;
|
||||
@@ -205,7 +205,7 @@
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'configureEnergyAlarmEdit',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
editConfigureEnergyAlarms.value.toggle(data, configureEnergyAlarmsData.value);
|
||||
@@ -213,7 +213,7 @@
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'configureEnergyAlarmDel',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'RoleTypeAdd',
|
||||
name: 'configureEquipmentAlarmAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
editConfigureDeviceAlarms.value.toggle(null, configureDeviceAlarmsData.value);
|
||||
@@ -87,7 +87,7 @@
|
||||
},
|
||||
{
|
||||
label: '导入',
|
||||
name: 'groupImport',
|
||||
name: 'configureEquipmentAlarmImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
// api: props.postImportApi, // 导入接口名
|
||||
@@ -104,7 +104,7 @@
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
name: 'groupExports',
|
||||
name: 'configureEquipmentAlarmExports',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||
@@ -112,7 +112,7 @@
|
||||
},
|
||||
{
|
||||
label: '批量删除',
|
||||
name: 'groupTemDownload',
|
||||
name: 'configureEquipmentAlarmDels',
|
||||
type: 'primary',
|
||||
confirm: true,
|
||||
dynamicDisabled: (data: any) => {
|
||||
@@ -177,7 +177,7 @@
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'configureEquipmentAlarmEdit',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
editConfigureDeviceAlarms.value.toggle(data, configureDeviceAlarmsData);
|
||||
@@ -185,7 +185,7 @@
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'configureEquipmentAlarmDel',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'AlarmSettings',
|
||||
name: 'AlarmSettingsIndex',
|
||||
components: {
|
||||
editeEquipmentAlarm,
|
||||
configureDeviceAlarms,
|
||||
|
||||
@@ -57,7 +57,7 @@ export const energyAlarmConfigs = (
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'RoleTypeAdd',
|
||||
name: 'energyAlarmAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
editeEnergyAlarm.value.toggle();
|
||||
@@ -65,7 +65,7 @@ export const energyAlarmConfigs = (
|
||||
},
|
||||
{
|
||||
label: '导入',
|
||||
name: 'groupImport',
|
||||
name: 'energyAlarmImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
title: '设备信息', // 弹窗title
|
||||
@@ -81,7 +81,7 @@ export const energyAlarmConfigs = (
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
name: 'groupExports',
|
||||
name: 'energyAlarmExports',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||
@@ -95,7 +95,7 @@ export const energyAlarmConfigs = (
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'energyAlarmEdit',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
data.monitorFrequency = data.monitorFrequency.value;
|
||||
@@ -106,7 +106,7 @@ export const energyAlarmConfigs = (
|
||||
},
|
||||
{
|
||||
label: '配置',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'alarmSettingsIndex',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
energyAlarm.value = !energyAlarm.value;
|
||||
@@ -115,7 +115,7 @@ export const energyAlarmConfigs = (
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'energyAlarmDel',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
|
||||
@@ -61,7 +61,7 @@ export const equipmentAlarmTableConfig = (
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'RoleTypeAdd',
|
||||
name: 'equipmentAlarmAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
editEquipmentAlarm.value.toggle();
|
||||
@@ -69,7 +69,7 @@ export const equipmentAlarmTableConfig = (
|
||||
},
|
||||
{
|
||||
label: '导入',
|
||||
name: 'groupImport',
|
||||
name: 'equipmentAlarmImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
// api: props.postImportApi, // 导入接口名
|
||||
@@ -86,7 +86,7 @@ export const equipmentAlarmTableConfig = (
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
name: 'groupExports',
|
||||
name: 'equipmentAlarmExports',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||
@@ -100,7 +100,7 @@ export const equipmentAlarmTableConfig = (
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'equipmentAlarmEdit',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
data.priority = data.priority.value;
|
||||
@@ -111,7 +111,7 @@ export const equipmentAlarmTableConfig = (
|
||||
},
|
||||
{
|
||||
label: '配置',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'alarmSettingsIndex',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
equipmentAlarm.value = !equipmentAlarm.value;
|
||||
@@ -120,7 +120,7 @@ export const equipmentAlarmTableConfig = (
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'FeedBackDetail',
|
||||
name: 'equipmentAlarmDel',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentAlarmIndex',
|
||||
components: { Look, Status },
|
||||
|
||||
setup() {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<div style="width: 100%; height: 100%; overflow-y: auto">
|
||||
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
|
||||
<!-- top -->
|
||||
<div
|
||||
style="
|
||||
@@ -28,247 +28,202 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- center -->
|
||||
<div style="width: 100%; height: 300px; border: 1px solid red" ref="graphChart"></div>
|
||||
<div style="width: 100%; height: 400px">
|
||||
<div style="width: 100%; height: 100%" ref="graphChart"></div>
|
||||
</div>
|
||||
<!-- bottom -->
|
||||
<div style="width: 100%; margin-top: 10px">
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item label="优先级">紧急</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">新告警</a-descriptions-item>
|
||||
<a-descriptions-item label="错误码">C003</a-descriptions-item>
|
||||
<a-descriptions-item label="告警描述"
|
||||
><div style="color: #ff7602">用电量超标</div> 当日用电量超出预设值</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="设备信息"> 1栋10层低压柜 </a-descriptions-item>
|
||||
<a-descriptions-item label="重复次数"> 0 </a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button type="primary" @click="handleClose">确定</a-button>
|
||||
</template>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'look', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
import { ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let chartInstance = null;
|
||||
const graphChart = ref(null);
|
||||
const visible = ref(false);
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const btnClick = () => {
|
||||
console.log('btnClick');
|
||||
};
|
||||
const toggle = (data) => {
|
||||
console.log(data, 'data');
|
||||
visible.value = true;
|
||||
getChatr();
|
||||
};
|
||||
const getChatr = () => {
|
||||
let dayData = [];
|
||||
let energyAlarm = [];
|
||||
let wgAlarm = [];
|
||||
let equipmentAlarm = [];
|
||||
let total = [];
|
||||
|
||||
// Extend data for 30 days
|
||||
for (let i = 1; i < 30; i++) {
|
||||
dayData.push(`3/${i}`);
|
||||
energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
|
||||
wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
|
||||
equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
|
||||
total.push(0); // Assuming the same value for simplicity
|
||||
}
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
const option = {
|
||||
title: {
|
||||
text: '告警趋势/ 近30天',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#aaaaaa',
|
||||
},
|
||||
left: '1%',
|
||||
top: '2%',
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const graphChart = ref(null);
|
||||
const visible = ref(false);
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const btnClick = () => {
|
||||
console.log('btnClick');
|
||||
handleClose();
|
||||
};
|
||||
const toggle = (data: any) => {
|
||||
console.log(data, 'data');
|
||||
visible.value = true;
|
||||
setTimeout(() => {
|
||||
getChatr();
|
||||
}, 500);
|
||||
};
|
||||
const getChatr = () => {
|
||||
let dayData = [];
|
||||
let energyAlarm = [];
|
||||
|
||||
// Extend data for 30 days
|
||||
for (let i = 1; i < 30; i++) {
|
||||
dayData.push(`3/${i}`);
|
||||
energyAlarm.push(Math.floor(Math.random() * 250));
|
||||
}
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
const option = {
|
||||
// title: {
|
||||
// text: '告警趋势/ 近30天',
|
||||
// textStyle: {
|
||||
// fontSize: 16,
|
||||
// fontWeight: 'normal',
|
||||
// color: '#aaaaaa',
|
||||
// },
|
||||
// left: '1%',
|
||||
// top: '2%',
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let res = params[0].marker + ' ' + params[0].seriesName + ' : ' + params[0].data;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '10%', // 设置图表距离左边的距离
|
||||
right: '4%', // 设置图表距离右边的距离
|
||||
top: '6%',
|
||||
borderWidth: 0,
|
||||
y2: 60, // 距离底边
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
show: false,
|
||||
top: 5,
|
||||
left: 'center', // 将图例居中显示
|
||||
textStyle: {
|
||||
color: 'rgb(89, 89, 89)',
|
||||
fontSize: '14',
|
||||
fontWeight: 'normal',
|
||||
}, // 注意这里的颜色值要用引号括起来
|
||||
data: ['电压值'],
|
||||
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
|
||||
},
|
||||
],
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function (params) {
|
||||
let res =
|
||||
params[0].axisValue +
|
||||
'<br/>' +
|
||||
params[0].marker +
|
||||
' ' +
|
||||
params[0].seriesName +
|
||||
' : ' +
|
||||
params[0].data +
|
||||
'<br/>' +
|
||||
params[1].marker +
|
||||
' ' +
|
||||
params[1].seriesName +
|
||||
' : ' +
|
||||
params[1].data +
|
||||
'<br/>' +
|
||||
params[2].marker +
|
||||
' ' +
|
||||
params[2].seriesName +
|
||||
' : ' +
|
||||
params[2].data +
|
||||
'<br/>';
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '2%', // 设置图表距离左边的距离
|
||||
right: '2%', // 设置图表距离右边的距离
|
||||
borderWidth: 0,
|
||||
y2: 60, // 距离底边
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
top: 5,
|
||||
left: 'center', // 将图例居中显示
|
||||
textStyle: {
|
||||
color: 'rgb(89, 89, 89)',
|
||||
fontSize: '14',
|
||||
fontWeight: 'normal',
|
||||
}, // 注意这里的颜色值要用引号括起来
|
||||
data: ['设备告警', '网关告警', '能源告警'],
|
||||
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
axisTick: {
|
||||
show: true,
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true, // 显示 X 轴刻度标签
|
||||
color: 'rgb(89, 89, 89)', // X 轴刻度标签的字体颜色
|
||||
fontSize: 12, // X 轴刻度标签的字体大小
|
||||
formatter: function (value) {
|
||||
// 可选：格式化 X 轴刻度标签文本
|
||||
return value;
|
||||
},
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
data: dayData,
|
||||
data: dayData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
shwo: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true, // 显示
|
||||
formatter: function (value) {
|
||||
return value + ' V'; // 在刻度值后加上单位
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
shwo: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 不显示刻度值
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
height: 12,
|
||||
start: 0,
|
||||
end: 100,
|
||||
handleSize: '300%', // 设置滑块的大小
|
||||
bottom: 15,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '电压值',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: '#6395F9',
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
height: 12,
|
||||
start: 0,
|
||||
end: 100,
|
||||
handleSize: '300%', // 设置滑块的大小
|
||||
bottom: 15,
|
||||
},
|
||||
symbol: 'circle', // 数据点的形状，这里设置为圆形
|
||||
symbolSize: 8,
|
||||
label: {
|
||||
show: true,
|
||||
color: 'rgb(89, 89, 89)',
|
||||
position: 'top',
|
||||
top: '10',
|
||||
formatter: function (value) {
|
||||
return Number(energyAlarm[value.dataIndex]) + 'V';
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '能源告警',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgb(246, 189, 22)',
|
||||
},
|
||||
},
|
||||
data: energyAlarm,
|
||||
},
|
||||
{
|
||||
name: '网关告警',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgb(91, 143, 249)',
|
||||
},
|
||||
},
|
||||
data: wgAlarm,
|
||||
},
|
||||
{
|
||||
name: '设备告警',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgb(48, 191, 120)',
|
||||
},
|
||||
},
|
||||
data: equipmentAlarm,
|
||||
},
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barHight: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#000000',
|
||||
position: 'top',
|
||||
top: '10',
|
||||
formatter: function (value) {
|
||||
return (
|
||||
Number(energyAlarm[value.dataIndex]) +
|
||||
Number(wgAlarm[value.dataIndex]) +
|
||||
Number(equipmentAlarm[value.dataIndex])
|
||||
);
|
||||
},
|
||||
},
|
||||
data: total,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
return {
|
||||
btnClick,
|
||||
visible,
|
||||
chartInstance,
|
||||
handleClose,
|
||||
toggle,
|
||||
graphChart,
|
||||
getChatr,
|
||||
};
|
||||
},
|
||||
},
|
||||
data: energyAlarm,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@@ -280,4 +235,7 @@
|
||||
height: 35px;
|
||||
background-color: rgb(254, 118, 2);
|
||||
}
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
width: 25%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,16 +8,81 @@
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
状态
|
||||
<a-tabs>
|
||||
<a-tab-pane key="1" tab="更新状态">Content of Tab Pane 1</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="状态流程">
|
||||
<!-- <a-steps direction="vertical" :current="4">
|
||||
<template v-for="index in 4">
|
||||
<a-step>
|
||||
<template #icon>
|
||||
<img src="../../../../src/icon/status-off.svg" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div
|
||||
style="
|
||||
width: 400px;
|
||||
min-height: 40px;
|
||||
background-color: #f8fafc;
|
||||
margin-left: 20px;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
padding: 12px;
|
||||
">
|
||||
<div style="width: 100%; height: 40px; display: flex; position: relative">
|
||||
<a-tag style="width: 60px; height: 20px; text-align: center" color="#04d919"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: -2px;
|
||||
transform: translateX(-50%);
|
||||
color: #3a3a3a;
|
||||
"
|
||||
>李四</div
|
||||
>
|
||||
<div style="position: absolute; right: 10px; top: -2px; color: #ff7602"
|
||||
>2024-03-11 11:30:06</div
|
||||
>
|
||||
</div>
|
||||
<div style="width: 100%; color: #3a3a3a"> 工单已完成并通过验收 </div>
|
||||
</div>
|
||||
</template>
|
||||
</a-step>
|
||||
</template>
|
||||
</a-steps> -->
|
||||
<NsSteps v-bind="config" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button>
|
||||
<a-button type="primary" @click="btnClick">确定</a-button>
|
||||
</template>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { ref, createVNode } from 'vue';
|
||||
import NsSteps from '/@/components/ns-steps.vue';
|
||||
import { NsMessage, NsModal } from '/nerv-lib/component';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { NsSteps },
|
||||
|
||||
setup() {
|
||||
const visible = ref(false);
|
||||
const logList = ref([
|
||||
{ name: '李四', status: '2' },
|
||||
{ name: '王五', status: '4' },
|
||||
{ name: '王五', status: '3' },
|
||||
{ name: '王五', status: '1' },
|
||||
{ name: '赵六', status: '0' },
|
||||
]);
|
||||
const config = ref({
|
||||
size: logList.value.length,
|
||||
dataSource: logList.value,
|
||||
});
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
@@ -28,12 +93,42 @@
|
||||
console.log(data, 'data');
|
||||
visible.value = true;
|
||||
};
|
||||
const createOrder = () => {
|
||||
NsModal.confirm({
|
||||
title: '提示',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '是否创建工单',
|
||||
okText: '确认',
|
||||
okType: 'primary',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
NsModal.confirm({
|
||||
title: '提示',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '工单创建成功，工单号xxxxxxxxx',
|
||||
okText: '确认',
|
||||
okType: 'primary',
|
||||
cancelButtonProps: { style: { display: 'none' } }, // 正确设置取消按钮样式
|
||||
onOk() {
|
||||
console.log('创建工单');
|
||||
},
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
};
|
||||
return {
|
||||
btnClick,
|
||||
createOrder,
|
||||
visible,
|
||||
logList,
|
||||
config,
|
||||
handleClose,
|
||||
toggle,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
|
||||
@@ -130,18 +130,10 @@ export const notificationtableConfig = (look: any, status: any) => {
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
label: '告警标题',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入告警标题关键字',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
label: '错误码',
|
||||
component: 'NsInputApi',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入告警错误码',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user