Guoyan
/
ops-management-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: Guoyan:master
Branches Tags
Guoyan:base
Guoyan:environment_dev
Guoyan:knowledge_base_frontend
Guoyan:master
Guoyan:ops-management-platform-frontend-dev
...
pull from: Guoyan:environment_dev
Branches Tags
Guoyan:base
Guoyan:environment_dev
Guoyan:knowledge_base_frontend
Guoyan:master
Guoyan:ops-management-platform-frontend-dev

1 Commits
master ... environmen

Author SHA1 Message Date
yebaochen ffdd0d8c40 fix: 项目管理
3 months ago
12 changed files with 2732 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 5
      src/components/registerGlobComp.ts
  2. 2
      src/main.ts
  3. 992
      src/views/achievement/achievementOverall/index.vue
  4. 38
      src/views/achievement/achievementType/index.vue
  5. 172
      src/views/achievement/achievementType/secondTab.vue
  6. 190
      src/views/achievement/goalDistrict/index.vue
  7. 166
      src/views/achievement/goalTimes/index.vue
  8. 58
      src/views/pollution/manage/api.ts
  9. 992
      src/views/pollution/manage/index.vue
  10. 32
      src/views/pollution/manage/manage.data.ts
  11. 89
      src/views/pollution/manage/table.vue
  12. 2
      vite.config.ts

5
src/components/registerGlobComp.ts
View File

@ -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);
}

2
src/main.ts
View File

@ -4,7 +4,6 @@ import '@/components/VxeTable/src/css/index.scss';
import 'ant-design-vue/dist/reset.css';
// Register icon sprite
import 'virtual:svg-icons-register';
import { createApp } from 'vue';
import { registerGlobComp } from '@/components/registerGlobComp';
@ -20,7 +19,6 @@ import App from './App.vue';
async function bootstrap() {
const app = createApp(App);
// Configure store
// 配置 store
setupStore(app);

992
src/views/achievement/achievementOverall/index.vue
View File

@ -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>

38
src/views/achievement/achievementType/index.vue
View File

@ -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>

172
src/views/achievement/achievementType/secondTab.vue
View File

@ -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>

190
src/views/achievement/goalDistrict/index.vue
View File

@ -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>

166
src/views/achievement/goalTimes/index.vue
View File

@ -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>

58
src/views/pollution/manage/api.ts
View File

@ -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(',')}` });
}

992
src/views/pollution/manage/index.vue
View File

@ -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>

32
src/views/pollution/manage/manage.data.ts
View File

@ -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',
},
];

89
src/views/pollution/manage/table.vue
View File

@ -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>

2
vite.config.ts
View File

@ -17,7 +17,7 @@ export default defineApplicationConfig({
server: {
proxy: {
'/basic-api': {
target: 'http://localhost:8080',
target: 'http://10.1.21.250:8083',
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''),

Write Preview
Loading…
Cancel
Save