Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
export enum deviceAlarms {
|
||||
getTableList = '/carbon-smart/api/AlarmEquipment/selectAlarmEquipment', //设备告警分页
|
||||
addOrUpNewData = '/carbon-smart/api/AlarmEquipment/creatOrUpdate', //设备告警添加 修海
|
||||
addOrUpNewData = '/carbon-smart/api/AlarmEquipment/creatOrUpdate', //设备告警添加 修改
|
||||
del = '/carbon-smart/api/AlarmEquipment/delete', //设备告警删除
|
||||
configGetTableList = '/carbon-smart/api/AlarmEquipmentRule/selectAlarmEquipmentRule', //配置设备告警分页
|
||||
configAddOrUpNewData = '/carbon-smart/api/AlarmEquipmentRule/creatOrUpdate', //配置设备告警添加 修改
|
||||
configFindById = '/carbon-smart/api/AlarmEquipmentRule/findById', //配置设备告警 查询详情
|
||||
configDel = '/carbon-smart/api/AlarmEquipmentRule/delete', //配置设备告警删除
|
||||
}
|
||||
|
||||
9
hx-ai-intelligent/src/api/alarmSettings/energyAlarm.ts
Normal file
9
hx-ai-intelligent/src/api/alarmSettings/energyAlarm.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export enum energyAlarms {
|
||||
getTableList = '/carbon-smart/api/AlarmEnergyConsumption/selectAlarmEnergyConsumption', //能耗告警分页
|
||||
addOrUpNewData = '/carbon-smart/api/AlarmEnergyConsumption/creatOrUpdate', //能耗告警添加 修改
|
||||
del = '/carbon-smart/api/AlarmEnergyConsumption/delete', //能耗删除
|
||||
configGetTableList = '/carbon-smart/api/AlarmEquipmentRule/selectAlarmEquipmentRule', //配置设备告警分页
|
||||
configAddOrUpNewData = '/carbon-smart/api/AlarmEquipmentRule/creatOrUpdate', //配置设备告警添加 修改
|
||||
configFindById = '/carbon-smart/api/AlarmEquipmentRule/findById', //配置设备告警 查询详情
|
||||
configDel = '/carbon-smart/api/AlarmEquipmentRule/delete', //配置设备告警删除
|
||||
}
|
||||
@@ -11,5 +11,10 @@ export enum carbonEmissionFactorLibrary {
|
||||
}
|
||||
// 碳排管理-碳排统计接口
|
||||
export enum energyConsumption {
|
||||
getDicList = '/carbon-smart/client/dict/list',
|
||||
pageList = '/carbon-smart/api/carbon/stats/pageList',
|
||||
findById = '/carbon-smart/api/carbon/stats/findById',
|
||||
creat = '/carbon-smart/api/carbon/stats/creat',
|
||||
update = '/carbon-smart/api/carbon/stats/update',
|
||||
del = '/carbon-smart/api/carbon/stats/del',
|
||||
}
|
||||
@@ -38,3 +38,46 @@ export const dict = async ({
|
||||
}
|
||||
return Promise.resolve({ data: { data: get(dictMap, key) } });
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取所有枚举(无需传参)
|
||||
*/
|
||||
export const getAllEnum = async ({
|
||||
api = `${BASE_URL}/operation/enum/getAllEnum`,
|
||||
params = {},
|
||||
keyField = 'dicKey',
|
||||
transform = (res: any) => res,
|
||||
}: dictHttpConfig) => {
|
||||
const dictMap = JSON.parse(sessionStorage.getItem('dictMap') || '{}') as Object;
|
||||
const key = get(params, keyField) as keyof typeof dictMap;
|
||||
|
||||
if (!dictMap.hasOwnProperty(key)) {
|
||||
const res = await http.post(api, params);
|
||||
const options = get(transform(res), `data.${key}`);
|
||||
dictMap[key] = options;
|
||||
sessionStorage.setItem('dictMap', JSON.stringify(dictMap));
|
||||
}
|
||||
return Promise.resolve({ data: { data: get(dictMap, key) } });
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 获取单个枚举(需传参,参数 enumType)
|
||||
*/
|
||||
export const getEnum = async ({
|
||||
api = `${BASE_URL}/operation/enum/getEnum`,
|
||||
params = {},
|
||||
keyField = 'dicKey',
|
||||
transform = (res: any) => res,
|
||||
}: dictHttpConfig) => {
|
||||
const dictMap = JSON.parse(sessionStorage.getItem('dictMap') || '{}') as Object;
|
||||
const key = get(params, keyField) as keyof typeof dictMap;
|
||||
|
||||
if (!dictMap.hasOwnProperty(key)) {
|
||||
const res = await http.post(api, params);
|
||||
const options = get(transform(res), `data.${key}`);
|
||||
dictMap[key] = options;
|
||||
sessionStorage.setItem('dictMap', JSON.stringify(dictMap));
|
||||
}
|
||||
return Promise.resolve({ data: { data: get(dictMap, key) } });
|
||||
};
|
||||
@@ -25,19 +25,339 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 4; width: 100%">2</div>
|
||||
<div style="flex: 4; width: 100%">3</div>
|
||||
<div style="flex: 4; width: 100%; display: flex; gap: 5px">
|
||||
<div
|
||||
style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
|
||||
<div ref="echartPieOne" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div style="flex: 1; height: 100%; background-color: white; border-radius: 4px"> xxxx </div>
|
||||
</div>
|
||||
<!-- 告警矩形 echarts -->
|
||||
<div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
|
||||
<div ref="graphChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
defineOptions({
|
||||
name: 'alarmOverview', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
|
||||
const info = ref({});
|
||||
onMounted(() => {});
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let chartInstanceOne: echarts.ECharts | null = null;
|
||||
const graphChart = ref(null);
|
||||
const echartPieOne = ref(null);
|
||||
const getGraphChart = () => {
|
||||
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);
|
||||
};
|
||||
const getEchartPieOne = () => {
|
||||
if (chartInstanceOne) {
|
||||
chartInstanceOne.dispose();
|
||||
}
|
||||
chartInstanceOne = echarts.init(echartPieOne.value);
|
||||
var m2R2Data = [
|
||||
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
|
||||
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
|
||||
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
|
||||
];
|
||||
const option = {
|
||||
title: [
|
||||
{
|
||||
text: '优先级 / 近30天',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#aaaaaa',
|
||||
},
|
||||
left: '2%',
|
||||
top: '2%',
|
||||
},
|
||||
{
|
||||
text: '优先级',
|
||||
subtext: 12312 + '个',
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: 'black',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: 'black',
|
||||
},
|
||||
textAlign: 'center',
|
||||
x: '44.3%',
|
||||
y: '46%',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (parms) {
|
||||
var str = parms.marker + ' :' + parms.data.value;
|
||||
return str;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// 设置图例靠右,上下居中,垂直排列
|
||||
right: 50,
|
||||
top: 'center',
|
||||
orient: 'vertical',
|
||||
// 图例图标设置为圆形
|
||||
icon: 'circle',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '优先级',
|
||||
type: 'pie',
|
||||
center: ['45%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'outter',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
formatter: function (parms) {
|
||||
return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true, // 控制标签线是否显示
|
||||
length: 10, // 标签线长度
|
||||
length2: 20, // 标签线引出部分长度
|
||||
// 其他样式属性,如 lineStyle 等
|
||||
},
|
||||
data: m2R2Data,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstanceOne = echarts.init(echartPieOne.value);
|
||||
chartInstanceOne.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
//渲染第三个图表
|
||||
getGraphChart();
|
||||
//优先级
|
||||
getEchartPieOne();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
|
||||
@@ -31,23 +31,28 @@
|
||||
import editConfigureEnergyAlarm from './editConfigureEnergyAlarm.vue';
|
||||
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { device } from '/@/api/deviceManage';
|
||||
|
||||
export default {
|
||||
components: { editConfigureEnergyAlarm },
|
||||
|
||||
setup() {
|
||||
//设备告警数据
|
||||
const configureDeviceAlarmsData = ref({});
|
||||
//能源告警配置
|
||||
const configureEnergyAlarmsData = ref({});
|
||||
const show = ref(false);
|
||||
const tableConfig = ref({});
|
||||
const mainRef = ref({});
|
||||
const editConfigureEnergyAlarms = ref({});
|
||||
const mockData = ref(data.listData);
|
||||
//组织树
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const clickSwitch = (data: any) => {
|
||||
NsModal.confirm({
|
||||
title: '启用状态',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '吗?',
|
||||
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '规则吗?',
|
||||
onOk: () => {
|
||||
http
|
||||
.post(deviceAlarms.addOrUpNewData, {
|
||||
@@ -55,7 +60,7 @@
|
||||
enableRules: data.record.enableRules === 1 ? 0 : 1,
|
||||
})
|
||||
.then(() => {
|
||||
NsMessage.success('操作成功');
|
||||
NsMessage.success(data.record.enableRules === 1 ? '规则已关闭' : '规则已启用');
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
});
|
||||
},
|
||||
@@ -71,7 +76,7 @@
|
||||
a.click();
|
||||
};
|
||||
const setconfigureDeviceAlarmsData = (value: any) => {
|
||||
configureDeviceAlarmsData.value = value;
|
||||
configureEnergyAlarmsData.value = value;
|
||||
show.value = true;
|
||||
tableConfig.value = {
|
||||
title: '告警规则',
|
||||
@@ -83,7 +88,7 @@
|
||||
name: 'RoleTypeAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
editConfigureEnergyAlarms.value.toggle();
|
||||
editConfigureEnergyAlarms.value.toggle(null, configureEnergyAlarmsData.value);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -143,7 +148,7 @@
|
||||
},
|
||||
{
|
||||
title: '对比类型',
|
||||
dataIndex: 'valueType',
|
||||
dataIndex: 'comparisonType',
|
||||
},
|
||||
{
|
||||
title: '告警点位',
|
||||
@@ -172,7 +177,7 @@
|
||||
name: 'FeedBackDetail',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
editConfigureEnergyAlarms.value.toggle(data);
|
||||
editConfigureEnergyAlarms.value.toggle(data, configureEnergyAlarmsData.value);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -190,29 +195,37 @@
|
||||
title: value.errorCode,
|
||||
schemas: [
|
||||
{
|
||||
field: 'provider',
|
||||
field: 'deviceName',
|
||||
label: '设备名称',
|
||||
component: 'NsInput',
|
||||
component: 'nsSelectApi',
|
||||
componentProps: {
|
||||
placeholder: '请输入设备名称',
|
||||
api: device.queryDevicePage,
|
||||
params: {
|
||||
orgId: orgId.value,
|
||||
pageNum: 1,
|
||||
pageSize: 99,
|
||||
},
|
||||
placeholder: '请选择设备名称',
|
||||
resultField: 'data.records',
|
||||
labelField: 'deviceName',
|
||||
valueField: 'id',
|
||||
autoAddLink: true, //默认添加联动
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
field: 'devicePoint',
|
||||
label: '设备点位',
|
||||
component: 'nsSelectApi',
|
||||
dynamicParams: {
|
||||
id: 'deviceName', //帮定上级联动数据
|
||||
},
|
||||
componentProps: {
|
||||
api: '/api/community/objs/DictItem',
|
||||
params: {
|
||||
pageSize: 100,
|
||||
code: 'MZ',
|
||||
},
|
||||
placeholder: '请选择设备点位',
|
||||
api: device.queryDevicePoint,
|
||||
resultField: 'data',
|
||||
labelField: 'dictName',
|
||||
valueField: 'dictValue',
|
||||
immediate: true,
|
||||
autoSelectFirst: false,
|
||||
placeholder: '请选择设备点位',
|
||||
labelField: 'code',
|
||||
valueField: 'id',
|
||||
dependency: 'deviceName',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -249,10 +262,11 @@
|
||||
};
|
||||
};
|
||||
return {
|
||||
configureDeviceAlarmsData,
|
||||
configureEnergyAlarmsData,
|
||||
show,
|
||||
clickSwitch,
|
||||
doWnload,
|
||||
orgId,
|
||||
tableConfig,
|
||||
editConfigureEnergyAlarms,
|
||||
setconfigureDeviceAlarmsData,
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
@close="handleClose"
|
||||
placement="right">
|
||||
<div style="padding: 18px; width: 100%; overflow: hidden">
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
@@ -18,57 +19,70 @@
|
||||
placeholder="请选择站点"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="zdTreeData"
|
||||
tree-node-filter-prop="label">
|
||||
<!-- 特殊处理情况 -->
|
||||
<!-- <template #title="{ value: val, label }">
|
||||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||
<template v-else>{{ label }}</template>
|
||||
</template> -->
|
||||
</a-tree-select>
|
||||
:tree-data="siteDataTree"
|
||||
:field-names="{
|
||||
children: 'linkList',
|
||||
label: 'orgName',
|
||||
value: 'orgId',
|
||||
}"
|
||||
tree-node-filter-prop="orgName" />
|
||||
</a-form-item>
|
||||
<a-form-item label="数据来源" name="sbtype">
|
||||
<a-cascader
|
||||
v-model:value="infoObject.sbtype"
|
||||
:options="sbOptions"
|
||||
:show-search="{ filter }"
|
||||
:options="deviceTypeTreeData"
|
||||
:field-names="{
|
||||
children: 'children',
|
||||
label: 'cnValue',
|
||||
value: 'id',
|
||||
}"
|
||||
:show-search="{ filterDeviceType }"
|
||||
@change="selectDeviceType"
|
||||
placeholder="请选择数据来源" />
|
||||
</a-form-item>
|
||||
<a-form-item label="设备节点" name="jdDevice">
|
||||
<a-form-item label="设备/节点" name="deviceNode">
|
||||
<a-tree-select
|
||||
v-model:value="infoObject.jdDevice"
|
||||
v-model:value="infoObject.deviceNode"
|
||||
style="width: 100%"
|
||||
placeholder="请选择设备节点"
|
||||
:disabled="!infoObject.sbtype"
|
||||
:tree-line="true && { showLeafIcon: false }"
|
||||
:tree-data="jdTreeData" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则" name="delivery">
|
||||
<a-switch
|
||||
v-model:checked="infoObject.delivery"
|
||||
:class="{
|
||||
'blue-background': infoObject.delivery,
|
||||
'grey-background': !infoObject.delivery,
|
||||
:tree-data="jdTreeData"
|
||||
:field-names="{
|
||||
children: 'children',
|
||||
label: infoObject.sbtype && infoObject.sbtype[1] === 1 ? 'deviceName' : 'pointName',
|
||||
value: 'id',
|
||||
}" />
|
||||
</a-form-item>
|
||||
<a-form-item label="异常描述" name="desc">
|
||||
<a-form-item label="启用规则" name="enableRules">
|
||||
<a-switch
|
||||
:checked="infoObject.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@click="clickSwitch" />
|
||||
</a-form-item>
|
||||
<a-form-item label="异常描述" name="abnormalDescription">
|
||||
<a-textarea
|
||||
v-model:value="infoObject.desc"
|
||||
v-model:value="infoObject.abnormalDescription"
|
||||
style="height: 32px"
|
||||
:autoSize="{ minRows: 1, maxRows: 1 }"
|
||||
show-count
|
||||
:maxlength="30" />
|
||||
</a-form-item>
|
||||
<a-form-item label="规则类型" name="resource">
|
||||
<a-radio-group v-model:value="infoObject.resource">
|
||||
<a-form-item label="规则类型" name="ruleType">
|
||||
<a-radio-group v-model:value="infoObject.ruleType">
|
||||
<a-radio value="1">且 (and) </a-radio>
|
||||
<a-radio value="2">或 (or) </a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="对比类型1" name="qzType">
|
||||
<a-form-item label="对比类型" name="comparisonType">
|
||||
<a-cascader
|
||||
v-model:value="infoObject.sbtype"
|
||||
:options="sbOptions"
|
||||
placeholder="请选择数据来源" />
|
||||
v-model:value="infoObject.comparisonType"
|
||||
:options="comparisonTypeData"
|
||||
:showSearch="false"
|
||||
placeholder="请选择对比类型" />
|
||||
</a-form-item>
|
||||
<template v-for="index in infoObject.alarmList?.length" :key="index">
|
||||
<div style="width: 100%; display: flex; margin-left: 42px; padding: 12px">
|
||||
@@ -76,8 +90,7 @@
|
||||
<a-select
|
||||
v-model:value="infoObject.alarmList[index - 1].logic"
|
||||
style="width: 70px; margin-left: 12px"
|
||||
:options="ljOptions"
|
||||
@change="handleQzChange" />
|
||||
:options="ljOptions" />
|
||||
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
|
||||
<a-input
|
||||
style="width: 65px; margin-left: 6px"
|
||||
@@ -93,8 +106,8 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
infoObject.alarmList[index - 1].num === null ||
|
||||
infoObject.alarmList[index - 1].logic === null
|
||||
infoObject.alarmList[index - 1]?.num === null ||
|
||||
infoObject.alarmList[index - 1]?.logic === null
|
||||
"
|
||||
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
|
||||
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
|
||||
@@ -114,212 +127,231 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { ref, toRaw } from 'vue';
|
||||
import type { CascaderProps, TreeSelectProps, SelectProps } from 'ant-design-vue';
|
||||
import { ref } from 'vue';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
|
||||
import { device } from '/@/api/deviceManage';
|
||||
import { device, group } from '/@/api/deviceManage';
|
||||
import { energyAlarms } from '/@/api/alarmSettings/energyAlarm';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { dict } from '/@/api';
|
||||
import { async } from '@antv/x6/lib/registry/marker/async';
|
||||
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
// import type { Rule } from 'ant-design-vue/es/form';
|
||||
|
||||
const visible = ref(false);
|
||||
//父级数据
|
||||
const energyAlarm = ref({});
|
||||
//组织数
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
id: null,
|
||||
site: null,
|
||||
jdDevice: null,
|
||||
resource: null,
|
||||
desc: null,
|
||||
deviceNode: null,
|
||||
ruleType: null,
|
||||
abnormalDescription: null,
|
||||
sbtype: null,
|
||||
delivery: null,
|
||||
alarmList: [{ logic: null, num: null }],
|
||||
enableRules: 0,
|
||||
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
|
||||
});
|
||||
//删除的逻辑列表
|
||||
const delAlarmList = ref([]);
|
||||
//对比类型
|
||||
const comparisonTypeData = ref([
|
||||
{
|
||||
value: '1',
|
||||
label: '数值',
|
||||
children: [
|
||||
{
|
||||
value: '1',
|
||||
label: '输入数值',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '同比',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '环比',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '对比基准',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '比例',
|
||||
children: [
|
||||
{
|
||||
value: '1',
|
||||
label: '输入比例',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '同比',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '环比',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '对比基准',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
const formRef = ref();
|
||||
//站点数
|
||||
const zdTreeData = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
label: '铁路总局(T01)',
|
||||
value: 'T01',
|
||||
children: [
|
||||
{
|
||||
label: '济阳站(T0101)',
|
||||
value: 'T0101',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
//设备类型树
|
||||
const sbOptions: CascaderProps['options'] = [
|
||||
{
|
||||
value: '3',
|
||||
label: '3.电梯',
|
||||
children: [
|
||||
{
|
||||
value: '301',
|
||||
label: '301.扶梯',
|
||||
},
|
||||
{
|
||||
value: '302',
|
||||
label: '301.直梯',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '4.冷热源',
|
||||
children: [
|
||||
{
|
||||
value: '401',
|
||||
label: '402.冷水机组',
|
||||
},
|
||||
{
|
||||
value: '402',
|
||||
label: '403.热泵机组',
|
||||
},
|
||||
{
|
||||
value: '403',
|
||||
label: '403.锅炉',
|
||||
},
|
||||
{
|
||||
value: '404',
|
||||
label: '404.水处理机组',
|
||||
},
|
||||
{
|
||||
value: '405',
|
||||
label: '405.板式热交换机组',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const siteDataTree = ref([]);
|
||||
//数据来源
|
||||
let deviceTypeTreeData = ref([]);
|
||||
//节点数据
|
||||
const jdTreeData = ref([
|
||||
{
|
||||
title: 'parent 1',
|
||||
value: 'parent 1',
|
||||
children: [
|
||||
{
|
||||
title: 'parent 1-0',
|
||||
value: 'parent 1-0',
|
||||
children: [
|
||||
{
|
||||
title: 'my leaf',
|
||||
value: 'leaf1',
|
||||
},
|
||||
{
|
||||
title: 'your leaf',
|
||||
value: 'leaf2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 1-1',
|
||||
value: 'parent 1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
//设备点位
|
||||
const dwOptions = ref<SelectProps['options']>([
|
||||
{ value: '电压 (U)', label: '电压 (U)', code: '1' },
|
||||
{ value: '电流 (I)', label: '电流 (I)', code: '2' },
|
||||
{ value: '电流 (I)', label: 'a相电流 (Ia)', code: '3' },
|
||||
]);
|
||||
const filter: ShowSearchType['filter'] = (inputValue: any, path: any) => {
|
||||
const jdTreeData = ref([]);
|
||||
//选择设备时 获取的数据
|
||||
// 选择 数据来源 查询 设备节点
|
||||
const selectDeviceType = async (value: any, selectedOptions: any) => {
|
||||
if (!infoObject.value.id) {
|
||||
infoObject.value.deviceNode = null;
|
||||
}
|
||||
if (value[value.length - 1] === 1) {
|
||||
//选择设备
|
||||
await http
|
||||
.post(device.queryDevicePage, {
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
energyType: selectedOptions[0].cnValue,
|
||||
orgId: orgId.value,
|
||||
})
|
||||
.then((res) => {
|
||||
jdTreeData.value = res.data.records;
|
||||
});
|
||||
} else {
|
||||
//选择节点时 获取数据
|
||||
await http
|
||||
.post(group.queryDeviceGroupTree, {
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
energyType: selectedOptions[0].cnValue,
|
||||
orgId: orgId.value,
|
||||
})
|
||||
.then((res) => {
|
||||
jdTreeData.value = res.data;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//搜索设备类型
|
||||
const filterDeviceType: ShowSearchType['filter'] = (inputValue: any, path: any) => {
|
||||
return path.some(
|
||||
(option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
|
||||
(option: any) => option.cnValue.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
|
||||
);
|
||||
};
|
||||
//取值类型
|
||||
const qzOptions = ref<SelectProps['options']>([
|
||||
{ value: '实时值', label: '实时值', code: '1' },
|
||||
{ value: '平均值', label: '平均值', code: '2' },
|
||||
]);
|
||||
//逻辑
|
||||
const ljOptions = ref<SelectProps['options']>([
|
||||
{ value: '1', label: '≥' },
|
||||
{ value: '2', label: '>' },
|
||||
{ value: '3', label: '≤' },
|
||||
{ value: '4', label: '<' },
|
||||
{ value: '5', label: '=' },
|
||||
{ value: 0, label: '≥' },
|
||||
{ value: 1, label: '>' },
|
||||
{ value: 2, label: '≤' },
|
||||
{ value: 3, label: '<' },
|
||||
{ value: 4, label: '=' },
|
||||
]);
|
||||
//设备点位方法
|
||||
const filterOption = (input: string, option: any) => {
|
||||
console.log('搜索', option.value);
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
//开关
|
||||
const clickSwitch = () => {
|
||||
if (infoObject.value.enableRules === 1) {
|
||||
infoObject.value.enableRules = 0;
|
||||
} else {
|
||||
infoObject.value.enableRules = 1;
|
||||
}
|
||||
};
|
||||
const handleFocus = () => {
|
||||
console.log('点击');
|
||||
};
|
||||
const handleChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
console.log('选择', infoObject.value.sbAdress);
|
||||
//获得code
|
||||
dwOptions.value.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
console.log('符合', item.code);
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleQzChange = (value: string) => {
|
||||
//获得code
|
||||
qzOptions.value.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
console.log('符合', item.code);
|
||||
}
|
||||
});
|
||||
};
|
||||
const emit = defineEmits(['editObject']);
|
||||
//父调子 页面显示方法
|
||||
const toggle = (value: any) => {
|
||||
//获取设备类型
|
||||
http.post(device.queryDeviceTree, null).then((res) => {
|
||||
console.log(res, '请求出来的数据');
|
||||
NsMessage.success('操作成功');
|
||||
const toggle = async (value: any, info: any) => {
|
||||
// 数据来源
|
||||
let energyType = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
|
||||
energyType.data.data.forEach((item: any) => {
|
||||
item.children = [
|
||||
{
|
||||
id: 1,
|
||||
cnValue: '设备',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
cnValue: '节点',
|
||||
},
|
||||
];
|
||||
});
|
||||
deviceTypeTreeData.value = energyType.data.data;
|
||||
//能源告警
|
||||
energyAlarm.value = info;
|
||||
// 获取站点数据
|
||||
http.post('/carbon-smart/user/login/logInInfo', {}).then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
siteDataTree.value = res.data.linkList;
|
||||
}
|
||||
});
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
value.ruleType = value.ruleType + '';
|
||||
value.comparisonType = value.comparisonType.split(',');
|
||||
value.sbtype = [value.dataSourcesType, value.dataSourcesWay];
|
||||
delete value.dataSourcesType;
|
||||
delete value.dataSourcesWay;
|
||||
infoObject.value = value;
|
||||
//获取设备/节点
|
||||
deviceTypeTreeData.value.forEach((item: any) => {
|
||||
if (item.id === infoObject.value.sbtype[0]) {
|
||||
selectDeviceType(infoObject.value.sbtype, [{ ...item }]);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
site: null,
|
||||
jdDevice: null,
|
||||
resource: null,
|
||||
desc: null,
|
||||
deviceNode: null,
|
||||
ruleType: null,
|
||||
abnormalDescription: null,
|
||||
sbtype: null,
|
||||
delivery: null,
|
||||
alarmList: [{ logic: null, num: null }],
|
||||
enableRules: 0,
|
||||
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
|
||||
};
|
||||
}
|
||||
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
//表单 判断规格
|
||||
const rules: Record<string, Rule[]> = {
|
||||
const rules = {
|
||||
site: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||||
sbtype: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||
delivery: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||
jdDevice: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
|
||||
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||
deviceNode: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
|
||||
sbAdress: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
|
||||
qzType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
|
||||
resource: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
|
||||
desc: [{ required: true, message: '请输入异常描述', trigger: 'blur' }],
|
||||
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||
};
|
||||
// 开关选择
|
||||
const changeSwitch = () => {
|
||||
console.log(infoObject.value.selectSwitch, '开关');
|
||||
comparisonType: [{ required: true, message: '请选择对比类型', trigger: 'change' }],
|
||||
ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
|
||||
abnormalDescription: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入异常描述',
|
||||
trigger: 'blur',
|
||||
validator: (rules: any, abnormalDescription: any, cbfn: any) => {
|
||||
if (abnormalDescription.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
logic: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||
num: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||
};
|
||||
// 确认按钮
|
||||
const btnClick = () => {
|
||||
console.log(infoObject.value, '数据');
|
||||
|
||||
infoObject.value.alarmList.forEach((item) => {
|
||||
if (item.logic === null || item.num === null) {
|
||||
// NsMessage.error('请选择逻辑和数值');
|
||||
return;
|
||||
}
|
||||
});
|
||||
@@ -329,21 +361,46 @@
|
||||
}
|
||||
//数据是否验证通过
|
||||
formRef.value.validate().then(() => {
|
||||
console.log('values', infoObject, toRaw(infoObject));
|
||||
delAlarmList.value = [];
|
||||
console.log(energyAlarm.value, '数据');
|
||||
|
||||
//处理数据
|
||||
let data = { ...infoObject.value };
|
||||
//关联能耗告警id
|
||||
data.equipmentAlarmId = energyAlarm.value.id;
|
||||
data.errorCode = energyAlarm.value.errorCode;
|
||||
data.dataSourcesType = data.sbtype[0];
|
||||
data.dataSourcesWay = data.sbtype[1];
|
||||
data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
|
||||
data.comparisonType = data.comparisonType.toString;
|
||||
data.hxAlarmRuleLogicList.forEach((item) => {
|
||||
const num = Number(item.num);
|
||||
if (!isNaN(num)) {
|
||||
item.num = Number(num.toFixed(2));
|
||||
} else {
|
||||
item.num = 0; // 可以设置为0或其他默认值
|
||||
}
|
||||
});
|
||||
data.ruleType = Number(data.ruleType);
|
||||
delete data.alarmList;
|
||||
// http
|
||||
// .post(energyAlarms.configAddOrUpNewData, data)
|
||||
// .then((res) => {
|
||||
// if (res.msg === 'success') {
|
||||
// // 操作成功时的处理
|
||||
// if (data.id) {
|
||||
// NsMessage.success('告警规则编辑成功');
|
||||
// } else {
|
||||
// NsMessage.success('告警规则新增成功');
|
||||
// }
|
||||
// emit('editObject', null);
|
||||
// handleClose();
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// // 错误处理
|
||||
// console.error('请求失败:', error);
|
||||
// });
|
||||
});
|
||||
//调用接口
|
||||
// http
|
||||
// .post(props.api, data)
|
||||
// .then(() => {
|
||||
// isLoading.value = false;
|
||||
// NsMessage.success('操作成功', 1, () => {
|
||||
// navigateBack();
|
||||
// });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// isLoading.value = false;
|
||||
// });
|
||||
};
|
||||
//取消按钮
|
||||
const handleClose = () => {
|
||||
@@ -353,11 +410,12 @@
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
site: null,
|
||||
resource: null,
|
||||
desc: null,
|
||||
ruleType: null,
|
||||
deviceNode: null,
|
||||
abnormalDescription: null,
|
||||
sbtype: null,
|
||||
delivery: null,
|
||||
alarmList: [{ alarm: null, number: null }],
|
||||
enableRules: 0,
|
||||
alarmList: [{ id: null, logic: null, num: null, isDelete: 0 }],
|
||||
};
|
||||
visible.value = false;
|
||||
delAlarmList.value = [];
|
||||
@@ -365,22 +423,26 @@
|
||||
// 新增逻辑列表
|
||||
const addAlarmList = () => {
|
||||
if (infoObject.value.alarmList) {
|
||||
infoObject.value.alarmList.push({ logic: null, num: null });
|
||||
infoObject.value.alarmList.push({ id: null, logic: null, num: null, isDelete: 0 });
|
||||
} else {
|
||||
infoObject.value.alarmList = [{ logic: null, num: null }];
|
||||
infoObject.value.alarmList = [{ id: null, logic: null, num: null, isDelete: 0 }];
|
||||
}
|
||||
};
|
||||
// 删除 逻辑列表、
|
||||
const deleteAlarmList = (index: number) => {
|
||||
if (infoObject.value.alarmList[index]?.id) {
|
||||
delAlarmList.value.push(infoObject.value.alarmList[index]);
|
||||
if (index < infoObject.value.alarmList.length && index >= 0) {
|
||||
const alarmItemToDelete = infoObject.value.alarmList[index];
|
||||
if (alarmItemToDelete?.id) {
|
||||
// 添加到 delAlarmList 中,并标记为已删除
|
||||
delAlarmList.value.push({ ...alarmItemToDelete, isDelete: 1 });
|
||||
}
|
||||
// 从 infoObject 中删除该元素
|
||||
infoObject.value.alarmList.splice(index, 1);
|
||||
}
|
||||
infoObject.value.alarmList.splice(index, 1);
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
handleClose,
|
||||
dwOptions,
|
||||
formRef,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -2,11 +2,12 @@
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="infoObject?.id ? '修改能源告警' : '新增能源告警'"
|
||||
:title="' '"
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right">
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
|
||||
<div style="margin-left: 52px">
|
||||
应用规则:
|
||||
@@ -25,13 +26,11 @@
|
||||
import { ref } from 'vue';
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { http } from '/nerv-lib/util';
|
||||
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
import { energyAlarms } from '/@/api/alarmSettings/energyAlarm';
|
||||
|
||||
const visible = ref(false);
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
id: null,
|
||||
accountNo: null,
|
||||
enableRules: 0,
|
||||
});
|
||||
const formRef = ref();
|
||||
@@ -42,8 +41,6 @@
|
||||
infoObject.value = value;
|
||||
} else {
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
accountNo: null,
|
||||
enableRules: 0,
|
||||
};
|
||||
}
|
||||
@@ -67,6 +64,13 @@
|
||||
required: true,
|
||||
message: '告警标题不能为空',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, alarmTitle: any, cbfn: any) => {
|
||||
if (alarmTitle && alarmTitle.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
@@ -136,7 +140,7 @@
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'priority',
|
||||
field: 'monitorFrequency',
|
||||
label: '监测频率',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
@@ -148,20 +152,29 @@
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择监测频率',
|
||||
componentProps: {
|
||||
api: '/api/community/objs/DictItem',
|
||||
params: {
|
||||
pageSize: 100,
|
||||
code: 'MZ',
|
||||
placeholder: '请选择优先级',
|
||||
options: [
|
||||
{
|
||||
label: '小时',
|
||||
value: 1,
|
||||
},
|
||||
placeholder: '请选择设备点位',
|
||||
resultField: 'data',
|
||||
labelField: 'dictName',
|
||||
valueField: 'dictValue',
|
||||
immediate: true,
|
||||
autoSelectFirst: false,
|
||||
},
|
||||
{
|
||||
label: '每日',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '每周',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '月度',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: '年度',
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -183,19 +196,24 @@
|
||||
//表单校验
|
||||
formRef.value.triggerSubmit().then(() => {
|
||||
//调用接口
|
||||
// http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
// NsMessage.success('操作成功');
|
||||
// visible.value = false;
|
||||
// emit('editObject', null);
|
||||
// });
|
||||
http.post(energyAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
emit('editObject', null);
|
||||
if (infoObject.value.id) {
|
||||
NsMessage.success('告警编辑成功');
|
||||
} else {
|
||||
NsMessage.success('告警创建成功');
|
||||
}
|
||||
handleClose();
|
||||
});
|
||||
});
|
||||
};
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.formElRef.clearValidate();
|
||||
console.log(infoObject.value);
|
||||
infoObject.value = {
|
||||
enableRules: 0,
|
||||
};
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
|
||||
@@ -11,26 +11,19 @@
|
||||
}"
|
||||
@click="clickSwitch({ enableRules: record.enableRules, record: record })" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'equipmentInfo'">
|
||||
{{
|
||||
record?.enableRules
|
||||
? record.enableRules + '>' + record.deviceType + '>' + record.deviceName
|
||||
: '-'
|
||||
}}
|
||||
</template>
|
||||
</template>
|
||||
</ns-view-list-table>
|
||||
<!-- 新增or编辑界面 -->
|
||||
<editConfigureDeviceAlarm ref="editConfigureDeviceAlarms" />
|
||||
<editConfigureDeviceAlarm ref="editConfigureDeviceAlarms" @editObject="editObject" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, createVNode } from 'vue';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import data from '../notificationManagementMock.json';
|
||||
import { NsMessage, NsModal } from '/nerv-lib/component';
|
||||
import editConfigureDeviceAlarm from '../equipmentAlarm/editConfigureDeviceAlarm.vue';
|
||||
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { device } from '/@/api/deviceManage';
|
||||
|
||||
export default {
|
||||
components: { editConfigureDeviceAlarm },
|
||||
@@ -42,25 +35,32 @@
|
||||
const tableConfig = ref({});
|
||||
const mainRef = ref({});
|
||||
const editConfigureDeviceAlarms = ref({});
|
||||
const mockData = ref(data.listData);
|
||||
//组织数
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const clickSwitch = (data: any) => {
|
||||
NsModal.confirm({
|
||||
title: '启用状态',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '吗?',
|
||||
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '规则吗?',
|
||||
onOk: () => {
|
||||
http
|
||||
.post(deviceAlarms.addOrUpNewData, {
|
||||
.post(deviceAlarms.configAddOrUpNewData, {
|
||||
id: data.record.id,
|
||||
enableRules: data.record.enableRules === 1 ? 0 : 1,
|
||||
})
|
||||
.then(() => {
|
||||
NsMessage.success('操作成功');
|
||||
NsMessage.success(data.record.enableRules === 1 ? '规则已关闭' : '规则已启用');
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
// 编辑或添加成功 刷新列表
|
||||
const editObject = () => {
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
};
|
||||
const doWnload = (url: any) => {
|
||||
const a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
@@ -75,15 +75,14 @@
|
||||
show.value = true;
|
||||
tableConfig.value = {
|
||||
title: '告警规则',
|
||||
api: deviceAlarms.getTableList,
|
||||
value: mockData.value,
|
||||
api: deviceAlarms.configGetTableList,
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'RoleTypeAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
editConfigureDeviceAlarms.value.toggle();
|
||||
editConfigureDeviceAlarms.value.toggle(null, configureDeviceAlarmsData.value);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -113,16 +112,26 @@
|
||||
},
|
||||
{
|
||||
label: '批量删除',
|
||||
name: 'groupTemDownload',
|
||||
type: 'primary',
|
||||
name: 'userBatchDel',
|
||||
confirm: true,
|
||||
dynamicDisabled: (data: any) => {
|
||||
return data.list.length === 0;
|
||||
},
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
isClearCheck: true,
|
||||
// api: origanizemanage.batchDel,
|
||||
dynamicParams: { userIds: 'userId[]' },
|
||||
handle: (data: any) => {
|
||||
let ids = [];
|
||||
data.list.forEach((item) => {
|
||||
ids.push(item.id);
|
||||
});
|
||||
data.list = [];
|
||||
http.post(deviceAlarms.configDel, { ids: ids.toString() }).then(() => {
|
||||
NsMessage.success('告警规则删除成功');
|
||||
//清空选中
|
||||
mainRef.value.nsTableRef.clearCheck();
|
||||
//刷新表单
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
@@ -139,20 +148,19 @@
|
||||
},
|
||||
{
|
||||
title: '设备信息',
|
||||
dataIndex: 'equipmentInfo',
|
||||
dataIndex: 'deviceInfo',
|
||||
},
|
||||
{
|
||||
title: '告警点位',
|
||||
dataIndex: 'devicePoint',
|
||||
dataIndex: 'devicePointName',
|
||||
},
|
||||
{
|
||||
title: '判断条件',
|
||||
dataIndex: 'ruleType',
|
||||
dataIndex: 'conditionalJudgment',
|
||||
},
|
||||
{
|
||||
title: '取值类型',
|
||||
dataIndex: 'valueType',
|
||||
textEllipsis: true,
|
||||
},
|
||||
{
|
||||
title: '异常描述',
|
||||
@@ -172,7 +180,7 @@
|
||||
name: 'FeedBackDetail',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
editConfigureDeviceAlarms.value.toggle(data);
|
||||
editConfigureDeviceAlarms.value.toggle(data, configureDeviceAlarmsData);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -181,8 +189,10 @@
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: () => {
|
||||
// mockData.value.splice(0, 1);
|
||||
console.log(data, 'xxxxxxx');
|
||||
http.post(deviceAlarms.configDel, { ids: data.id }).then(() => {
|
||||
NsMessage.success('规则删除成功');
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -191,60 +201,73 @@
|
||||
title: value.errorCode,
|
||||
schemas: [
|
||||
{
|
||||
field: 'provider',
|
||||
field: 'deviceName',
|
||||
label: '设备名称',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入设备名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
label: '设备点位',
|
||||
component: 'nsSelectApi',
|
||||
componentProps: {
|
||||
api: '/api/community/objs/DictItem',
|
||||
api: device.queryDevicePage,
|
||||
allowClear: true,
|
||||
params: {
|
||||
pageSize: 100,
|
||||
code: 'MZ',
|
||||
orgId: orgId.value,
|
||||
pageNum: 1,
|
||||
pageSize: 99,
|
||||
},
|
||||
placeholder: '请选择设备点位',
|
||||
resultField: 'data',
|
||||
labelField: 'dictName',
|
||||
valueField: 'dictValue',
|
||||
immediate: true,
|
||||
autoSelectFirst: false,
|
||||
resultField: 'data.records',
|
||||
labelField: 'deviceName',
|
||||
valueField: 'id',
|
||||
autoAddLink: true, //默认添加联动
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'payWay',
|
||||
field: 'devicePoint',
|
||||
label: '设备点位',
|
||||
component: 'nsSelectApi',
|
||||
dynamicParams: {
|
||||
id: 'deviceName', //帮定上级联动数据
|
||||
},
|
||||
componentProps: {
|
||||
api: device.queryDevicePoint,
|
||||
allowClear: true,
|
||||
resultField: 'data',
|
||||
placeholder: '请选择设备点位',
|
||||
labelField: 'code',
|
||||
valueField: 'id',
|
||||
dependency: 'deviceName',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'enableRules',
|
||||
label: '启用状态',
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择启用状态',
|
||||
allowClear: true,
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: '1',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
value: '0',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
field: 'abnormalDescription',
|
||||
label: '异常描述',
|
||||
component: 'NsInput',
|
||||
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入异常描述关键字',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
params: { id: value.id },
|
||||
params: { equipmentAlarmId: value.id },
|
||||
// pagination: { pageSizeOptions: false },
|
||||
rowKey: 'id',
|
||||
};
|
||||
@@ -255,6 +278,9 @@
|
||||
clickSwitch,
|
||||
doWnload,
|
||||
tableConfig,
|
||||
orgId,
|
||||
mainRef,
|
||||
editObject,
|
||||
editConfigureDeviceAlarms,
|
||||
setconfigureDeviceAlarmsData,
|
||||
};
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right">
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<div style="padding: 18px; width: 100%; overflow: hidden">
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
<a-form-item ref="site" label="站点" name="site">
|
||||
@@ -18,8 +19,13 @@
|
||||
placeholder="请选择站点"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="zdTreeData"
|
||||
tree-node-filter-prop="label" />
|
||||
:field-names="{
|
||||
children: 'linkList',
|
||||
label: 'orgName',
|
||||
value: 'orgId',
|
||||
}"
|
||||
:tree-data="siteDataTree"
|
||||
tree-node-filter-prop="orgName" />
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型" name="deviceType">
|
||||
<a-cascader
|
||||
@@ -30,7 +36,7 @@
|
||||
label: 'deviceType',
|
||||
value: 'id',
|
||||
}"
|
||||
:show-search="{ filter }"
|
||||
:show-search="{ filterDeviceType }"
|
||||
@change="selectDeviceType"
|
||||
placeholder="请选择设备类型" />
|
||||
</a-form-item>
|
||||
@@ -54,14 +60,12 @@
|
||||
v-model:value="infoObject.devicePoint"
|
||||
show-search
|
||||
placeholder="请选择设备点位"
|
||||
:disabled="!infoObject?.deviceName"
|
||||
style="width: 100%"
|
||||
:options="dwOptions"
|
||||
:filter-option="filterOption"
|
||||
@focus="handleFocus"
|
||||
@change="handleChange" />
|
||||
:disabled="!infoObject?.deviceName"
|
||||
:options="devicePointData"
|
||||
:filter-option="filterDevicePoint" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则" name="enableRules">
|
||||
<a-form-item label="启用规则">
|
||||
<a-switch
|
||||
:checked="infoObject.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
@@ -73,12 +77,9 @@
|
||||
<a-form-item label="取值类型" name="valueType">
|
||||
<a-select
|
||||
v-model:value="infoObject.valueType"
|
||||
show-search
|
||||
placeholder="请选择取值类型"
|
||||
style="width: 100%"
|
||||
:options="qzOptions"
|
||||
:filter-option="filterOption"
|
||||
@change="handleQzChange" />
|
||||
:options="qzOptions" />
|
||||
</a-form-item>
|
||||
<a-form-item label="异常描述" name="abnormalDescription">
|
||||
<a-textarea
|
||||
@@ -107,8 +108,7 @@
|
||||
<a-select
|
||||
v-model:value="infoObject.alarmList[index - 1].logic"
|
||||
style="width: 70px; margin-left: 12px"
|
||||
:options="ljOptions"
|
||||
@change="handleQzChange" />
|
||||
:options="ljOptions" />
|
||||
<span style="line-height: 32px; margin-left: 32px">{{ `数值${index}:` }}</span>
|
||||
<a-input
|
||||
style="width: 65px; margin-left: 6px"
|
||||
@@ -124,8 +124,8 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
infoObject.alarmList[index - 1].num === null ||
|
||||
infoObject.alarmList[index - 1].logic === null
|
||||
infoObject.alarmList[index - 1]?.num === null ||
|
||||
infoObject.alarmList[index - 1]?.logic === null
|
||||
"
|
||||
style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
|
||||
请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
|
||||
@@ -145,19 +145,22 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { ref, toRaw, watch } from 'vue';
|
||||
import type { CascaderProps, TreeSelectProps, SelectProps } from 'ant-design-vue';
|
||||
import { ref, toRaw } from 'vue';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
|
||||
import { device } from '/@/api/deviceManage';
|
||||
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
|
||||
import { http } from '/nerv-lib/util';
|
||||
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { async } from '@antv/x6/lib/registry/marker/async';
|
||||
|
||||
const visible = ref(false);
|
||||
// 父级数据
|
||||
const equipmentAlarm = ref({});
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
id: null,
|
||||
site: null,
|
||||
ruleType: null,
|
||||
abnormalDescription: null,
|
||||
@@ -166,7 +169,7 @@
|
||||
valueType: null,
|
||||
deviceName: null,
|
||||
enableRules: 0,
|
||||
alarmList: [{ id: null, alarm: null, number: null, isDelete: '0' }],
|
||||
alarmList: [{ logic: null, num: null, isDelete: 0 }],
|
||||
});
|
||||
//删除的逻辑列表
|
||||
const delAlarmList = ref([]);
|
||||
@@ -176,18 +179,8 @@
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
//站点数
|
||||
const zdTreeData = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
label: '铁路总局(T01)',
|
||||
value: 'T01',
|
||||
children: [
|
||||
{
|
||||
label: '济阳站(T0101)',
|
||||
value: 'T0101',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
const siteDataTree = ref([]);
|
||||
|
||||
//设备类型树
|
||||
let deviceTypeTreeData = ref([]);
|
||||
//设备树
|
||||
@@ -216,62 +209,44 @@
|
||||
};
|
||||
//获取设备点位
|
||||
const getDevicePoint = (value: any) => {
|
||||
devicePointData.value = [];
|
||||
http.post(device.queryDevicePoint, value).then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
console.log(res, '数据');
|
||||
res.data.forEach((item: any) => {
|
||||
devicePointData.value.push({
|
||||
value: item.id,
|
||||
label: item.code + ' ( ' + item.unit + ' ) ',
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
//设备点位
|
||||
const dwOptions = ref<SelectProps['options']>([
|
||||
{ value: '电压 (U)', label: '电压 (U)', code: '1' },
|
||||
{ value: '电流 (I)', label: '电流 (I)', code: '2' },
|
||||
{ value: '电流 (I)', label: 'a相电流 (Ia)', code: '3' },
|
||||
]);
|
||||
const filter: ShowSearchType['filter'] = (inputValue: any, path: any) => {
|
||||
const devicePointData = ref([]);
|
||||
//设备点位搜索
|
||||
const filterDevicePoint = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
//搜索设备类型
|
||||
const filterDeviceType: ShowSearchType['filter'] = (inputValue: any, path: any) => {
|
||||
return path.some(
|
||||
(option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
|
||||
(option: any) => option.deviceType.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
|
||||
);
|
||||
};
|
||||
//取值类型
|
||||
const qzOptions = ref<SelectProps['options']>([
|
||||
{ value: '实时值', label: '实时值', code: '1' },
|
||||
{ value: '平均值', label: '平均值', code: '2' },
|
||||
{ value: 1, label: '实时值', code: '1' },
|
||||
{ value: 2, label: '平均值', code: '2' },
|
||||
]);
|
||||
//逻辑
|
||||
const ljOptions = ref<SelectProps['options']>([
|
||||
{ value: '1', label: '≥' },
|
||||
{ value: '2', label: '>' },
|
||||
{ value: '3', label: '≤' },
|
||||
{ value: '4', label: '<' },
|
||||
{ value: '5', label: '=' },
|
||||
{ value: 0, label: '≥' },
|
||||
{ value: 1, label: '>' },
|
||||
{ value: 2, label: '≤' },
|
||||
{ value: 3, label: '<' },
|
||||
{ value: 4, label: '=' },
|
||||
]);
|
||||
//设备点位方法
|
||||
const filterOption = (input: string, option: any) => {
|
||||
console.log('搜索', option.value);
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
const handleFocus = () => {
|
||||
console.log('点击');
|
||||
};
|
||||
const handleChange = (value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
console.log('选择', infoObject.value.devicePoint);
|
||||
//获得code
|
||||
dwOptions.value.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
console.log('符合', item.code);
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleQzChange = (value: string) => {
|
||||
//获得code
|
||||
qzOptions.value.forEach((item) => {
|
||||
if (item.value === value) {
|
||||
console.log('符合', item.code);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//开关
|
||||
const clickSwitch = () => {
|
||||
if (infoObject.value.enableRules === 1) {
|
||||
@@ -313,7 +288,9 @@
|
||||
return null; // 没有找到目标节点,返回 null
|
||||
};
|
||||
//父调子 页面显示方法
|
||||
const toggle = async (value: any) => {
|
||||
const toggle = async (value: any, info: any) => {
|
||||
equipmentAlarm.value = info;
|
||||
|
||||
//获取设备类型
|
||||
await http
|
||||
.post(device.queryDeviceTree, { orgId: orgId.value, pageNum: 1, pageSize: 10 })
|
||||
@@ -322,21 +299,36 @@
|
||||
deviceTypeTreeData.value = res.data;
|
||||
}
|
||||
});
|
||||
// 获取站点数据
|
||||
http.post('/carbon-smart/user/login/logInInfo', {}).then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
siteDataTree.value = res.data.linkList;
|
||||
}
|
||||
});
|
||||
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
infoObject.value = value;
|
||||
// 获取 选择的设备类型对象
|
||||
let selectDevice = ref([value.deviceType]);
|
||||
findNodeById(deviceTypeTreeData.value, value.deviceType);
|
||||
//获取设备点位
|
||||
getDevicePoint({ id: 1 });
|
||||
// 修改时
|
||||
findParentIds(deviceTypeTreeData.value, value.deviceType, selectDevice.value);
|
||||
infoObject.value.deviceType = selectDevice.value;
|
||||
//获取详情接口
|
||||
await http.post(deviceAlarms.configFindById, { id: value.id }).then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
infoObject.value = res.data;
|
||||
// 获取 选择的设备类型对象
|
||||
let selectDevice = ref([Number(infoObject.value.deviceType)]);
|
||||
findNodeById(deviceTypeTreeData.value, Number(infoObject.value.deviceType));
|
||||
//获取设备点位
|
||||
getDevicePoint({ id: infoObject.value.deviceName });
|
||||
// 回显 选择设备类型
|
||||
findParentIds(deviceTypeTreeData.value, infoObject.value.deviceType, selectDevice.value);
|
||||
infoObject.value.alarmList = infoObject.value.hxAlarmRuleLogicList || [];
|
||||
delete infoObject.value.hxAlarmRuleLogicList;
|
||||
infoObject.value.deviceType = selectDevice;
|
||||
infoObject.value.ruleType = infoObject.value.ruleType + '';
|
||||
console.log(infoObject.value, '数据');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//获取设备树
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
site: null,
|
||||
ruleType: null,
|
||||
abnormalDescription: null,
|
||||
@@ -345,14 +337,14 @@
|
||||
valueType: null,
|
||||
deviceName: null,
|
||||
enableRules: 0,
|
||||
alarmList: [{ id: null, alarm: null, number: null, isDelete: '0' }],
|
||||
alarmList: [{ logic: null, num: null, isDelete: 0 }],
|
||||
};
|
||||
}
|
||||
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
//表单 判断规格
|
||||
const rules: infoObject<string, Rule[]> = {
|
||||
const rules = {
|
||||
site: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||||
deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||
@@ -360,20 +352,27 @@
|
||||
devicePoint: [{ required: true, message: '请选择设备点位', trigger: 'change' }],
|
||||
valueType: [{ required: true, message: '请选择取值类型', trigger: 'change' }],
|
||||
ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
|
||||
abnormalDescription: [{ required: true, message: '请输入异常描述', trigger: 'blur' }],
|
||||
abnormalDescription: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入异常描述',
|
||||
trigger: 'blur',
|
||||
validator: (rules: any, abnormalDescription: any, cbfn: any) => {
|
||||
if (abnormalDescription.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||
};
|
||||
// 开关选择
|
||||
const changeSwitch = () => {
|
||||
console.log(infoObject.value.selectSwitch, '开关');
|
||||
};
|
||||
// 确认按钮
|
||||
const btnClick = () => {
|
||||
console.log(infoObject.value, '数据');
|
||||
infoObject.value.alarmList.forEach((item) => {
|
||||
if (item.logic === null || item.num === null) {
|
||||
// NsMessage.error('请选择逻辑和数值');
|
||||
return;
|
||||
}
|
||||
});
|
||||
@@ -383,51 +382,70 @@
|
||||
}
|
||||
//数据是否验证通过
|
||||
formRef.value.validate().then(() => {
|
||||
console.log('values', infoObject.value);
|
||||
let data = toRaw(infoObject);
|
||||
//逻辑列表
|
||||
data.alarmList = [...infoObject.value.alarmList, ...delAlarmList.value];
|
||||
//设备类型 只取最后一级的id
|
||||
let data = { ...infoObject.value };
|
||||
// 配置关联id
|
||||
data.equipmentAlarmId = equipmentAlarm.value.id;
|
||||
// 逻辑列表
|
||||
data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
|
||||
data.hxAlarmRuleLogicList.forEach((item) => {
|
||||
const num = Number(item.num);
|
||||
if (!isNaN(num)) {
|
||||
item.num = Number(num.toFixed(2));
|
||||
} else {
|
||||
item.num = 0; // 可以设置为0或其他默认值
|
||||
}
|
||||
});
|
||||
// 设备类型 只取最后一级的id
|
||||
data.deviceType = infoObject.value.deviceType[infoObject.value.deviceType.length - 1];
|
||||
delAlarmList.value = [];
|
||||
data.ruleType = Number(data.ruleType);
|
||||
data.errorCode = equipmentAlarm.value.errorCode;
|
||||
delete data.alarmList;
|
||||
// 发起 HTTP POST 请求
|
||||
http
|
||||
.post(deviceAlarms.configAddOrUpNewData, data)
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
// 操作成功时的处理
|
||||
if (data.id) {
|
||||
NsMessage.success('告警规则编辑成功');
|
||||
} else {
|
||||
NsMessage.success('告警规则新增成功');
|
||||
}
|
||||
emit('editObject', null);
|
||||
handleClose();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
// 错误处理
|
||||
console.error('请求失败:', error);
|
||||
});
|
||||
});
|
||||
//调用接口
|
||||
// http
|
||||
// .post(props.api, data)
|
||||
// .then(() => {
|
||||
// isLoading.value = false;
|
||||
// NsMessage.success('操作成功', 1, () => {
|
||||
// navigateBack();
|
||||
// });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// isLoading.value = false;
|
||||
// });
|
||||
};
|
||||
//取消按钮
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.resetFields();
|
||||
siteDataTree.value = [];
|
||||
//对象清空
|
||||
infoObject.value = {
|
||||
id: null,
|
||||
site: null,
|
||||
ruleType: null,
|
||||
abnormalDescription: null,
|
||||
deviceType: [],
|
||||
devicePoint: null,
|
||||
enableRules: 0,
|
||||
alarmList: [{ id: null, alarm: null, number: null, isDelete: '0' }],
|
||||
alarmList: [{ logic: null, num: null, isDelete: 0 }],
|
||||
};
|
||||
visible.value = false;
|
||||
//清空删除列表
|
||||
delAlarmList.value = [];
|
||||
};
|
||||
// 新增逻辑列表
|
||||
const addAlarmList = () => {
|
||||
if (infoObject.value.alarmList) {
|
||||
infoObject.value.alarmList.push({ logic: null, num: null });
|
||||
infoObject.value.alarmList.push({ logic: null, num: null, isDelete: 0 });
|
||||
} else {
|
||||
infoObject.value.alarmList = [{ logic: null, num: null }];
|
||||
infoObject.value.alarmList = [{ logic: null, num: null, isDelete: 0 }];
|
||||
}
|
||||
};
|
||||
// 删除 逻辑列表、
|
||||
@@ -437,18 +455,15 @@
|
||||
const alarmItemToDelete = infoObject.value.alarmList[index];
|
||||
if (alarmItemToDelete?.id) {
|
||||
// 添加到 delAlarmList 中,并标记为已删除
|
||||
delAlarmList.value.push({ ...alarmItemToDelete, isDelete: '1' });
|
||||
delAlarmList.value.push({ ...alarmItemToDelete, isDelete: 1 });
|
||||
}
|
||||
// 从 infoObject 中删除该元素
|
||||
infoObject.value.alarmList.splice(index, 1);
|
||||
} else {
|
||||
console.error('Invalid index: ', index);
|
||||
}
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
handleClose,
|
||||
dwOptions,
|
||||
formRef,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -2,11 +2,12 @@
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="infoObject?.id ? '修改设备告警' : '新增设备告警'"
|
||||
:title="infoObject?.id ? '编辑告警' : '新增告警'"
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right">
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
|
||||
<div style="margin-left: 52px">
|
||||
应用规则:
|
||||
@@ -67,6 +68,13 @@
|
||||
required: true,
|
||||
message: '告警标题不能为空',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, alarmTitle: any, cbfn: any) => {
|
||||
if (alarmTitle && alarmTitle.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
@@ -207,7 +215,11 @@
|
||||
formRef.value.triggerSubmit().then(() => {
|
||||
//调用接口
|
||||
http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
NsMessage.success('操作成功');
|
||||
if (infoObject.value.id) {
|
||||
NsMessage.success('告警编辑成功');
|
||||
} else {
|
||||
NsMessage.success('告警创建成功');
|
||||
}
|
||||
visible.value = false;
|
||||
emit('editObject', null);
|
||||
});
|
||||
@@ -216,9 +228,7 @@
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.formElRef.clearValidate();
|
||||
console.log(infoObject.value);
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<a-tabs default-active-key="1" @change="callback">
|
||||
<a-tabs default-active-key="1">
|
||||
<a-tab-pane key="1" tab="通知管理">
|
||||
<ns-view-list-table v-bind="notificationConfig" ref="mainRef">
|
||||
<template #bodyCell="{ record, column }">
|
||||
@@ -11,11 +11,14 @@
|
||||
'blue-background': record.enableRules === 1 ? true : false,
|
||||
'grey-background': record.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@change="clickSwitch({ enableRules: record.enableRules, record: record })" />
|
||||
@change="
|
||||
clickSwitch({ type: 1, enableRules: record.enableRules, record: record })
|
||||
" />
|
||||
</template>
|
||||
</template>
|
||||
</ns-view-list-table>
|
||||
<!-- 联系方式 -->
|
||||
<notificationManagement ref="notificationManagements" @editObject="editObject" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="设备告警" force-render>
|
||||
<ns-view-list-table
|
||||
@@ -31,12 +34,14 @@
|
||||
'blue-background': record.enableRules === 1 ? true : false,
|
||||
'grey-background': record.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@change="clickSwitch({ enableRules: record.enableRules, record: record })" />
|
||||
@change="
|
||||
clickSwitch({ type: 2, enableRules: record.enableRules, record: record })
|
||||
" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'monitor'">
|
||||
{{
|
||||
record?.monitorTime && record?.monitorTimeUnit
|
||||
? record?.monitorTime + record?.monitorTimeUnit
|
||||
? record?.monitorTime + '' + record?.monitorTimeUnit
|
||||
: '-'
|
||||
}}
|
||||
</template>
|
||||
@@ -45,7 +50,7 @@
|
||||
<a-button
|
||||
v-if="!equipmentAlarm"
|
||||
type="primary"
|
||||
style="position: absolute; right: 130px; z-index: 99; top: 80px; height: 30px"
|
||||
style="position: absolute; right: 130px; z-index: 3; top: 80px; height: 30px"
|
||||
@click="backequipmentAlarm"
|
||||
>返回</a-button
|
||||
>
|
||||
@@ -68,19 +73,21 @@
|
||||
'blue-background': record.enableRules === 1 ? true : false,
|
||||
'grey-background': record.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@click="clickSwitch({ enableRules: record.enableRules, record: record })" />
|
||||
@click="
|
||||
clickSwitch({ type: 3, enableRules: record.enableRules, record: record })
|
||||
" />
|
||||
</template>
|
||||
</template>
|
||||
</ns-view-list-table>
|
||||
<a-button
|
||||
v-if="!energyAlarm"
|
||||
type="primary"
|
||||
style="position: absolute; right: 130px; z-index: 99; top: 80px; height: 30px"
|
||||
style="position: absolute; right: 130px; z-index: 3; top: 80px; height: 30px"
|
||||
@click="backenergyAlarm"
|
||||
>返回</a-button
|
||||
>
|
||||
<!-- 新增 或 编辑 能源告警 -->
|
||||
<editeEnergyAlarm ref="editeEnergyAlarm" @editObject="editObject" />
|
||||
<editeEnergyAlarm ref="editeEnergyAlarm" @editObject="editeEnergyAlarmInfo" />
|
||||
<!-- 配置能源告警-->
|
||||
<configureEnergyAlarms v-show="!energyAlarm" ref="configureEnergyAlarms" />
|
||||
</a-tab-pane>
|
||||
@@ -96,9 +103,11 @@
|
||||
import { NsMessage, NsModal } from '/nerv-lib/component';
|
||||
import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
|
||||
import editeEnergyAlarm from './energyAlarm/editeEnergyAlarm.vue';
|
||||
import notificationManagement from './notificationManagement/index.vue';
|
||||
import configureEnergyAlarms from './energyAlarm/configureEnergyAlarms.vue';
|
||||
import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
|
||||
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
import { energyAlarms } from '/@/api/alarmSettings/energyAlarm';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
@@ -107,6 +116,7 @@
|
||||
editeEquipmentAlarm,
|
||||
configureDeviceAlarms,
|
||||
configureEnergyAlarms,
|
||||
notificationManagement,
|
||||
editeEnergyAlarm,
|
||||
},
|
||||
setup() {
|
||||
@@ -114,16 +124,17 @@
|
||||
const mainRefEquipmentAlarm = ref();
|
||||
const mainEnergyAlarmConfig = ref();
|
||||
const editEquipmentAlarm = ref();
|
||||
const notificationManagements = ref();
|
||||
const editeEnergyAlarm = ref();
|
||||
const configureDeviceAlarms = ref();
|
||||
const configureEnergyAlarms = ref();
|
||||
const equipmentAlarm = ref(true);
|
||||
const energyAlarm = ref(true);
|
||||
const notificationConfig = notificationtableConfig(null, mainEnergyAlarmConfig, null);
|
||||
const notificationConfig = notificationtableConfig(notificationManagements);
|
||||
//能源告警配置
|
||||
const energyAlarmConfig = energyAlarmConfigs(
|
||||
editeEnergyAlarm,
|
||||
mainRefEquipmentAlarm,
|
||||
mainEnergyAlarmConfig,
|
||||
energyAlarm,
|
||||
configureEnergyAlarms,
|
||||
);
|
||||
@@ -134,9 +145,6 @@
|
||||
equipmentAlarm,
|
||||
configureDeviceAlarms,
|
||||
);
|
||||
const callback = (key: any) => {
|
||||
console.log(key);
|
||||
};
|
||||
//返回设备告警
|
||||
const backequipmentAlarm = () => {
|
||||
equipmentAlarm.value = !equipmentAlarm.value;
|
||||
@@ -147,38 +155,72 @@
|
||||
configureEnergyAlarms.value.show = false;
|
||||
};
|
||||
const clickSwitch = (data: any) => {
|
||||
console.log(data.record.enableRules === 1 ? '关闭' : '启用');
|
||||
NsModal.confirm({
|
||||
title: '启用状态',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '吗?',
|
||||
content:
|
||||
'确定' +
|
||||
(data.record.enableRules === 1 ? '关闭' : '启用') +
|
||||
(data.type === 1 ? '通知' : '告警') +
|
||||
'吗?',
|
||||
onOk: () => {
|
||||
http
|
||||
.post(deviceAlarms.addOrUpNewData, {
|
||||
id: data.record.id,
|
||||
enableRules: data.record.enableRules === 1 ? 0 : 1,
|
||||
})
|
||||
.then(() => {
|
||||
NsMessage.success('操作成功');
|
||||
mainRefEquipmentAlarm.value?.nsTableRef.reload();
|
||||
});
|
||||
if (data.type === 1) {
|
||||
//通知方式
|
||||
http
|
||||
.post(deviceAlarms.addOrUpNewData, {
|
||||
id: data.record.id,
|
||||
enableRules: data.record.enableRules === 1 ? 0 : 1,
|
||||
})
|
||||
.then(() => {
|
||||
NsMessage.success(data.record.enableRules === 1 ? '通知已关闭' : '通知已启用');
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
});
|
||||
}
|
||||
//设备告警
|
||||
if (data.type === 2) {
|
||||
http
|
||||
.post(deviceAlarms.addOrUpNewData, {
|
||||
id: data.record.id,
|
||||
enableRules: data.record.enableRules === 1 ? 0 : 1,
|
||||
})
|
||||
.then(() => {
|
||||
NsMessage.success(data.record.enableRules === 1 ? '告警已关闭' : '告警已启用');
|
||||
mainRefEquipmentAlarm.value?.nsTableRef.reload();
|
||||
});
|
||||
}
|
||||
//能源告警
|
||||
if (data.type === 3) {
|
||||
http
|
||||
.post(energyAlarms.addOrUpNewData, {
|
||||
id: data.record.id,
|
||||
enableRules: data.record.enableRules === 1 ? 0 : 1,
|
||||
})
|
||||
.then(() => {
|
||||
NsMessage.success(data.record.enableRules === 1 ? '告警已关闭' : '告警已启用');
|
||||
mainEnergyAlarmConfig.value?.nsTableRef.reload();
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
// 编辑或添加成功 刷新列表
|
||||
// 设备告警 编辑或添加成功 刷新列表
|
||||
const editObject = () => {
|
||||
mainRefEquipmentAlarm.value?.nsTableRef.reload();
|
||||
// console.log(newList.value.formFinish, '数据');
|
||||
};
|
||||
// 能源告警 编辑或添加成功 刷新列表
|
||||
const editeEnergyAlarmInfo = () => {
|
||||
mainEnergyAlarmConfig.value?.nsTableRef.reload();
|
||||
};
|
||||
return {
|
||||
callback,
|
||||
notificationConfig,
|
||||
energyAlarmConfig,
|
||||
equipmentAlarmConfig,
|
||||
editObject,
|
||||
editeEnergyAlarm,
|
||||
clickSwitch,
|
||||
editEquipmentAlarm,
|
||||
editeEnergyAlarm,
|
||||
notificationManagements,
|
||||
editeEnergyAlarmInfo,
|
||||
configureDeviceAlarms,
|
||||
configureEnergyAlarms,
|
||||
equipmentAlarm,
|
||||
|
||||
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="' '"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
@close="handleClose">
|
||||
<div style="padding: 18px; width: 100%; overflow: hidden">
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
<a-form-item ref="notification" label="通知方式" name="notification">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="infoObject.notification"
|
||||
style="width: 100%"
|
||||
mode="multiple"
|
||||
:options="devicePointData"
|
||||
show-search
|
||||
:allowClear="true"
|
||||
placeholder="请选择通知方式"
|
||||
:filter-option="filterDevicePoint" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则" name="enableRules">
|
||||
<a-switch
|
||||
:checked="infoObject.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@click="clickSwitch" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通知用户" name="user">
|
||||
<a-cascader
|
||||
v-model:value="infoObject.user"
|
||||
style="width: 100%"
|
||||
multiple
|
||||
:max-tag-count="1"
|
||||
:options="options"
|
||||
:load-data="loadData"
|
||||
placeholder="请选择通知用户"
|
||||
:show-checked-strategy="Cascader.SHOW_CHILD" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-table :dataSource="dataSource" :columns="columns" :pagination="false" />
|
||||
</div>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { Cascader } from 'ant-design-vue';
|
||||
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { http } from '/nerv-lib/util';
|
||||
|
||||
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
|
||||
//table 数据
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'address',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '通知名单',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
];
|
||||
const dataSource = [
|
||||
{
|
||||
name: '运维>运维1部>张三',
|
||||
},
|
||||
{
|
||||
name: '运维>运维1部>李四',
|
||||
},
|
||||
];
|
||||
const visible = ref(false);
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
enableRules: 0,
|
||||
});
|
||||
//设备点位搜索
|
||||
const filterDevicePoint = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
//开关
|
||||
const clickSwitch = () => {
|
||||
if (infoObject.value.enableRules === 1) {
|
||||
infoObject.value.enableRules = 0;
|
||||
} else {
|
||||
infoObject.value.enableRules = 1;
|
||||
}
|
||||
};
|
||||
// 通知信息
|
||||
const devicePointData = ref([
|
||||
{ label: '站内信息', value: 1 },
|
||||
{ label: '邮件', value: 2 },
|
||||
]);
|
||||
//通知用户
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: 'Zhejiang',
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'Jiangsu',
|
||||
isLeaf: false,
|
||||
},
|
||||
]);
|
||||
//加载用户
|
||||
const loadData = (selectedOptions: any) => {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
targetOption.loading = true;
|
||||
// load options lazily
|
||||
setTimeout(() => {
|
||||
targetOption.loading = false;
|
||||
console.log(targetOption, '数据');
|
||||
targetOption.children = [
|
||||
{
|
||||
label: `${targetOption.label} Dynamic 1`,
|
||||
value: 3,
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
label: `${targetOption.label} Dynamic 2`,
|
||||
value: 4,
|
||||
isLeaf: false,
|
||||
},
|
||||
];
|
||||
options.value = [...options.value];
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const rules = {
|
||||
notification: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||||
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
|
||||
user: [{ required: true, message: '请选择通知人', trigger: 'change' }],
|
||||
abnormalDescription: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入异常描述',
|
||||
trigger: 'blur',
|
||||
validator: (rules: any, abnormalDescription: any, cbfn: any) => {
|
||||
if (abnormalDescription.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
|
||||
};
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['editObject']);
|
||||
const toggle = (value: any) => {
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
// infoObject.value = value;
|
||||
infoObject.value = {};
|
||||
} else {
|
||||
infoObject.value = {
|
||||
enableRules: 0,
|
||||
};
|
||||
}
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
|
||||
const btnClick = () => {
|
||||
console.log(infoObject.value);
|
||||
//表单校验
|
||||
formRef.value.validate().then(() => {
|
||||
//调用接口
|
||||
// http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
// NsMessage.success('操作成功');
|
||||
// visible.value = false;
|
||||
// emit('editObject', null);
|
||||
// });
|
||||
});
|
||||
};
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.resetFields();
|
||||
visible.value = false;
|
||||
options.value = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
isLeaf: false,
|
||||
},
|
||||
];
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
handleClose,
|
||||
formRef,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.drawerContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.blue-background.ant-switch-checked {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(0, 150, 229, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: grey !important;
|
||||
}
|
||||
/deep/ .ant-form-item-label {
|
||||
z-index: 20;
|
||||
text-align: right;
|
||||
width: 23%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,7 @@
|
||||
import data from '../notificationManagementMock.json';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
|
||||
import { energyAlarms } from '/@/api/alarmSettings/energyAlarm';
|
||||
|
||||
import { ref } from 'vue';
|
||||
const tableKeyMap = [
|
||||
{
|
||||
title: '序号',
|
||||
@@ -31,14 +29,13 @@ const tableKeyMap = [
|
||||
},
|
||||
{
|
||||
title: '监测时长',
|
||||
dataIndex: 'monitor',
|
||||
dataIndex: 'monitorFrequency',
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
dataIndex: 'enableRules',
|
||||
},
|
||||
];
|
||||
const mockData = ref(data.listData);
|
||||
const doWnload = (url: any) => {
|
||||
const a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
@@ -51,14 +48,13 @@ const doWnload = (url: any) => {
|
||||
|
||||
export const energyAlarmConfigs = (
|
||||
editeEnergyAlarm: any,
|
||||
mainRefEquipmentAlarm: any,
|
||||
mainEnergyAlarmConfig: any,
|
||||
energyAlarm: any,
|
||||
configureDeviceAlarms: any,
|
||||
) => {
|
||||
return {
|
||||
title: '告警规则',
|
||||
api: deviceAlarms.getTableList,
|
||||
value: mockData.value,
|
||||
api: energyAlarms.getTableList,
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
@@ -73,7 +69,6 @@ export const energyAlarmConfigs = (
|
||||
name: 'groupImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
// api: props.postImportApi, // 导入接口名
|
||||
title: '设备信息', // 弹窗title
|
||||
templateName: 'whiteListUser', // 所使用的文件名称
|
||||
indexName: '设备id', // 匹配类型字段
|
||||
@@ -122,9 +117,9 @@ export const energyAlarmConfigs = (
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
http.post(deviceAlarms.del, { id: data.id }).then(() => {
|
||||
http.post(energyAlarms.del, { id: data.id }).then(() => {
|
||||
NsMessage.success('操作成功');
|
||||
mainRefEquipmentAlarm.value?.nsTableRef.reload();
|
||||
mainEnergyAlarmConfig.value?.nsTableRef.reload();
|
||||
});
|
||||
},
|
||||
},
|
||||
@@ -139,6 +134,7 @@ export const energyAlarmConfigs = (
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择告警优先级',
|
||||
allowClear: true,
|
||||
options: [
|
||||
{
|
||||
label: '紧急',
|
||||
@@ -160,6 +156,7 @@ export const energyAlarmConfigs = (
|
||||
label: '告警标题',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入告警标题关键字',
|
||||
},
|
||||
},
|
||||
@@ -168,6 +165,7 @@ export const energyAlarmConfigs = (
|
||||
label: '错误码',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入告警错误码',
|
||||
},
|
||||
},
|
||||
@@ -176,6 +174,7 @@ export const energyAlarmConfigs = (
|
||||
label: '启用状态',
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择启用状态',
|
||||
options: [
|
||||
{
|
||||
|
||||
@@ -123,7 +123,7 @@ export const equipmentAlarmTableConfig = (
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
http.post(deviceAlarms.del, { id: data.id }).then(() => {
|
||||
NsMessage.success('操作成功');
|
||||
NsMessage.success('告警删除成功');
|
||||
mainRefEquipmentAlarm.value?.nsTableRef.reload();
|
||||
});
|
||||
},
|
||||
@@ -139,6 +139,7 @@ export const equipmentAlarmTableConfig = (
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择告警优先级',
|
||||
allowClear: true,
|
||||
options: [
|
||||
{
|
||||
label: '紧急',
|
||||
@@ -160,6 +161,7 @@ export const equipmentAlarmTableConfig = (
|
||||
label: '告警标题',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入告警标题关键字',
|
||||
},
|
||||
},
|
||||
@@ -168,6 +170,7 @@ export const equipmentAlarmTableConfig = (
|
||||
label: '错误码',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入错误码关键字',
|
||||
},
|
||||
},
|
||||
@@ -177,6 +180,7 @@ export const equipmentAlarmTableConfig = (
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择启用状态',
|
||||
allowClear: true,
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
|
||||
@@ -41,7 +41,7 @@ const tableKeyMap = [
|
||||
},
|
||||
];
|
||||
const mockData = ref(data.listData);
|
||||
export const notificationtableConfig = (el) => {
|
||||
export const notificationtableConfig = (notificationManagements: any) => {
|
||||
return {
|
||||
title: '告警规则',
|
||||
// api: '/carbon_emission/device/getDeviceList',
|
||||
@@ -57,7 +57,7 @@ export const notificationtableConfig = (el) => {
|
||||
name: 'FeedBackDetail',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
console.log(data, '联系方式');
|
||||
notificationManagements.value.toggle(data);
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -135,7 +135,9 @@ import { log } from 'node:console';
|
||||
const casData = ref([]);
|
||||
const treeData = ref([]);
|
||||
const userAuthList = ref([]);
|
||||
const orgId = JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgId;
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const dynamicDisabled = computed(() => {
|
||||
return formRef.value?.validateResult && userAuthList.value?.length;
|
||||
});
|
||||
@@ -493,7 +495,7 @@ import { log } from 'node:console';
|
||||
isReload: true,
|
||||
isClearCheck: true,
|
||||
api: carbonEmissionFactorLibrary.del,
|
||||
dynamicParams: { id: 'id[]' },
|
||||
dynamicParams: { ids: 'id[]' },
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
@@ -573,7 +575,7 @@ import { log } from 'node:console';
|
||||
{
|
||||
label: '删除',
|
||||
name: 'userDelete',
|
||||
dynamicParams: 'id',
|
||||
dynamicParams: { ids: 'id[]' },
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
api: carbonEmissionFactorLibrary.del,
|
||||
@@ -617,11 +619,27 @@ import { log } from 'node:console';
|
||||
options: [
|
||||
{
|
||||
label: 'CO2',
|
||||
value: 0,
|
||||
value: 'CO2',
|
||||
},
|
||||
{
|
||||
label: 'CO2e',
|
||||
value: 1,
|
||||
value: 'CO2e',
|
||||
},
|
||||
{
|
||||
label: 'SF6',
|
||||
value:'SF6',
|
||||
},
|
||||
{
|
||||
label: 'CH4',
|
||||
value: 'CH4',
|
||||
},
|
||||
{
|
||||
label: 'PFCs',
|
||||
value: 'PFCs',
|
||||
},
|
||||
{
|
||||
label: 'HFCs',
|
||||
value: 'HFCs',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<a-table :columns="columns" :data-source="data" bordered />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, watch, ref, onMounted } from 'vue';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
// let data: any[] = [];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EnvironmentTable',
|
||||
setup() {
|
||||
let data = ref<any[]>([]);
|
||||
let columns = ref<TableColumnType[]>([]);
|
||||
|
||||
interface PageData {
|
||||
tableList: any[];
|
||||
tableColumns: any[];
|
||||
graphList: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
|
||||
if (!pageData) {
|
||||
throw new Error('pageData is not provided');
|
||||
}
|
||||
// 监听 pageData 的变化
|
||||
watch(
|
||||
() => pageData as PageData,
|
||||
(_newValue, _oldValue) => {
|
||||
data.value = pageData.tableList;
|
||||
|
||||
let columnA: any[] = [...column];
|
||||
columnA.push(...pageData.tableColumns);
|
||||
columns.value = columnA;
|
||||
// pageData.graphList;
|
||||
// 执行你的逻辑代码
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => {
|
||||
let rowSpan = 1;
|
||||
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
|
||||
let shouldMerge = true;
|
||||
for (const dependent of dependents) {
|
||||
if (data[i][dependent] !== record[dependent]) {
|
||||
shouldMerge = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
|
||||
rowSpan++;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rowSpan;
|
||||
};
|
||||
|
||||
const column: TableColumnType[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'key',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('name', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('name', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备点位',
|
||||
dataIndex: 'position',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('position', record, data.value, ['name']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data.value[rowIndex - 1].name == record.name &&
|
||||
data.value[rowIndex - 1].position == record.position
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'unit',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data.value[rowIndex - 1].name == record.name &&
|
||||
data.value[rowIndex - 1].position == record.position &&
|
||||
data.value[rowIndex - 1].unit == record.unit
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
data.value = pageData.tableList;
|
||||
|
||||
let columnA: any[] = [...column];
|
||||
columnA.push(...pageData.tableColumns);
|
||||
columns.value = columnA;
|
||||
});
|
||||
return {
|
||||
data,
|
||||
column,
|
||||
columns,
|
||||
pageData,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableColumns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 2000 }">
|
||||
<template #title>
|
||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" />
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
:current="queryParams.pageNum"
|
||||
:total="total"
|
||||
:page-size="queryParams.pageSize"
|
||||
style="display: flex;justify-content: center;margin-top: 16px;"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
@change="onChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
import { tableColumns } from '../config';
|
||||
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'CarbonEmissions', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
const data = ref([]);
|
||||
const selectYear = ref<Dayjs>();
|
||||
const total = ref<number>()
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const fetch = (api, params = { orgId } ) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
|
||||
// 年份选择改变触发
|
||||
const changeYearData = () => {
|
||||
queryParams.value.year = selectYear.value.format('YYYY')
|
||||
getTableList()
|
||||
}
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
fetch(energyConsumption.pageList , queryParams.value).then((res) => {
|
||||
data.value = res.data.records
|
||||
total.value = res.data.total
|
||||
});
|
||||
};
|
||||
getTableList()
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number,size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList()
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
::v-deep .ant-table-title{
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .ant-table-container{
|
||||
padding: 0px 16px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
th.column-money,
|
||||
td.column-money {
|
||||
text-align: right !important;
|
||||
}
|
||||
</style>
|
||||
@@ -7,64 +7,70 @@ export const tableColumns = [
|
||||
},
|
||||
{
|
||||
title: '能源种类',
|
||||
dataIndex: 'money',
|
||||
dataIndex: 'energyType',
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
className: 'column-money',
|
||||
dataIndex: 'money',
|
||||
className: 'unit',
|
||||
dataIndex: 'unit',
|
||||
},
|
||||
{
|
||||
title: '全年',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'yearly',
|
||||
},
|
||||
{
|
||||
title: '1月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'jan',
|
||||
// customRender: ({ text, record }) => ({
|
||||
// children: text,
|
||||
// attrs: {
|
||||
// style: record.janFlag === 1 ? 'color: red' : 'color: blue'
|
||||
// }
|
||||
// })
|
||||
},
|
||||
{
|
||||
title: '2月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'feb',
|
||||
},
|
||||
{
|
||||
title: '3月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'mar',
|
||||
},
|
||||
{
|
||||
title: '4月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'apr',
|
||||
},
|
||||
{
|
||||
title: '5月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'may',
|
||||
},
|
||||
{
|
||||
title: '6月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'jun',
|
||||
},
|
||||
{
|
||||
title: '7月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'jul',
|
||||
},
|
||||
{
|
||||
title: '8月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'aug',
|
||||
},
|
||||
{
|
||||
title: '9月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'sep',
|
||||
},
|
||||
{
|
||||
title: '10月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'oct',
|
||||
},
|
||||
{
|
||||
title: '11月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'nov',
|
||||
},
|
||||
{
|
||||
title: '12月',
|
||||
dataIndex: 'address',
|
||||
dataIndex: 'dec',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
|
||||
@@ -6,32 +6,35 @@
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 2000 }">
|
||||
<template #bodyCell="{ column, text }">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<span>
|
||||
<a>编辑</a>
|
||||
<a @click="editData(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a>删除</a>
|
||||
<a @click="delData(record)">删除</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<template #title>
|
||||
<a-date-picker v-model:value="selectYear" picker="year" />
|
||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" />
|
||||
<div class="buttonGroup">
|
||||
<a-button type="primary" @click="addNewData">新增</a-button>
|
||||
<a-button type="primary">导入</a-button>
|
||||
<a-button type="primary">导出</a-button>
|
||||
<a-button type="primary">模板下载</a-button>
|
||||
<a-button type="primary">上传凭证</a-button>
|
||||
<a-button type="primary" @click="uploadVoucher">上传凭证</a-button>
|
||||
<a-button type="primary">凭证下载</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
:current="current"
|
||||
:page-size="pageSize"
|
||||
:total="0"
|
||||
:show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`" />
|
||||
<a-pagination
|
||||
:current="queryParams.pageNum"
|
||||
:total="total"
|
||||
:page-size="queryParams.pageSize"
|
||||
style="display: flex;justify-content: center;margin-top: 16px;"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
@change="onChange" />
|
||||
<!-- 新增数据库数据 -->
|
||||
<a-drawer
|
||||
:width="500"
|
||||
@@ -47,94 +50,171 @@
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item ref="name" label="能源种类" name="name">
|
||||
<a-input v-model:value="formState.name" />
|
||||
<a-form-item ref="name" label="能源种类" name="energyType">
|
||||
<a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
|
||||
</a-form-item>
|
||||
<a-form-item label="计量单位">
|
||||
<a-cascader v-model:value="value" :options="options" placeholder="Please select" />
|
||||
<a-form-item label="计量单位" name="unit">
|
||||
<a-cascader v-model:value="formState.unit" :options="options" />
|
||||
</a-form-item>
|
||||
<a-form-item label="自动采集节点">
|
||||
<a-form-item label="自动采集节点" name="collectionNode">
|
||||
<a-tree-select
|
||||
v-model:value="treeValue"
|
||||
style="width: 300px"
|
||||
placeholder="Please select"
|
||||
v-model:value="formState.collectionNode"
|
||||
:tree-line="true"
|
||||
:tree-data="treeData"
|
||||
tree-node-filter-prop="title"
|
||||
>
|
||||
<template #title="{ value: val, title }">
|
||||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||
<template v-else>{{ title }}</template>
|
||||
</template>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="计算碳排" name="resource">
|
||||
<a-radio-group v-model:value="formState.resource">
|
||||
<a-radio value="1">是</a-radio>
|
||||
<a-radio value="2">否</a-radio>
|
||||
<a-form-item label="计算碳排" name="isComputeCarbon">
|
||||
<a-radio-group v-model:value="formState.isComputeCarbon" @change="changeRadio">
|
||||
<a-radio :value="0">是</a-radio>
|
||||
<a-radio :value="1">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="排放类型" name="region">
|
||||
<a-select v-model:value="formState.region" placeholder="请选择排放类型">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
<a-form-item label="排放类型" name="emissionType" :required="isRequired">
|
||||
<a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
|
||||
<a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.cnValue">
|
||||
{{ item.cnValue }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="1月" name="delivery">
|
||||
<a-switch v-model:checked="formState.delivery" />
|
||||
</a-form-item>
|
||||
<a-row>
|
||||
<a-col :span="24" style="display:flex;justify-content: space-around;">
|
||||
<a-form-item label="1月" name="janFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.janFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="2月" name="febFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.febFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="3月" name="marFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.marFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" style="display:flex;justify-content: space-around;">
|
||||
<a-form-item label="4月" name="aprFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.aprFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="5月" name="mayFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.mayFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="6月" name="junFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.junFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" style="display:flex;justify-content: space-around;">
|
||||
<a-form-item label="7月" name="julFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.julFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="8月" name="augFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.augFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="9月" name="sepFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.sepFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" style="display:flex;justify-content: space-around;">
|
||||
<a-form-item label="10月" name="octFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.octFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="11月" name="novFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.novFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
<a-form-item label="12月" name="decFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
|
||||
<a-switch v-model:checked="formState.decFlag" :checked-value="1" :unCheckedValue="0" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" @click="onSubmit">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
<!-- 上传凭证弹窗 -->
|
||||
<a-modal :visible="openUpload" title="凭证上传" @ok="handleOk" @cancel="closeOpenUpload">
|
||||
<a-upload-dragger
|
||||
v-model:fileList="fileList"
|
||||
name="file"
|
||||
:multiple="true"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
@change="handleChange"
|
||||
@drop="handleDrop"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<inbox-outlined></inbox-outlined>
|
||||
</p>
|
||||
<p class="ant-upload-hint" style="display: flex;flex-direction: column;">
|
||||
<p>1.仅支持pdf格式文件或文件夹</p>
|
||||
<p>2.文件命名规则为【能源种类_年份】</p>
|
||||
<p>3.每次上传自动覆盖</p>
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref,reactive, toRaw } from 'vue';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import type { CascaderProps,TreeSelectProps } from 'ant-design-vue';
|
||||
import { Pagination,message,Modal } from 'ant-design-vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import type { CascaderProps,TreeSelectProps,UploadChangeParam } from 'ant-design-vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { tableColumns } from '../config';
|
||||
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import { dict } from '/@/api';
|
||||
defineOptions({
|
||||
name: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
|
||||
energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const orgId = JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgId;
|
||||
const fetch = (api, params = { orgId }) => {
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const fetch = (api, params = { orgId } ) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
const selectYear = ref<Dayjs>();
|
||||
const current = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
const total = ref<number>()
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const isRequired = ref(false);
|
||||
const visible = ref(false);
|
||||
const value = ref<string[]>([]);
|
||||
const openUpload = ref<boolean>(false);
|
||||
const data = ref([]);
|
||||
interface FormState {
|
||||
name: string;
|
||||
region: string | undefined;
|
||||
delivery: boolean;
|
||||
resource: string;
|
||||
energyType: string;
|
||||
unit: string;
|
||||
collectionNode: string;
|
||||
emissionType: string | undefined;
|
||||
isComputeCarbon: string;
|
||||
janFlag: string;
|
||||
febFlag: string;
|
||||
marFlag: string;
|
||||
aprFlag: string;
|
||||
mayFlag: string;
|
||||
junFlag: string;
|
||||
julFlag: string;
|
||||
augFlag: string;
|
||||
sepFlag: string;
|
||||
octFlag: string;
|
||||
novFlag: string;
|
||||
decFlag: string;
|
||||
}
|
||||
const formRef = ref();
|
||||
const labelCol = { span: 5 };
|
||||
const wrapperCol = { span: 13 };
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
name: '',
|
||||
region: undefined,
|
||||
delivery: false,
|
||||
resource: '',
|
||||
});
|
||||
const wrapperCol = { span: 19 };
|
||||
const switchLabelCol = { span: 10 };
|
||||
const switchWrapperCol = { span: 14 };
|
||||
const formState = ref({})
|
||||
// 定义form表单的必填
|
||||
const rules: Record<string, Rule[]> = {
|
||||
name: [
|
||||
{ required: true, message: '请输入能源种类', trigger: 'change' },
|
||||
],
|
||||
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
|
||||
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
||||
isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }]
|
||||
};
|
||||
// 定义计量单位级联选择的变量
|
||||
const options: CascaderProps['options'] = [
|
||||
@@ -171,8 +251,10 @@
|
||||
],
|
||||
},
|
||||
];
|
||||
// const options = ref([])
|
||||
// 排放类型的变量
|
||||
const emissionTypeDic = ref()
|
||||
// 定义自动采集节点数的变量
|
||||
const treeValue = ref<string>();
|
||||
const treeData = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
title: 'parent 1',
|
||||
@@ -199,34 +281,137 @@
|
||||
],
|
||||
},
|
||||
]);
|
||||
// 年份选择改变触发
|
||||
const changeYearData = () => {
|
||||
queryParams.value.year = selectYear.value.format('YYYY')
|
||||
getTableList()
|
||||
}
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
fetch(energyConsumption.pageList).then((res) => {
|
||||
console.log(res,'aaaaaa');
|
||||
fetch(energyConsumption.pageList , queryParams.value).then((res) => {
|
||||
data.value = res.data.records
|
||||
total.value = res.data.total
|
||||
});
|
||||
};
|
||||
getTableList()
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number,size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList()
|
||||
};
|
||||
// 计算碳排切换
|
||||
const changeRadio = (e) => {
|
||||
if(e.target.value === 0){
|
||||
isRequired.value = true
|
||||
}else{
|
||||
isRequired.value = false
|
||||
}
|
||||
};
|
||||
// 点击确定提交
|
||||
const onSubmit = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
console.log('values', formState, toRaw(formState));
|
||||
if(formState.value.unit){
|
||||
formState.value.unit = formState.value.unit.join(',')
|
||||
}
|
||||
if(formState.value.id){
|
||||
fetch(energyConsumption.update , formState.value).then((res) => {
|
||||
visible.value = false
|
||||
message.success('操作成功!');
|
||||
getTableList()
|
||||
});
|
||||
}else{
|
||||
fetch(energyConsumption.creat , formState.value).then((res) => {
|
||||
visible.value = false
|
||||
message.success('操作成功!');
|
||||
getTableList()
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('error', error);
|
||||
});
|
||||
};
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
// 获取字典值
|
||||
const getDictList = () => {
|
||||
fetch(energyConsumption.getDicList , {grp: 'EMISSION_TYPE'}).then((res) => {
|
||||
emissionTypeDic.value = res.data
|
||||
});
|
||||
// fetch(energyConsumption.getDicList , {grp: 'MEASUREMENT_UNIT'}).then((res) => {
|
||||
// options.value = res.data
|
||||
// });
|
||||
}
|
||||
// 点击新增按钮
|
||||
const addNewData = () => {
|
||||
getDictList()
|
||||
visible.value = true
|
||||
}
|
||||
// 点击编辑按钮
|
||||
const editData = (record) =>{
|
||||
getDictList()
|
||||
visible.value = true
|
||||
fetch(energyConsumption.findById , {id : record.id }).then((res) => {
|
||||
if(res.data.unit){
|
||||
res.data.unit = res.data.unit.split(',')
|
||||
}
|
||||
formState.value = res.data
|
||||
});
|
||||
};
|
||||
// 点击删除
|
||||
const delData = (record) => {
|
||||
Modal.confirm({
|
||||
title: '警告',
|
||||
content: '确定要删除吗?',
|
||||
okText: '确定',
|
||||
okType: 'primary',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
fetch(energyConsumption.del , {id : record.id }).then((res) => {
|
||||
message.success('操作成功!');
|
||||
getTableList()
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}
|
||||
// 关闭新增抽屉
|
||||
const onClose = () => {
|
||||
visible.value = false;
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
// 点击上传凭证按钮
|
||||
const uploadVoucher = () => {
|
||||
openUpload.value = true;
|
||||
};
|
||||
// 上传凭证弹窗点击确定
|
||||
const handleOk = (e: MouseEvent) => {
|
||||
console.log(e);
|
||||
openUpload.value = false;
|
||||
};
|
||||
// 上传凭证相关方法及变量
|
||||
const fileList = ref([]);
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
const status = info.file.status;
|
||||
if (status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (status === 'done') {
|
||||
message.success(`${info.file.name} 文件上传成功`);
|
||||
} else if (status === 'error') {
|
||||
message.error(`${info.file.name} 文件上传失败`);
|
||||
}
|
||||
};
|
||||
function handleDrop(e: DragEvent) {
|
||||
console.log(e);
|
||||
}
|
||||
// 关闭上传凭证弹窗
|
||||
const closeOpenUpload = () =>{
|
||||
openUpload.value = false;
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
@@ -1,18 +1,34 @@
|
||||
<template>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||
<a-tab-pane key="1" tab="能耗统计">
|
||||
<energyConsumption ref="energyConsumptionRef" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="碳排统计" force-render>Content of Tab Pane 2</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="碳排速算">Content of Tab Pane 3</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="碳排统计" force-render>
|
||||
<carbonEmissions ref="carbonEmissionsRef" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="碳排速算">
|
||||
<quickCalculation ref="quickCalculationRef" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import energyConsumption from './energyConsumption/index.vue';
|
||||
import carbonEmissions from './carbonEmissions/index.vue';
|
||||
import quickCalculation from './quickCalculation/index.vue';
|
||||
defineOptions({
|
||||
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
const activeKey = ref('1');
|
||||
// 切换tab页的回调
|
||||
const handleTabChange = (key) => {
|
||||
console.log('Tab changed:', key);
|
||||
// 在这里可以执行需要在页面切换时执行的逻辑
|
||||
// if(key==='1'){
|
||||
// if (energyConsumptionRef.value) {
|
||||
// energyConsumptionRef.value.getTableList(); // 调用子组件的方法
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,583 @@
|
||||
<!-- @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;"
|
||||
draggable
|
||||
show-line
|
||||
checkable
|
||||
block-node
|
||||
:tree-data="gData"
|
||||
:checkedKeys="checkedTreeNodeKeys"
|
||||
:selectedKeys="selectedKeys"
|
||||
@dragenter="onDragEnter"
|
||||
@drop="onDrop"
|
||||
@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">
|
||||
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 2000}"/>
|
||||
</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 mainRef = ref();
|
||||
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 checkedTreeNodeKeys = ref<string[]>(['0-0']);
|
||||
|
||||
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 onDragEnter = (info: AntTreeNodeDragEnterEvent) => {
|
||||
console.log(info);
|
||||
// expandedKeys 需要展开时
|
||||
// expandedKeys.value = info.expandedKeys;
|
||||
};
|
||||
|
||||
const onDrop = (info: AntTreeNodeDropEvent) => {
|
||||
console.log(info);
|
||||
const dropKey = info.node.key;
|
||||
const dragKey = info.dragNode.key;
|
||||
const dropPos = info.node.pos.split('-');
|
||||
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||
const loop = (data: TreeProps['treeData'], key: string | number, callback: any) => {
|
||||
data.forEach((item, index) => {
|
||||
if (item.key === key) {
|
||||
return callback(item, index, data);
|
||||
}
|
||||
if (item.children) {
|
||||
return loop(item.children, key, callback);
|
||||
}
|
||||
});
|
||||
};
|
||||
const data = [...gData.value];
|
||||
|
||||
// Find dragObject
|
||||
let dragObj: TreeDataItem;
|
||||
loop(data, dragKey, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
|
||||
arr.splice(index, 1);
|
||||
dragObj = item;
|
||||
});
|
||||
if (!info.dropToGap) {
|
||||
// Drop on the content
|
||||
loop(data, dropKey, (item: TreeDataItem) => {
|
||||
item.children = item.children || [];
|
||||
/// where to insert 示例添加到头部,可以是随意位置
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
} else if (
|
||||
(info.node.children || []).length > 0 && // Has children
|
||||
info.node.expanded && // Is expanded
|
||||
dropPosition === 1 // On the bottom gap
|
||||
) {
|
||||
loop(data, dropKey, (item: TreeDataItem) => {
|
||||
item.children = item.children || [];
|
||||
// where to insert 示例添加到头部,可以是随意位置
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
} else {
|
||||
let ar: TreeProps['treeData'] = [];
|
||||
let i = 0;
|
||||
loop(data, dropKey, (_item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
if (dropPosition === -1) {
|
||||
ar.splice(i, 0, dragObj);
|
||||
} else {
|
||||
ar.splice(i + 1, 0, dragObj);
|
||||
}
|
||||
}
|
||||
gData.value = data;
|
||||
};
|
||||
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) => {
|
||||
checkedTreeNodeKeys.value = checkedKeys
|
||||
checkedIds.value = []
|
||||
info.checkedNodes.forEach(item=>{
|
||||
checkedIds.value.push(item.id)
|
||||
})
|
||||
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
|
||||
emissionType.value = checkedIds.value.join(',')
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
}
|
||||
// 新增/编辑树节点点击确定
|
||||
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]);
|
||||
}
|
||||
});
|
||||
// 获取默认选中节点的所有id
|
||||
getDefaultIds(selectedNodes)
|
||||
});
|
||||
};
|
||||
const defaultIds = ref([])
|
||||
const getDefaultIds = (selectedNodes) => {
|
||||
selectedNodes.forEach(items => {
|
||||
defaultIds.value.push(items.id)
|
||||
if(items.children){
|
||||
getDefaultIds(items.children)
|
||||
}
|
||||
})
|
||||
emissionType.value = defaultIds.value.join(',')
|
||||
checkedIds.value = defaultIds.value
|
||||
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
|
||||
}
|
||||
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');
|
||||
|
||||
tableConfig.value.params = {
|
||||
...mainRef.value.params,
|
||||
...params,
|
||||
};
|
||||
|
||||
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 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 });
|
||||
});
|
||||
};
|
||||
const tableConfig = ref({
|
||||
title: '数据库',
|
||||
api: carbonEmissionFactorLibrary.getTableList,
|
||||
params: {
|
||||
orgId,
|
||||
emissionType
|
||||
},
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'userAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
opMap.value.type = 'add';
|
||||
setTimeout(() => {
|
||||
formData.value = {
|
||||
carbonEmissionPrefix:'t',
|
||||
numberOfReferences:'10'
|
||||
};
|
||||
userAuthList.value.splice(0);
|
||||
});
|
||||
opMap.value.fuc = (formData: any) => {
|
||||
formData.emissionType = formData.emissionType[formData.emissionType.length - 1]
|
||||
return http.post(carbonEmissionFactorLibrary.creatOrUpdate, formData).then(() => {
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
});
|
||||
};
|
||||
visible.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '导入',
|
||||
type: 'primary',
|
||||
name: 'userImport',
|
||||
handle: () => {},
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
type: 'primary',
|
||||
name: 'userExports',
|
||||
},
|
||||
{
|
||||
label: '批量删除',
|
||||
type: 'primary',
|
||||
name: 'userBatchDel',
|
||||
dynamicDisabled: (data: any) => {
|
||||
return data.list.length === 0;
|
||||
},
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
isClearCheck: true,
|
||||
api: carbonEmissionFactorLibrary.del,
|
||||
dynamicParams: { ids: 'id[]' },
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: 'id',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排放源',
|
||||
dataIndex: 'emissionSources',
|
||||
},
|
||||
{
|
||||
title: '排放类型',
|
||||
dataIndex: 'emissionTypeColumn',
|
||||
},
|
||||
{
|
||||
title: '排放气体',
|
||||
dataIndex: 'emissionGas',
|
||||
},
|
||||
{
|
||||
title: '排放环节',
|
||||
dataIndex: 'emissionProcess',
|
||||
},
|
||||
{
|
||||
title: '排放因子',
|
||||
dataIndex: 'emissionFactors',
|
||||
},
|
||||
{
|
||||
title: '排放因子单位',
|
||||
dataIndex: 'emissionFactorUnits',
|
||||
},
|
||||
{
|
||||
title: '数据来源',
|
||||
dataIndex: 'dataSources',
|
||||
},
|
||||
{
|
||||
title: '数据库',
|
||||
dataIndex: 'carbonDatabase',
|
||||
},
|
||||
{
|
||||
title: '参考文献',
|
||||
dataIndex: 'reference',
|
||||
},
|
||||
{
|
||||
title: '引用数量',
|
||||
dataIndex: 'numberOfReferences',
|
||||
},
|
||||
],
|
||||
columnActions: {
|
||||
title: '操作',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'userEdit',
|
||||
handle: (record: any) => {
|
||||
userAuthList.value.splice(0);
|
||||
setTimeout(() => {
|
||||
console.log(record.id);
|
||||
|
||||
http.post(carbonEmissionFactorLibrary.findById,{ id: record.id } ).then((res) => {
|
||||
formData.value = res.data;
|
||||
});
|
||||
}, 10);
|
||||
opMap.value.type = 'edit';
|
||||
opMap.value.fuc = (formData: any) => {
|
||||
return http.post(carbonEmissionFactorLibrary.creatOrUpdate, formData).then(() => {
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
visible.value = false;
|
||||
NsMessage.success('操作成功');
|
||||
});
|
||||
};
|
||||
visible.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'userDelete',
|
||||
dynamicParams: { ids: 'id[]' },
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
api: carbonEmissionFactorLibrary.del,
|
||||
},
|
||||
],
|
||||
},
|
||||
rowKey: 'id',
|
||||
});
|
||||
</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 {
|
||||
border-radius: @ns-border-radius;
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
@@ -4,24 +4,6 @@
|
||||
// height: 100%;
|
||||
position: relative;
|
||||
// background: linear-gradient(#badaff, #8cabeb, #7095de);
|
||||
.drawer-box {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: rgba(0, 0 ,0 ,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.drawer-icon {
|
||||
|
||||
}
|
||||
}
|
||||
// 照明设备功能总容器
|
||||
.lighting-img-box {
|
||||
position: relative;
|
||||
@@ -88,9 +70,9 @@
|
||||
background: rgba(80, 236, 244, 0.3);
|
||||
border: 2px solid rgb(80, 236, 244);
|
||||
}
|
||||
.area-item:hover {
|
||||
border:2px solid white;
|
||||
}
|
||||
// .area-item:hover {
|
||||
// transform: scale(1.05);
|
||||
// }
|
||||
.area-item {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
@@ -125,20 +107,21 @@
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.group-shadow {
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
.group-shadow:hover {
|
||||
border: 2px solid white;
|
||||
}
|
||||
// .group-shadow {
|
||||
// transition: all ease 0.2s;
|
||||
// }
|
||||
// .group-shadow:hover {
|
||||
// transform: scale(1.05);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 总容器与抽屉按钮
|
||||
.ns-content-main {
|
||||
position: relative;
|
||||
// 抽屉伸缩按钮
|
||||
.drawer-box {
|
||||
// 抽屉打开按钮
|
||||
.drawer-box-in {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
@@ -152,8 +135,22 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.drawer-icon {
|
||||
|
||||
}
|
||||
}
|
||||
// 抽屉关闭按钮
|
||||
.drawer-box-out {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
right: 496px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: rgba(0, 0 ,0 ,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -9,73 +9,156 @@
|
||||
</div>
|
||||
<!-- 楼层区域 -->
|
||||
<div class="area">
|
||||
<div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
|
||||
<div class="light-group">
|
||||
<div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
|
||||
</div>
|
||||
<div class="light-group">
|
||||
<div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-item area2" @click="getArea(2)">
|
||||
<div class="light-group">
|
||||
<div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
|
||||
</div>
|
||||
<div class="light-group">
|
||||
<div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-item area3" @click="getArea(3)">
|
||||
<div class="light-group">
|
||||
<div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-item area4" @click="getArea(4)">
|
||||
<div class="light-group">
|
||||
<div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
|
||||
<div
|
||||
v-for="(item, index) in treeData"
|
||||
:class="computedClass(item.id)"
|
||||
@click="getArea(item.id)"
|
||||
:key="index">
|
||||
<div v-for="(v, i) in item.children" :key="i" class="light-group">
|
||||
<div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v.id)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 照明设备 -->
|
||||
<div class="lights">
|
||||
<light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
|
||||
<light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
|
||||
<light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
|
||||
<light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light>
|
||||
<light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light>
|
||||
<light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light>
|
||||
<light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light>
|
||||
<light v-for="(item, index) in bulbs" :key="index" :styleObject="item.styleText" :type="item.type" :visible="item.visible"></light>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧抽屉的触发按钮 -->
|
||||
<div class="drawer-box" v-if="!visible">
|
||||
<double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
|
||||
<div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
|
||||
<double-left-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white;" />
|
||||
</div>
|
||||
<!-- 右侧抽屉 -->
|
||||
<a-drawer
|
||||
v-model:visible="visible"
|
||||
class="drawer-item"
|
||||
width="496"
|
||||
placement="right"
|
||||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
|
||||
:closable="false"
|
||||
id="Odrawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<tabs1 @changeArea="getArea" :treeData="treeData"></tabs1>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { treeData } from './treeData'
|
||||
import light from './light.vue';
|
||||
import tabs1 from './tabs1.vue'
|
||||
// ICON
|
||||
import {
|
||||
DoubleLeftOutlined,
|
||||
DoubleRightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
let area = ref(1)
|
||||
let visible = ref(false)
|
||||
// 分区 - 当前选择的分区 - 默认选择一区
|
||||
let area = ref(['1'])
|
||||
// 分区 - 分区小灯泡
|
||||
const bulbs = ref([
|
||||
{
|
||||
styleText: { left: '190px', bottom: '200px' },
|
||||
area: 1,
|
||||
type: 1,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '245px', bottom: '125px' },
|
||||
area: 1,
|
||||
type: 2,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '355px', bottom: '160px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '295px', bottom: '230px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '425px', bottom: '230px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '470px', bottom: '190px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '380px', bottom: '275px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '700px', bottom: '320px' },
|
||||
area: 3,
|
||||
type: 1,
|
||||
visible: true
|
||||
},
|
||||
])
|
||||
|
||||
// 分区 - 单个分区切换
|
||||
const getArea = (result: any) => {
|
||||
// 如果传入的值是数组
|
||||
if (Array.isArray(result)) {
|
||||
area.value = result
|
||||
// 如果不是数组
|
||||
} else {
|
||||
area.value.length = 0
|
||||
area.value[0] = String(result)
|
||||
}
|
||||
}
|
||||
// 分区 - 多个分区切换,只有照明回路能够触发多个分区
|
||||
// 分区 - 样式函数
|
||||
const computedClass = (number: number) => {
|
||||
if (area.value.indexOf(number) != -1) {
|
||||
return `isActive area-item area${number}`
|
||||
} else {
|
||||
return `area-item area${number}`
|
||||
}
|
||||
}
|
||||
|
||||
const getArea = (number: any) => {
|
||||
alert(number)
|
||||
// 抽屉 - 当前选择的tab
|
||||
let activeKey = ref('1');
|
||||
// 抽屉 - 打开状态
|
||||
let visible = ref(false);
|
||||
// 抽屉 - 开关事件
|
||||
const toggleDrawer = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./indexs.less";
|
||||
.isActive {
|
||||
border: 2px solid white !important;
|
||||
border: 3px solid white !important;
|
||||
}
|
||||
:deep(.ant-tabs-tab-btn) {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="icon-box" :style="styleObject">
|
||||
<div class="icon-box" :style="styleObject" v-show="visible">
|
||||
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
|
||||
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
|
||||
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
|
||||
@@ -43,9 +43,14 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
styleObject: Object,
|
||||
type: Number
|
||||
styleObject: Object,
|
||||
type: Number,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const result = ref({
|
||||
|
||||
1018
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
Normal file
1018
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,88 @@
|
||||
import { ref } from 'vue';
|
||||
export const treeData = ref([
|
||||
{
|
||||
label: '站厅',
|
||||
id: '1',
|
||||
// 前端遍历后添加,属前端属性
|
||||
selected: false,
|
||||
children: [{
|
||||
label: '站厅1区',
|
||||
id: '1-1',
|
||||
// 前端属性
|
||||
selected: false,
|
||||
// 后端属性(表示禁用了一个设备)
|
||||
stop: false,
|
||||
// 当前的控制模式
|
||||
type: 3
|
||||
},{
|
||||
label: '站厅2区',
|
||||
id: '1-2',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 1
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: '站台',
|
||||
id: '2',
|
||||
selected: false,
|
||||
children: [{
|
||||
label: '站台1区',
|
||||
id: '2-1',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 1
|
||||
},{
|
||||
label: '站台2区',
|
||||
id: '2-2',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 2
|
||||
},{
|
||||
label: '站台3区',
|
||||
id: '2-3',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 3
|
||||
},{
|
||||
label: '站台4区',
|
||||
id: '2-4',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 1
|
||||
}]
|
||||
},{
|
||||
label: '办公室',
|
||||
id: '3',
|
||||
selected: false,
|
||||
children: [{
|
||||
label: '办公室1区',
|
||||
id: '3-1',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 2
|
||||
}]
|
||||
},{
|
||||
label: '楼道',
|
||||
id: '4',
|
||||
selected: false,
|
||||
children: [{
|
||||
label: '楼道1区',
|
||||
id: '4-1',
|
||||
selected: false,
|
||||
stop: false,
|
||||
type: 3
|
||||
}]
|
||||
},
|
||||
]);
|
||||
|
||||
export const controlType = ref([{
|
||||
name: '托管',
|
||||
type: 1,
|
||||
},{
|
||||
name: 'AI',
|
||||
type: 2,
|
||||
},{
|
||||
name: '手动',
|
||||
type: 3,
|
||||
}])
|
||||
@@ -474,6 +474,7 @@
|
||||
onMounted(() => {
|
||||
getDianWeiList();
|
||||
changeDeviceType(null, null);
|
||||
getSelect();
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<a-row type="flex" style="height: 92%">
|
||||
<a-col :span="8">
|
||||
<div
|
||||
style="
|
||||
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
|
||||
width: 98%;
|
||||
height: 96%;
|
||||
margin: 2%;
|
||||
">
|
||||
<a-radio-group
|
||||
v-model:value="mode"
|
||||
@change="changeMode"
|
||||
style="
|
||||
padding-bottom: 10px;
|
||||
width: 40%;
|
||||
height: 4%;
|
||||
padding-left: 30px;
|
||||
padding-top: 10px;
|
||||
">
|
||||
<a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
|
||||
<a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
|
||||
</a-radio-group>
|
||||
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<div
|
||||
ref="analysisGraphRingchart"
|
||||
style="
|
||||
width: 98%;
|
||||
height: 38%;
|
||||
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
|
||||
margin: 1%;
|
||||
"></div>
|
||||
<div
|
||||
ref="analysisGraphBarchart"
|
||||
style="
|
||||
width: 98%;
|
||||
height: 58%;
|
||||
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
|
||||
margin: 1%;
|
||||
"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, inject, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AnalysisGraph',
|
||||
setup() {
|
||||
const mode = ref<String>('1');
|
||||
let data = ref<any[]>([]);
|
||||
interface PageData {
|
||||
// 图表 表格数据
|
||||
graphTableList: any[];
|
||||
// 图表 表格表头
|
||||
graphTableColumns: any[];
|
||||
// 图表 图表数据
|
||||
graphGraphList: any[];
|
||||
// 分析 表格数据
|
||||
analysisTableList: any[];
|
||||
// 分析 图表数据
|
||||
analysisGraphList: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
|
||||
if (!pageData) {
|
||||
throw new Error('pageData is not provided');
|
||||
}
|
||||
|
||||
// 监听 pageData 的变化
|
||||
watch(
|
||||
() => pageData as PageData,
|
||||
(_newValue, _oldValue) => {
|
||||
// 执行你的逻辑代码
|
||||
draw();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
const changeMode = () => {};
|
||||
const analysisGraphchart = ref(null);
|
||||
const analysisGraphRingchart = ref(null);
|
||||
const analysisGraphBarchart = ref(null);
|
||||
|
||||
// 左侧柱状图
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
// 圆环图
|
||||
let chartRight1: echarts.ECharts | null = null;
|
||||
|
||||
// 右下角柱状图
|
||||
let chartRight2: echarts.ECharts | null = null;
|
||||
|
||||
const draw = () => {
|
||||
data.value = pageData.analysisGraphList;
|
||||
// 绘制左侧图
|
||||
drawLeft();
|
||||
drawRight1();
|
||||
};
|
||||
const drawLeft = () => {
|
||||
if (data.value && data.value.length > 0) {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
chartInstance = echarts.init(analysisGraphchart.value);
|
||||
|
||||
var seriesdata = [];
|
||||
var dateX = [];
|
||||
for (let i = 0; i < data.value.length; i++) {
|
||||
dateX.push(data.value[i].name);
|
||||
|
||||
seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight });
|
||||
}
|
||||
|
||||
var seriesList = [
|
||||
{
|
||||
name: data.value[0].energyType,
|
||||
data: seriesdata,
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
},
|
||||
barWidth: '25%',
|
||||
},
|
||||
];
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: 60,
|
||||
bottom: 20,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
zoomLock: true,
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 4,
|
||||
showDetail: false,
|
||||
width: 5,
|
||||
yAxisIndex: [0, 1], // 控制y轴滚动对象
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
// width: 0,
|
||||
startValue: 0,
|
||||
endValue: 10,
|
||||
minValueSpan: 10,
|
||||
yAxisIndex: [0],
|
||||
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
moveOnMouseWheel: true, // 开启滚轮平移
|
||||
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: dateX,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: seriesList,
|
||||
};
|
||||
|
||||
chartInstance = echarts.init(analysisGraphchart.value);
|
||||
chartInstance.setOption(option);
|
||||
}
|
||||
};
|
||||
const drawRight1 = () => {
|
||||
if (data.value && data.value.length > 0) {
|
||||
if (chartRight1) {
|
||||
chartRight1.dispose();
|
||||
}
|
||||
chartRight1 = echarts.init(analysisGraphRingchart.value);
|
||||
|
||||
var seriesdata = [];
|
||||
var dateX = [];
|
||||
// var legendList: string | any[] = [];
|
||||
for (let i = 0; i < data.value.length; i++) {
|
||||
dateX.push(data.value[i].name);
|
||||
|
||||
seriesdata.push({ value: data.value[i].ringValue, name: data.value[i].name });
|
||||
}
|
||||
var seriesList = [
|
||||
{
|
||||
// name: data.value[0].energyType,
|
||||
data: seriesdata,
|
||||
type: 'pie',
|
||||
// 圆环内径和外径
|
||||
radius: ['70%', '90%'],
|
||||
center: ['30%', '50%'], // 调整环形图的位置,百分比表示相对于容器的宽高
|
||||
// 显示折线
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 10, // 调整第一个折线段的长度
|
||||
length2: 30, // 调整第二个折线段的长度
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b}',
|
||||
position: 'outside', // 确保标签在环形图外部
|
||||
// alignTo: 'edge',
|
||||
formatter: '{c}' + data.value[0].energyUnit + '\n{d}%',
|
||||
alignTo: 'labelLine',
|
||||
distanceToLabelLine: 5, // 调整标签和引导线之间的距离
|
||||
distance: 10, // 调整标签距离图形的距离
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 白色间距
|
||||
borderWidth: 2,
|
||||
borderColor: '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
|
||||
// 图例
|
||||
legend: {
|
||||
top: 'center',
|
||||
left: '60%',
|
||||
// 排列方式 垂直
|
||||
orient: 'vertical',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: dateX,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: seriesList,
|
||||
};
|
||||
|
||||
chartRight1 = echarts.init(analysisGraphRingchart.value);
|
||||
chartRight1.setOption(option);
|
||||
|
||||
// 默认点击第一个
|
||||
if (seriesdata.length > 0) {
|
||||
drawRight2(seriesdata[0]);
|
||||
}
|
||||
chartRight1.on('click', function (params) {
|
||||
// 控制台输出数据的名称
|
||||
console.log(params.name + ' 被点击了');
|
||||
drawRight2(params);
|
||||
});
|
||||
}
|
||||
};
|
||||
// 右下角柱状图
|
||||
// chartRight2
|
||||
// analysisGraphBarchart
|
||||
const drawRight2 = (auxiliary: any) => {
|
||||
if (chartRight2) {
|
||||
chartRight2.dispose();
|
||||
}
|
||||
// 辅助线
|
||||
var compareData: any[] = [];
|
||||
// 展示数据
|
||||
var showData: any[] = [];
|
||||
// X轴
|
||||
var dateX: any[] = [];
|
||||
data.value.forEach((item) => {
|
||||
if (item.name !== auxiliary.name) {
|
||||
dateX.push(item.name);
|
||||
showData.push(item.ringValue);
|
||||
compareData.push(auxiliary.value);
|
||||
}
|
||||
});
|
||||
|
||||
const option = {
|
||||
// 图例
|
||||
legend: {
|
||||
data: [
|
||||
{ name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
|
||||
{
|
||||
name: '参考线',
|
||||
icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
|
||||
}, // 参考线使用自定义路径图标,只显示线条
|
||||
],
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
left: 60,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: 'red', // 设置 tooltip 的线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
bottom: 60,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: true },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: dateX,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
zoomLock: true,
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 5,
|
||||
bottom: '0%',
|
||||
height: 10,
|
||||
showDetail: false,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
xAxisIndex: 0,
|
||||
zoomOnMouseWheel: false, // 滚轮是否触发缩放
|
||||
moveOnMouseMove: true, // 鼠标滚轮触发滚动
|
||||
moveOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '对比值',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
// show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
data: showData,
|
||||
barWidth: 30, // 设置柱状图的宽度
|
||||
},
|
||||
{
|
||||
name: '参考线',
|
||||
type: 'line',
|
||||
data: compareData,
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'red', // 设置参考线的小圆点颜色
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
opacity: 0, // 隐藏鼠标悬停时的节点
|
||||
},
|
||||
},
|
||||
showSymbol: false, // 隐藏数据点
|
||||
lineStyle: {
|
||||
type: 'dashed', // 虚线样式
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chartRight2 = echarts.init(analysisGraphBarchart.value);
|
||||
chartRight2.setOption(option);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
draw();
|
||||
});
|
||||
|
||||
// 下载图表
|
||||
const downloadChart = () => {
|
||||
if (chartInstance) {
|
||||
const base64 = chartInstance.getDataURL({
|
||||
type: 'png',
|
||||
backgroundColor: '#fff',
|
||||
});
|
||||
const link = document.createElement('a');
|
||||
link.href = base64;
|
||||
link.download = 'chart.png';
|
||||
link.click();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
analysisGraphchart,
|
||||
analysisGraphRingchart,
|
||||
analysisGraphBarchart,
|
||||
downloadChart,
|
||||
mode,
|
||||
changeMode,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<a-table :columns="columns" :data-source="data" bordered />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, inject, watch, onMounted } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AnalysisTable',
|
||||
setup() {
|
||||
const columns = [
|
||||
{
|
||||
title: '设备/节点',
|
||||
dataIndex: 'key',
|
||||
},
|
||||
{
|
||||
title: '统计值',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '同比',
|
||||
children: [
|
||||
{
|
||||
title: '△差值',
|
||||
dataIndex: 'position',
|
||||
},
|
||||
{
|
||||
title: '增长率',
|
||||
dataIndex: 'unit',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '环比',
|
||||
children: [
|
||||
{
|
||||
title: '△差值',
|
||||
dataIndex: 'position',
|
||||
},
|
||||
{
|
||||
title: '增长率',
|
||||
dataIndex: 'unit',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '纵向对比',
|
||||
children: [
|
||||
{
|
||||
title: '△差值',
|
||||
dataIndex: 'position',
|
||||
},
|
||||
{
|
||||
title: '增长率',
|
||||
dataIndex: 'unit',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
];
|
||||
let data = ref<any[]>([]);
|
||||
|
||||
interface PageData {
|
||||
// 图表 表格数据
|
||||
graphTableList: any[];
|
||||
// 图表 表格表头
|
||||
graphTableColumns: any[];
|
||||
// 图表 图表数据
|
||||
graphGraphList: any[];
|
||||
// 分析 表格数据
|
||||
analysisTableList: any[];
|
||||
// 分析 图表数据
|
||||
analysisGraphList: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
|
||||
if (!pageData) {
|
||||
throw new Error('pageData is not provided');
|
||||
}
|
||||
// 监听 pageData 的变化
|
||||
watch(
|
||||
() => pageData as PageData,
|
||||
(_newValue, _oldValue) => {
|
||||
data.value = pageData.analysisTableList;
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
onMounted(() => {
|
||||
data.value = pageData.analysisTableList;
|
||||
});
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -11,9 +11,16 @@
|
||||
setup() {
|
||||
let data = ref<any[]>([]);
|
||||
interface PageData {
|
||||
// 图表 表格数据
|
||||
graphTableList: any[];
|
||||
// 图表 表格表头
|
||||
graphTableColumns: any[];
|
||||
// 图表 图表数据
|
||||
graphGraphList: any[];
|
||||
// 分析 表格数据
|
||||
analysisTableList: any[];
|
||||
// 分析 图表数据
|
||||
analysisGraphList: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
|
||||
|
||||
@@ -13,9 +13,16 @@
|
||||
let columns = ref<TableColumnType[]>([]);
|
||||
|
||||
interface PageData {
|
||||
// 图表 表格数据
|
||||
graphTableList: any[];
|
||||
// 图表 表格表头
|
||||
graphTableColumns: any[];
|
||||
// 图表 图表数据
|
||||
graphGraphList: any[];
|
||||
// 分析 表格数据
|
||||
analysisTableList: any[];
|
||||
// 分析 图表数据
|
||||
analysisGraphList: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
|
||||
|
||||
@@ -9,9 +9,16 @@
|
||||
|
||||
// 创建一个响应式对象
|
||||
const pageData = reactive({
|
||||
// 图表 表格数据
|
||||
graphTableList: [],
|
||||
// 图表 表格表头
|
||||
graphTableColumns: [],
|
||||
// 图表 图表数据
|
||||
graphGraphList: [],
|
||||
// 分析 表格数据
|
||||
analysisTableList: [],
|
||||
// 分析 图表数据
|
||||
analysisGraphList: [],
|
||||
});
|
||||
|
||||
// 使用 provide 函数来提供这个响应式对象
|
||||
|
||||
@@ -23,6 +23,10 @@
|
||||
<graph-graph ref="graphRef" v-if="isGraph" />
|
||||
<environment-table ref="tableRef" v-else />
|
||||
</div>
|
||||
<div v-else style="height: 90%">
|
||||
<analysis-graph ref="analysisGraphRef" v-if="isGraph" />
|
||||
<analysis-table ref="analysisTableRef" v-else />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@@ -33,12 +37,17 @@
|
||||
import tree from './tree/index.vue';
|
||||
import graphGraph from './graphGraph/index.vue';
|
||||
import environmentTable from './graphTable/index.vue';
|
||||
import analysisTable from './analysisTable/index.vue';
|
||||
import analysisGraph from './analysisGraph/index.vue';
|
||||
|
||||
const iconName = ref('biaoge');
|
||||
|
||||
const treeRef = ref();
|
||||
const graphRef = ref();
|
||||
const analysisGraphRef = ref();
|
||||
|
||||
const tableRef = ref();
|
||||
const analysisTableRef = ref();
|
||||
|
||||
let isGraph = ref(true);
|
||||
const activeKey = ref('1');
|
||||
@@ -52,6 +61,10 @@
|
||||
if (graphRef.value) {
|
||||
graphRef.value.downloadChart();
|
||||
}
|
||||
} else {
|
||||
if (analysisGraphRef.value) {
|
||||
analysisGraphRef.value.downloadChart();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
<template>
|
||||
<a-table :columns="columns" :data-source="data" bordered />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'AC_004(给排水电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EnvironmentTable',
|
||||
setup() {
|
||||
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
|
||||
let rowSpan = 1;
|
||||
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
|
||||
let shouldMerge = true;
|
||||
for (const dependent of dependents) {
|
||||
if (data[i][dependent] !== record[dependent]) {
|
||||
shouldMerge = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
|
||||
rowSpan++;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rowSpan;
|
||||
};
|
||||
|
||||
const columns: TableColumnType[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'key',
|
||||
customCell: (record, rowIndex) => {
|
||||
const rowSpan = getRowSpan('name', record, data);
|
||||
if (rowIndex != 0 && data[rowIndex - 1].key == record.key) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
customCell: (record, rowIndex) => {
|
||||
const rowSpan = getRowSpan('name', record, data);
|
||||
if (rowIndex != 0 && data[rowIndex - 1].name == record.name) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备点位',
|
||||
dataIndex: 'position',
|
||||
customCell: (record, rowIndex) => {
|
||||
const rowSpan = getRowSpan('position', record, data, ['name']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data[rowIndex - 1].name == record.name &&
|
||||
data[rowIndex - 1].position == record.position
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'unit',
|
||||
customCell: (record, rowIndex) => {
|
||||
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data[rowIndex - 1].name == record.name &&
|
||||
data[rowIndex - 1].position == record.position &&
|
||||
data[rowIndex - 1].unit == record.unit
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: '1:00',
|
||||
dataIndex: '1:00',
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -15,9 +15,9 @@
|
||||
v-model:value="mode"
|
||||
@change="changeMode"
|
||||
style="padding-bottom: 10px; width: 100%">
|
||||
<a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei"
|
||||
>设备</a-radio-button
|
||||
>
|
||||
<a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei">
|
||||
设备
|
||||
</a-radio-button>
|
||||
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input
|
||||
@@ -93,7 +93,7 @@
|
||||
const options2 = ref<SelectProps['options']>([]);
|
||||
const mode = ref<String>('1');
|
||||
// 能耗类型
|
||||
const selectedValue = ref<string | undefined>();
|
||||
const selectedValue = ref<string | number | null | undefined>();
|
||||
// 采集频率
|
||||
const frequencyValue = ref<string | undefined>();
|
||||
// 时间
|
||||
@@ -107,6 +107,9 @@
|
||||
(item.value = item.cnValue), (item.label = item.cnValue);
|
||||
});
|
||||
options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value
|
||||
if (options1.value) {
|
||||
selectedValue.value = options1.value[0].value;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch options:', error);
|
||||
}
|
||||
@@ -130,9 +133,16 @@
|
||||
];
|
||||
};
|
||||
interface PageData {
|
||||
// 图表 表格数据
|
||||
graphTableList: any[];
|
||||
// 图表 表格表头
|
||||
graphTableColumns: any[];
|
||||
// 图表 图表数据
|
||||
graphGraphList: any[];
|
||||
// 分析 表格数据
|
||||
analysisTableList: any[];
|
||||
// 分析 图表数据
|
||||
analysisGraphList: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
if (!pageData) {
|
||||
@@ -141,7 +151,7 @@
|
||||
|
||||
// 选择能耗类型
|
||||
const changeEnergyType = () => {
|
||||
if (selectedValue.value == '8') {
|
||||
if (selectedValue.value == '碳排量') {
|
||||
shebei.value = true;
|
||||
mode.value = '2';
|
||||
} else {
|
||||
@@ -289,6 +299,136 @@
|
||||
],
|
||||
},
|
||||
];
|
||||
pageData.analysisTableList = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'AC_004(给排水电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
},
|
||||
];
|
||||
pageData.analysisGraphList = [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: -21,
|
||||
ringValue: 21,
|
||||
energyType: selectedValue.value,
|
||||
energyUnit: 'kWh',
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: 36,
|
||||
ringValue: 36,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'insideLeft',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: -5,
|
||||
ringValue: 5,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_005(给排水电表)',
|
||||
value: -25,
|
||||
ringValue: 15,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_006(给排水电表)',
|
||||
value: 35,
|
||||
ringValue: 30,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'insideLeft',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_007(给排水电表)',
|
||||
value: 15,
|
||||
ringValue: 18,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'insideLeft',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_008(给排水电表)',
|
||||
value: -25,
|
||||
ringValue: 41,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_009(给排水电表)',
|
||||
value: -5,
|
||||
ringValue: 55,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'AC_0090(给排水电表)',
|
||||
value: -5,
|
||||
ringValue: 55,
|
||||
energyType: selectedValue.value,
|
||||
unit: 'V',
|
||||
labelRight: {
|
||||
position: 'right',
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
const getSelect11 = () => {
|
||||
pageData.graphTableList = [
|
||||
@@ -561,6 +701,7 @@
|
||||
onMounted(() => {
|
||||
getOptionsList();
|
||||
changeMode();
|
||||
getSelect();
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user