xzt
1 year ago
17 changed files with 949 additions and 32 deletions
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!-- 面包屑 --> |
|||
<el-breadcrumb separator="/" style="margin-bottom: 20px"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in routeList" |
|||
:key="item + index" |
|||
:to="{ path: item.path }" |
|||
> |
|||
{{ item.routeName }} |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<reservoirResponsible v-if="selectTab == 0" /> |
|||
<sluiceResponsible v-if="selectTab == 1" /> |
|||
<dykeResponsible v-if="selectTab == 2" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import sluiceResponsible from "./sluice/statistics.vue"; |
|||
import dykeResponsible from "./dyke/index.vue"; |
|||
import reservoirResponsible from "./reservoir/index.vue"; |
|||
export default { |
|||
components: { |
|||
sluiceResponsible, |
|||
dykeResponsible, |
|||
reservoirResponsible, |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 面包屑，路由信息 |
|||
routeList: [ |
|||
{ |
|||
path: "/safetyManage/safetyAppraisal/safetyAppraisalTask", |
|||
routeName: "安全鉴定统计", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<div> |
|||
<div class="content"> |
|||
<div ref="barEle" style="width: 100%; height: 100%"></div> |
|||
</div> |
|||
|
|||
<el-table v-loading="loading" :data="statisticsList"> |
|||
<el-table-column |
|||
label="行政划区" |
|||
align="center" |
|||
prop="adcdName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="水闸任务总数" |
|||
align="center" |
|||
prop="total" |
|||
min-width="120" |
|||
/> |
|||
|
|||
<el-table-column |
|||
label="待填报" |
|||
align="center" |
|||
prop="zeroNum" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="待审核" |
|||
align="center" |
|||
prop="oneNum" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="审核不通过" |
|||
align="center" |
|||
prop="twoNum" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="已完成" |
|||
align="center" |
|||
prop="threeNum" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="完成率" |
|||
align="center" |
|||
prop="rate" |
|||
min-width="120" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getStatistics, listAqrw } from "@/api/yg/aqrw"; |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
props: ["taskId"], |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
statisticsList: [], |
|||
barChartData: { |
|||
name: [], |
|||
value: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
watch: { |
|||
taskId: function (n, o) { |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.loading = true; |
|||
getStatistics(this.taskId).then((response) => { |
|||
// console.log(11, response); |
|||
this.statisticsList = response.data; |
|||
this.barChartData.name = response.data?.map((res) => res.adcdName); |
|||
this.barChartData.value = response.data?.map((res) => res.rate); |
|||
this.loading = false; |
|||
this.barInit(); |
|||
}); |
|||
}, |
|||
barInit() { |
|||
let chartDom = this.$refs.barEle; |
|||
let myChart = echarts.init(chartDom); |
|||
let option = { |
|||
title: { |
|||
// text: "World Population", |
|||
}, |
|||
color: ["#38A0FF", "#4CCA73", "#FBD437"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
// legend: { |
|||
// orient: "horizontal", |
|||
// bottom: "2%", |
|||
// icon: "circle", |
|||
// }, |
|||
grid: { |
|||
left: "3%", |
|||
right: "4%", |
|||
top: "10%", |
|||
bottom: "10%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
data: this.barChartData.name, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
//网格线 |
|||
show: true, //是否显示 |
|||
lineStyle: { |
|||
//网格线样式 |
|||
// color: "#0735a2", //网格线颜色 |
|||
// width: 1, //网格线的加粗程度 |
|||
type: "dashed", //网格线类型 |
|||
}, |
|||
}, |
|||
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 |
|||
max: function (value) { |
|||
return value.max + Math.ceil(0.2 * value.max); |
|||
}, |
|||
// boundaryGap: [0, 1], |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
data: this.barChartData.value, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
window.addEventListener("resize", function () { |
|||
myChart.resize(); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.content { |
|||
height: 250px; |
|||
margin-top: 20px; |
|||
// border: 1px solid #000; |
|||
background: #fff; |
|||
// box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2); |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,190 @@ |
|||
<template> |
|||
<div> |
|||
<div class="content"> |
|||
<div ref="barEle" style="width: 100%; height: 100%"></div> |
|||
</div> |
|||
|
|||
<el-table v-loading="loading" :data="statisticsList"> |
|||
<el-table-column |
|||
label="行政划区" |
|||
align="center" |
|||
prop="adcdName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="水闸任务总数" |
|||
align="center" |
|||
prop="total" |
|||
min-width="120" |
|||
/> |
|||
|
|||
<el-table-column |
|||
label="已完成" |
|||
align="center" |
|||
prop="threeNum" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="一级水闸" |
|||
align="center" |
|||
prop="one" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="二级水闸" |
|||
align="center" |
|||
prop="two" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="三级水闸" |
|||
align="center" |
|||
prop="three" |
|||
min-width="120" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getStatisticsLevel, listAqrw } from "@/api/yg/aqrw"; |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
props: ["taskId"], |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
statisticsList: [], |
|||
barChartData: { |
|||
name: [], |
|||
value1: [], |
|||
value2: [], |
|||
value3: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
watch: { |
|||
taskId: function (n, o) { |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.loading = true; |
|||
getStatisticsLevel(this.taskId).then((response) => { |
|||
console.log(11, response); |
|||
this.statisticsList = response.data; |
|||
this.barChartData.name = response.data?.map((res) => res.adcdName); |
|||
this.barChartData.value1 = response.data?.map((res) => res.one); |
|||
this.barChartData.value2 = response.data?.map((res) => res.two); |
|||
this.barChartData.value3 = response.data?.map((res) => res.three); |
|||
this.loading = false; |
|||
this.barInit(); |
|||
}); |
|||
}, |
|||
barInit() { |
|||
let chartDom = this.$refs.barEle; |
|||
let myChart = echarts.init(chartDom); |
|||
let option = { |
|||
title: { |
|||
// text: "World Population", |
|||
}, |
|||
color: ["#38A0FF", "#4CCA73", "#FBD437"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
legend: { |
|||
orient: "horizontal", |
|||
bottom: "2%", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
icon: "rect", |
|||
}, |
|||
grid: { |
|||
left: "3%", |
|||
right: "4%", |
|||
top: "10%", |
|||
bottom: "15%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
data: this.barChartData.name, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
//网格线 |
|||
show: true, //是否显示 |
|||
lineStyle: { |
|||
//网格线样式 |
|||
// color: "#0735a2", //网格线颜色 |
|||
// width: 1, //网格线的加粗程度 |
|||
type: "dashed", //网格线类型 |
|||
}, |
|||
}, |
|||
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 |
|||
max: function (value) { |
|||
return value.max + Math.ceil(0.2 * value.max); |
|||
}, |
|||
// boundaryGap: [0, 1], |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
name: "一类水闸", |
|||
type: "bar", |
|||
data: this.barChartData.value1, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
{ |
|||
name: "二类水闸", |
|||
type: "bar", |
|||
data: this.barChartData.value2, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
{ |
|||
name: "三类水闸", |
|||
type: "bar", |
|||
data: this.barChartData.value3, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
window.addEventListener("resize", function () { |
|||
myChart.resize(); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.content { |
|||
height: 250px; |
|||
margin-top: 20px; |
|||
// border: 1px solid #000; |
|||
background: #fff; |
|||
// box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2); |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<div> |
|||
<div class="content"> |
|||
<div ref="barEle" style="width: 100%; height: 100%"></div> |
|||
</div> |
|||
|
|||
<el-table v-loading="loading" :data="statisticsList"> |
|||
<el-table-column |
|||
label="行政划区" |
|||
align="center" |
|||
prop="adcdName" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="水闸任务总数" |
|||
align="center" |
|||
prop="total" |
|||
min-width="120" |
|||
/> |
|||
|
|||
<el-table-column |
|||
label="待填报" |
|||
align="center" |
|||
prop="zeroNum" |
|||
min-width="120" |
|||
/> |
|||
<el-table-column |
|||
label="待审核" |
|||
align="center" |
|||
prop="oneNum" |
|||
min-width="120" |
|||
/> |
|||
|
|||
<el-table-column |
|||
label="已完成" |
|||
align="center" |
|||
prop="threeNum" |
|||
min-width="120" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getStatistics, listAqrw } from "@/api/yg/aqrw"; |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
props: ["taskId"], |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
statisticsList: [], |
|||
barChartData: { |
|||
name: [], |
|||
value1: [], |
|||
value2: [], |
|||
value3: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
watch: { |
|||
taskId: function (n, o) { |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.loading = true; |
|||
getStatistics(this.taskId).then((response) => { |
|||
// console.log(11, response); |
|||
this.statisticsList = response.data; |
|||
this.barChartData.name = response.data?.map((res) => res.adcdName); |
|||
this.barChartData.value1 = response.data?.map((res) => res.zeroNum); |
|||
this.barChartData.value2 = response.data?.map((res) => res.oneNum); |
|||
this.barChartData.value3 = response.data?.map((res) => res.threeNum); |
|||
this.loading = false; |
|||
this.barInit(); |
|||
}); |
|||
}, |
|||
barInit() { |
|||
let chartDom = this.$refs.barEle; |
|||
let myChart = echarts.init(chartDom); |
|||
let option = { |
|||
title: { |
|||
// text: "World Population", |
|||
}, |
|||
color: ["#38A0FF", "#4CCA73", "#FBD437"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
legend: { |
|||
orient: "horizontal", |
|||
bottom: "2%", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
icon: "rect", |
|||
}, |
|||
grid: { |
|||
left: "3%", |
|||
right: "4%", |
|||
top: "10%", |
|||
bottom: "15%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
data: this.barChartData.name, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
//网格线 |
|||
show: true, //是否显示 |
|||
lineStyle: { |
|||
//网格线样式 |
|||
// color: "#0735a2", //网格线颜色 |
|||
// width: 1, //网格线的加粗程度 |
|||
type: "dashed", //网格线类型 |
|||
}, |
|||
}, |
|||
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 |
|||
max: function (value) { |
|||
return value.max + Math.ceil(0.2 * value.max); |
|||
}, |
|||
// boundaryGap: [0, 1], |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
name: "待填报", |
|||
type: "bar", |
|||
data: this.barChartData.value1, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
{ |
|||
name: "待审核", |
|||
type: "bar", |
|||
data: this.barChartData.value2, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
{ |
|||
name: "已完成", |
|||
type: "bar", |
|||
data: this.barChartData.value3, |
|||
barMaxWidth: "10%", |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
window.addEventListener("resize", function () { |
|||
myChart.resize(); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.content { |
|||
height: 250px; |
|||
margin-top: 20px; |
|||
// border: 1px solid #000; |
|||
background: #fff; |
|||
// box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2); |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<div> |
|||
<el-form |
|||
:model="queryParams" |
|||
ref="queryForm" |
|||
:inline="true" |
|||
label-width="68px" |
|||
style="border-bottom: 1px solid #e4e7ed" |
|||
> |
|||
<el-form-item label="任务名称" prop="taskName"> |
|||
<el-select |
|||
v-model="taskId" |
|||
placeholder="请选择水闸名称" |
|||
style="width: 100%" |
|||
filterable |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="dict in aqrwList" |
|||
:key="dict.id" |
|||
:label="dict.taskName" |
|||
:value="dict.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="tab"> |
|||
<div class="list"> |
|||
<span :class="isActive == '1' ? 'active' : ''" @click="isActive = '1'" |
|||
>任务填报情况</span |
|||
> |
|||
<span :class="isActive == '2' ? 'active' : ''" @click="isActive = '2'" |
|||
>安全鉴定进展</span |
|||
> |
|||
<span :class="isActive == '3' ? 'active' : ''" @click="isActive = '3'" |
|||
>工程安全类别</span |
|||
> |
|||
</div> |
|||
</div> |
|||
|
|||
<statisticsOne |
|||
v-if="isActive == '1'" |
|||
ref="statisticsOne" |
|||
:taskId="taskId" |
|||
/> |
|||
<statisticsTwo |
|||
v-if="isActive == '2'" |
|||
ref="statisticsTwo" |
|||
:taskId="taskId" |
|||
/> |
|||
<statisticsThree |
|||
v-if="isActive == '3'" |
|||
ref="statisticsThree" |
|||
:taskId="taskId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getStatistics, listAqrw } from "@/api/yg/aqrw"; |
|||
import statisticsOne from "./components/statisticsOne.vue"; |
|||
import statisticsTwo from "./components/statisticsTwo.vue"; |
|||
import statisticsThree from "./components/statisticsThree.vue"; |
|||
export default { |
|||
components: { |
|||
statisticsOne, |
|||
statisticsTwo, |
|||
statisticsThree, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
taskId: "", |
|||
aqrwList: [], |
|||
|
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
ids: null, |
|||
data: { |
|||
wagaIds: null, |
|||
planCompletionTime: null, |
|||
taskSluiceNumber: null, |
|||
completionNumber: null, |
|||
incompletionNumber: null, |
|||
taskStatus: null, |
|||
distributeTime: null, |
|||
completionTime: null, |
|||
createUid: null, |
|||
updateUid: null, |
|||
owerDept: null, |
|||
relation: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sortBy: "desc", |
|||
}, |
|||
}, |
|||
isActive: "1", |
|||
}; |
|||
}, |
|||
created() { |
|||
listAqrw(this.queryParams).then((response) => { |
|||
this.aqrwList = response.records; |
|||
this.taskId = response.records[0].id; |
|||
}); |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.tab { |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.list { |
|||
border-bottom: 4px solid #e4e7ed; |
|||
padding: 0 40px; |
|||
span { |
|||
display: inline-block; |
|||
padding: 20px 0; |
|||
margin-right: 30px; |
|||
cursor: pointer; |
|||
color: #909399; |
|||
transform: translateY(4px); |
|||
} |
|||
span:nth-last-child(1) { |
|||
margin-right: 0; |
|||
} |
|||
.active { |
|||
color: #000; |
|||
border-bottom: 4px solid #36b29e; |
|||
} |
|||
} |
|||
} |
|||
// .content { |
|||
// height: 200px; |
|||
// margin-top: 20px; |
|||
// // border: 1px solid #000; |
|||
// background: #fff; |
|||
// // box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2); |
|||
// margin-bottom: 10px; |
|||
// display: flex; |
|||
// } |
|||
</style> |
|||
Loading…
Reference in new issue