xuziqiang
4 months ago
25 changed files with 1852 additions and 513 deletions
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -320 -9 )"> |
|||
<path d="M 5.72142857421875 4.29571427734375 L 5.72142857421875 0.0171428515625 L 10 0.0171428515625 L 10 4.29571427734375 L 5.72142857421875 4.29571427734375 Z M 14.564285722656251 0.3028571484375 L 19.84 5.57857142578125 C 19.9828571484375 5.57857142578125 19.9828571484375 5.864285703125001 20 6.0071428515625005 L 20 19.27 C 19.9828571484375 19.69857142578125 19.697142871093753 19.98428572265625 19.27 20 L 0.73 20 C 0.30142857421874997 19.98428572265625 0.015714277343749916 19.6985714453125 0 19.27 L 0 0.73 C 0.015714277343749916 0.30142857421874997 0.30142855468749996 0.015714277343749916 0.73 0.015714277343749916 L 4.29571427734375 0.015714277343749916 L 4.29571427734375 5.72142857421875 L 11.42571427734375 5.72142857421875 L 11.42571427734375 0.0171428515625 L 13.992857148437501 0.0171428515625 C 14.135714296875001 0.0171428515625 14.421428574218751 0.16 14.564285722656251 0.3028571484375 Z M 4.29571427734375 15.70428572265625 L 15.70428572265625 15.704285722656248 L 15.70428572265625 10 L 4.29571427734375 10 L 4.29571427734375 15.70428572265625 Z " fill-rule="nonzero" fill="#ff7602" stroke="none" transform="matrix(1 0 0 1 320 9 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg"> |
|||
<g transform="matrix(1 0 0 1 -320 -9 )"> |
|||
<path d="M 17.482232142857143 6.05310267857143 L 7.481830357142856 16.053526785714283 L 3.946339285714287 12.518035714285713 L 13.946741071428567 2.5176116071428565 L 17.482232142857143 6.05310267857143 Z M 2.8571428571428568 17.142857142857142 L 2.8571428571428568 13.607142857142856 L 6.392857142857144 17.142857142857142 L 2.8571428571428568 17.142857142857142 Z M 18.013392857142858 0.4017857142857143 L 19.598214285714285 1.9866071428571428 C 20.133928571428573 2.5223214285714284 20.133928571428573 3.3995535714285703 19.598214285714285 3.937500000000002 L 18.55357142857143 4.982142857142853 L 15.017857142857142 1.4464285714285705 L 16.062499999999996 0.4017857142857143 C 16.598214285714285 -0.13392857142857142 17.47544642857143 -0.13392857142857142 18.013392857142858 0.4017857142857143 Z M 0 15.714285714285714 L 1.4285714285714284 15.714285714285714 L 1.4285714285714284 18.571428571424978 L 1.4285714285714284 20 L 0 20 L 0 15.714285714285714 Z M 18.571428571428573 20 L 1.4285714285714284 20 L 1.4285714285714284 18.571428571428573 L 18.571428571428573 18.571428571428573 L 18.571428571428573 20 Z M 20 15.714285714285714 L 20 20 L 18.571428571428573 20 L 18.571428571428573 15.714285714285714 L 20 15.714285714285714 Z " fill-rule="nonzero" fill="#ff7602" stroke="none" transform="matrix(1 0 0 1 320 9 )" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,29 @@ |
|||
<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 { |
|||
name: 'EquipmentAlarmIndex', |
|||
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,234 @@ |
|||
<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; overflow-x: hidden"> |
|||
<!-- top --> |
|||
<div class="box"> |
|||
<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"> |
|||
2024-03-10 15:08:10 |
|||
</div> |
|||
</div> |
|||
<!-- center --> |
|||
<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="告警描述">网关心跳包丢失</a-descriptions-item> |
|||
<a-descriptions-item label="设备信息">1号网关_Di23j596_0001 </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 lang="ts" setup> |
|||
defineOptions({ |
|||
name: 'look', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
import { ref } from 'vue'; |
|||
import * as echarts from 'echarts'; |
|||
|
|||
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 < 9; i++) { |
|||
dayData.push('10:' + i * 9 + ':00'); |
|||
energyAlarm.push(Math.floor(Math.random() * 2)); |
|||
} |
|||
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, // 这里可以调整图例项之间的间距，单位为像素 |
|||
}, |
|||
], |
|||
calculable: true, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: true, |
|||
}, |
|||
splitArea: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, // 显示 X 轴刻度标签 |
|||
color: 'rgb(89, 89, 89)', // X 轴刻度标签的字体颜色 |
|||
fontSize: 12, // X 轴刻度标签的字体大小 |
|||
interval: 0, // 显示所有刻度标签 |
|||
formatter: function (value) { |
|||
// 可选：格式化 X 轴刻度标签文本 |
|||
return value; |
|||
}, |
|||
}, |
|||
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; |
|||
}, |
|||
}, |
|||
interval: 1, // 设置 Y 轴刻度间隔为 1 |
|||
}, |
|||
], |
|||
dataZoom: [ |
|||
{ |
|||
height: 12, |
|||
start: 0, |
|||
end: 100, |
|||
handleSize: '300%', // 设置滑块的大小 |
|||
bottom: 15, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '状态', |
|||
type: 'line', |
|||
itemStyle: { |
|||
normal: { |
|||
barBorderRadius: 0, |
|||
color: '#2778FF', |
|||
}, |
|||
}, |
|||
symbol: 'circle', // 数据点的形状，这里设置为圆形 |
|||
symbolSize: 8, |
|||
// label: { |
|||
// show: true, |
|||
// color: 'rgb(89, 89, 89)', |
|||
// position: 'top', |
|||
// top: '10', |
|||
// formatter: function (value) { |
|||
// return Number(energyAlarm[value.dataIndex]) ; |
|||
// }, |
|||
// }, |
|||
data: energyAlarm, |
|||
}, |
|||
], |
|||
}; |
|||
chartInstance = echarts.init(graphChart.value); |
|||
chartInstance.setOption(option); |
|||
}; |
|||
defineExpose({ |
|||
toggle, |
|||
}); |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.box { |
|||
width: 100%; |
|||
height: 35px; |
|||
display: flex; |
|||
position: relative; |
|||
font-size: @font-size-base; |
|||
border-bottom: 1px solid @primary-color; |
|||
} |
|||
.card { |
|||
position: absolute; |
|||
left: 0px; |
|||
top: 0px; |
|||
width: 5px; |
|||
height: 35px; |
|||
background-color: @primary-color; |
|||
} |
|||
:deep(.ant-descriptions-item-label) { |
|||
width: 25%; |
|||
} |
|||
</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,124 @@ |
|||
<template> |
|||
<ns-drawer |
|||
v-model:visible="visible" |
|||
width="550" |
|||
:title="' '" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
:ok="btnClick" |
|||
:cancel="handleClose" |
|||
placement="right" |
|||
@close="handleClose"> |
|||
<a-tabs> |
|||
<a-tab-pane key="1" tab="更新状态"> |
|||
<div style="width: 100%; padding: 24px"> |
|||
<a-form ref="formRef" :model="infoObject" :rules="rules"> |
|||
<a-form-item ref="status" label="当前状态" name="status"> |
|||
<a-select |
|||
v-model:value="infoObject.status" |
|||
show-search |
|||
placeholder="请选择设备点位" |
|||
style="width: 85%" |
|||
:options="statusOptions" |
|||
:disabled="true" |
|||
:filter-option="filterDevicePoint" /> |
|||
</a-form-item> |
|||
<a-form-item label="备注" name="desc"> |
|||
<a-textarea |
|||
v-model:value="infoObject.desc" |
|||
placeholder="请输入异常描述" |
|||
:disabled="true" |
|||
style="width: 85%" |
|||
:autoSize="{ minRows: 4, maxRows: 4 }" /> |
|||
</a-form-item> |
|||
</a-form> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="状态流程"> |
|||
<NsSteps v-bind="config" /> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
<template #footer> |
|||
<a-button type="primary" @click="btnClick">确定</a-button> |
|||
</template> |
|||
</ns-drawer> |
|||
</template> |
|||
<script> |
|||
import { defineComponent } 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 infoObject = ref({}); |
|||
const statusOptions = ref([ |
|||
{ value: '0', label: '待处理' }, |
|||
{ value: '1', label: '处理中' }, |
|||
{ value: '2', label: '已完成' }, |
|||
{ value: '3', label: '超时' }, |
|||
{ value: '4', label: '已关闭' }, |
|||
]); |
|||
const logList = ref([ |
|||
{ name: '李四', status: '2', time: '2024-03-10 10:00:00', desc: '完成' }, |
|||
{ name: '王五', status: '4', time: '2024-03-10 10:00:00' }, |
|||
{ name: '王五', status: '3', time: '2024-03-10 10:00:00' }, |
|||
{ name: '王五', status: '1', time: '2024-03-10 10:00:00', desc: '创建工单' }, |
|||
{ name: '赵六', status: '0', time: '2024-03-10 10:00:00' }, |
|||
]); |
|||
const config = ref({ |
|||
size: logList.value.length, |
|||
dataSource: logList.value, |
|||
}); |
|||
const handleClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const btnClick = () => { |
|||
visible.value = false; |
|||
}; |
|||
const toggle = (data) => { |
|||
infoObject.value = { ...logList.value[0] }; |
|||
let statusMap = { |
|||
0: '待处理', |
|||
1: '处理中', |
|||
2: '已完成', |
|||
3: '超时', |
|||
4: '已关闭', |
|||
}; |
|||
let colorMap = { |
|||
0: '#ff7602', |
|||
1: '#00a1e6', |
|||
2: '#04d919', |
|||
3: '#d9001b', |
|||
4: '#a6a6a6', |
|||
}; |
|||
logList.value.forEach((item) => { |
|||
item.statusName = statusMap[item.status]; |
|||
item.color = colorMap[item.status]; |
|||
item.src = 'status-' + item.status; |
|||
}); |
|||
visible.value = true; |
|||
}; |
|||
return { |
|||
infoObject, |
|||
statusOptions, |
|||
btnClick, |
|||
visible, |
|||
logList, |
|||
config, |
|||
handleClose, |
|||
toggle, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style scoped lang="less"> |
|||
:deep(.ant-form-item-label) { |
|||
z-index: 20; |
|||
text-align: right; |
|||
width: 17%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,158 @@ |
|||
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', |
|||
defaultValue: '2', |
|||
componentProps: { |
|||
placeholder: '请选择告警优先级', |
|||
disabled: true, |
|||
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: 'createTime', |
|||
label: '生产日期', |
|||
component: 'NsRangePicker', |
|||
fieldMap: ['manufactureBeginDate', 'manufactureEndDate'], |
|||
componentProps: { |
|||
valueFormat: 'YYYY-MM-DD', |
|||
placeholder: ['开始日期', '结束日期'], |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
// pagination: { pageSizeOptions: false },
|
|||
rowKey: 'id', |
|||
}; |
|||
}; |
|||
@ -1,10 +1,406 @@ |
|||
<template> |
|||
|
|||
<div class="main"> |
|||
<div class="left"> |
|||
<div class="top"> |
|||
<a-form style="width: 100%;margin: 0 auto;"> |
|||
<div class="ns-form-title"><div class="title">2024年济阳站碳盘查报告</div></div> |
|||
<div style="padding: 0 16px !important;width: 100%;"> |
|||
<a-row> |
|||
<a-col :span="24" style="margin-bottom: 16px;"> |
|||
<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入关键词" /> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
</a-form> |
|||
<a-tree |
|||
:expanded-keys="expandedKeys" |
|||
:auto-expand-parent="autoExpandParent" |
|||
:tree-data="gData" |
|||
:height="233" |
|||
show-line |
|||
style="padding: 0 16px !important;" |
|||
@expand="onExpand" |
|||
> |
|||
<template #title="{ title }"> |
|||
<span v-if="title.indexOf(searchValue) > -1"> |
|||
{{ title.substring(0, title.indexOf(searchValue)) }} |
|||
<span style="color: #f50">{{ searchValue }}</span> |
|||
{{ title.substring(title.indexOf(searchValue) + searchValue.length) }} |
|||
</span> |
|||
<span v-else>{{ title }}</span> |
|||
</template> |
|||
</a-tree> |
|||
</div> |
|||
<div class="bottom"> |
|||
<a-form style="width: 100%;margin: 0 auto;"> |
|||
<div class="ns-form-title"><div class="title">报告相关</div></div> |
|||
<div class="button" style="padding: 0 16px !important;"> |
|||
<div class="changePage">排放统计</div> |
|||
<div class="changePage">碳排流向</div> |
|||
</div> |
|||
</a-form> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="ns-table-title ns-title-extra-box">排放源</div> |
|||
<div class="mainLeft"></div> |
|||
<div class="mainRight"> |
|||
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 1500}" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, watch } from 'vue'; |
|||
import type { TreeProps } from 'ant-design-vue'; |
|||
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary'; |
|||
const orgId = ref(''); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
orgId.value = result; |
|||
const fetch = (api, params = { orgId } ) => { |
|||
return http.post(api, params); |
|||
}; |
|||
// 树结构 |
|||
const x = 3; |
|||
const y = 2; |
|||
const z = 1; |
|||
const genData: TreeProps['treeData'] = []; |
|||
|
|||
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => { |
|||
const preKey = _preKey || '0'; |
|||
const tns = _tns || genData; |
|||
|
|||
const children = []; |
|||
for (let i = 0; i < x; i++) { |
|||
const key = `${preKey}-${i}`; |
|||
tns.push({ title: key, key }); |
|||
if (i < y) { |
|||
children.push(key); |
|||
} |
|||
} |
|||
if (_level < 0) { |
|||
return tns; |
|||
} |
|||
const level = _level - 1; |
|||
children.forEach((key, index) => { |
|||
tns[index].children = []; |
|||
return generateData(level, key, tns[index].children); |
|||
}); |
|||
}; |
|||
generateData(z); |
|||
|
|||
const dataList: TreeProps['treeData'] = []; |
|||
const generateList = (data: TreeProps['treeData']) => { |
|||
for (let i = 0; i < data.length; i++) { |
|||
const node = data[i]; |
|||
const key = node.key; |
|||
dataList.push({ key, title: key }); |
|||
if (node.children) { |
|||
generateList(node.children); |
|||
} |
|||
} |
|||
}; |
|||
generateList(genData); |
|||
|
|||
const getParentKey = ( |
|||
key: string | number, |
|||
tree: TreeProps['treeData'], |
|||
): string | number | undefined => { |
|||
let parentKey; |
|||
for (let i = 0; i < tree.length; i++) { |
|||
const node = tree[i]; |
|||
if (node.children) { |
|||
if (node.children.some(item => item.key === key)) { |
|||
parentKey = node.key; |
|||
} else if (getParentKey(key, node.children)) { |
|||
parentKey = getParentKey(key, node.children); |
|||
} |
|||
} |
|||
} |
|||
return parentKey; |
|||
}; |
|||
const expandedKeys = ref<(string | number)[]>([]); |
|||
const searchValue = ref<string>(''); |
|||
const autoExpandParent = ref<boolean>(true); |
|||
const gData = ref<TreeProps['treeData']>(genData); |
|||
|
|||
const onExpand = (keys: string[]) => { |
|||
expandedKeys.value = keys; |
|||
autoExpandParent.value = false; |
|||
}; |
|||
|
|||
watch(searchValue, value => { |
|||
const expanded = dataList |
|||
.map((item: TreeProps['treeData'][number]) => { |
|||
if (item.title.indexOf(value) > -1) { |
|||
return getParentKey(item.key, gData.value); |
|||
} |
|||
return null; |
|||
}) |
|||
.filter((item, i, self) => item && self.indexOf(item) === i); |
|||
expandedKeys.value = expanded; |
|||
searchValue.value = value; |
|||
autoExpandParent.value = true; |
|||
}); |
|||
// 填报表格数据 |
|||
const queryParams = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
orgId: orgId.value, |
|||
}) |
|||
const tableConfig = ref({ |
|||
title: '能耗统计', |
|||
api: energyConsumption.pageList, |
|||
params: queryParams.value, |
|||
headerActions: [ |
|||
{ |
|||
label: '新增', |
|||
name: 'userAdd', |
|||
type: 'primary', |
|||
handle: () => { |
|||
getDictList() |
|||
visible.value = true |
|||
}, |
|||
}, |
|||
{ |
|||
label: '导入', |
|||
type: 'primary', |
|||
name: 'userImport', |
|||
handle: () => {}, |
|||
}, |
|||
{ |
|||
label: '导出', |
|||
type: 'primary', |
|||
name: 'userExports', |
|||
}, |
|||
{ |
|||
label: '模板下载', |
|||
type: 'primary', |
|||
name: 'userExports', |
|||
}, |
|||
{ |
|||
label: '上传凭证', |
|||
type: 'primary', |
|||
handle: () => { |
|||
openUpload.value = true; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '凭证下载', |
|||
type: 'primary', |
|||
name: 'userExports', |
|||
}, |
|||
], |
|||
columns: [ |
|||
{ |
|||
title: '序号', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '能源种类', |
|||
dataIndex: 'energyType', |
|||
}, |
|||
{ |
|||
title: '计量单位', |
|||
className: 'unitName', |
|||
dataIndex: 'unitName', |
|||
}, |
|||
{ |
|||
title: '全年', |
|||
dataIndex: 'yearly', |
|||
}, |
|||
{ |
|||
title: '1月', |
|||
dataIndex: 'jan', |
|||
}, |
|||
{ |
|||
title: '2月', |
|||
dataIndex: 'feb', |
|||
}, |
|||
{ |
|||
title: '3月', |
|||
dataIndex: 'mar', |
|||
}, |
|||
{ |
|||
title: '4月', |
|||
dataIndex: 'apr', |
|||
}, |
|||
{ |
|||
title: '5月', |
|||
dataIndex: 'may', |
|||
}, |
|||
{ |
|||
title: '6月', |
|||
dataIndex: 'jun', |
|||
}, |
|||
{ |
|||
title: '7月', |
|||
dataIndex: 'jul', |
|||
}, |
|||
{ |
|||
title: '8月', |
|||
dataIndex: 'aug', |
|||
}, |
|||
{ |
|||
title: '9月', |
|||
dataIndex: 'sep', |
|||
}, |
|||
{ |
|||
title: '10月', |
|||
dataIndex: 'oct', |
|||
}, |
|||
{ |
|||
title: '11月', |
|||
dataIndex: 'nov', |
|||
}, |
|||
{ |
|||
title: '12月', |
|||
dataIndex: 'dec', |
|||
}, |
|||
], |
|||
columnActions: { |
|||
title: '操作', |
|||
actions: [ |
|||
{ |
|||
label: '编辑', |
|||
name: 'userEdit', |
|||
handle: (record: any) => { |
|||
}, |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
name: 'userDelete', |
|||
dynamicParams: { id: 'id' }, |
|||
confirm: true, |
|||
isReload: true, |
|||
api: energyConsumption.del, |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'year', |
|||
label: '年份', |
|||
component: 'NsDatePicker', |
|||
componentProps: { |
|||
picker: 'year', |
|||
valueFormat: 'YYYY', |
|||
}, |
|||
}, |
|||
], |
|||
params: {}, |
|||
}, |
|||
rowKey: 'id', |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main { |
|||
background-color: @ns-content-bg; |
|||
display: flex; |
|||
height: 100%; |
|||
} |
|||
.left { |
|||
width: 300px; |
|||
margin-right: @ns-gap; |
|||
min-width: fit-content; |
|||
> div { |
|||
background-color: @white; |
|||
flex: 1; |
|||
} |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
.top{ |
|||
position: relative; |
|||
height: 80%; |
|||
.ns-form-title{ |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding: 16px; |
|||
margin-bottom: 16px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
.title{ |
|||
text-align: left; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
position: relative; |
|||
padding-left: 9px; |
|||
} |
|||
.title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
height: 13px; |
|||
width: 3px; |
|||
border-radius: 1px; |
|||
background-color: #2778FF; |
|||
} |
|||
} |
|||
.bottom{ |
|||
position: relative; |
|||
height: 20%; |
|||
.ns-form-title{ |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding: 16px; |
|||
margin-bottom: 16px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
.title{ |
|||
text-align: left; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
position: relative; |
|||
padding-left: 9px; |
|||
} |
|||
.title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
height: 13px; |
|||
width: 3px; |
|||
border-radius: 1px; |
|||
background-color: #2778FF; |
|||
} |
|||
.changePage{ |
|||
height: 3vh; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
min-width: 0; |
|||
height: 100%; |
|||
padding: @ns-gap; |
|||
background-color: @white; |
|||
border-radius: @ns-border-radius; |
|||
box-shadow: @ns-content-box-shadow; |
|||
.ns-table-title { |
|||
text-align: left; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
width: 100%; |
|||
margin-bottom: @ns-gap; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue