Compare commits
4 Commits
master
...
environmen
| Author | SHA1 | Date |
|---|---|---|
wbc
|
2abe904c31 | 4 days ago |
|
wbc
|
31b6d24d3c | 2 months ago |
|
wbc
|
9cf1b6fd90 | 3 months ago |
|
yebaochen
|
ffdd0d8c40 | 6 months ago |
12 changed files with 2271 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,242 @@ |
|||
<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="项目综合绩效评估"> |
|||
<div> |
|||
<a-table :dataSource="dataSource1" :columns="columns1" :pagination="false" bordered /> |
|||
</div> |
|||
<div class="mutiTable"> |
|||
<a-table :dataSource="dataSource2" :columns="columns2" :pagination="false" bordered /> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="分期综合绩效评估"> |
|||
<div> |
|||
<a-table :dataSource="dataSource3" :columns="columns3" :pagination="false" bordered /> |
|||
</div> |
|||
</a-tab-pane> |
|||
|
|||
<a-tab-pane key="3" tab="分区综合绩效评估"> |
|||
<div> |
|||
<a-table :dataSource="dataSource4" :columns="columns4" :pagination="false" bordered /> |
|||
</div> |
|||
<div class="mutiTable"> |
|||
<a-table :dataSource="dataSource5" :columns="columns5" :pagination="false" bordered /> |
|||
</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('1'); |
|||
const dataSource1 = ref([]); |
|||
const columns1 = [ |
|||
{ |
|||
title: '分类项目投资效率评价分析结果', |
|||
children: [ |
|||
{ |
|||
dataIndex: 'dmu', |
|||
key: 'dmu', |
|||
title: 'DMU', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'overallEfficiency', |
|||
key: 'overallEfficiency', |
|||
title: '综合技术效率', |
|||
}, |
|||
{ |
|||
dataIndex: 'scale', |
|||
key: 'scale', |
|||
title: '纯技术规模', |
|||
}, |
|||
{ |
|||
dataIndex: 'scaleEfficiency', |
|||
key: 'scaleEfficiency', |
|||
title: '规模效率', |
|||
}, |
|||
{ |
|||
dataIndex: 'scalePay', |
|||
key: 'scalePay', |
|||
title: '规模报酬', |
|||
}, |
|||
{ |
|||
dataIndex: 'beyondEfficiency', |
|||
key: 'beyondEfficiency', |
|||
title: '超效率值', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const dataSource2 = ref([]); |
|||
const columns2 = [ |
|||
{ |
|||
title: '分类项目优化策略', |
|||
children: [ |
|||
{ |
|||
dataIndex: 'dmu', |
|||
key: 'dmu', |
|||
title: 'DMU', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'type', |
|||
key: 'type', |
|||
title: '类别', |
|||
}, |
|||
{ |
|||
dataIndex: 'actualScore', |
|||
key: 'actualScore', |
|||
title: '实际评分', |
|||
}, |
|||
{ |
|||
dataIndex: 'idealScore', |
|||
key: 'idealScore', |
|||
title: '理想评分', |
|||
}, |
|||
{ |
|||
dataIndex: 'difference', |
|||
key: 'difference', |
|||
title: '差值', |
|||
}, |
|||
{ |
|||
dataIndex: 'differencePercent', |
|||
key: 'differencePercent', |
|||
title: '百分比', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const dataSource3 = ref([]); |
|||
const columns3 = [ |
|||
{ |
|||
title: '各周期评价分析结果', |
|||
children: [ |
|||
{ |
|||
dataIndex: 'date', |
|||
key: 'date', |
|||
title: '时期', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'overallEfficiency', |
|||
key: 'overallEfficiency', |
|||
title: '综合技术效率', |
|||
}, |
|||
{ |
|||
dataIndex: 'scale', |
|||
key: 'scale', |
|||
title: '纯技术规模', |
|||
}, |
|||
{ |
|||
dataIndex: 'scaleEfficiency', |
|||
key: 'scaleEfficiency', |
|||
title: '规模效率', |
|||
}, |
|||
{ |
|||
dataIndex: 'scalePay', |
|||
key: 'scalePay', |
|||
title: '规模报酬', |
|||
}, |
|||
{ |
|||
dataIndex: 'beyondEfficiency', |
|||
key: 'beyondEfficiency', |
|||
title: '超效率值', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const dataSource4 = ref([]); |
|||
const columns4 = [ |
|||
{ |
|||
title: '各控制区效率评价分析结果', |
|||
children: [ |
|||
{ |
|||
dataIndex: 'dmu', |
|||
key: 'dmu', |
|||
title: 'DMU', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'overallEfficiency', |
|||
key: 'overallEfficiency', |
|||
title: '综合技术效率', |
|||
}, |
|||
{ |
|||
dataIndex: 'scale', |
|||
key: 'scale', |
|||
title: '纯技术规模', |
|||
}, |
|||
{ |
|||
dataIndex: 'scaleEfficiency', |
|||
key: 'scaleEfficiency', |
|||
title: '规模效率', |
|||
}, |
|||
{ |
|||
dataIndex: 'scalePay', |
|||
key: 'scalePay', |
|||
title: '规模报酬', |
|||
}, |
|||
{ |
|||
dataIndex: 'beyondEfficiency', |
|||
key: 'beyondEfficiency', |
|||
title: '超效率值', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const dataSource5 = ref([]); |
|||
const columns5 = [ |
|||
{ |
|||
title: 'XXX区优化策略', |
|||
children: [ |
|||
{ |
|||
dataIndex: 'dmu', |
|||
key: 'dmu', |
|||
title: 'DMU', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'type', |
|||
key: 'type', |
|||
title: '类别', |
|||
}, |
|||
{ |
|||
dataIndex: 'actualScore', |
|||
key: 'actualScore', |
|||
title: '实际评分', |
|||
}, |
|||
{ |
|||
dataIndex: 'idealScore', |
|||
key: 'idealScore', |
|||
title: '理想评分', |
|||
}, |
|||
{ |
|||
dataIndex: 'difference', |
|||
key: 'difference', |
|||
title: '差值', |
|||
}, |
|||
{ |
|||
dataIndex: 'differencePercent', |
|||
key: 'differencePercent', |
|||
title: '百分比', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
</script> |
|||
<style lang="less"> |
|||
.mutiTable { |
|||
margin: 20px 0; |
|||
} |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
<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="河道整治"> |
|||
<secondTab :loading="loading" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="3" tab="农业农村面源污染治理"> |
|||
<secondTab :loading="loading" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="4" tab="引用水源地保护建设"> |
|||
<secondTab :loading="loading" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="5" tab="内源治理"> <secondTab :loading="loading" /> </a-tab-pane> |
|||
<a-tab-pane key="6" tab="水资源综合利用及调度"> |
|||
<secondTab :loading="loading" /> |
|||
</a-tab-pane> |
|||
</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,363 @@ |
|||
<template> |
|||
<div class="tabBox"> |
|||
<a-tabs v-model:activeKey="subTab"> |
|||
<a-tab-pane key="a" tab="项目实施绩效"> |
|||
<div>{{ msg }}</div> |
|||
<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="技术应用绩效"> |
|||
<div class="md:flex enter-y"> |
|||
<div class="md:w-1/2 w-full"> |
|||
<Card title="城镇污水处理技术" :loading="loading"> |
|||
<div class="md:flex enter-y"> |
|||
<div ref="chartRef5" :style="{ width, height }" class="md:w-1/2 w-full"></div> |
|||
<div class="md:w-1/2 w-full" style="margin-top: 5%"> |
|||
<div style="font-weight: 600; font-size: 20px">技术优势明显</div> |
|||
<div |
|||
>技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显</div |
|||
> |
|||
</div> |
|||
</div> |
|||
</Card> |
|||
</div> |
|||
<div class="md:w-1/2 w-full"> |
|||
<Card title="城市面源污染控制技术" :loading="loading"> |
|||
<div class="md:flex enter-y"> |
|||
<div ref="chartRef6" :style="{ width, height }" class="md:w-1/2 w-full"></div> |
|||
<div class="md:w-1/2 w-full" style="margin-top: 5%"> |
|||
<div style="font-weight: 600; font-size: 20px">技术改进空间较大</div> |
|||
<div |
|||
>技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显技术优势明显</div |
|||
> |
|||
</div> |
|||
</div> |
|||
</Card> |
|||
</div> |
|||
</div> |
|||
<div class="mutiTable"> |
|||
<a-table :dataSource="dataSource1" :columns="columns1" :pagination="false" bordered /> |
|||
</div> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="c" tab="项目管理绩效"> |
|||
<div class="mutiTable"> |
|||
<a-table :dataSource="dataSource2" :columns="columns2" :pagination="false" bordered /> |
|||
</div> |
|||
<div style="padding:0 20px"> |
|||
技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明技术优势明显技术优势明显技术优势明显技术优势明 |
|||
</div> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { watch, ref, Ref, watchEffect } 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 dataSource1 = ref([]); |
|||
const columns1 = [ |
|||
{ |
|||
dataIndex: 'date', |
|||
key: 'date', |
|||
title: '时期', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'apply', |
|||
key: 'apply', |
|||
title: '应用', |
|||
}, |
|||
{ |
|||
dataIndex: 'technology', |
|||
key: 'technology', |
|||
title: '技术', |
|||
}, |
|||
{ |
|||
dataIndex: 'technologyInfo', |
|||
key: 'technologyInfo', |
|||
title: '技术详情', |
|||
}, |
|||
]; |
|||
const dataSource2 = ref([]); |
|||
const columns2 = [ |
|||
{ |
|||
dataIndex: 'type', |
|||
key: 'type', |
|||
title: '类别', |
|||
width: 200, |
|||
}, |
|||
{ |
|||
dataIndex: 'feasibleApproval', |
|||
key: 'feasibleApproval', |
|||
title: '可行批复', |
|||
}, |
|||
{ |
|||
dataIndex: 'firstDesign', |
|||
key: 'firstDesign', |
|||
title: '初步设计', |
|||
}, |
|||
{ |
|||
dataIndex: 'investResource', |
|||
key: 'investResource', |
|||
title: '资金来源', |
|||
}, |
|||
{ |
|||
dataIndex: 'acceptApproval', |
|||
key: 'acceptApproval', |
|||
title: '验收批复', |
|||
}, |
|||
{ |
|||
dataIndex: 'patrol', |
|||
key: 'patrol', |
|||
title: '定期巡查', |
|||
}, |
|||
{ |
|||
dataIndex: 'department', |
|||
key: 'department', |
|||
title: '管理部门', |
|||
}, |
|||
{ |
|||
dataIndex: 'operateEfficiency', |
|||
key: 'operateEfficiency', |
|||
title: '运营效率', |
|||
}, |
|||
]; |
|||
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 chartRef5 = ref<HTMLDivElement | null>(null); |
|||
const chartRef6 = 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; |
|||
const setOptions5 = useECharts(chartRef5 as Ref<HTMLDivElement>).setOptions; |
|||
const setOptions6 = useECharts(chartRef6 as Ref<HTMLDivElement>).setOptions; |
|||
const msg = ref('的浮点数的独立访客数量粉丝的疯狂收到了啊啊啊啊防腐剂非黑即佛金额'); |
|||
watch( |
|||
() => subTab.value, |
|||
() => { |
|||
if (subTab.value == 'a') { |
|||
setOptions1({ |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: '处理能力:万(m³/d)', // 单位说明文本 |
|||
nameLocation: 'end', // 文本位置（start/center/end） |
|||
nameTextStyle: { |
|||
color: '#666', |
|||
fontSize: 12, |
|||
align: 'left', // 文本对齐方向 |
|||
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左] |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 99], |
|||
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', |
|||
name: '生产量(吨)', // 单位说明文本 |
|||
nameLocation: 'end', // 文本位置（start/center/end） |
|||
nameTextStyle: { |
|||
color: '#666', |
|||
fontSize: 12, |
|||
align: 'left', // 文本对齐方向 |
|||
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左] |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'cod', |
|||
data: [90, 200, 150, 80, 70], |
|||
type: 'line', |
|||
itemStyle: {}, |
|||
}, |
|||
{ |
|||
name: 'tn×10', |
|||
data: [78, 123, 29, 45, 99], |
|||
type: 'line', |
|||
itemStyle: {}, |
|||
}, |
|||
{ |
|||
name: 'tp×100', |
|||
data: [134, 131, 39, 67, 156], |
|||
type: 'line', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
setOptions3({ |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: '市政排水管网总长度(m)', // 单位说明文本 |
|||
nameLocation: 'end', // 文本位置（start/center/end） |
|||
nameTextStyle: { |
|||
color: '#666', |
|||
fontSize: 12, |
|||
align: 'left', // 文本对齐方向 |
|||
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左] |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70], |
|||
type: 'bar', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
setOptions4({ |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['"九五"', '"十五"', '"十一五"', '"十二五"', '"十三五"'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: '新增城镇生活垃圾处理量（t/d）', // 单位说明文本 |
|||
nameLocation: 'end', // 文本位置（start/center/end） |
|||
nameTextStyle: { |
|||
color: '#666', |
|||
fontSize: 12, |
|||
align: 'left', // 文本对齐方向 |
|||
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左] |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [120, 200, 150, 80, 70], |
|||
type: 'bar', |
|||
itemStyle: {}, |
|||
}, |
|||
], |
|||
}); |
|||
} else if (subTab.value == 'b') { |
|||
setOptions5({ |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
legend: { |
|||
top: '10%', |
|||
left: 'center', |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '城镇污水处理技术', |
|||
type: 'pie', |
|||
radius: '50%', |
|||
data: [ |
|||
{ value: 1048, name: '好' }, |
|||
{ value: 735, name: '较好' }, |
|||
{ value: 580, name: '中等' }, |
|||
{ value: 484, name: '较差' }, |
|||
{ value: 300, name: '差' }, |
|||
], |
|||
}, |
|||
], |
|||
}); |
|||
setOptions6({ |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
legend: { |
|||
top: '10%', |
|||
left: 'center', |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '城市面源污染控制技术', |
|||
type: 'pie', |
|||
radius: '50%', |
|||
data: [ |
|||
{ value: 1048, name: '好' }, |
|||
{ value: 735, name: '较好' }, |
|||
{ value: 580, name: '中等' }, |
|||
{ value: 484, name: '较差' }, |
|||
{ value: 300, name: '差' }, |
|||
], |
|||
}, |
|||
], |
|||
}); |
|||
} |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
</script> |
|||
<style lang="less"> |
|||
.tabBox { |
|||
margin: 20px; |
|||
} |
|||
.mutiTable { |
|||
margin: 20px 0; |
|||
} |
|||
</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> |
|||
File diff suppressed because it is too large
@ -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,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 './manage.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