修改优化
This commit is contained in:
fks-xuxinyue
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user