fks-xuxinyue
4 months ago
6 changed files with 560 additions and 44 deletions
@ -1,10 +1,406 @@ |
|||||
<template> |
<template> |
||||
|
<div class="main"> |
||||
|
<div class="left"> |
||||
|
<div class="top"> |
||||
|
<a-form style="width: 100%;margin: 0 auto;"> |
||||
|
<div class="ns-form-title"><div class="title">2024年济阳站碳盘查报告</div></div> |
||||
|
<div style="padding: 0 16px !important;width: 100%;"> |
||||
|
<a-row> |
||||
|
<a-col :span="24" style="margin-bottom: 16px;"> |
||||
|
<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入关键词" /> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</div> |
||||
|
</a-form> |
||||
|
<a-tree |
||||
|
:expanded-keys="expandedKeys" |
||||
|
:auto-expand-parent="autoExpandParent" |
||||
|
:tree-data="gData" |
||||
|
:height="233" |
||||
|
show-line |
||||
|
style="padding: 0 16px !important;" |
||||
|
@expand="onExpand" |
||||
|
> |
||||
|
<template #title="{ title }"> |
||||
|
<span v-if="title.indexOf(searchValue) > -1"> |
||||
|
{{ title.substring(0, title.indexOf(searchValue)) }} |
||||
|
<span style="color: #f50">{{ searchValue }}</span> |
||||
|
{{ title.substring(title.indexOf(searchValue) + searchValue.length) }} |
||||
|
</span> |
||||
|
<span v-else>{{ title }}</span> |
||||
|
</template> |
||||
|
</a-tree> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<a-form style="width: 100%;margin: 0 auto;"> |
||||
|
<div class="ns-form-title"><div class="title">报告相关</div></div> |
||||
|
<div class="button" style="padding: 0 16px !important;"> |
||||
|
<div class="changePage">排放统计</div> |
||||
|
<div class="changePage">碳排流向</div> |
||||
|
</div> |
||||
|
</a-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="ns-table-title ns-title-extra-box">排放源</div> |
||||
|
<div class="mainLeft"></div> |
||||
|
<div class="mainRight"> |
||||
|
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 1500}" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
|
import { ref, watch } from 'vue'; |
||||
|
import type { TreeProps } from 'ant-design-vue'; |
||||
|
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary'; |
||||
|
const orgId = ref(''); |
||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
||||
|
orgId.value = result; |
||||
|
const fetch = (api, params = { orgId } ) => { |
||||
|
return http.post(api, params); |
||||
|
}; |
||||
|
// 树结构 |
||||
|
const x = 3; |
||||
|
const y = 2; |
||||
|
const z = 1; |
||||
|
const genData: TreeProps['treeData'] = []; |
||||
|
|
||||
|
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => { |
||||
|
const preKey = _preKey || '0'; |
||||
|
const tns = _tns || genData; |
||||
|
|
||||
|
const children = []; |
||||
|
for (let i = 0; i < x; i++) { |
||||
|
const key = `${preKey}-${i}`; |
||||
|
tns.push({ title: key, key }); |
||||
|
if (i < y) { |
||||
|
children.push(key); |
||||
|
} |
||||
|
} |
||||
|
if (_level < 0) { |
||||
|
return tns; |
||||
|
} |
||||
|
const level = _level - 1; |
||||
|
children.forEach((key, index) => { |
||||
|
tns[index].children = []; |
||||
|
return generateData(level, key, tns[index].children); |
||||
|
}); |
||||
|
}; |
||||
|
generateData(z); |
||||
|
|
||||
|
const dataList: TreeProps['treeData'] = []; |
||||
|
const generateList = (data: TreeProps['treeData']) => { |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
const node = data[i]; |
||||
|
const key = node.key; |
||||
|
dataList.push({ key, title: key }); |
||||
|
if (node.children) { |
||||
|
generateList(node.children); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
generateList(genData); |
||||
|
|
||||
|
const getParentKey = ( |
||||
|
key: string | number, |
||||
|
tree: TreeProps['treeData'], |
||||
|
): string | number | undefined => { |
||||
|
let parentKey; |
||||
|
for (let i = 0; i < tree.length; i++) { |
||||
|
const node = tree[i]; |
||||
|
if (node.children) { |
||||
|
if (node.children.some(item => item.key === key)) { |
||||
|
parentKey = node.key; |
||||
|
} else if (getParentKey(key, node.children)) { |
||||
|
parentKey = getParentKey(key, node.children); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return parentKey; |
||||
|
}; |
||||
|
const expandedKeys = ref<(string | number)[]>([]); |
||||
|
const searchValue = ref<string>(''); |
||||
|
const autoExpandParent = ref<boolean>(true); |
||||
|
const gData = ref<TreeProps['treeData']>(genData); |
||||
|
|
||||
|
const onExpand = (keys: string[]) => { |
||||
|
expandedKeys.value = keys; |
||||
|
autoExpandParent.value = false; |
||||
|
}; |
||||
|
|
||||
|
watch(searchValue, value => { |
||||
|
const expanded = dataList |
||||
|
.map((item: TreeProps['treeData'][number]) => { |
||||
|
if (item.title.indexOf(value) > -1) { |
||||
|
return getParentKey(item.key, gData.value); |
||||
|
} |
||||
|
return null; |
||||
|
}) |
||||
|
.filter((item, i, self) => item && self.indexOf(item) === i); |
||||
|
expandedKeys.value = expanded; |
||||
|
searchValue.value = value; |
||||
|
autoExpandParent.value = true; |
||||
|
}); |
||||
|
// 填报表格数据 |
||||
|
const queryParams = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
orgId: orgId.value, |
||||
|
}) |
||||
|
const tableConfig = ref({ |
||||
|
title: '能耗统计', |
||||
|
api: energyConsumption.pageList, |
||||
|
params: queryParams.value, |
||||
|
headerActions: [ |
||||
|
{ |
||||
|
label: '新增', |
||||
|
name: 'userAdd', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
getDictList() |
||||
|
visible.value = true |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '导入', |
||||
|
type: 'primary', |
||||
|
name: 'userImport', |
||||
|
handle: () => {}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '导出', |
||||
|
type: 'primary', |
||||
|
name: 'userExports', |
||||
|
}, |
||||
|
{ |
||||
|
label: '模板下载', |
||||
|
type: 'primary', |
||||
|
name: 'userExports', |
||||
|
}, |
||||
|
{ |
||||
|
label: '上传凭证', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
openUpload.value = true; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '凭证下载', |
||||
|
type: 'primary', |
||||
|
name: 'userExports', |
||||
|
}, |
||||
|
], |
||||
|
columns: [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
customRender: (text: any) => { |
||||
|
return text.index + 1; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '能源种类', |
||||
|
dataIndex: 'energyType', |
||||
|
}, |
||||
|
{ |
||||
|
title: '计量单位', |
||||
|
className: 'unitName', |
||||
|
dataIndex: 'unitName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '全年', |
||||
|
dataIndex: 'yearly', |
||||
|
}, |
||||
|
{ |
||||
|
title: '1月', |
||||
|
dataIndex: 'jan', |
||||
|
}, |
||||
|
{ |
||||
|
title: '2月', |
||||
|
dataIndex: 'feb', |
||||
|
}, |
||||
|
{ |
||||
|
title: '3月', |
||||
|
dataIndex: 'mar', |
||||
|
}, |
||||
|
{ |
||||
|
title: '4月', |
||||
|
dataIndex: 'apr', |
||||
|
}, |
||||
|
{ |
||||
|
title: '5月', |
||||
|
dataIndex: 'may', |
||||
|
}, |
||||
|
{ |
||||
|
title: '6月', |
||||
|
dataIndex: 'jun', |
||||
|
}, |
||||
|
{ |
||||
|
title: '7月', |
||||
|
dataIndex: 'jul', |
||||
|
}, |
||||
|
{ |
||||
|
title: '8月', |
||||
|
dataIndex: 'aug', |
||||
|
}, |
||||
|
{ |
||||
|
title: '9月', |
||||
|
dataIndex: 'sep', |
||||
|
}, |
||||
|
{ |
||||
|
title: '10月', |
||||
|
dataIndex: 'oct', |
||||
|
}, |
||||
|
{ |
||||
|
title: '11月', |
||||
|
dataIndex: 'nov', |
||||
|
}, |
||||
|
{ |
||||
|
title: '12月', |
||||
|
dataIndex: 'dec', |
||||
|
}, |
||||
|
], |
||||
|
columnActions: { |
||||
|
title: '操作', |
||||
|
actions: [ |
||||
|
{ |
||||
|
label: '编辑', |
||||
|
name: 'userEdit', |
||||
|
handle: (record: any) => { |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '删除', |
||||
|
name: 'userDelete', |
||||
|
dynamicParams: { id: 'id' }, |
||||
|
confirm: true, |
||||
|
isReload: true, |
||||
|
api: energyConsumption.del, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
formConfig: { |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'year', |
||||
|
label: '年份', |
||||
|
component: 'NsDatePicker', |
||||
|
componentProps: { |
||||
|
picker: 'year', |
||||
|
valueFormat: 'YYYY', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
params: {}, |
||||
|
}, |
||||
|
rowKey: 'id', |
||||
|
}); |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
|
.main { |
||||
|
background-color: @ns-content-bg; |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.left { |
||||
|
width: 300px; |
||||
|
margin-right: @ns-gap; |
||||
|
min-width: fit-content; |
||||
|
> div { |
||||
|
background-color: @white; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.top{ |
||||
|
position: relative; |
||||
|
height: 80%; |
||||
|
.ns-form-title{ |
||||
|
font-weight: bold; |
||||
|
user-select: text; |
||||
|
padding: 16px; |
||||
|
margin-bottom: 16px; |
||||
|
padding-bottom: 10px; |
||||
|
border-bottom: 1px solid #e9e9e9; |
||||
|
} |
||||
|
.title{ |
||||
|
text-align: left; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
font-weight: bold; |
||||
|
user-select: text; |
||||
|
position: relative; |
||||
|
padding-left: 9px; |
||||
|
} |
||||
|
.title::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
height: 13px; |
||||
|
width: 3px; |
||||
|
border-radius: 1px; |
||||
|
background-color: #2778FF; |
||||
|
} |
||||
|
} |
||||
|
.bottom{ |
||||
|
position: relative; |
||||
|
height: 20%; |
||||
|
.ns-form-title{ |
||||
|
font-weight: bold; |
||||
|
user-select: text; |
||||
|
padding: 16px; |
||||
|
margin-bottom: 16px; |
||||
|
padding-bottom: 10px; |
||||
|
border-bottom: 1px solid #e9e9e9; |
||||
|
} |
||||
|
.title{ |
||||
|
text-align: left; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
font-weight: bold; |
||||
|
user-select: text; |
||||
|
position: relative; |
||||
|
padding-left: 9px; |
||||
|
} |
||||
|
.title::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
height: 13px; |
||||
|
width: 3px; |
||||
|
border-radius: 1px; |
||||
|
background-color: #2778FF; |
||||
|
} |
||||
|
.changePage{ |
||||
|
height: 3vh; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.right { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
height: 100%; |
||||
|
padding: @ns-gap; |
||||
|
background-color: @white; |
||||
|
border-radius: @ns-border-radius; |
||||
|
box-shadow: @ns-content-box-shadow; |
||||
|
.ns-table-title { |
||||
|
text-align: left; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
user-select: text; |
||||
|
width: 100%; |
||||
|
margin-bottom: @ns-gap; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue