yebaochen
3 months ago
12 changed files with 2732 additions and 6 deletions
@ -1,8 +1,7 @@ |
|||
import type { App } from 'vue'; |
|||
import { Button } from './Button'; |
|||
import { Input, Layout } from 'ant-design-vue'; |
|||
import Antd from 'ant-design-vue'; |
|||
import VXETable from 'vxe-table'; |
|||
|
|||
export function registerGlobComp(app: App) { |
|||
app.use(Input).use(Button).use(Layout).use(VXETable); |
|||
app.use(Antd).use(VXETable); |
|||
} |
|||
|
|||
@ -0,0 +1,992 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div style="margin: 20px; border-radius: 10px; background: #fff"> |
|||
<div class="tabBox"> |
|||
<a-tabs v-model:activeKey="activeKey" size="large"> |
|||
<a-tab-pane key="1" tab="项目属性划定"> |
|||
<a-form |
|||
:model="projectType" |
|||
:label-col="{ span: 6 }" |
|||
:wrapper-col="{ span: 6 }" |
|||
autocomplete="off" |
|||
:rules="rule1" |
|||
> |
|||
<div class="title">项目信息</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="项目名称" name="projectName"> |
|||
<a-input |
|||
v-model:value="projectType.projectName" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="项目时期" name="projectDate"> |
|||
<a-date-picker |
|||
v-model:value="projectType.projectDate" |
|||
style="width: 360px" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="规划投资(万元)" name="planInvest"> |
|||
<a-input |
|||
v-model:value="projectType.planInvest" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="实际完成投资(万元)" name="acualInvest"> |
|||
<a-input |
|||
v-model:value="projectType.projectName" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="资金来源" name="investResource"> |
|||
<a-select |
|||
v-model:value="projectType.investResource" |
|||
style="width: 360px" |
|||
:options="investResourceOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="是否为规划内项目" name="ifPlan"> |
|||
<a-select |
|||
v-model:value="projectType.ifPlan" |
|||
style="width: 360px" |
|||
:options="ifPlanOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="批复等级" name="approvalLevel"> |
|||
<a-select |
|||
v-model:value="projectType.approvalLevel" |
|||
style="width: 360px" |
|||
:options="approvalLevelOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="前期设计" name="earlyDesign"> |
|||
<a-select |
|||
v-model:value="projectType.earlyDesign" |
|||
style="width: 360px" |
|||
:options="earlyDesignOptions" |
|||
mode="multiple" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="预期目标" name="expect"> |
|||
<a-input |
|||
v-model:value="projectType.expect" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属区县" name="district"> |
|||
<a-input |
|||
v-model:value="projectType.district" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属控制区" name="controlArea"> |
|||
<a-input |
|||
v-model:value="projectType.controlArea" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属小流域" name="riverBasin"> |
|||
<a-input |
|||
v-model:value="projectType.riverBasin" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="title">项目类别填报</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="城镇污水处理及配套" name="cityFomula"> |
|||
<a-select |
|||
v-model:value="projectType.cityFomula" |
|||
style="width: 360px" |
|||
:options="cityFomulaOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="河道整治" name="riverDeal"> |
|||
<a-select |
|||
v-model:value="projectType.riverDeal" |
|||
style="width: 360px" |
|||
:options="riverDealOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="农业农村面源污染治理" name="villageFomula"> |
|||
<a-select |
|||
v-model:value="projectType.villageFomula" |
|||
style="width: 360px" |
|||
:options="villageFomulaOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="饮用水源地保护建设" name="waterProtect"> |
|||
<a-select |
|||
v-model:value="projectType.waterProtect" |
|||
style="width: 360px" |
|||
:options="waterProtectOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="内源治理" name="internalDeal"> |
|||
<a-select |
|||
v-model:value="projectType.internalDeal" |
|||
style="width: 360px" |
|||
:options="internalDealOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="水资源综合利用及调度" name="overall"> |
|||
<a-select |
|||
v-model:value="projectType.overall" |
|||
style="width: 360px" |
|||
:options="overallOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="title">项目技术应用</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="水环境保护治理技术" name="projectTech"> |
|||
<a-cascader |
|||
v-model:value="projectType.projectTech" |
|||
:options="projectTechOptions" |
|||
placeholder="请选择" |
|||
style="width: 360px" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术名称" name="techName"> |
|||
<a-input |
|||
v-model:value="projectType.techName" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
|
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术成本(元/㎡)" name="techCost"> |
|||
<a-input |
|||
v-model:value="projectType.techCost" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
<span style="color: red">注：实际投资/占地面积</span> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="运行成本(元/㎡)" name="devCost"> |
|||
<a-input |
|||
v-model:value="projectType.devCost" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
<span style="color: red">注：实际投资/占地面积</span> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术适用性" name="techUsability"> |
|||
<a-select |
|||
v-model:value="projectType.techUsability" |
|||
style="width: 600px" |
|||
:options="techUsabilityOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术稳定性" name="techStability"> |
|||
<a-select |
|||
v-model:value="projectType.techStability" |
|||
style="width: 600px" |
|||
:options="techStabilityOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="管理操作难易程度" name="OperationLevel"> |
|||
<a-select |
|||
v-model:value="projectType.OperationLevel" |
|||
style="width: 600px" |
|||
:options="OperationLevelOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="title">工程内容</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="规划项目内容" name="projectContent"> |
|||
<a-input |
|||
v-model:value="projectType.projectContent" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="完工情况" name="projectProgress"> |
|||
<a-select |
|||
v-model:value="projectType.projectProgress" |
|||
style="width: 360px" |
|||
:options="projectProgressOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="验收方式" name="acceptMethod"> |
|||
<a-select |
|||
v-model:value="projectType.acceptMethod" |
|||
style="width: 360px" |
|||
:options="acceptMethodOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="运行效果" name="devResult"> |
|||
<a-input |
|||
v-model:value="projectType.devResult" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="运行情况" name="devStatus"> |
|||
<a-select |
|||
v-model:value="projectType.devStatus" |
|||
style="width: 360px" |
|||
:options="devStatusOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="目标实现" name="goal"> |
|||
<a-input |
|||
v-model:value="projectType.goal" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="百分制,例如80%" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="巡查模式" name="patrolType"> |
|||
<a-select |
|||
v-model:value="projectType.patrolType" |
|||
style="width: 360px" |
|||
:options="patrolTypeOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="管理模式" name="manageType"> |
|||
<a-select |
|||
v-model:value="projectType.manageType" |
|||
style="width: 360px" |
|||
:options="manageTypeOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="长期运营" name="longOperation"> |
|||
<a-select |
|||
v-model:value="projectType.longOperation" |
|||
style="width: 360px" |
|||
:options="longOperationOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="COD削减量(吨)" name="cod"> |
|||
<a-input |
|||
v-model:value="projectType.cod" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="TN削减量(吨)" name="tn"> |
|||
<a-input |
|||
v-model:value="projectType.tn" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="TP削减量(吨)" name="tp"> |
|||
<a-input |
|||
v-model:value="projectType.tp" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-form-item :wrapper-col="{ offset: 4, span: 8 }"> |
|||
<a-button type="primary" html-type="submit">提交</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="项目前期立项"> |
|||
<div v-for="item in earlySet" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="3" tab="联合体招投标"> |
|||
<div v-for="item in unitedTenders" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="4" tab="建设实施"> |
|||
<div v-for="item in buildEffect" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="5" tab="验收批复"> |
|||
<div v-for="item in acceptApproval" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="6" tab="运营管护"> |
|||
<div v-for="item in operationProtect" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</div> |
|||
</div> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
|
|||
const activeKey = ref<String>('1'); |
|||
//项目类别表单 |
|||
const projectType = reactive({ |
|||
projectName: '', |
|||
projectDate: '', |
|||
planInvest: '', |
|||
actualInvest: '', |
|||
investResource: '', |
|||
ifPlan: '', |
|||
approvalLevel: '', |
|||
expect: '', |
|||
earlyDesign: [], |
|||
district: '', |
|||
controlArea: '', |
|||
riverBasin: '', |
|||
cityFomula: '', |
|||
riverDeal: '', |
|||
villageFomula: '', |
|||
waterProtect: '', |
|||
internalDeal: '', |
|||
overall: '', |
|||
projectTech: '', |
|||
techName: '', |
|||
techCost: '', |
|||
devCost: '', |
|||
techUsability: '', |
|||
techStability: '', |
|||
OperationLevel: '', |
|||
projectContent: '', |
|||
projectProgress: '', |
|||
acceptMethod: '', |
|||
devResult: '', |
|||
devStatus: '', |
|||
goal: '', |
|||
patrolType: '', |
|||
manageType: '', |
|||
longOperation: '', |
|||
cod: '', |
|||
tn: '', |
|||
tp: '', |
|||
}); |
|||
//Options |
|||
const investResourceOptions = [ |
|||
{ |
|||
value: '资金不足而搁置', |
|||
}, |
|||
{ |
|||
value: '自筹资金且无法保障', |
|||
}, |
|||
{ |
|||
value: '自筹资金且充足', |
|||
}, |
|||
{ |
|||
value: '市、区级政府专项资金', |
|||
}, |
|||
{ |
|||
value: '国家、省级专项资金', |
|||
}, |
|||
]; |
|||
const ifPlanOptions = [ |
|||
{ |
|||
value: '是', |
|||
}, |
|||
{ |
|||
value: '否', |
|||
}, |
|||
]; |
|||
const approvalLevelOptions = [ |
|||
{ |
|||
value: '审批材料不完整', |
|||
}, |
|||
{ |
|||
value: '区级批复', |
|||
}, |
|||
{ |
|||
value: '市级批复', |
|||
}, |
|||
{ |
|||
value: '省级批复', |
|||
}, |
|||
{ |
|||
value: '省级部门联合批复', |
|||
}, |
|||
]; |
|||
const earlyDesignOptions = [ |
|||
{ |
|||
value: '无', |
|||
}, |
|||
{ |
|||
value: '内容基本完善', |
|||
}, |
|||
{ |
|||
value: '有勘察或测绘报告', |
|||
}, |
|||
{ |
|||
value: '有环境影响评估', |
|||
}, |
|||
{ |
|||
value: '有水土保持报告', |
|||
}, |
|||
]; |
|||
const cityFomulaOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '城镇污水处理及配套', |
|||
}, |
|||
{ |
|||
value: 'b', |
|||
label: '排水系统完善建设', |
|||
}, |
|||
{ |
|||
value: 'c', |
|||
label: '城镇生活垃圾处理收集', |
|||
}, |
|||
]; |
|||
const riverDealOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '生态修复、河道清淤、沿河截污', |
|||
}, |
|||
]; |
|||
const villageFomulaOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '农村污水治理', |
|||
}, |
|||
{ |
|||
value: 'b', |
|||
label: '农业面源治理', |
|||
}, |
|||
]; |
|||
const waterProtectOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '饮用水源保护', |
|||
}, |
|||
]; |
|||
const internalDealOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '内源治理', |
|||
}, |
|||
]; |
|||
const overallOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '水资源综合利用', |
|||
}, |
|||
{ |
|||
value: 'b', |
|||
label: '水资源调度', |
|||
}, |
|||
]; |
|||
const projectTechOptions = [ |
|||
{ |
|||
value: '水环境监测预警与管理技术', |
|||
label: '水环境监测预警与管理技术', |
|||
children: [ |
|||
{ |
|||
value: '水环境监测预警技术', |
|||
label: '水环境监测预警技术', |
|||
}, |
|||
{ |
|||
value: '水环境管理技术', |
|||
label: '水环境管理技术', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '控污技术', |
|||
label: '控污技术', |
|||
children: [ |
|||
{ |
|||
value: '点源污染控制技术', |
|||
label: '点源污染控制技术', |
|||
}, |
|||
{ |
|||
value: '城市面源污染控制技术', |
|||
label: '城市面源污染控制技术', |
|||
}, |
|||
{ |
|||
value: '农业农村面源污染控制技术', |
|||
label: '农业农村面源污染控制技术', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '内源污染治理技术', |
|||
label: '内源污染治理技术', |
|||
children: [ |
|||
{ |
|||
value: '蓝藻控制与资源化技术', |
|||
label: '蓝藻控制与资源化技术', |
|||
}, |
|||
{ |
|||
value: '底泥控制技术', |
|||
label: '底泥控制技术', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '生态修复技术', |
|||
label: '生态修复技术', |
|||
children: [ |
|||
{ |
|||
value: '河湖生态修复技术', |
|||
label: '河湖生态修复技术', |
|||
}, |
|||
{ |
|||
value: '水源地生态修复技术', |
|||
label: '水源地生态修复技术', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const techUsabilityOptions = [ |
|||
{ |
|||
value: |
|||
'治理技术适用性广，取得多项发明专利，在经济、环境、能耗等方面取得重大突破，工程运行良好', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性较广，取得发明专利，工程在经济、环境、能耗等方面有较大提升', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性一般，取得实用新型专利，在经济、环境、能耗等方面有一定提升', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性较窄，治理技术通过工程示范，显示其在经济、环境、能耗等方面几乎无提升', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性窄，治理技术通过工程示范，显示其在经济、环境、能耗等方面完全无提升', |
|||
}, |
|||
]; |
|||
const techStabilityOptions = [ |
|||
{ |
|||
value: '技术很稳定，几乎不受降水、温度、污染物浓度等条件改变的影响', |
|||
}, |
|||
{ |
|||
value: '技术较稳定，受降水、温度、污染物浓度等条件改变的影响较小', |
|||
}, |
|||
{ |
|||
value: '技术稳定性一般，受到降水、温度、污染物浓度等条件改变的一定影响', |
|||
}, |
|||
{ |
|||
value: '技术较不稳定，受降水、温度、污染物浓度等条件改变的影响较大', |
|||
}, |
|||
{ |
|||
value: '技术很不稳定，受降水、温度、污染物浓度等条件改变的影响很大', |
|||
}, |
|||
]; |
|||
const OperationLevelOptions = [ |
|||
{ |
|||
value: '管理与操作很简单，可实现全自动化操作', |
|||
}, |
|||
{ |
|||
value: '管理与操作简单，基本实现全自动化', |
|||
}, |
|||
{ |
|||
value: '管理与操作难度一般，实现半自动化', |
|||
}, |
|||
{ |
|||
value: '管理与操作较难，少部分过程可自动化', |
|||
}, |
|||
{ |
|||
value: '管理与操作难，全人工操作', |
|||
}, |
|||
]; |
|||
const projectProgressOptions = [ |
|||
{ |
|||
value: '前期', |
|||
}, |
|||
{ |
|||
value: '调试', |
|||
}, |
|||
{ |
|||
value: '在建', |
|||
}, |
|||
{ |
|||
value: '已完工', |
|||
}, |
|||
{ |
|||
value: '未实施', |
|||
}, |
|||
{ |
|||
value: '取消', |
|||
}, |
|||
{ |
|||
value: '暂缓实施', |
|||
}, |
|||
{ |
|||
value: '未运行', |
|||
}, |
|||
]; |
|||
|
|||
const acceptMethodOptions = [ |
|||
{ |
|||
value: '合同与验收报告缺失', |
|||
}, |
|||
{ |
|||
value: '材料基本齐全', |
|||
}, |
|||
{ |
|||
value: '联合验收', |
|||
}, |
|||
]; |
|||
const devStatusOptions = [ |
|||
{ |
|||
value: '荒废', |
|||
}, |
|||
{ |
|||
value: '短暂运行', |
|||
}, |
|||
{ |
|||
value: '正常运行并有年度运行报告', |
|||
}, |
|||
{ |
|||
value: '基本达到设计目标', |
|||
}, |
|||
{ |
|||
value: '远超设计目标实现联合调度', |
|||
}, |
|||
]; |
|||
const patrolTypeOptions = [ |
|||
{ |
|||
value: '无', |
|||
}, |
|||
{ |
|||
value: '主管部门定期巡查', |
|||
}, |
|||
{ |
|||
value: '市级部门巡查', |
|||
}, |
|||
{ |
|||
value: '市级部门联合巡查', |
|||
}, |
|||
{ |
|||
value: '实时监控', |
|||
}, |
|||
]; |
|||
const manageTypeOptions = [ |
|||
{ |
|||
value: '属地管理并社会招标', |
|||
}, |
|||
{ |
|||
value: '属地管理且由国企实际运行', |
|||
}, |
|||
{ |
|||
value: '市级部门下属国企管理', |
|||
}, |
|||
{ |
|||
value: '多部门联合管理', |
|||
}, |
|||
]; |
|||
const longOperationOptions = [ |
|||
{ |
|||
value: '实时监测', |
|||
}, |
|||
{ |
|||
value: '定时监测', |
|||
}, |
|||
{ |
|||
value: '人工巡检', |
|||
}, |
|||
{ |
|||
value: '在线监测', |
|||
}, |
|||
{ |
|||
value: '维持', |
|||
}, |
|||
{ |
|||
value: '无', |
|||
}, |
|||
]; |
|||
//上传文件 |
|||
const earlySet = [ |
|||
{ |
|||
name: '项目建议书', |
|||
id: 1, |
|||
}, |
|||
{ |
|||
name: '可行性研究', |
|||
id: 2, |
|||
}, |
|||
{ |
|||
name: '初步设计', |
|||
id: 3, |
|||
}, |
|||
{ |
|||
name: '其他程序', |
|||
id: 4, |
|||
}, |
|||
]; |
|||
const unitedTenders = [ |
|||
{ |
|||
name: '招标', |
|||
id: 5, |
|||
}, |
|||
{ |
|||
name: '投标', |
|||
id: 5, |
|||
}, |
|||
{ |
|||
name: '其他程序', |
|||
id: 6, |
|||
}, |
|||
]; |
|||
const buildEffect = [ |
|||
{ |
|||
name: '工程开工', |
|||
id: 7, |
|||
}, |
|||
{ |
|||
name: '施工设计', |
|||
id: 8, |
|||
}, |
|||
{ |
|||
name: '资金来源', |
|||
id: 9, |
|||
}, |
|||
{ |
|||
name: '进度管理', |
|||
id: 10, |
|||
}, |
|||
{ |
|||
name: '成本管理', |
|||
id: 11, |
|||
}, |
|||
{ |
|||
name: '质量管理', |
|||
id: 12, |
|||
}, |
|||
{ |
|||
name: '合同管理', |
|||
id: 13, |
|||
}, |
|||
{ |
|||
name: '技术管理', |
|||
id: 14, |
|||
}, |
|||
]; |
|||
const acceptApproval = [ |
|||
{ |
|||
name: '调试运行', |
|||
id: 15, |
|||
}, |
|||
{ |
|||
name: '环保验收', |
|||
id: 16, |
|||
}, |
|||
{ |
|||
name: '竣工验收', |
|||
id: 17, |
|||
}, |
|||
{ |
|||
name: '工程结算', |
|||
id: 18, |
|||
}, |
|||
{ |
|||
name: '项目总结', |
|||
id: 19, |
|||
}, |
|||
]; |
|||
const operationProtect = [ |
|||
{ |
|||
name: '定期巡查', |
|||
id: 20, |
|||
}, |
|||
{ |
|||
name: '管理模式', |
|||
id: 21, |
|||
}, |
|||
{ |
|||
name: '运行日志', |
|||
id: 22, |
|||
}, |
|||
]; |
|||
const rule1 = { |
|||
value1: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
}; |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
|
|||
.title { |
|||
margin: 10px 0; |
|||
font-size: 20px; |
|||
font-weight: 550; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div style="margin: 20px; border-radius: 10px; background: #fff"> |
|||
<div class="tabBox"> |
|||
<a-tabs v-model:activeKey="activeKey" size="large"> |
|||
<a-tab-pane key="1" tab="城镇污水及配套工程"> |
|||
<secondTab :loading="loading" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="河道整治" /> |
|||
<a-tab-pane key="3" tab="农业农村面源污染治理" /> |
|||
<a-tab-pane key="4" tab="引用水源地保护建设" /> |
|||
<a-tab-pane key="5" tab="内源治理" /> |
|||
<a-tab-pane key="6" tab="水资源综合利用及调度" /> |
|||
</a-tabs> |
|||
</div> |
|||
</div> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import secondTab from './secondTab.vue'; |
|||
|
|||
const activeKey = ref<String>('1'); |
|||
const loading = ref(false); |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
|
|||
.title { |
|||
margin: 10px 0; |
|||
font-size: 20px; |
|||
font-weight: 550; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<div class="tabBox"> |
|||
<a-tabs v-model:activeKey="subTab"> |
|||
<a-tab-pane key="a" tab="项目实施绩效"> |
|||
<div class="md:flex enter-y"> |
|||
<div class="md:w-1/2 w-full"> |
|||
<Card title="污水处理能力" :loading="loading"> |
|||
<div ref="chartRef1" :style="{ width, height }"></div> |
|||
</Card> |
|||
</div> |
|||
<div class="md:w-1/2 w-full"> |
|||
<Card title="污染负荷变化" :loading="loading"> |
|||
<div ref="chartRef2" :style="{ width, height }"></div> |
|||
</Card> |
|||
</div> |
|||
</div> |
|||
<div class="md:flex enter-y"> |
|||
<div class="md:w-1/2 w-full"> |
|||
<Card title="排水管网长度" :loading="loading"> |
|||
<div ref="chartRef3" :style="{ width, height }"></div> |
|||
</Card> |
|||
</div> |
|||
<div class="md:w-1/2 w-full"> |
|||
<Card title="垃圾处理能力" :loading="loading"> |
|||
<div ref="chartRef4" :style="{ width, height }"></div> |
|||
</Card> |
|||
</div> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="b" tab="技术应用绩效"> 2 </a-tab-pane> |
|||
<a-tab-pane key="c" tab="项目管理绩效"> 3 </a-tab-pane> |
|||
</a-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { watch, ref, Ref } from 'vue'; |
|||
import { useECharts } from '@/hooks/web/useECharts'; |
|||
import { Card } from 'ant-design-vue'; |
|||
|
|||
const subTab = ref<String>('a'); |
|||
const props = defineProps({ |
|||
loading: Boolean, |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '300px', |
|||
}, |
|||
}); |
|||
const chartRef1 = ref<HTMLDivElement | null>(null); |
|||
const chartRef2 = ref<HTMLDivElement | null>(null); |
|||
const chartRef3 = ref<HTMLDivElement | null>(null); |
|||
const chartRef4 = ref<HTMLDivElement | null>(null); |
|||
const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions; |
|||
const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions; |
|||
const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions; |
|||
const setOptions4 = useECharts(chartRef4 as Ref<HTMLDivElement>).setOptions; |
|||
watch( |
|||
() => props.loading, |
|||
() => { |
|||
if (props.loading) { |
|||
return; |
|||
} |
|||
setOptions1({ |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70], |
|||
stack: 'total', |
|||
type: 'bar', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
setOptions2({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
data: ['cod', 'tn×10', 'tp×100'], |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'cod', |
|||
data: [120, 200, 150, 80, 70], |
|||
type: 'line', |
|||
stack: 'Total', |
|||
itemStyle: {}, |
|||
}, |
|||
{ |
|||
name: 'tn×10', |
|||
data: [78, 123, 29, 45, 99], |
|||
type: 'line', |
|||
stack: 'Total', |
|||
itemStyle: {}, |
|||
}, |
|||
{ |
|||
name: 'tp×100', |
|||
data: [134, 231, 39, 67, 156], |
|||
type: 'line', |
|||
stack: 'Total', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
setOptions3({ |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70], |
|||
type: 'bar', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
setOptions4({ |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70], |
|||
type: 'bar', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,190 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff"> |
|||
<a-cascader |
|||
v-model:value="district" |
|||
:options="districtOptions" |
|||
placeholder="Please select" |
|||
change-on-select |
|||
@change="districtChange" |
|||
/> |
|||
<div v-for="(i, index) in goalDistrictInfo" style="margin: 20px 0" :key="index"> |
|||
<div style="margin: 10px">{{ i.msg }}</div> |
|||
<div> |
|||
<a-table :dataSource="i.list" :columns="columns" :pagination="false" bordered /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
//地区 |
|||
const district = ref<any>([]); |
|||
const districtOptions = ref([ |
|||
{ |
|||
value: 'zhejiang', |
|||
label: 'Zhejiang', |
|||
children: [ |
|||
{ |
|||
value: 'hangzhou', |
|||
label: 'Hangzhou', |
|||
children: [ |
|||
{ |
|||
value: 'xihu', |
|||
label: 'West Lake', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: 'jiangsu', |
|||
label: 'Jiangsu', |
|||
children: [ |
|||
{ |
|||
value: 'nanjing', |
|||
label: 'Nanjing', |
|||
children: [ |
|||
{ |
|||
value: 'zhonghuamen', |
|||
label: 'Zhong Hua Men', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
]); |
|||
const districtChange = () => { |
|||
console.log(district.value); |
|||
}; |
|||
const goalDistrictInfo = [ |
|||
{ |
|||
msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
list: [ |
|||
{ |
|||
district: '1995', |
|||
river: '100', |
|||
cross: '80', |
|||
goal: '80%', |
|||
thirdFive: '30', |
|||
fourthFive: '20', |
|||
fifthFive: '67%', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
list: [ |
|||
{ |
|||
district: '1995', |
|||
river: '100', |
|||
cross: '80', |
|||
goal: '80%', |
|||
thirdFive: '30', |
|||
fourthFive: '20', |
|||
fifthFive: '67%', |
|||
}, |
|||
{ |
|||
district: '1995', |
|||
river: '100', |
|||
cross: '80', |
|||
goal: '80%', |
|||
thirdFive: '30', |
|||
fourthFive: '20', |
|||
fifthFive: '67%', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
list: [ |
|||
{ |
|||
district: '1995', |
|||
river: '100', |
|||
cross: '80', |
|||
goal: '80%', |
|||
thirdFive: '30', |
|||
fourthFive: '20', |
|||
fifthFive: '67%', |
|||
}, |
|||
{ |
|||
district: '1995', |
|||
river: '100', |
|||
cross: '80', |
|||
goal: '80%', |
|||
thirdFive: '30', |
|||
fourthFive: '20', |
|||
fifthFive: '67%', |
|||
}, |
|||
{ |
|||
district: '1995', |
|||
river: '100', |
|||
cross: '80', |
|||
goal: '80%', |
|||
thirdFive: '30', |
|||
fourthFive: '20', |
|||
fifthFive: '67%', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
const columns = [ |
|||
{ |
|||
dataIndex: 'district', |
|||
key: 'district', |
|||
title: '控制区', |
|||
customCell: (_, index) => { |
|||
if (index === 0) { |
|||
return { rowSpan: 3 }; |
|||
} else { |
|||
return { rowSpan: 0 }; |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
dataIndex: 'river', |
|||
key: 'river', |
|||
title: '水体', |
|||
}, |
|||
{ |
|||
dataIndex: 'cross', |
|||
key: 'cross', |
|||
title: '控制断面', |
|||
}, |
|||
{ |
|||
dataIndex: 'goal', |
|||
key: 'goal', |
|||
title: '目标', |
|||
}, |
|||
{ |
|||
dataIndex: 'thirdFive', |
|||
key: 'thirdFive', |
|||
title: '十一五', |
|||
}, |
|||
{ |
|||
dataIndex: 'fourthFive', |
|||
key: 'fourthFive', |
|||
title: '十二五', |
|||
}, |
|||
{ |
|||
dataIndex: 'fifthFive', |
|||
key: 'fifthFive', |
|||
title: '十三五', |
|||
}, |
|||
]; |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
|
|||
.title { |
|||
margin: 10px 0; |
|||
font-size: 20px; |
|||
font-weight: 550; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff"> |
|||
<div v-for="(i, index) in goalTimesMsg" style="margin: 20px 0 20px 20px" :key="index">{{ |
|||
i |
|||
}}</div> |
|||
<div> |
|||
<a-table :dataSource="goalTimeList" :columns="columns" :pagination="false" /> |
|||
</div> |
|||
</div> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
|
|||
const goalTimesMsg = [ |
|||
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程', |
|||
]; |
|||
|
|||
const columns = [ |
|||
{ |
|||
dataIndex: 'date', |
|||
key: 'date', |
|||
title: '时期', |
|||
}, |
|||
{ |
|||
dataIndex: 'planProject', |
|||
key: 'planProject', |
|||
title: '规划项目', |
|||
}, |
|||
{ |
|||
dataIndex: 'actualProject', |
|||
key: 'actualProject', |
|||
title: '实际实施项目', |
|||
}, |
|||
{ |
|||
dataIndex: 'projectPercent', |
|||
key: 'projectPercent', |
|||
title: '实施率', |
|||
}, |
|||
{ |
|||
dataIndex: 'planInvest', |
|||
key: 'planInvest', |
|||
title: '规划投资(亿元)', |
|||
}, |
|||
{ |
|||
dataIndex: 'actualInvest', |
|||
key: 'actualInvest', |
|||
title: '实际完成投资(亿元)', |
|||
}, |
|||
{ |
|||
dataIndex: 'investPercent', |
|||
key: 'investPercent', |
|||
title: '完成投资率', |
|||
}, |
|||
]; |
|||
const goalTimeList = ref([ |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
{ |
|||
date: '1995', |
|||
planProject: '100', |
|||
actualProject: '80', |
|||
projectPercent: '80%', |
|||
planInvest: '30', |
|||
actualInvest: '20', |
|||
investPercent: '67%', |
|||
}, |
|||
]); |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
|
|||
.title { |
|||
margin: 10px 0; |
|||
font-size: 20px; |
|||
font-weight: 550; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,992 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<div style="margin: 20px; border-radius: 10px; background: #fff"> |
|||
<div class="tabBox"> |
|||
<a-tabs v-model:activeKey="activeKey" size="large"> |
|||
<a-tab-pane key="1" tab="项目属性划定"> |
|||
<a-form |
|||
:model="projectType" |
|||
:label-col="{ span: 6 }" |
|||
:wrapper-col="{ span: 6 }" |
|||
autocomplete="off" |
|||
:rules="rule1" |
|||
> |
|||
<div class="title">项目信息</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="项目名称" name="projectName"> |
|||
<a-input |
|||
v-model:value="projectType.projectName" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="项目时期" name="projectDate"> |
|||
<a-date-picker |
|||
v-model:value="projectType.projectDate" |
|||
style="width: 360px" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="规划投资(万元)" name="planInvest"> |
|||
<a-input |
|||
v-model:value="projectType.planInvest" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="实际完成投资(万元)" name="acualInvest"> |
|||
<a-input |
|||
v-model:value="projectType.projectName" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="资金来源" name="investResource"> |
|||
<a-select |
|||
v-model:value="projectType.investResource" |
|||
style="width: 360px" |
|||
:options="investResourceOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="是否为规划内项目" name="ifPlan"> |
|||
<a-select |
|||
v-model:value="projectType.ifPlan" |
|||
style="width: 360px" |
|||
:options="ifPlanOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="批复等级" name="approvalLevel"> |
|||
<a-select |
|||
v-model:value="projectType.approvalLevel" |
|||
style="width: 360px" |
|||
:options="approvalLevelOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="前期设计" name="earlyDesign"> |
|||
<a-select |
|||
v-model:value="projectType.earlyDesign" |
|||
style="width: 360px" |
|||
:options="earlyDesignOptions" |
|||
mode="multiple" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="预期目标" name="expect"> |
|||
<a-input |
|||
v-model:value="projectType.expect" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属区县" name="district"> |
|||
<a-input |
|||
v-model:value="projectType.district" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属控制区" name="controlArea"> |
|||
<a-input |
|||
v-model:value="projectType.controlArea" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属小流域" name="riverBasin"> |
|||
<a-input |
|||
v-model:value="projectType.riverBasin" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="title">项目类别填报</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="城镇污水处理及配套" name="cityFomula"> |
|||
<a-select |
|||
v-model:value="projectType.cityFomula" |
|||
style="width: 360px" |
|||
:options="cityFomulaOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="河道整治" name="riverDeal"> |
|||
<a-select |
|||
v-model:value="projectType.riverDeal" |
|||
style="width: 360px" |
|||
:options="riverDealOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="农业农村面源污染治理" name="villageFomula"> |
|||
<a-select |
|||
v-model:value="projectType.villageFomula" |
|||
style="width: 360px" |
|||
:options="villageFomulaOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="饮用水源地保护建设" name="waterProtect"> |
|||
<a-select |
|||
v-model:value="projectType.waterProtect" |
|||
style="width: 360px" |
|||
:options="waterProtectOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="内源治理" name="internalDeal"> |
|||
<a-select |
|||
v-model:value="projectType.internalDeal" |
|||
style="width: 360px" |
|||
:options="internalDealOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="水资源综合利用及调度" name="overall"> |
|||
<a-select |
|||
v-model:value="projectType.overall" |
|||
style="width: 360px" |
|||
:options="overallOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="title">项目技术应用</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="水环境保护治理技术" name="projectTech"> |
|||
<a-cascader |
|||
v-model:value="projectType.projectTech" |
|||
:options="projectTechOptions" |
|||
placeholder="请选择" |
|||
style="width: 360px" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术名称" name="techName"> |
|||
<a-input |
|||
v-model:value="projectType.techName" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
|
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术成本(元/㎡)" name="techCost"> |
|||
<a-input |
|||
v-model:value="projectType.techCost" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
<span style="color: red">注：实际投资/占地面积</span> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="运行成本(元/㎡)" name="devCost"> |
|||
<a-input |
|||
v-model:value="projectType.devCost" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
<span style="color: red">注：实际投资/占地面积</span> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术适用性" name="techUsability"> |
|||
<a-select |
|||
v-model:value="projectType.techUsability" |
|||
style="width: 600px" |
|||
:options="techUsabilityOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="技术稳定性" name="techStability"> |
|||
<a-select |
|||
v-model:value="projectType.techStability" |
|||
style="width: 600px" |
|||
:options="techStabilityOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="管理操作难易程度" name="OperationLevel"> |
|||
<a-select |
|||
v-model:value="projectType.OperationLevel" |
|||
style="width: 600px" |
|||
:options="OperationLevelOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<div class="title">工程内容</div> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="规划项目内容" name="projectContent"> |
|||
<a-input |
|||
v-model:value="projectType.projectContent" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="完工情况" name="projectProgress"> |
|||
<a-select |
|||
v-model:value="projectType.projectProgress" |
|||
style="width: 360px" |
|||
:options="projectProgressOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="验收方式" name="acceptMethod"> |
|||
<a-select |
|||
v-model:value="projectType.acceptMethod" |
|||
style="width: 360px" |
|||
:options="acceptMethodOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="运行效果" name="devResult"> |
|||
<a-input |
|||
v-model:value="projectType.devResult" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="运行情况" name="devStatus"> |
|||
<a-select |
|||
v-model:value="projectType.devStatus" |
|||
style="width: 360px" |
|||
:options="devStatusOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="目标实现" name="goal"> |
|||
<a-input |
|||
v-model:value="projectType.goal" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="百分制,例如80%" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="巡查模式" name="patrolType"> |
|||
<a-select |
|||
v-model:value="projectType.patrolType" |
|||
style="width: 360px" |
|||
:options="patrolTypeOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="管理模式" name="manageType"> |
|||
<a-select |
|||
v-model:value="projectType.manageType" |
|||
style="width: 360px" |
|||
:options="manageTypeOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="长期运营" name="longOperation"> |
|||
<a-select |
|||
v-model:value="projectType.longOperation" |
|||
style="width: 360px" |
|||
:options="longOperationOptions" |
|||
allowClear |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="COD削减量(吨)" name="cod"> |
|||
<a-input |
|||
v-model:value="projectType.cod" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="TN削减量(吨)" name="tn"> |
|||
<a-input |
|||
v-model:value="projectType.tn" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="TP削减量(吨)" name="tp"> |
|||
<a-input |
|||
v-model:value="projectType.tp" |
|||
style="width: 360px" |
|||
allowClear |
|||
placeholder="" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-form-item :wrapper-col="{ offset: 4, span: 8 }"> |
|||
<a-button type="primary" html-type="submit">提交</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="项目前期立项"> |
|||
<div v-for="item in earlySet" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="3" tab="联合体招投标"> |
|||
<div v-for="item in unitedTenders" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="4" tab="建设实施"> |
|||
<div v-for="item in buildEffect" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="5" tab="验收批复"> |
|||
<div v-for="item in acceptApproval" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="6" tab="运营管护"> |
|||
<div v-for="item in operationProtect" :key="item.id" style="margin-bottom: 20px"> |
|||
<span style=" right: 20px;margin: 10px 10px 10px 0">{{ item.name }}</span> |
|||
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1"> |
|||
<a-button> |
|||
<upload-outlined /> |
|||
文件上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</div> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</div> |
|||
</div> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue'; |
|||
import { PageWrapper } from '@/components/Page'; |
|||
|
|||
const activeKey = ref<String>('1'); |
|||
//项目类别表单 |
|||
const projectType = reactive({ |
|||
projectName: '', |
|||
projectDate: '', |
|||
planInvest: '', |
|||
actualInvest: '', |
|||
investResource: '', |
|||
ifPlan: '', |
|||
approvalLevel: '', |
|||
expect: '', |
|||
earlyDesign: [], |
|||
district: '', |
|||
controlArea: '', |
|||
riverBasin: '', |
|||
cityFomula: '', |
|||
riverDeal: '', |
|||
villageFomula: '', |
|||
waterProtect: '', |
|||
internalDeal: '', |
|||
overall: '', |
|||
projectTech: '', |
|||
techName: '', |
|||
techCost: '', |
|||
devCost: '', |
|||
techUsability: '', |
|||
techStability: '', |
|||
OperationLevel: '', |
|||
projectContent: '', |
|||
projectProgress: '', |
|||
acceptMethod: '', |
|||
devResult: '', |
|||
devStatus: '', |
|||
goal: '', |
|||
patrolType: '', |
|||
manageType: '', |
|||
longOperation: '', |
|||
cod: '', |
|||
tn: '', |
|||
tp: '', |
|||
}); |
|||
//Options |
|||
const investResourceOptions = [ |
|||
{ |
|||
value: '资金不足而搁置', |
|||
}, |
|||
{ |
|||
value: '自筹资金且无法保障', |
|||
}, |
|||
{ |
|||
value: '自筹资金且充足', |
|||
}, |
|||
{ |
|||
value: '市、区级政府专项资金', |
|||
}, |
|||
{ |
|||
value: '国家、省级专项资金', |
|||
}, |
|||
]; |
|||
const ifPlanOptions = [ |
|||
{ |
|||
value: '是', |
|||
}, |
|||
{ |
|||
value: '否', |
|||
}, |
|||
]; |
|||
const approvalLevelOptions = [ |
|||
{ |
|||
value: '审批材料不完整', |
|||
}, |
|||
{ |
|||
value: '区级批复', |
|||
}, |
|||
{ |
|||
value: '市级批复', |
|||
}, |
|||
{ |
|||
value: '省级批复', |
|||
}, |
|||
{ |
|||
value: '省级部门联合批复', |
|||
}, |
|||
]; |
|||
const earlyDesignOptions = [ |
|||
{ |
|||
value: '无', |
|||
}, |
|||
{ |
|||
value: '内容基本完善', |
|||
}, |
|||
{ |
|||
value: '有勘察或测绘报告', |
|||
}, |
|||
{ |
|||
value: '有环境影响评估', |
|||
}, |
|||
{ |
|||
value: '有水土保持报告', |
|||
}, |
|||
]; |
|||
const cityFomulaOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '城镇污水处理及配套', |
|||
}, |
|||
{ |
|||
value: 'b', |
|||
label: '排水系统完善建设', |
|||
}, |
|||
{ |
|||
value: 'c', |
|||
label: '城镇生活垃圾处理收集', |
|||
}, |
|||
]; |
|||
const riverDealOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '生态修复、河道清淤、沿河截污', |
|||
}, |
|||
]; |
|||
const villageFomulaOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '农村污水治理', |
|||
}, |
|||
{ |
|||
value: 'b', |
|||
label: '农业面源治理', |
|||
}, |
|||
]; |
|||
const waterProtectOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '饮用水源保护', |
|||
}, |
|||
]; |
|||
const internalDealOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '内源治理', |
|||
}, |
|||
]; |
|||
const overallOptions = [ |
|||
{ |
|||
value: 'a', |
|||
label: '水资源综合利用', |
|||
}, |
|||
{ |
|||
value: 'b', |
|||
label: '水资源调度', |
|||
}, |
|||
]; |
|||
const projectTechOptions = [ |
|||
{ |
|||
value: '水环境监测预警与管理技术', |
|||
label: '水环境监测预警与管理技术', |
|||
children: [ |
|||
{ |
|||
value: '水环境监测预警技术', |
|||
label: '水环境监测预警技术', |
|||
}, |
|||
{ |
|||
value: '水环境管理技术', |
|||
label: '水环境管理技术', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '控污技术', |
|||
label: '控污技术', |
|||
children: [ |
|||
{ |
|||
value: '点源污染控制技术', |
|||
label: '点源污染控制技术', |
|||
}, |
|||
{ |
|||
value: '城市面源污染控制技术', |
|||
label: '城市面源污染控制技术', |
|||
}, |
|||
{ |
|||
value: '农业农村面源污染控制技术', |
|||
label: '农业农村面源污染控制技术', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '内源污染治理技术', |
|||
label: '内源污染治理技术', |
|||
children: [ |
|||
{ |
|||
value: '蓝藻控制与资源化技术', |
|||
label: '蓝藻控制与资源化技术', |
|||
}, |
|||
{ |
|||
value: '底泥控制技术', |
|||
label: '底泥控制技术', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: '生态修复技术', |
|||
label: '生态修复技术', |
|||
children: [ |
|||
{ |
|||
value: '河湖生态修复技术', |
|||
label: '河湖生态修复技术', |
|||
}, |
|||
{ |
|||
value: '水源地生态修复技术', |
|||
label: '水源地生态修复技术', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const techUsabilityOptions = [ |
|||
{ |
|||
value: |
|||
'治理技术适用性广，取得多项发明专利，在经济、环境、能耗等方面取得重大突破，工程运行良好', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性较广，取得发明专利，工程在经济、环境、能耗等方面有较大提升', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性一般，取得实用新型专利，在经济、环境、能耗等方面有一定提升', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性较窄，治理技术通过工程示范，显示其在经济、环境、能耗等方面几乎无提升', |
|||
}, |
|||
{ |
|||
value: '治理技术适用性窄，治理技术通过工程示范，显示其在经济、环境、能耗等方面完全无提升', |
|||
}, |
|||
]; |
|||
const techStabilityOptions = [ |
|||
{ |
|||
value: '技术很稳定，几乎不受降水、温度、污染物浓度等条件改变的影响', |
|||
}, |
|||
{ |
|||
value: '技术较稳定，受降水、温度、污染物浓度等条件改变的影响较小', |
|||
}, |
|||
{ |
|||
value: '技术稳定性一般，受到降水、温度、污染物浓度等条件改变的一定影响', |
|||
}, |
|||
{ |
|||
value: '技术较不稳定，受降水、温度、污染物浓度等条件改变的影响较大', |
|||
}, |
|||
{ |
|||
value: '技术很不稳定，受降水、温度、污染物浓度等条件改变的影响很大', |
|||
}, |
|||
]; |
|||
const OperationLevelOptions = [ |
|||
{ |
|||
value: '管理与操作很简单，可实现全自动化操作', |
|||
}, |
|||
{ |
|||
value: '管理与操作简单，基本实现全自动化', |
|||
}, |
|||
{ |
|||
value: '管理与操作难度一般，实现半自动化', |
|||
}, |
|||
{ |
|||
value: '管理与操作较难，少部分过程可自动化', |
|||
}, |
|||
{ |
|||
value: '管理与操作难，全人工操作', |
|||
}, |
|||
]; |
|||
const projectProgressOptions = [ |
|||
{ |
|||
value: '前期', |
|||
}, |
|||
{ |
|||
value: '调试', |
|||
}, |
|||
{ |
|||
value: '在建', |
|||
}, |
|||
{ |
|||
value: '已完工', |
|||
}, |
|||
{ |
|||
value: '未实施', |
|||
}, |
|||
{ |
|||
value: '取消', |
|||
}, |
|||
{ |
|||
value: '暂缓实施', |
|||
}, |
|||
{ |
|||
value: '未运行', |
|||
}, |
|||
]; |
|||
|
|||
const acceptMethodOptions = [ |
|||
{ |
|||
value: '合同与验收报告缺失', |
|||
}, |
|||
{ |
|||
value: '材料基本齐全', |
|||
}, |
|||
{ |
|||
value: '联合验收', |
|||
}, |
|||
]; |
|||
const devStatusOptions = [ |
|||
{ |
|||
value: '荒废', |
|||
}, |
|||
{ |
|||
value: '短暂运行', |
|||
}, |
|||
{ |
|||
value: '正常运行并有年度运行报告', |
|||
}, |
|||
{ |
|||
value: '基本达到设计目标', |
|||
}, |
|||
{ |
|||
value: '远超设计目标实现联合调度', |
|||
}, |
|||
]; |
|||
const patrolTypeOptions = [ |
|||
{ |
|||
value: '无', |
|||
}, |
|||
{ |
|||
value: '主管部门定期巡查', |
|||
}, |
|||
{ |
|||
value: '市级部门巡查', |
|||
}, |
|||
{ |
|||
value: '市级部门联合巡查', |
|||
}, |
|||
{ |
|||
value: '实时监控', |
|||
}, |
|||
]; |
|||
const manageTypeOptions = [ |
|||
{ |
|||
value: '属地管理并社会招标', |
|||
}, |
|||
{ |
|||
value: '属地管理且由国企实际运行', |
|||
}, |
|||
{ |
|||
value: '市级部门下属国企管理', |
|||
}, |
|||
{ |
|||
value: '多部门联合管理', |
|||
}, |
|||
]; |
|||
const longOperationOptions = [ |
|||
{ |
|||
value: '实时监测', |
|||
}, |
|||
{ |
|||
value: '定时监测', |
|||
}, |
|||
{ |
|||
value: '人工巡检', |
|||
}, |
|||
{ |
|||
value: '在线监测', |
|||
}, |
|||
{ |
|||
value: '维持', |
|||
}, |
|||
{ |
|||
value: '无', |
|||
}, |
|||
]; |
|||
//上传文件 |
|||
const earlySet = [ |
|||
{ |
|||
name: '项目建议书', |
|||
id: 1, |
|||
}, |
|||
{ |
|||
name: '可行性研究', |
|||
id: 2, |
|||
}, |
|||
{ |
|||
name: '初步设计', |
|||
id: 3, |
|||
}, |
|||
{ |
|||
name: '其他程序', |
|||
id: 4, |
|||
}, |
|||
]; |
|||
const unitedTenders = [ |
|||
{ |
|||
name: '招标', |
|||
id: 5, |
|||
}, |
|||
{ |
|||
name: '投标', |
|||
id: 5, |
|||
}, |
|||
{ |
|||
name: '其他程序', |
|||
id: 6, |
|||
}, |
|||
]; |
|||
const buildEffect = [ |
|||
{ |
|||
name: '工程开工', |
|||
id: 7, |
|||
}, |
|||
{ |
|||
name: '施工设计', |
|||
id: 8, |
|||
}, |
|||
{ |
|||
name: '资金来源', |
|||
id: 9, |
|||
}, |
|||
{ |
|||
name: '进度管理', |
|||
id: 10, |
|||
}, |
|||
{ |
|||
name: '成本管理', |
|||
id: 11, |
|||
}, |
|||
{ |
|||
name: '质量管理', |
|||
id: 12, |
|||
}, |
|||
{ |
|||
name: '合同管理', |
|||
id: 13, |
|||
}, |
|||
{ |
|||
name: '技术管理', |
|||
id: 14, |
|||
}, |
|||
]; |
|||
const acceptApproval = [ |
|||
{ |
|||
name: '调试运行', |
|||
id: 15, |
|||
}, |
|||
{ |
|||
name: '环保验收', |
|||
id: 16, |
|||
}, |
|||
{ |
|||
name: '竣工验收', |
|||
id: 17, |
|||
}, |
|||
{ |
|||
name: '工程结算', |
|||
id: 18, |
|||
}, |
|||
{ |
|||
name: '项目总结', |
|||
id: 19, |
|||
}, |
|||
]; |
|||
const operationProtect = [ |
|||
{ |
|||
name: '定期巡查', |
|||
id: 20, |
|||
}, |
|||
{ |
|||
name: '管理模式', |
|||
id: 21, |
|||
}, |
|||
{ |
|||
name: '运行日志', |
|||
id: 22, |
|||
}, |
|||
]; |
|||
const rule1 = { |
|||
value1: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
}; |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
|
|||
.title { |
|||
margin: 10px 0; |
|||
font-size: 20px; |
|||
font-weight: 550; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
label: '项目名称', |
|||
field: 'projectName', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '输入项目名称', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '项目时期', |
|||
dataIndex: 'projectDate', |
|||
}, |
|||
{ |
|||
title: '项目名称', |
|||
dataIndex: 'projectName', |
|||
}, |
|||
{ |
|||
title: '规划投资(万元)', |
|||
dataIndex: 'planInvest', |
|||
}, |
|||
{ |
|||
title: '实际投资(万元)', |
|||
dataIndex: 'acualInvest', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<!-- 完成/撤销不显示 --> |
|||
<TableAction |
|||
stopButtonPropagation |
|||
:actions="[ |
|||
{ |
|||
label: '修改', |
|||
icon: IconEnum.EDIT, |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
icon: IconEnum.DELETE, |
|||
danger: true, |
|||
popConfirm: { |
|||
placement: 'left', |
|||
title: `是否删除请假[${record.id}]?`, |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable, TableAction } from '@/components/Table'; |
|||
import { list, removeByIds } from './api.ts'; |
|||
import { formSchemas, columns } from './manage.data'; |
|||
import { IconEnum } from '@/enums/appEnum'; |
|||
import { useGo } from '@/hooks/web/usePage'; |
|||
import { PageEnum } from '@/enums/pageEnum'; |
|||
|
|||
defineOptions({ name: 'Manage' }); |
|||
|
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '项目管理', |
|||
api: list, |
|||
showIndexColumn: false, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'manage', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
go({ path: '/pollution/manage' as PageEnum, query: { id: record.id, type: 'update' } }); |
|||
} |
|||
|
|||
function handleAdd() { |
|||
go({ path: '/pollution/manage' as PageEnum, query: { type: 'add' } }); |
|||
} |
|||
|
|||
async function handleDelete(record: Recordable) { |
|||
await removeByIds([record.id]); |
|||
await reload(); |
|||
} |
|||
|
|||
// 前往审批记录页面 |
|||
const go = useGo(); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue