fks-xuxinyue
4 months ago
8 changed files with 1041 additions and 83 deletions
@ -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> |
<template> |
||||
<a-tabs v-model:activeKey="activeKey"> |
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange"> |
||||
<a-tab-pane key="1" tab="能耗统计"> |
<a-tab-pane key="1" tab="能耗统计"> |
||||
<energyConsumption ref="energyConsumptionRef" /> |
<energyConsumption ref="energyConsumptionRef" /> |
||||
</a-tab-pane> |
</a-tab-pane> |
||||
<a-tab-pane key="2" tab="碳排统计" force-render>Content of Tab Pane 2</a-tab-pane> |
<a-tab-pane key="2" tab="碳排统计" force-render> |
||||
<a-tab-pane key="3" tab="碳排速算">Content of Tab Pane 3</a-tab-pane> |
<carbonEmissions ref="carbonEmissionsRef" /> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="3" tab="碳排速算"> |
||||
|
<quickCalculation ref="quickCalculationRef" /> |
||||
|
</a-tab-pane> |
||||
</a-tabs> |
</a-tabs> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { ref } from 'vue'; |
import { ref } from 'vue'; |
||||
import energyConsumption from './energyConsumption/index.vue'; |
import energyConsumption from './energyConsumption/index.vue'; |
||||
|
import carbonEmissions from './carbonEmissions/index.vue'; |
||||
|
import quickCalculation from './quickCalculation/index.vue'; |
||||
defineOptions({ |
defineOptions({ |
||||
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效 |
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效 |
||||
}); |
}); |
||||
const activeKey = ref('1'); |
const activeKey = ref('1'); |
||||
|
// 切换tab页的回调 |
||||
|
const handleTabChange = (key) => { |
||||
|
console.log('Tab changed:', key); |
||||
|
// 在这里可以执行需要在页面切换时执行的逻辑 |
||||
|
// if(key==='1'){ |
||||
|
// if (energyConsumptionRef.value) { |
||||
|
// energyConsumptionRef.value.getTableList(); // 调用子组件的方法 |
||||
|
// } |
||||
|
// } |
||||
|
}; |
||||
</script> |
</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> |
||||
Loading…
Reference in new issue