xuziqiang
4 months ago
19 changed files with 1543 additions and 739 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', |
||||
|
}; |
||||
|
}; |
||||
@ -1,401 +0,0 @@ |
|||||
<!-- @format --> |
|
||||
|
|
||||
<template> |
|
||||
<div class="main"> |
|
||||
<div class="left"> |
|
||||
<div class="top"> |
|
||||
<a-form style="width: 100%;margin: 0 auto;"> |
|
||||
<div class="ns-form-title"><span>排放分类</span></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="selectTreeDataValue" |
|
||||
placeholder="请输入关键词" |
|
||||
@search="onSearchTreeData" |
|
||||
/> |
|
||||
</a-col> |
|
||||
</a-row> |
|
||||
</div> |
|
||||
</a-form> |
|
||||
<a-tree |
|
||||
v-if="gData && gData.length > 0" |
|
||||
class="draggable-tree" |
|
||||
style="padding: 0 16px !important;" |
|
||||
show-line |
|
||||
block-node |
|
||||
:tree-data="gData" |
|
||||
:checkedKeys="checkedTreeNodeKeys" |
|
||||
:selectedKeys="selectedKeys" |
|
||||
@check="checkTreeNode" |
|
||||
@select="onSelect" |
|
||||
:expanded-keys="expandedKeys" |
|
||||
:auto-expand-parent="autoExpandParent" |
|
||||
@expand="onExpand"> |
|
||||
<template #title="{ emissionName }"> |
|
||||
<span v-if="emissionName && selectTreeDataValue && emissionName.indexOf(selectTreeDataValue) > -1"> |
|
||||
{{ emissionName.substring(0, emissionName.indexOf(selectTreeDataValue)) }} |
|
||||
<span style="color: #f50">{{ selectTreeDataValue }}</span> |
|
||||
{{ emissionName.substring(emissionName.indexOf(selectTreeDataValue) + selectTreeDataValue.length) }} |
|
||||
</span> |
|
||||
<span v-else>{{ emissionName }}</span> |
|
||||
</template> |
|
||||
</a-tree> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<a-table :columns="columns" :data-source="tableData" bordered :pagination="false"> |
|
||||
<template #bodyCell="{ column, text }"> |
|
||||
<template v-if="column.dataIndex === 'name'"> |
|
||||
<a>{{ text }}</a> |
|
||||
</template> |
|
||||
</template> |
|
||||
<template #title>Header</template> |
|
||||
</a-table> |
|
||||
</div> |
|
||||
<!-- 新增树节点 --> |
|
||||
<ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel"> |
|
||||
<ns-input |
|
||||
v-model:value="addTreeNode" |
|
||||
class="input" |
|
||||
placeholder="请输入排放类型"/> |
|
||||
</ns-modal> |
|
||||
<!-- 新增数据库数据 --> |
|
||||
<a-drawer |
|
||||
:width="500" |
|
||||
:visible="visible" |
|
||||
:body-style="{ paddingBottom: '80px' }" |
|
||||
:footer-style="{ textAlign: 'right' }" |
|
||||
destroyOnClose |
|
||||
@close="onClose"> |
|
||||
<ns-form |
|
||||
ref="formRef" |
|
||||
:model="formData" |
|
||||
class="form" |
|
||||
:wrapperCol="{ span: 20 }" |
|
||||
formLayout="vertical" /> |
|
||||
<template #footer> |
|
||||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button> |
|
||||
<a-button type="primary" @click="onEdit">确定</a-button> |
|
||||
</template> |
|
||||
</a-drawer> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts" setup> |
|
||||
import { Modal } from 'ant-design-vue'; |
|
||||
import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue'; |
|
||||
import { http } from '/nerv-lib/util/http'; |
|
||||
import { NsMessage, NsModal } from '/nerv-lib/component'; |
|
||||
import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary'; |
|
||||
import type { |
|
||||
AntTreeNodeDragEnterEvent, |
|
||||
AntTreeNodeDropEvent, |
|
||||
TreeProps, |
|
||||
} from 'ant-design-vue/es/tree'; |
|
||||
import { log } from 'node:console'; |
|
||||
|
|
||||
defineOptions({ name: 'QuickCalculation' }); |
|
||||
const selectTreeDataValue = ref<string>(''); |
|
||||
const data = reactive({}); |
|
||||
let formData = ref({}); |
|
||||
const formRef = ref(); |
|
||||
const visible = ref(false); |
|
||||
const searchValue = ref<string>(''); |
|
||||
const searchValue2 = ref<string>(''); |
|
||||
const disabled = ref(false); |
|
||||
const treeNodeAdd = ref<boolean>(false); |
|
||||
const operationTree = ref<string>('新增'); |
|
||||
|
|
||||
const opMap: any = ref({ |
|
||||
type: 'add', |
|
||||
fuc: () => {}, |
|
||||
record: {}, |
|
||||
}); |
|
||||
watchEffect(() => { |
|
||||
disabled.value = opMap.value.type === 'edit'; |
|
||||
}); |
|
||||
const casData = ref([]); |
|
||||
const treeData = ref([]); |
|
||||
const userAuthList = ref([]); |
|
||||
const orgId = ref(''); |
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|
||||
orgId.value = result; |
|
||||
const dynamicDisabled = computed(() => { |
|
||||
return formRef.value?.validateResult && userAuthList.value?.length; |
|
||||
}); |
|
||||
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); |
|
||||
type TreeDataItem = TreeProps['treeData'][number]; |
|
||||
const gData = ref<TreeProps['treeData']>(genData); |
|
||||
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 autoExpandParent = ref<boolean>(true); |
|
||||
|
|
||||
const onExpand = (keys: string[]) => { |
|
||||
expandedKeys.value = keys; |
|
||||
autoExpandParent.value = false; |
|
||||
}; |
|
||||
watch(selectTreeDataValue, 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; |
|
||||
selectTreeDataValue.value = value; |
|
||||
autoExpandParent.value = true; |
|
||||
}); |
|
||||
// 筛选树结构中的数据 |
|
||||
const onSearchTreeData = (selectTreeDataValue: string) => { |
|
||||
console.log('use value', selectTreeDataValue); |
|
||||
console.log('or use this.value', value.value); |
|
||||
}; |
|
||||
// 点击数据点的复选框 |
|
||||
const checkedIds = ref([]) |
|
||||
const emissionType = ref() |
|
||||
const checkTreeNode = (checkedKeys, info) => { |
|
||||
checkedIds.value = [] |
|
||||
info.checkedNodes.forEach(item=>{ |
|
||||
checkedIds.value.push(item.id) |
|
||||
}) |
|
||||
sessionStorage.setItem('checkedTreeNode', checkedIds.value); |
|
||||
emissionType.value = checkedIds.value.join(',') |
|
||||
} |
|
||||
// 新增/编辑树节点点击确定 |
|
||||
const addTreeNode =ref() |
|
||||
const handleOk = (e: MouseEvent) => { |
|
||||
editTreeNode.value.emissionName = addTreeNode.value |
|
||||
http.post(carbonEmissionFactorLibrary.creat,editTreeNode.value).then(() => { |
|
||||
getOrgTree() |
|
||||
NsMessage.success('操作成功'); |
|
||||
addTreeNode.value = '' |
|
||||
treeNodeAdd.value = false; |
|
||||
}); |
|
||||
}; |
|
||||
const handleCancel = () => { |
|
||||
addTreeNode.value = '' |
|
||||
treeNodeAdd.value = false; |
|
||||
}; |
|
||||
// 获取排放分类树 |
|
||||
const getOrgTree = (params?) => { |
|
||||
fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => { |
|
||||
gData.value = res.data |
|
||||
// 找到匹配的节点数据 |
|
||||
const selectedNodes = []; |
|
||||
checkedTreeNodeKeys.value.forEach(key => { |
|
||||
const [parentId, childId] = key.split('-').map(Number); |
|
||||
if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) { |
|
||||
selectedNodes.push(gData.value[parentId]); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
}; |
|
||||
getOrgTree(); |
|
||||
// 被选中的树节点 |
|
||||
const editTreeNode = ref({}) |
|
||||
const onSelect = (selectedKeys: string[], info: any) => { |
|
||||
if(info.selected){ |
|
||||
editTreeNode.value = { |
|
||||
id:info.selectedNodes[0].id, |
|
||||
level:info.selectedNodes[0].level, |
|
||||
dataNumber:info.selectedNodes[0].dataNumber, |
|
||||
sortNumber:info.selectedNodes[0].sortNumber, |
|
||||
parentEmissionId:info.selectedNodes[0].parentEmissionId, |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const onSearch = () => { |
|
||||
console.log(searchValue.value); |
|
||||
getOrgTree({ orgName: searchValue.value, orgId }); |
|
||||
}; |
|
||||
|
|
||||
const tableFetch = (params) => { |
|
||||
console.log(params, 'sdfasfasdfasdfasdf'); |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
mainRef.value?.nsTableRef.reload(); |
|
||||
}, 100); |
|
||||
}; |
|
||||
|
|
||||
const handleSelect = (selectedKeys: any, info: any) => { |
|
||||
fetch(carbonEmissionFactorLibrary.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => { |
|
||||
treeData2.value = res.data; |
|
||||
}); |
|
||||
tableFetch({ orgId: info.node?.orgInfo.orgId }); |
|
||||
}; |
|
||||
const columns = [ |
|
||||
{ |
|
||||
title: 'Name', |
|
||||
dataIndex: 'name', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'Cash Assets', |
|
||||
className: 'column-money', |
|
||||
dataIndex: 'money', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'Address', |
|
||||
dataIndex: 'address', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const tableData = [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
name: 'John Brown', |
|
||||
money: '￥300,000.00', |
|
||||
address: 'New York No. 1 Lake Park', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
name: 'Jim Green', |
|
||||
money: '￥1,256,000.00', |
|
||||
address: 'London No. 1 Lake Park', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
name: 'Joe Black', |
|
||||
money: '￥120,000.00', |
|
||||
address: 'Sidney No. 1 Lake Park', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const onClose = () => { |
|
||||
visible.value = false; |
|
||||
formData.value = {}; |
|
||||
userAuthList.value.splice(0); |
|
||||
}; |
|
||||
|
|
||||
const onEdit = () => { |
|
||||
formRef.value?.triggerSubmit().then(() => { |
|
||||
console.log(formData.value, 'formData.value'); |
|
||||
// if (!userAuthList.value.length) { |
|
||||
// NsMessage.error('请添加用户权限'); |
|
||||
// return; |
|
||||
// } |
|
||||
|
|
||||
opMap.value.fuc && |
|
||||
opMap.value.fuc({ ...formData.value }); |
|
||||
}); |
|
||||
}; |
|
||||
</script> |
|
||||
<style lang="less" scoped> |
|
||||
.main { |
|
||||
background-color: @ns-content-bg; |
|
||||
display: flex; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.left { |
|
||||
width: 300px; |
|
||||
// max-height: calc(100vh - 96px); |
|
||||
margin-right: @ns-gap; |
|
||||
min-width: fit-content; |
|
||||
> div { |
|
||||
background-color: @white; |
|
||||
// box-shadow: @ns-content-box-shadow; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
.top{ |
|
||||
position: relative; |
|
||||
.addTreeNode{ |
|
||||
width: 100%; |
|
||||
padding: 16px; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.right { |
|
||||
flex: 1; |
|
||||
min-width: 0; |
|
||||
} |
|
||||
::v-deep .ant-table-container{ |
|
||||
padding: 0px 16px; |
|
||||
} |
|
||||
.top { |
|
||||
overflow: auto; |
|
||||
// height: 50%; |
|
||||
// border-bottom: 5px solid rgb(229, 235, 240); |
|
||||
// overflow-y: auto; |
|
||||
} |
|
||||
.ns-form-title{ |
|
||||
font-weight: bold; |
|
||||
user-select: text; |
|
||||
padding: 16px; |
|
||||
margin-bottom: 16px; |
|
||||
padding-bottom: 10px; |
|
||||
border-bottom: 1px solid #e9e9e9; |
|
||||
} |
|
||||
</style> |
|
||||
<style scoped> |
|
||||
th.column-money, |
|
||||
td.column-money { |
|
||||
text-align: right !important; |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue