36 changed files with 4061 additions and 792 deletions
@ -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', //配置设备告警删除
|
|||
} |
|||
|
|||
@ -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', //配置设备告警删除
|
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
File diff suppressed because it is too large
@ -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, |
|||
}]) |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<a-row type="flex" style="height: 92%"> |
|||
<a-col :span="8"> |
|||
<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> |
|||
</a-col> |
|||
<a-col :span="16" /> |
|||
</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); |
|||
|
|||
let chartInstance: echarts.ECharts | null = null; |
|||
|
|||
const draw = () => { |
|||
data.value = pageData.analysisGraphList; |
|||
if (data.value && data.value.length > 0) { |
|||
if (chartInstance) { |
|||
chartInstance.dispose(); |
|||
} |
|||
chartInstance = echarts.init(analysisGraphchart.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].value, label: data.value[i].labelRight }); |
|||
} |
|||
|
|||
var seriesList = [ |
|||
{ |
|||
name: data.value[0].energyType, |
|||
data: seriesdata, |
|||
type: 'bar', |
|||
label: { |
|||
show: true, |
|||
formatter: '{b}', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const option = { |
|||
// tooltip: { |
|||
// trigger: 'axis', |
|||
// formatter: (params: any) => { |
|||
// const date = params[0].name; |
|||
// const values = params |
|||
// .map((param: any) => { |
|||
// const unit = data.value.find((d) => d.name === date)?.unit || ''; |
|||
// return `<tr> |
|||
// <td>${param.marker}${param.seriesName}</td> |
|||
// <td style="text-align: right;">${param.value} ${unit}</td> |
|||
// </tr>`; |
|||
// }) |
|||
// .join(''); |
|||
// return `<div>${date}</div><table style="width: 100%;">${values}</table>`; |
|||
// }, |
|||
// }, |
|||
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); |
|||
} |
|||
}; |
|||
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, |
|||
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> |
|||
@ -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> |
|||
Loading…
Reference in new issue