修改优化

This commit is contained in:
fks-xuxinyue
2024-08-20 15:40:08 +08:00
parent 4a1f9259d7
commit 43fcd2b161
14 changed files with 867 additions and 605 deletions

View File

@@ -48,64 +48,70 @@
</div>
<div style="display: flex; margin-top: 20px; height: calc(84% - 20px)">
<div class="detailTable">
<a-card>
<div class="ns-form-title">
<div class="title">交易明细</div>
<div class="operation" style="display: flex">
<a-button type="primary" @click="addDetail">新增</a-button>
<a-upload
v-model:file-list="importFileList"
name="file"
accept=".xlsx"
:showUploadList="false"
:custom-request="importFile">
<a-button type="primary" style="margin-left: 6px">导入</a-button>
</a-upload>
<a-button type="primary" style="margin-left: 6px" @click="exportFile">导出</a-button>
<a-button
type="primary"
style="margin-left: 6px"
:disabled="selectedRowKeys.length === 0"
@click="deleteMore"
>批量删除</a-button
>
</div>
<div class="ns-form-title">
<div class="title">交易明细</div>
<div class="operation" style="display: flex">
<a-button type="primary" @click="addDetail">新增</a-button>
<a-upload
v-model:file-list="importFileList"
name="file"
accept=".xlsx"
:showUploadList="false"
:custom-request="importFile">
<a-button type="primary" style="margin-left: 6px">导入</a-button>
</a-upload>
<a-button type="primary" style="margin-left: 6px" @click="exportFile">导出</a-button>
<a-button
type="primary"
style="margin-left: 6px"
:disabled="selectedRowKeys.length === 0"
@click="deleteMore"
>批量删除</a-button
>
</div>
<a-table
:columns="columns"
:data-source="data"
rowKey="id"
@change="onChange"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectionChange,
}"
:scroll="{ x: 1500, y: 400 }"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'accountType'">
<span v-if="record.accountType">{{ record.accountType.label }}</span>
</template>
<template v-if="column.key === 'action'">
<span>
<a @click="editData(record)">编辑</a>
<a-divider type="vertical" />
<a @click="delData(record)">删除</a>
</span>
</template>
</div>
<a-table
:columns="columns"
:data-source="data"
rowKey="id"
@change="onChange"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectionChange,
}"
:scroll="{ x: 1500, y: 400 }"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'accountType'">
<span v-if="record.accountType">{{ record.accountType.label }}</span>
</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" />
</a-card>
<template v-if="column.key === 'action'">
<span>
<a @click="editData(record)">编辑</a>
<a-divider type="vertical" />
<a @click="delData(record)">删除</a>
</span>
</template>
</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>
<div class="total">
<div class="ns-form-title">
<div class="title">配额统计</div>
<div class="operation" style="display: flex; justify-content: space-around; width: 63%">
<a-button type="primary" @click="getTotalTable(1)">全国配额</a-button>
<a-button type="primary" @click="getTotalTable(2)">地方配额</a-button>
<a-button type="primary" @click="getTotalTable(3)">CCER配额</a-button>
</div>
</div>
<a-table :columns="totalColumns" :data-source="totalData" bordered :pagination="false">
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
@@ -123,6 +129,9 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<div class="ns-form-title" style="display: flex">
<div class="title">{{ text }}</div>
</div>
<a-form
ref="formRef"
:model="formState"
@@ -295,6 +304,7 @@
};
const editData = (record) => {
getDictList();
text.value = '编辑';
visible.value = true;
formState.value.id = record.id;
fetch(uploadPic.select, { bizId: record.id, bizType: 1 }).then((res) => {
@@ -376,6 +386,7 @@
};
// 新增相关数据
const visible = ref(false);
const text = ref('新增');
const formState = ref({
orgId: orgId.value,
});
@@ -404,6 +415,7 @@
getDictList();
// 点击新增
const addDetail = () => {
text.value = '新增';
visible.value = true;
getDictList();
};
@@ -447,7 +459,7 @@
// 清理 URL 对象
window.URL.revokeObjectURL(url);
selectedRowKeys.value = []
selectedRowKeys.value = [];
})
.catch((error) => {
console.error('下载失败:', error);
@@ -545,7 +557,10 @@
formRef.value.resetFields();
};
// 统计表格
const getTotalTable = () => {
const getTotalTable = (type) => {
if (type) {
queryParams.value.accountType = type;
}
fetch(carbonAssets.quotaStatistics, queryParams.value).then((res) => {
totalData.value = res.data;
});
@@ -614,11 +629,13 @@
height: 100%;
background: white;
border-radius: 12px;
padding: 16px;
}
.total {
width: calc(35% - 20px);
height: 100%;
background: white;
border-radius: 12px;
padding: 16px;
}
</style>

View File

@@ -5,7 +5,7 @@
<div class="left">
<div class="top">
<a-form style="width: 100%; margin: 0 auto">
<div class="ns-form-title"><div class="title">排放分类</div></div>
<div class="ns-form-title"><div class="title">能源分组</div></div>
<div style="padding: 0 16px !important; width: 100%">
<a-row>
<a-col :span="24" style="margin-bottom: 16px">
@@ -23,7 +23,6 @@
class="draggable-tree"
style="padding: 0 16px !important"
draggable
show-line
checkable
block-node
:tree-data="gData"
@@ -80,9 +79,9 @@
</div>
</template>
</a-tree>
<div class="addTreeNode">
<!-- <div class="addTreeNode">
<a-button type="primary" style="width: 100%" @click="addTreeNodeData">新增</a-button>
</div>
</div> -->
</div>
</div>
<div class="right">
@@ -96,7 +95,7 @@
</div>
<!-- 新增树节点 -->
<ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel">
<ns-input v-model:value="addTreeNode" class="input" placeholder="请输入排放类型" />
<ns-input v-model:value="addTreeNode" :maxlength="10" class="input" placeholder="请输入排放类型" />
</ns-modal>
<!-- 新增数据库数据 -->
<a-drawer
@@ -106,6 +105,9 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<div class="ns-form-title-add" style="display: flex">
<div class="title">{{ text }}</div>
</div>
<ns-form
ref="formRef"
:schemas="formSchema"
@@ -129,8 +131,8 @@
@close="closeUnitManag">
<div class="ns-form-title titleUnit">
<div class="title">单位管理</div>
<a-button type="primary" @click="addGroup">新增分组</a-button>
<a-button type="primary" @click="addUnit">新增单位</a-button>
<a-button type="primary" @click="addGroup" ghost>新增分组</a-button>
<a-button type="primary" @click="addUnit" ghost>新增单位</a-button>
</div>
<!-- <div class="addButton">
</div> -->
@@ -147,7 +149,7 @@
ref="select"
:value="unitTreeParams.id"
allowClear
style="width: 96%"
style="width: 90%"
placeholder="选择分组"
@change="handleChange">
<a-select-option v-for="(item, index) in groupData" :key="index" :value="item.id">
@@ -185,11 +187,12 @@
</template>
</a-drawer>
<!-- 新增分组管理 -->
<ns-modal
:visible="addGroupManage"
:title="addGroupTitle"
@ok="unitOrGroupOk"
@cancel="groupCancel">
<ns-modal :visible="addGroupManage" @ok="unitOrGroupOk" @cancel="groupCancel">
<template #title>
<div style="display: flex; align-items: center">
<span class="titleStyleGroup">{{ addGroupTitle }}</span>
</div>
</template>
<a-form ref="unitFormRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="分组名称" name="cnValue" :required="true">
<a-input v-model:value="formState.cnValue" placeholder="请输入分组名称" />
@@ -197,11 +200,12 @@
</a-form>
</ns-modal>
<!-- 新增单位 -->
<ns-modal
:visible="addUnitManage"
:title="addUnitTitle"
@ok="unitOrGroupOk"
@cancel="unitCancel">
<ns-modal :visible="addUnitManage" @ok="unitOrGroupOk" @cancel="unitCancel">
<template #title>
<div style="display: flex; align-items: center">
<span class="titleStyle">{{ addUnitTitle }}</span>
</div>
</template>
<a-form ref="unitFormRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="单位名称" name="cnValue" :required="true">
<a-input v-model:value="formState.cnValue" placeholder="请输入单位名称" />
@@ -265,6 +269,7 @@
const disabled = ref(false);
const treeNodeAdd = ref<boolean>(false);
const operationTree = ref<string>('新增');
const text = ref('新增数据');
// const showOperation = ref(false);
const opMap: any = ref({
@@ -473,7 +478,11 @@
cancelText: '取消',
onOk() {
http
.post(carbonEmissionFactorLibrary.delTreeNode, { orgId: orgId.value, id: data.id })
.post(carbonEmissionFactorLibrary.delTreeNode, {
orgId: orgId.value,
id: data.id,
emissionName: data.emissionName,
})
.then(() => {
getOrgTree();
NsMessage.success('操作成功');
@@ -637,6 +646,7 @@
});
};
show.value = false;
text.value = '新增数据';
visible.value = true;
},
},
@@ -812,6 +822,7 @@
});
};
show.value = true;
text.value = '编辑数据';
visible.value = true;
},
},
@@ -1122,6 +1133,10 @@
padding-bottom: 10px;
border-bottom: 1px solid #e9e9e9;
}
.ns-form-title-add {
font-weight: bold;
user-select: text;
}
.titleUnit {
font-weight: bold;
user-select: text;
@@ -1176,6 +1191,7 @@
margin-left: 10%;
flex-direction: column;
border-radius: 12px;
overflow: auto;
}
.actionMore {
display: none;
@@ -1198,5 +1214,27 @@
text-align: right;
width: 27%;
}
.titleStyleGroup::before {
content: '';
position: absolute;
left: 16px;
top: 13%;
transform: translateY(-50%);
height: 16px;
width: 3px;
border-radius: 1px;
background-color: #2778ff;
}
.titleStyle::before {
content: '';
position: absolute;
left: 16px;
top: 10.5%;
transform: translateY(-50%);
height: 16px;
width: 3px;
border-radius: 1px;
background-color: #2778ff;
}
</style>
 

View File

@@ -3,15 +3,15 @@
<a-table
:columns="column"
:data-source="data"
:bordered="false"
:bordered="true"
:pagination="false"
:scroll="{ x: 2000, y: 480 }">
<template #title>
<a-date-picker
v-model:value="selectYear"
picker="year"
@change="changeYearData"
valueFormat="YYYY" />
<a-date-picker v-model:value="selectYear" picker="year" valueFormat="YYYY" />
<span style="margin-left: 30px">
<a-button type="primary" @click="changeYearData">查询</a-button>
<a-button type="primary" ghost style="margin-left: 6px" @click="reset">重置</a-button>
</span>
</template>
</a-table>
<a-pagination
@@ -57,11 +57,17 @@
queryParams.value.year = selectYear.value;
getTableList();
};
const reset = () => {
selectYear.value = dayjs(new Date().getFullYear().toString());
queryParams.value.year = selectYear.value.format('YYYY');
getTableList();
};
// 表头
const column: TableColumnsType[] = [
{
title: '排放类型',
dataIndex: 'cnValue',
width: 130,
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -84,66 +90,82 @@
{
title: '能源种类',
dataIndex: 'energyType',
width: 80,
},
{
title: '计量单位',
dataIndex: 'unitName',
width: 80,
},
{
title: '加权平均',
dataIndex: 'averageFactorValue',
width: 80,
},
{
title: '全年',
dataIndex: 'carbonYearly',
width: 80,
},
{
title: '1月',
dataIndex: 'jan',
width: 80,
},
{
title: '2月',
dataIndex: 'feb',
width: 80,
},
{
title: '3月',
dataIndex: 'mar',
width: 80,
},
{
title: '4月',
dataIndex: 'apr',
width: 80,
},
{
title: '5月',
dataIndex: 'may',
width: 80,
},
{
title: '6月',
dataIndex: 'jun',
width: 80,
},
{
title: '7月',
dataIndex: 'jul',
width: 80,
},
{
title: '8月',
dataIndex: 'aug',
width: 80,
},
{
title: '9月',
dataIndex: 'sep',
width: 80,
},
{
title: '10月',
dataIndex: 'oct',
width: 80,
},
{
title: '11月',
dataIndex: 'nov',
width: 80,
},
{
title: '12月',
dataIndex: 'dec',
width: 80,
},
];
// 合并单元格
@@ -189,9 +211,12 @@
:deep(.ant-table-container) {
padding: 0px 16px;
}
:deep(.ant-table-cell) {
border: 1px solid #f0f0f0;
}
// :deep(.ant-table-cell) {
// border: 1px solid #f0f0f0;
// }
// :deep(.ant-table-cell::before) {
// display: none;
// }
</style>
<style scoped>
th.column-money,

View File

@@ -54,150 +54,18 @@
</a-radio-group>
</a-form-item>
<a-form-item label="排放类型" name="emissionType" :required="isRequired">
<a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
<a-select
v-model:value="formState.emissionType"
placeholder="请选择排放类型"
:disabled="!isRequired">
<a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.id">
{{ item.cnValue }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
<!-- <a-row>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="1月"
name="janFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.janFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="2月"
name="febFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.febFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="3月"
name="marFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.marFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="4月"
name="aprFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.aprFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="5月"
name="mayFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.mayFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="6月"
name="junFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.junFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="7月"
name="julFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.julFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="8月"
name="augFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.augFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="9月"
name="sepFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.sepFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="10月"
name="octFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.octFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="11月"
name="novFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.novFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="12月"
name="decFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.decFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
</a-row> -->
<div class="ns-form-title"><div class="title">能耗统计</div></div>
<a-table
:columns="addColumns"
:data-source="addData"
size="small"
:pagination="false"
:scroll="{ y: 200 }">
<a-table :columns="addColumns" :data-source="addData" size="small" :pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
<a-switch
@@ -267,11 +135,20 @@
<!-- 凭证下载 -->
<a-drawer
:visible="downLoadVisible"
title="凭证列表"
:width="500"
@close="onCloseDownLoad"
:footer-style="{ textAlign: 'right' }">
<div></div>
<div class="ns-form-title" style="display: flex">
<div class="title">凭证列表</div>
<a-button
type="primary"
ghost
style="margin-left: 16px"
@click="onSubmitDownLoad"
:disabled="selectedRowKeysSet.length === 0">
批量下载
</a-button>
</div>
<a-table
:columns="downLoadColumns"
:data-source="downLoadData"
@@ -281,6 +158,7 @@
selectedRowKeys: selectedRowKeysSet,
onChange: onSelectionChangeSet,
}"
style="margin-top: 15px"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
@@ -485,23 +363,29 @@
customRender: (text: any) => {
return text.index + 1;
},
width: 100,
},
{
title: '能源种类',
dataIndex: 'energyType',
width: 100,
ellipsis: true,
},
{
title: '计量单位',
className: 'unitName',
dataIndex: 'unitName',
width: 100,
},
{
title: '全年',
dataIndex: 'yearly',
width: 100,
},
{
title: '1月',
dataIndex: 'jan',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -522,6 +406,7 @@
{
title: '2月',
dataIndex: 'feb',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -542,6 +427,7 @@
{
title: '3月',
dataIndex: 'mar',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -562,6 +448,7 @@
{
title: '4月',
dataIndex: 'apr',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -582,6 +469,7 @@
{
title: '5月',
dataIndex: 'may',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -602,6 +490,7 @@
{
title: '6月',
dataIndex: 'jun',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -622,6 +511,7 @@
{
title: '7月',
dataIndex: 'jul',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -642,6 +532,7 @@
{
title: '8月',
dataIndex: 'aug',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -662,6 +553,7 @@
{
title: '9月',
dataIndex: 'sep',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -682,6 +574,7 @@
{
title: '10月',
dataIndex: 'oct',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -702,6 +595,7 @@
{
title: '11月',
dataIndex: 'nov',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -722,6 +616,7 @@
{
title: '12月',
dataIndex: 'dec',
width: 100,
customRender: (value) => {
let text;
let color;
@@ -878,6 +773,12 @@
? item.children.map((child) => ({
value: child.id,
label: child.pointName,
children: child.children
? child.children.map((childs) => ({
value: childs.id,
label: childs.pointName,
}))
: [],
}))
: [],
}));

View File

@@ -82,7 +82,9 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<div class="editTitle"><div class="title">编辑</div></div>
<div class="editTitle">
<div class="title">{{ text }}</div>
</div>
<a-form
ref="formRef"
:model="formState"
@@ -162,6 +164,7 @@
return http.post(api, params);
};
const mainRef = ref();
const text = ref('新增');
// 数结构
const x = 3;
const y = 2;
@@ -290,6 +293,7 @@
name: 'userAdd',
type: 'primary',
handle: () => {
text.value = '新增';
visible.value = true;
// getNewTable();
},
@@ -345,6 +349,7 @@
formState.value.emissionFactors = record.emissionFactors;
formState.value.dateRange = [record.startTime, record.endTime];
formState.value.factorId = record.factorId;
text.value = '编辑';
visible.value = true;
emissionSources.value = record.emissionSources;
queryData.value.emissionSources = emissionSources.value;
@@ -493,6 +498,7 @@
const onClose = () => {
visible.value = false;
selectedRowKeys.value = [];
newTableData.value = [];
formState.value = {};
selectData.value = '';
formRef.value.resetFields();

View File

@@ -45,7 +45,7 @@
</template>
</a-tree>
</div>
<div class="bottom">
<!-- <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">
@@ -53,80 +53,88 @@
<div :class="{ tplx: isClickedTplx }" @click="showTplx">碳排流向</div>
</div>
</a-form>
</div>
</div> -->
</div>
<div class="right">
<div style="display: flex">
<div class="ns-table-title ns-title-extra-box">排放源</div>
<a-button type="primary" style="margin-left: 12px" @click="changeParentData">返回</a-button>
</div>
<div style="display: flex; height: 100%" v-if="fillInPage">
<div class="mainLeft">
<a-tree
:expandedKeys="expandedKeysR"
:selectedKeys="selectedKeysR"
:checkedKeys="checkedKeys"
:tree-data="treeData"
@select="onSelectR"
block-node>
<template #title="data">
<div class="treeRow">
<div>
<span>{{ data.emissionSource }}</span>
</div>
<div class="actionMore">
<EditOutlined @click="editUnit(data)" />
<MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
</div>
<a-button
type="primary"
@click="changeParentData"
style="position: absolute; right: 25px; top: 10px; z-index: 99">
返回
</a-button>
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange" style="height: 100%">
<a-tab-pane key="1" tab="排放源">
<div style="display: flex; height: 100%">
<div class="mainLeft">
<a-tree
:expandedKeys="expandedKeysR"
:selectedKeys="selectedKeysR"
:checkedKeys="checkedKeys"
:tree-data="treeData"
@select="onSelectR"
block-node>
<template #title="data">
<div class="treeRow">
<div>
<span>{{ data.emissionSource }}</span>
</div>
<div class="actionMore">
<EditOutlined @click="editUnit(data)" />
<MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
</div>
</div>
</template>
</a-tree>
<div class="addTreeNode">
<a-button type="primary" style="width: 100%" @click="addTreeNodeData"
>新增</a-button
>
</div>
</template>
</a-tree>
<div class="addTreeNode">
<a-button type="primary" style="width: 100%" @click="addTreeNodeData">新增</a-button>
</div>
<div class="mainRight">
<a-table
:columns="columns"
:data-source="data"
:pagination="false"
bordered
size="middle"
:scroll="{ y: 500 }">
<template #title>
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
</template>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'dataSources'">
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
</template>
<template v-if="column.dataIndex === 'carbonSource'">
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
</template>
<template v-if="column.key === 'action'">
<span>
<a @click="edit(record)">编辑</a>
</span>
</template>
</template>
</a-table>
</div>
</div>
</div>
<div class="mainRight">
</a-tab-pane>
<a-tab-pane key="2" tab="排放统计">
<a-table
:columns="columns"
:data-source="data"
:pagination="false"
:columns="pftjColumn"
:data-source="pftjData"
bordered
size="middle"
:scroll="{ y: 480 }">
<template #title>
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
</template>
:pagination="false"
:scroll="{ x: 2000, y: 500 }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'dataSources'">
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
</template>
<template v-if="column.dataIndex === 'carbonSource'">
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
</template>
<template v-if="column.key === 'action'">
<span>
<a @click="edit(record)">编辑</a>
</span>
</template>
{{ text || '-' }}
</template>
</a-table>
</div>
</div>
<div v-if="isClickedPftj">
<a-table
:columns="pftjColumn"
:data-source="pftjData"
bordered
:pagination="false"
:scroll="{ x: 2000 }">
<template #bodyCell="{ column, text, record }">
{{ text || '-' }}
</template>
</a-table>
</div>
<div v-if="isClickedTplx" style="width: 100%; height: 100%">
<div ref="tplxChart" style="width: 100%; height: 68vh"></div>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="碳排流向">
<div ref="tplxChart" style="width: 100%; height: 68vh"></div>
</a-tab-pane>
</a-tabs>
</div>
<!-- 类别配置 -->
<a-drawer
@@ -240,7 +248,7 @@
</a-drawer>
<!-- 点击编辑弹出框 -->
<a-drawer
:width="700"
:width="500"
:visible="editData"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
@@ -252,7 +260,7 @@
:label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="数据来源" name="dataSources">
<a-select
ref="select"
@@ -264,14 +272,29 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="消耗量" name="consumption">
<ns-input v-model:value="editFormState.consumption" :disabled="canEdit" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="automatic">
<a-col :span="12">
<a-col :span="24">
<a-form-item label="能耗类型">
<a-select
v-model:value="editFormState.energyConsumptionType"
@change="changeEnergyType"
placeholder="请选择能耗类型">
<a-select-option
v-for="(item, index) in energyTypeOptions"
:key="index"
:value="item.dicKey">
{{ item.cnValue }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item ref="name" label="采集节点" name="collectionNode">
<a-tree-select
v-model:value="editFormState.collectionNode"
@@ -283,12 +306,12 @@
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="因子值" name="factorId">
<ns-input v-model:value="editFormState.factorId" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="关键字" name="emissionFactors">
<a-input-search
v-model:value="editFormState.emissionFactors"
@@ -303,7 +326,8 @@
:data-source="newTableData"
bordered
rowKey="id"
:scroll="{ y: 400 }"
:scroll="{ y: 300 }"
size="small"
style="margin-bottom: 10px"
:rowSelection="{
selectedRowKeys: selectedRowKeysEdit,
@@ -313,25 +337,28 @@
:pagination="false">
</a-table>
<a-pagination
:current="queryParams.pageNum"
:current="queryData.pageNum"
:total="total"
:page-size="queryParams.pageSize"
:page-size="queryData.pageSize"
:pageSizeOptions="['5']"
style="display: flex; justify-content: center; margin-top: 16px"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
<a-upload
v-model:file-list="fileList"
<a-upload-dragger
v-model:fileList="fileList"
accept=".pdf"
name="file"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
@remove="handleFileRemove"
:before-upload="beforeUpload"
@change="handleChange">
<a-button>
<upload-outlined></upload-outlined>
点击上传凭证
</a-button>
</a-upload>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-hint">1.仅支持pdf格式文件或文件夹</p>
<p class="ant-upload-hint">2.文件名命名规则为能源种类_年份</p>
<p class="ant-upload-hint">3.每次上传自动覆盖</p>
</a-upload-dragger>
<template #footer>
<a-button style="margin-right: 8px" @click="onCloseEditData">取消</a-button>
<a-button type="primary" @click="submitEditData">确定</a-button>
@@ -341,15 +368,16 @@
</template>
<script lang="ts" setup>
import { ref, watch, toRaw, defineEmits } from 'vue';
import { ref, watch, toRaw, defineEmits, nextTick } from 'vue';
import { http } from '/nerv-lib/util/http';
import { Pagination, Modal, message } from 'ant-design-vue';
import { Pagination, Modal, message, Upload } from 'ant-design-vue';
import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
import {
EditOutlined,
PlusCircleOutlined,
MinusCircleOutlined,
UploadOutlined,
InboxOutlined,
} from '@ant-design/icons-vue';
import * as echarts from 'echarts';
import { voucherColumns, drawerColumns } from '../config';
@@ -361,6 +389,7 @@
} from '/@/api/carbonEmissionFactorLibrary';
import { group } from '/@/api/deviceManage';
import { debug, log } from 'node:console';
import { dict } from '/@/api';
defineOptions({
energyType: 'fillInPage', // 与页面路由name一致缓存才可生效
components: {
@@ -382,12 +411,12 @@
type: String,
},
});
const activeKey = ref('1');
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId: orgId.value }) => {
return http.post(api, params);
const fetch = (api, params = { orgId: orgId.value }, config) => {
return http.post(api, params, config);
};
// 左侧树结构
const x = 3;
@@ -865,15 +894,17 @@
selectedRowKeys.value.forEach((item) => {
deleteIds.value.append('ids', item);
});
fetch(uploadPic.downloadZip, deleteIds.value)
const config = {
responseType: 'blob',
};
fetch(uploadPic.downloadZip, deleteIds.value, config)
.then((res) => {
// 创建一个 URL 对象,指向图片数据的 blob
const url = window.URL.createObjectURL(new Blob([res.data]));
const url = window.URL.createObjectURL(new Blob([res]));
// 创建一个 <a> 标签,用于触发下载
const link = document.createElement('a');
link.href = url;
debugger;
link.setAttribute('download', ''); // 设置下载的文件名
link.setAttribute('download', '碳盘查凭证.zip'); // 设置下载的文件名
document.body.appendChild(link);
link.click();
@@ -910,10 +941,15 @@
const queryData = ref({
orgId: orgId.value,
pageNum: 1,
pageSize: 999,
pageSize: 5,
});
const edit = (record) => {
getDictList();
const energyTypeOptions = ref([]);
const acquisitionDate = ref();
const edit = async (record) => {
acquisitionDate.value = record.acquisitionDate;
// 获取能耗类型
const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
energyTypeOptions.value = options.data.data;
getNewTable();
editFormState.value.id = record.id;
editFormState.value.dataSources = record.dataSources;
@@ -949,46 +985,66 @@
if (value === '3') {
canEdit.value = true;
automatic.value = true;
} else {
automatic.value = false;
}
};
// 定义采集节点数的变量
const collectingNodes = ref<TreeSelectProps['treeData']>([]);
const getDictList = () => {
const getTypeConsume = ref();
const changeEnergyType = (value) => {
getTypeConsume.value = value;
// 获取自动采集节点的数据
fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE', orgId: orgId.value }).then(
(res) => {
collectingNodes.value = res.data;
collectingNodes.value = collectingNodes.value.map((item) => ({
value: item.id,
label: item.pointName,
children: item.children
? item.children.map((child) => ({
value: child.id,
label: child.pointName,
}))
: [],
}));
},
);
fetch(group.queryDeviceGroupTree, { energyType: value, orgId: orgId.value }).then((res) => {
collectingNodes.value = res.data;
collectingNodes.value = collectingNodes.value.map((item) => ({
value: item.id,
label: item.pointName,
children: item.children
? item.children.map((child) => ({
value: child.id,
label: child.pointName,
}))
: [],
}));
});
};
const selectNode = (value) => {
debugger;
const getConsumeData = ref({
acquisitionDate: acquisitionDate.value,
collectionNode: value,
orgId: orgId.value,
energyConsumptionType: getTypeConsume.value,
});
fetch(carbonInventoryCheck.nodeCancellationConsumption, getConsumeData.value).then((res) => {
editFormState.value.consumption = res.data;
});
};
// 上传附件
const fileList = ref<UploadProps['fileList']>([]);
const isValidFileName = (filename: string): boolean => {
const regex = /^[\s\S]+_\d{4}\.pdf$/;
return regex.test(filename);
};
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
const filename = file.name;
if (!isValidFileName(filename)) {
message.error('文件名不符合规则');
return Upload.LIST_IGNORE; // 阻止文件上传
}
return false;
};
const handleChange = (info: UploadChangeParam) => {
fileList.value = [...info.fileList];
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
// fileList.value = [...info.fileList];
const { fileList: newFileList } = info;
// 删除fileList中的第一条数据
if (newFileList.length > 1) {
delIds.value.push(info.fileList[0].uid);
newFileList.shift(); // 删除第一条数据
}
// 更新fileList
fileList.value = [...newFileList];
};
const delIds = ref([]);
const handleFileRemove = (file) => {
@@ -1062,8 +1118,8 @@
};
// 分页器
const onChange = (pageNumber: number, size: number) => {
queryParams.value.pageNum = pageNumber;
queryParams.value.pageSize = size;
queryData.value.pageNum = pageNumber;
queryData.value.pageSize = size;
getNewTable();
};
// 点击切换排放统计/碳排流向
@@ -1388,6 +1444,20 @@
chartInstance = echarts.init(tplxChart.value);
chartInstance.setOption(option);
};
const handleTabChange = (key) => {
console.log('Tab changed:', key);
// 在这里可以执行需要在页面切换时执行的逻辑
if (key === '2') {
nextTick(() => {
getEmissionStatistic();
});
} else if (key === '3') {
nextTick(() => {
getCarbonFlowDirection();
});
}
};
// 点击返回
const emit = defineEmits(['change-data']);
const changeParentData = () => {
@@ -1413,7 +1483,7 @@
flex-direction: column;
.top {
position: relative;
height: 80%;
height: 100%;
margin-bottom: 20px;
.ns-form-title {
font-weight: bold;
@@ -1492,10 +1562,13 @@
flex: 1;
min-width: 0;
height: 100%;
padding: @ns-gap;
background-color: @white;
border-radius: @ns-border-radius;
box-shadow: @ns-content-box-shadow;
position: relative;
:deep(.ant-tabs-content-holder) {
padding: 20px;
}
.ns-table-title {
text-align: left;
font-size: 16px;
@@ -1552,4 +1625,8 @@
margin-left: 10%;
flex-direction: column;
}
:deep(.ant-upload.ant-upload-drag) {
height: 18vh;
margin-top: 10px;
}
</style>

View File

@@ -1,51 +1,79 @@
<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">{{ props.year }}年济阳站碳盘查报告</div>
<div class="standard">
<span>适用标准ISO 14064-1</span>
<a-button type="primary" style="margin-left: 12px" @click="openCategoryConfig"
>类别配置</a-button
>
</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="expandedKeysL"
:selectedKeys="selectedKeysL"
:auto-expand-parent="autoExpandParent"
:tree-data="gData"
v-if="gData && gData.length > 0"
:height="233"
show-line
style="padding: 0 16px !important"
@expand="onExpandL"
@select="onSelectL"
block-node>
<template #title="{ cnValue }">
<span v-if="cnValue && searchValue && cnValue.indexOf(searchValue) > -1">
{{ cnValue.substring(0, cnValue.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ cnValue.substring(cnValue.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ cnValue }}</span>
</template>
</a-tree>
<div class="totalTitle">
<div class="ns-form-title">
<div class="title">{{ props.year }}年济阳站碳盘查报告</div>
<div class="standard" style="display: flex; align-items: center">
<img
width="11px"
height="11px"
style="margin-right: 5px"
src="../../../../../src/icon/carbonInventoryCheck.svg" />
<span
style="
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
line-height: 16.8px;
color: rgba(67, 136, 251, 1);
text-align: left;
vertical-align: top;
">
适用标准ISO 14064-1
</span>
<a-button type="primary" @click="changeParentData" ghost style="margin-left: 6px">
返回
</a-button>
</div>
</div>
<!-- <div class="bottom">
</div>
<div style="display: flex; height: 100%">
<div class="left">
<div class="top">
<a-form style="width: 100%; margin: 0 auto">
<div class="ns-form-title">
<div>能源类别</div>
<div class="standard">
<a-button type="primary" style="margin-left: 12px" @click="openCategoryConfig">
类别配置
</a-button>
</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="expandedKeysL"
:selectedKeys="selectedKeysL"
:auto-expand-parent="autoExpandParent"
:tree-data="gData"
v-if="gData && gData.length > 0"
:height="233"
show-line
style="padding: 0 16px !important"
@expand="onExpandL"
@select="onSelectL"
block-node>
<template #title="{ cnValue }">
<span v-if="cnValue && searchValue && cnValue.indexOf(searchValue) > -1">
{{ cnValue.substring(0, cnValue.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ cnValue.substring(cnValue.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ cnValue }}</span>
</template>
</a-tree>
<a-empty v-else />
</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">
@@ -54,87 +82,89 @@
</div>
</a-form>
</div> -->
</div>
<div class="right">
<a-button
type="primary"
@click="changeParentData"
style="position: absolute; right: 25px; top: 10px; z-index: 99">
返回
</a-button>
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange" style="height: 100%">
<a-tab-pane key="1" tab="排放源">
<div style="display: flex; height: 100%">
<div class="mainLeft">
<a-tree
:expandedKeys="expandedKeysR"
:selectedKeys="selectedKeysR"
:checkedKeys="checkedKeys"
:tree-data="treeData"
@select="onSelectR"
block-node>
<template #title="data">
<div class="treeRow">
<div>
<span>{{ data.emissionSource }}</span>
</div>
<div class="right">
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange" style="height: 100%">
<a-tab-pane key="1" tab="排放源">
<div style="display: flex; height: 100%">
<div class="mainLeft">
<a-tree
v-if="treeData && treeData.length > 0"
:expandedKeys="expandedKeysR"
:selectedKeys="selectedKeysR"
:checkedKeys="checkedKeys"
:tree-data="treeData"
@select="onSelectR"
block-node>
<template #title="data">
<div class="treeRow">
<div>
<span>{{ data.emissionSource }}</span>
</div>
<div class="actionMore">
<EditOutlined @click="editUnit(data)" />
<MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
</div>
</div>
<div class="actionMore">
<EditOutlined @click="editUnit(data)" />
<MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
</div>
</div>
</template>
</a-tree>
<div class="addTreeNode">
<a-button type="primary" style="width: 100%" @click="addTreeNodeData"
>新增</a-button
>
</template>
</a-tree>
<a-empty v-else />
<div class="addTreeNode">
<a-button type="primary" style="width: 100%" @click="addTreeNodeData">
新增
</a-button>
</div>
</div>
<div class="mainRight">
<a-table
:columns="columns"
v-if="data && data.length > 0"
:data-source="data"
:pagination="false"
bordered
size="middle"
:scroll="{ y: 500 }">
<template #title>
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
</template>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'dataSources'">
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
</template>
<template v-if="column.dataIndex === 'carbonSource'">
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
</template>
<template v-if="column.key === 'action'">
<span>
<a @click="edit(record)">编辑</a>
</span>
</template>
</template>
</a-table>
<a-empty v-else />
</div>
</div>
<div class="mainRight">
<a-table
:columns="columns"
:data-source="data"
:pagination="false"
bordered
size="middle"
:scroll="{ y: 500 }">
<template #title>
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
</template>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'dataSources'">
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
</template>
<template v-if="column.dataIndex === 'carbonSource'">
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
</template>
<template v-if="column.key === 'action'">
<span>
<a @click="edit(record)">编辑</a>
</span>
</template>
</template>
</a-table>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="排放统计">
<a-table
:columns="pftjColumn"
:data-source="pftjData"
bordered
:pagination="false"
:scroll="{ x: 2000, y: 500 }">
<template #bodyCell="{ column, text, record }">
{{ text || '-' }}
</template>
</a-table>
</a-tab-pane>
<a-tab-pane key="3" tab="碳排流向">
<div ref="tplxChart" style="width: 100%; height: 68vh"></div>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
<a-tab-pane key="2" tab="排放统计">
<a-table
:columns="pftjColumn"
v-if="pftjData && pftjData.length > 0"
:data-source="pftjData"
bordered
:pagination="false"
:scroll="{ x: 2000, y: 500 }">
<template #bodyCell="{ column, text, record }">
{{ text || '-' }}
</template>
</a-table>
<a-empty v-else />
</a-tab-pane>
<a-tab-pane key="3" tab="碳排流向">
<div v-if="showChart" ref="tplxChart" style="width: 100%; height: 68vh"></div>
<a-empty v-else />
</a-tab-pane>
</a-tabs>
</div>
</div>
<!-- 类别配置 -->
<a-drawer
@@ -144,16 +174,18 @@
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
destroyOnClose
title="类别配置"
@close="closeCategoryConfig">
<div class="search">
<a-input-search
v-model:value="searchcategoryConfig"
placeholder="请输入类别名称"
style="width: 250px"
@search="onSearch" />
<div class="ns-form-title" style="margin-left: 10%">
<div class="title">类别设置</div>
</div>
<div class="treePart">
<div class="search">
<a-input-search
v-model:value="searchcategoryConfig"
placeholder="请输入类别名称"
style="width: 250px"
@search="onSearch" />
</div>
<a-tree
:expanded-keys="categoryExpandedKeys"
:selectedKeys="categorySelectedKeys"
@@ -186,6 +218,9 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<div class="ns-form-title" style="display: flex">
<div class="title">新增</div>
</div>
<a-form
ref="formRef"
:model="formState"
@@ -229,6 +264,9 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onCloseVoucher">
<div class="ns-form-title">
<div class="title">凭证列表</div>
</div>
<a-table
:columns="voucherColumns"
:data-source="voucherData"
@@ -254,6 +292,9 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onCloseEditData">
<div class="ns-form-title-edit">
<div class="title">编辑</div>
</div>
<a-form
ref="editFormRef"
:model="editFormState"
@@ -321,6 +362,9 @@
</a-col>
</a-row>
</a-form>
<div class="ns-form-title-edit" style="display: flex">
<div class="titleEdit">因子列表</div>
</div>
<a-table
:columns="drawerColumns"
:data-source="newTableData"
@@ -345,6 +389,9 @@
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
<div class="ns-form-title-edit" style="display: flex">
<div class="titleEdit">凭证上传</div>
</div>
<a-upload-dragger
v-model:fileList="fileList"
accept=".pdf"
@@ -658,8 +705,8 @@
// 新增/编辑排放源树节点
const addTreeNodeVisible = ref(false);
const formRef = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 19 };
const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const formState = ref({
orgId: orgId.value,
year: props.year,
@@ -1148,10 +1195,16 @@
});
const linksData = ref([]);
const datalist = ref([]);
const showChart = ref(true);
const getCarbonFlowDirection = () => {
fetch(carbonInventoryCheck.carbonFlowDirection, queryFlowDirection.value).then((res) => {
console.log(res);
linksData.value = res.data[0];
if (linksData.value[0].value !== 0) {
showChart.value = true;
} else {
showChart.value = false;
}
datalist.value = res.data[1];
drawEcharts();
});
@@ -1467,14 +1520,18 @@
<style lang="less" scoped>
.main {
background-color: @ns-content-bg;
display: flex;
background-color: #ffffff;
height: 100%;
padding: 16px;
}
.left {
width: 300px;
margin-right: @ns-gap;
min-width: fit-content;
height: 93%;
border-radius: 8px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
> div {
background-color: @white;
}
@@ -1491,7 +1548,6 @@
padding: 16px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid #e9e9e9;
}
.title {
text-align: left;
@@ -1561,11 +1617,10 @@
.right {
flex: 1;
min-width: 0;
height: 100%;
background-color: @white;
border-radius: @ns-border-radius;
box-shadow: @ns-content-box-shadow;
position: relative;
height: 93%;
border-radius: 8px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
:deep(.ant-tabs-content-holder) {
padding: 20px;
}
@@ -1611,17 +1666,17 @@
}
.search {
width: 70%;
height: 5vh;
display: flex;
align-items: center;
margin-left: 10%;
justify-content: center;
}
.treePart {
width: 70%;
height: 100%;
display: flex;
border: 1px solid #bfbfbf;
border: 1px solid rgba(235, 238, 245, 1);
border-radius: 8px;
margin-left: 10%;
flex-direction: column;
}
@@ -1629,4 +1684,48 @@
height: 18vh;
margin-top: 10px;
}
.ns-form-title {
font-weight: bold;
user-select: text;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ns-form-title-edit {
font-weight: bold;
user-select: text;
}
.title {
text-align: left;
height: 32px;
line-height: 32px;
font-weight: bold;
user-select: text;
position: relative;
padding-left: 9px;
}
.titleEdit {
text-align: left;
height: 32px;
line-height: 32px;
font-weight: bold;
user-select: text;
position: relative;
}
.title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 13px;
width: 3px;
border-radius: 1px;
background-color: #2778ff;
}
:deep(.ant-table-title) {
display: flex;
justify-content: right;
}
</style>

View File

@@ -20,6 +20,7 @@
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<div class="ns-form-title"><div class="title">{{text}}</div></div>
<a-form
ref="formRef"
:model="formState"
@@ -78,8 +79,9 @@
const visible = ref(false);
const formState = ref({});
const formRef = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 19 };
const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const text = ref('新增报告')
const disabledDate = (current: moment.Moment | null) => {
if (formState.value.reportPeriod === '2') {
const year = current.year();
@@ -140,6 +142,7 @@
name: 'userAdd',
type: 'primary',
handle: () => {
text.value = '新增报告'
visible.value = true;
},
},
@@ -183,6 +186,7 @@
label: '编辑',
name: 'userEdit',
handle: (record: any) => {
text.value = '编辑报告'
visible.value = true;
fetch(carbonInventoryCheck.findById, { id: record.id }).then((res) => {
formState.value = res.data;
@@ -274,4 +278,30 @@
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.ns-form-title {
font-weight: bold;
user-select: text;
margin-bottom: 16px;
}
.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;
}
</style>

View File

@@ -2,25 +2,37 @@
<div class="totalContant">
<div class="ns-form-title">
<div class="title">
<span>查询</span>
<a-date-picker
v-if="selectedTime"
style="margin-left: 5%"
valueFormat="YYYY"
v-model:value="selectYear"
@change="changeYear"
picker="year" />
<a-date-picker
v-else
style="margin-left: 5%"
valueFormat="YYYY-MM"
v-model:value="selectMonth"
@change="changeMonth"
picker="month" />
<span>统计数据</span>
</div>
</div>
<div
style="
display: flex;
width: 100%;
height: 5%;
align-items: center;
justify-content: space-between;
margin-bottom: 1%;
">
<a-date-picker
v-if="selectedTime"
valueFormat="YYYY"
v-model:value="selectYear"
@change="changeYear"
picker="year" />
<a-date-picker
v-else
valueFormat="YYYY-MM"
v-model:value="selectMonth"
@change="changeMonth"
picker="month" />
<div class="operation">
<div class="month" :style="monthStyles" @click="changeToMonth"><span></span></div>
<div class="year" :style="yearStyles" @click="changeToYear"><span></span></div>
<div class="month" :style="monthStyles" @click="changeToMonth">
<span :style="monthText">本月</span>
</div>
<div class="year" :style="yearStyles" @click="changeToYear">
<span :style="yearText">本年</span>
</div>
</div>
</div>
<div class="contant">
@@ -62,8 +74,10 @@
const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
const selectMonth = ref<Dayjs>(dayjs().startOf('year').month(0));
// 年/月切换
const monthStyles = ref('background: #f2f2f2');
const monthStyles = ref('background: transparent');
const yearStyles = ref('background: #2778ff');
const monthText = ref('color: #2778ff');
const yearText = ref('color: #ffffff');
const selectedTime = ref(true);
const changeMonth = () => {
queryParams.value.yearMonth = selectMonth.value;
@@ -71,7 +85,9 @@
};
const changeToMonth = () => {
monthStyles.value = 'background: #2778ff';
yearStyles.value = 'background: #f2f2f2';
yearStyles.value = 'background: transparent';
monthText.value = 'color: #ffffff';
yearText.value = 'color: #2778ff';
queryParams.value.yearAndMonth = 'month';
queryParams.value.yearMonth = selectMonth.value.format('YYYY-DD');
columns.value[2].title = '月份';
@@ -84,8 +100,10 @@
getTableData();
};
const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2';
monthStyles.value = 'background:transparent';
yearStyles.value = 'background: #2778ff';
monthText.value = 'color: #2778ff';
yearText.value = 'color: #ffffff';
queryParams.value.yearAndMonth = 'year';
delete queryParams.value.yearMonth;
// queryParams.value.year = selectYear.value;
@@ -218,6 +236,7 @@
const columns = ref([
{
title: '序号',
width: 100,
customRender: (text: any) => {
return text.index + 1;
},
@@ -301,32 +320,32 @@
border-radius: 1px;
background-color: #2778ff;
}
.operation {
display: flex;
margin-right: 10px;
font-weight: 400;
height: 70%;
cursor: pointer;
width: 10%;
}
.month {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
// background: #f2f2f2;
}
.year {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
// background: #2778ff;
}
}
.operation {
display: flex;
margin-right: 10px;
font-weight: 400;
height: 90%;
cursor: pointer;
width: 10%;
border-radius: 4px;
border: 1px solid rgba(39, 120, 255, 1);
}
.month {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.year {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.contant {
width: 100%;
height: calc(100% - 5vh);
height: calc(94% - 5vh);
.chartsPart {
width: 100%;
height: 35%;
@@ -336,6 +355,7 @@
width: 19%;
height: 100%;
background: rgba(39, 120, 255, 0.05);
border-radius: 8px;
}
}
.tablePart {

View File

@@ -88,7 +88,6 @@
selectedRowKeys: selectedRowKeys,
onChange: onSelectionChange,
}"
:scroll="{ x: 1300, y: 400 }"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
@@ -209,6 +208,7 @@
import type { UnwrapRef } from 'vue';
import { ref, defineEmits, reactive, toRaw } from 'vue';
import { http } from '/nerv-lib/util/http';
import { message } from 'ant-design-vue';
import {
CaretUpOutlined,
CaretDownOutlined,
@@ -402,7 +402,7 @@
// 在这里可以执行需要在页面切换时执行的逻辑
if (key === '1') {
} else if (key === '2') {
if (selectedRowKeysSet.value) {
if (selectedRowKeysSet.value.length !== 0) {
fetch(carbonPlanning.monthBenchmarkSetting, {
type: props.type,
referenceYear: selectedRowKeysSet.value[0],
@@ -413,6 +413,7 @@
monthData.value = res.data;
});
} else {
message.warning('请先选择年基准值!');
activeKey.value = '1';
}
}
@@ -420,6 +421,16 @@
//开关
const changeSwitch = (data: any) => {
data.isAutoObtained = data.isAutoObtained === 0 ? 1 : 0;
if (data.isAutoObtained === 0) {
fetch(carbonPlanning.autoObtained, {
type: props.type,
itemizeId: props.parentId,
orgId: orgId.value,
yearMonth: data.yearMonth,
}).then((res) => {
data.referenceValue = res.data.referenceValue;
});
}
monthData.value = [...monthData.value];
console.log(monthData.value);
};
@@ -473,11 +484,18 @@
itemizeId: props.parentId,
}).then((res) => {
visible.value = false;
activeKey.value = '1';
selectedRowKeysSet.value = [];
getTableData();
});
};
const onClose = () => {
activeKey.value = '1';
selectedRowKeysSet.value = [];
if (selectYear.value) {
selectYear.value = '';
queryData.value.referenceYear = selectYear.value;
}
visible.value = false;
};
// echarts图
@@ -766,9 +784,12 @@
}
.model {
width: 16%;
height: 90%;
height: 100%;
background: #f7f9ff;
padding: 12px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(222, 255, 246, 1) 100%);
border: 1px solid rgba(18, 174, 132, 1);
.quantity {
font-size: 12px;
font-weight: 400;

View File

@@ -4,25 +4,37 @@
<div class="title">
<span>统计数据</span>
<a-button style="margin-left: 5%" type="primary" @click="addNode">新增节点</a-button>
<a-date-picker
v-if="selectedTime"
style="margin-left: 5%"
v-model:value="selectYearValue"
:disabled-date="disabledDate"
valueFormat="YYYY"
@change="changeYear"
picker="year" />
<a-date-picker
v-else
style="margin-left: 5%"
v-model:value="selectMonthValue"
valueFormat="YYYY-MM"
@change="changeMonth"
picker="month" />
</div>
</div>
<div
style="
display: flex;
width: 100%;
height: 5%;
align-items: center;
justify-content: space-between;
margin-bottom: 1%;
">
<a-date-picker
v-if="selectedTime"
v-model:value="selectYearValue"
:disabled-date="disabledDate"
valueFormat="YYYY"
@change="changeYear"
picker="year" />
<a-date-picker
v-else
v-model:value="selectMonthValue"
valueFormat="YYYY-MM"
@change="changeMonth"
picker="month" />
<div class="operation">
<div class="month" :style="monthStyles" @click="changeToMonth"><span></span></div>
<div class="year" :style="yearStyles" @click="changeToYear"><span></span></div>
<div class="month" :style="monthStyles" @click="changeToMonth">
<span :style="monthText">本月</span>
</div>
<div class="year" :style="yearStyles" @click="changeToYear">
<span :style="yearText">本年</span>
</div>
</div>
</div>
<div class="contant">
@@ -38,8 +50,7 @@
:pagination="false"
row-key="itemizeId"
:onRow="onRow"
:customRow="customRow"
:scroll="{ x: 1300, y: 250 }">
:customRow="customRow">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
<span>
@@ -61,6 +72,9 @@
</div>
<!-- 新增节点 -->
<a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
<div class="ns-form-title">
<div class="title">新增节点</div>
</div>
<a-tree
:expanded-keys="expandedKeys"
:selectedKeys="selectedKeys"
@@ -124,12 +138,16 @@
};
// 年/月切换
const monthStyles = ref('background: #f2f2f2');
const monthStyles = ref('background: #transparent');
const yearStyles = ref('background: #2778ff');
const monthText = ref('color: #2778ff');
const yearText = ref('color: #ffffff');
const selectedTime = ref(true);
const changeToMonth = () => {
monthStyles.value = 'background: #2778ff';
yearStyles.value = 'background: #f2f2f2';
yearStyles.value = 'background: #transparent';
monthText.value = 'color: #ffffff';
yearText.value = 'color: #2778ff';
columns.value[2].title = '月份';
columns.value[2].dataIndex = 'yearMonth';
selectedTime.value = false;
@@ -138,8 +156,10 @@
getMonthPillarData();
};
const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2';
monthStyles.value = 'background: #transparent';
yearStyles.value = 'background: #2778ff';
monthText.value = 'color: #2778ff';
yearText.value = 'color: #ffffff';
columns.value[2].title = '年份';
columns.value[2].dataIndex = 'year';
selectedTime.value = true;
@@ -574,7 +594,9 @@
user-select: text;
position: relative;
padding-left: 9px;
width: 50%;
width: 100%;
display: flex;
justify-content: space-between;
}
.title::before {
content: '';
@@ -587,34 +609,35 @@
border-radius: 1px;
background-color: #2778ff;
}
.operation {
display: flex;
margin-right: 10px;
font-weight: 400;
height: 70%;
cursor: pointer;
width: 10%;
}
.month {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
// background: #f2f2f2;
}
.year {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
// background: #2778ff;
}
}
.operation {
display: flex;
margin-right: 10px;
font-weight: 400;
height: 90%;
cursor: pointer;
width: 10%;
border-radius: 4px;
border: 1px solid rgba(39, 120, 255, 1);
}
.month {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.year {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.contant {
width: 100%;
height: calc(100% - 5vh);
height: calc(94% - 5vh);
overflow-y: auto;
.chartsPart {
width: 100%;
width: 99%;
height: 40%;
display: flex;
justify-content: space-between;

View File

@@ -9,13 +9,13 @@
<a-tab-pane key="3" tab="用水量">
<category ref="useWaterRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="4" tab="供水量">
<a-tab-pane key="4" tab="用气量">
<category ref="provideWaterRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="5" tab="碳排">
<a-tab-pane key="5" tab="供热量">
<category ref="carbonEmissionsRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="6" tab="供热量">
<a-tab-pane key="6" tab="碳排量">
<category ref="provideHotRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
</a-tabs>
@@ -51,47 +51,47 @@
}
});
} else if (key === '2') {
tabId.value = 1;
energyType.value = 'ELECTRICITY_USAGE'
tabId.value = 4;
energyType.value = 'ELECTRICITY_USAGE';
nextTick(() => {
if (electricRef.value) {
electricRef.value.electricTotal = true
electricRef.value.electricTotal = true;
electricRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '3') {
tabId.value = 2;
energyType.value = 'WATER_USAGE'
tabId.value = 5;
energyType.value = 'WATER_USAGE';
nextTick(() => {
if (useWaterRef.value) {
useWaterRef.value.electricTotal = true
useWaterRef.value.electricTotal = true;
useWaterRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '4') {
tabId.value = 3;
energyType.value = 'gongshuiliang'
tabId.value = 6;
energyType.value = 'gongshuiliang';
nextTick(() => {
if (provideWaterRef.value) {
provideWaterRef.value.electricTotal = true
provideWaterRef.value.electricTotal = true;
provideWaterRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '5') {
tabId.value = 5;
energyType.value = 'CARBON_EMISSIONS'
tabId.value = 7;
energyType.value = 'CARBON_EMISSIONS';
nextTick(() => {
if (carbonEmissionsRef.value) {
carbonEmissionsRef.value.electricTotal = true
carbonEmissionsRef.value.electricTotal = true;
carbonEmissionsRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '6') {
tabId.value = 4;
energyType.value = 'HEAT_SUPPLY'
tabId.value = 8;
energyType.value = 'HEAT_SUPPLY';
nextTick(() => {
if (provideHotRef.value) {
provideHotRef.value.electricTotal = true
provideHotRef.value.electricTotal = true;
provideHotRef.value.changeToYear(); // 调用子组件的方法
}
});