taskid:099 remark:"commit"
This commit is contained in:
fks-xuxinyue
@@ -1,10 +1,406 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
<!-- 填报页 -->
|
||||
<div v-if="fillInPage">
|
||||
|
||||
<fillIn />
|
||||
</div>
|
||||
<!-- 新增报告弹窗 -->
|
||||
<a-drawer
|
||||
@@ -22,24 +22,23 @@
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item ref="name" label="报告名称" name="energyType">
|
||||
<a-input v-model:value="formState.energyType" placeholder="请输入报告名称" />
|
||||
<a-form-item ref="name" label="报告名称" name="reportName">
|
||||
<a-input v-model:value="formState.reportName" placeholder="请输入报告名称" />
|
||||
</a-form-item>
|
||||
<a-form-item ref="name" label="报告年度" name="energyType">
|
||||
<a-date-picker v-model:value="value5" picker="year" />
|
||||
<a-form-item ref="name" label="报告年度" name="reportYear">
|
||||
<a-date-picker v-model:value="formState.reportYear" picker="year" valueFormat="YYYY" />
|
||||
</a-form-item>
|
||||
<a-form-item ref="name" label="适用标准" name="energyType">
|
||||
<a-input v-model:value="formState.energyType" placeholder="请输入适用标准" />
|
||||
<a-form-item ref="name" label="适用标准" name="genericStandard">
|
||||
<a-input v-model:value="formState.genericStandard" placeholder="请输入适用标准" />
|
||||
</a-form-item>
|
||||
<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.id">
|
||||
{{ item.cnValue }}
|
||||
</a-select-option>
|
||||
<a-form-item label="报告周期" name="reportPeriod">
|
||||
<a-select v-model:value="formState.reportPeriod" placeholder="请选择排放类型">
|
||||
<a-select-option value="1">年度</a-select-option>
|
||||
<a-select-option value="2">月度</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item ref="name" label="适用标准" name="energyType">
|
||||
<a-range-picker v-model:value="value4" picker="month" />
|
||||
<a-form-item ref="name" label="报告范围" name="reportScope">
|
||||
<a-range-picker v-model:value="formState.reportScope" picker="month" valueFormat="YYYY-MM" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
@@ -50,9 +49,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref,toRaw } from 'vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import { carbonInventoryCheck } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import fillIn from './fillInPage/index.vue';
|
||||
defineOptions({ name: 'CarbonInventoryCheck' });
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
@@ -61,8 +61,8 @@
|
||||
return http.post(api, params);
|
||||
};
|
||||
// 判断展示哪个页面
|
||||
const isMainPage = ref(false);
|
||||
const fillInPage = ref(true);
|
||||
const isMainPage = ref(true);
|
||||
const fillInPage = ref(false);
|
||||
// 新增相关数据
|
||||
const visible = ref(false);
|
||||
const formState = ref({})
|
||||
@@ -71,8 +71,11 @@
|
||||
const wrapperCol = { span: 19 };
|
||||
// 定义form表单的必填
|
||||
const rules: Record<string, Rule[]> = {
|
||||
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
||||
isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }]
|
||||
reportName: [{ required: true, message: '请输入报告名称', trigger: 'change' }],
|
||||
reportYear: [{ required: true, message: '请选择报告年度', trigger: 'change' }],
|
||||
genericStandard: [{ required: true, message: '请输入适用标准', trigger: 'change' }],
|
||||
reportPeriod: [{ required: true, message: '请选择排放类型', trigger: 'change' }],
|
||||
reportScope: [{ required: true, message: '请选择报告范围', trigger: 'change' }],
|
||||
};
|
||||
// 关闭新增抽屉
|
||||
const onClose = () => {
|
||||
@@ -80,10 +83,30 @@
|
||||
formState.value = {}
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
// 点击确定提交
|
||||
const onSubmit = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
console.log('values', formState, toRaw(formState));
|
||||
formState.value.enterpriseOrgId = orgId.value
|
||||
formState.value.startTime = formState.value.reportScope[0]
|
||||
formState.value.endTime = formState.value.reportScope[1]
|
||||
fetch(carbonInventoryCheck.createOrUpdate,formState.value).then((res) => {
|
||||
visible.value = false
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('error', error);
|
||||
});
|
||||
};
|
||||
// 表格相关数据
|
||||
const data = ref([]);
|
||||
const mainRef = ref();
|
||||
const tableConfig = ref({
|
||||
title: '数据库',
|
||||
api: carbonEmissionFactorLibrary.getTableList,
|
||||
api: carbonInventoryCheck.carbonInventoryList,
|
||||
params: {
|
||||
orgId
|
||||
},
|
||||
@@ -106,27 +129,27 @@
|
||||
},
|
||||
{
|
||||
title: '企业名称',
|
||||
dataIndex: 'emissionSources',
|
||||
dataIndex: 'enterpriseName',
|
||||
},
|
||||
{
|
||||
title: '报告名称',
|
||||
dataIndex: 'emissionTypeColumn',
|
||||
dataIndex: 'reportName',
|
||||
},
|
||||
{
|
||||
title: '报告年度',
|
||||
dataIndex: 'emissionGas',
|
||||
dataIndex: 'reportYear',
|
||||
},
|
||||
{
|
||||
title: '适用标准',
|
||||
dataIndex: 'emissionProcess',
|
||||
dataIndex: 'genericStandard',
|
||||
},
|
||||
{
|
||||
title: '更新人',
|
||||
dataIndex: 'emissionFactors',
|
||||
dataIndex: 'updateUser',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'emissionFactorUnits',
|
||||
dataIndex: 'updateTime',
|
||||
},
|
||||
],
|
||||
columnActions: {
|
||||
@@ -137,6 +160,10 @@
|
||||
name: 'userEdit',
|
||||
handle: (record: any) => {
|
||||
visible.value = true
|
||||
fetch(carbonInventoryCheck.findById,{id:record.id}).then((res) => {
|
||||
formState.value = res.data
|
||||
formState.value.reportScope = [res.data.startTime,res.data.endTime]
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -156,17 +183,17 @@
|
||||
{
|
||||
label: '删除',
|
||||
name: 'userDelete',
|
||||
dynamicParams: { ids: 'id[]' },
|
||||
dynamicParams: { id: 'id' },
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
api: carbonEmissionFactorLibrary.del,
|
||||
api: carbonInventoryCheck.delete,
|
||||
},
|
||||
],
|
||||
},
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'emissionSources',
|
||||
field: 'reportName',
|
||||
label: '报告名称',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
@@ -175,13 +202,14 @@
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime1',
|
||||
label: '采购日期',
|
||||
field: 'reportYear',
|
||||
label: '报告年度',
|
||||
component: 'NsRangePicker',
|
||||
fieldMap: ['purchaseBeginDate', 'purchaseEndDate'],
|
||||
fieldMap: ['startYear', 'endYear'],
|
||||
componentProps: {
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY',
|
||||
placeholder: ['报告年度', '报告年度'],
|
||||
picker:"year"
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user