zhaohy
4 months ago
11 changed files with 997 additions and 191 deletions
@ -0,0 +1,22 @@ |
|||
import { department } from '/@/api/origanizemanage'; |
|||
|
|||
export const editTreeConfig = (orgId) => ({ |
|||
selectedKeys: ['0-0'], |
|||
defaultExpandAll: true, |
|||
api: department.queryDeptTree, |
|||
params: { orgId }, |
|||
resultField: 'data.orgInfos', |
|||
fieldNames: { title: 'orgName', key: 'orgId' }, |
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'orgName', |
|||
component: 'NsInput', |
|||
autoSubmit: true, |
|||
componentProps: { |
|||
placeholder: '请输入企业名称', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}); |
|||
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<ns-view-list-table v-bind="config" ref="mainRef" /> |
|||
<!-- 详情页面 --> |
|||
<Look ref="look" /> |
|||
<!-- 状态页面 --> |
|||
<Status ref="status" /> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { notificationtableConfig } from './ts/config'; |
|||
import Look from './look.vue'; |
|||
import Status from './status.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
export default { |
|||
components: { Look, Status }, |
|||
|
|||
setup() { |
|||
const look = ref(null); |
|||
const status = ref(null); |
|||
const config = notificationtableConfig(look, status); |
|||
return { |
|||
config, |
|||
look, |
|||
status, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<ns-drawer |
|||
v-model:visible="visible" |
|||
width="520" |
|||
:title="' '" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
:ok="btnClick" |
|||
:cancel="handleClose" |
|||
placement="right" |
|||
@close="handleClose"> |
|||
<div style="width: 100%; height: 100%; overflow-y: auto"> |
|||
<!-- top --> |
|||
<div |
|||
style=" |
|||
width: 100%; |
|||
height: 35px; |
|||
display: flex; |
|||
position: relative; |
|||
font-size: 16px; |
|||
border-bottom: 1px solid rgb(255, 118, 2); /* 设置底部边框为1像素实线，并指定颜色 */ |
|||
"> |
|||
<div class="card"></div> |
|||
<div style="left: 25px; position: absolute; height: 35px; line-height: 35px"> |
|||
告警编号：20230310001 |
|||
</div> |
|||
<div style="right: 20px; position: absolute; height: 35px; line-height: 35px"> |
|||
15点08分 |
|||
</div> |
|||
</div> |
|||
<!-- center --> |
|||
<div style="width: 100%; height: 300px; border: 1px solid red" ref="graphChart"></div> |
|||
</div> |
|||
</ns-drawer> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } from 'vue'; |
|||
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%', |
|||
}, |
|||
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: { |
|||
show: true, |
|||
feature: { |
|||
restore: {}, |
|||
saveAsImage: {}, |
|||
}, |
|||
}, |
|||
calculable: true, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitArea: { |
|||
show: false, |
|||
}, |
|||
data: dayData, |
|||
}, |
|||
], |
|||
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: '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, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.card { |
|||
position: absolute; |
|||
left: 0px; |
|||
top: 0px; |
|||
width: 5px; |
|||
height: 35px; |
|||
background-color: rgb(254, 118, 2); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,108 @@ |
|||
{ |
|||
"listData":[ |
|||
{ |
|||
"id": "d4", |
|||
"isDel": "0", |
|||
"officesId": "84", |
|||
"deviceCode": "37430200143", |
|||
"deviceName": "地听测试电表", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "1", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "", |
|||
"types": "", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo1", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": "84566", |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "cupidatat nisi ea ad", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": null, |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null, |
|||
"priority": "1", |
|||
"alarmTitle": "电压异常告警", |
|||
"errorCode": "A001", |
|||
"monitorTime":"1", |
|||
"repetitions":"1", |
|||
"monitorTimeUnit": "分", |
|||
"enableRules": "1", |
|||
"isUse":true |
|||
} , { |
|||
"id": "d5", |
|||
"isDel": "0", |
|||
"officesId": "84", |
|||
"deviceCode": "37430200143", |
|||
"deviceName": "地听测试电表", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "1", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "", |
|||
"types": "", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo2", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": "84566", |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "cupidatat nisi ea ad", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": null, |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null, |
|||
"priority": "1", |
|||
"alarmTitle": "电压异常告警", |
|||
"errorCode": "A001", |
|||
"monitorTime":"1", |
|||
"repetitions":"1", |
|||
"monitorTimeUnit": "分", |
|||
"enableRules": "0", |
|||
"isUse":true |
|||
} |
|||
] |
|||
|
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
<template> |
|||
<ns-drawer |
|||
v-model:visible="visible" |
|||
width="520" |
|||
:title="' '" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
:ok="btnClick" |
|||
:cancel="handleClose" |
|||
placement="right" |
|||
@close="handleClose"> |
|||
状态 |
|||
</ns-drawer> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } from 'vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const visible = ref(false); |
|||
const handleClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const btnClick = () => { |
|||
console.log('btnClick'); |
|||
}; |
|||
const toggle = (data) => { |
|||
console.log(data, 'data'); |
|||
visible.value = true; |
|||
}; |
|||
return { |
|||
btnClick, |
|||
visible, |
|||
handleClose, |
|||
toggle, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,164 @@ |
|||
import { dateUtil } from '/nerv-lib/util/date-util'; |
|||
import data from '../notificationManagementMock.json'; |
|||
import { http } from '/nerv-lib/util'; |
|||
import { ref } from 'vue'; |
|||
const tableKeyMap = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'address', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '告警编号', |
|||
dataIndex: 'id', |
|||
}, |
|||
{ |
|||
title: '告警描述', |
|||
dataIndex: 'deviceCode', |
|||
}, |
|||
{ |
|||
title: '优先级', |
|||
dataIndex: 'deviceName', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '错误码', |
|||
dataIndex: 'position', |
|||
textEllipsis: true, |
|||
}, |
|||
{ |
|||
title: '设备信息', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '更新时间', |
|||
dataIndex: 'enableRules', |
|||
}, |
|||
{ |
|||
title: '重复次数', |
|||
dataIndex: 'enableRules', |
|||
}, |
|||
]; |
|||
const mockData = ref(data.listData); |
|||
export const notificationtableConfig = (look: any, status: any) => { |
|||
return { |
|||
title: '告警记录', |
|||
// api: '/carbon_emission/device/getDeviceList',
|
|||
value: mockData.value, |
|||
headerActions: [{}], |
|||
columns: tableKeyMap, |
|||
// rowSelection: null, 选择按钮
|
|||
columnActions: { |
|||
title: '操作', |
|||
actions: [ |
|||
{ |
|||
label: '详情', |
|||
name: 'FeedBackDetail', |
|||
dynamicParams: ['uuid', 'appealType'], |
|||
handle: (data: any) => { |
|||
console.log(look.value); |
|||
look.value.toggle(data); |
|||
}, |
|||
}, |
|||
{ |
|||
label: '状态', |
|||
name: 'FeedBackDetail', |
|||
dynamicParams: ['uuid', 'appealType'], |
|||
handle: (data: any) => { |
|||
status.value.toggle(data); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'name', |
|||
label: '告警类型', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择告警优先级', |
|||
options: [ |
|||
{ |
|||
label: '紧急', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '重要', |
|||
value: '2', |
|||
}, |
|||
{ |
|||
label: '一般', |
|||
value: '3', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'provider', |
|||
label: '状态', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择状态', |
|||
options: [ |
|||
{ |
|||
label: '待处理', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '处理中', |
|||
value: '2', |
|||
}, |
|||
{ |
|||
label: '已完成', |
|||
value: '3', |
|||
}, |
|||
{ |
|||
label: '超时', |
|||
value: '4', |
|||
}, |
|||
{ |
|||
label: '关闭', |
|||
value: '5', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'provider', |
|||
label: '告警标题', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入告警标题关键字', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'provider', |
|||
label: '错误码', |
|||
component: 'NsInputApi', |
|||
componentProps: { |
|||
placeholder: '请输入告警错误码', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'createTime', |
|||
label: '生产日期', |
|||
component: 'NsRangePicker', |
|||
fieldMap: ['manufactureBeginDate', 'manufactureEndDate'], |
|||
componentProps: { |
|||
valueFormat: 'YYYY-MM-DD', |
|||
placeholder: ['设备生产开始日期', '设备生产结束日期'], |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
// pagination: { pageSizeOptions: false },
|
|||
rowKey: 'id', |
|||
}; |
|||
}; |
|||
Loading…
Reference in new issue