You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
8.8 KiB
343 lines
8.8 KiB
<!-- 监督检查-统计分析 -->
|
|
<script>
|
|
import { getDangerTaskListData, getDangerTaskTotalData } from "@/api/sluice";
|
|
import { getAreasData } from "@/api/areas";
|
|
import Pie from "./components/Pie.vue";
|
|
|
|
import TopBackTitle from "@/components/TopBackTitle/index.vue";
|
|
import { cascaderLazyLoad } from "@/utils/elUtils";
|
|
|
|
export default {
|
|
name: "InspectionItems",
|
|
components: {
|
|
Pie,
|
|
TopBackTitle,
|
|
},
|
|
data() {
|
|
return {
|
|
areasOptionProps: {
|
|
emitPath: false,
|
|
checkStrictly: true, //选择任意一级
|
|
expandTrigger: "hover",
|
|
lazy: true,
|
|
lazyLoad: cascaderLazyLoad,
|
|
},
|
|
areasOptions: [],
|
|
riverLocationList: [], // 流域数据
|
|
tasksList: [], // 任务列表数据
|
|
projectTypeOptions: [], // 工程类型
|
|
paramsData: {
|
|
riverLocation: "",
|
|
wagaType: "",
|
|
adcd: "",
|
|
taskId: "",
|
|
},
|
|
questionLevelList: [],
|
|
};
|
|
},
|
|
methods: {
|
|
// 获取列表数据
|
|
initData() {
|
|
getDangerTaskTotalData({
|
|
wagaType: this.paramsData.wagaType || null,
|
|
adcd: this.paramsData.adcd || null,
|
|
id: this.paramsData.taskId || null,
|
|
riverLocation: this.paramsData.riverLocation || null,
|
|
}).then((res) => {
|
|
let list = [
|
|
{
|
|
text: "病险工程数",
|
|
key: "totalCheckTask",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "已建核查数",
|
|
key: "alreadyCheckTask",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "未建核查数",
|
|
key: "unCheckTask",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "任务总数",
|
|
key: "totalTask",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "完成核查任务数",
|
|
key: "finishTask",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "未完成核查任务数",
|
|
key: "unTask",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "核查项总数",
|
|
key: "itemTotal",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "核查正常项数",
|
|
key: "normalTotal",
|
|
value: 0,
|
|
},
|
|
{
|
|
text: "核查问题项数",
|
|
key: "problemTotal",
|
|
value: 0,
|
|
},
|
|
];
|
|
if (res?.data) {
|
|
list.forEach((item) => {
|
|
item.value = res.data[item.key] || 0;
|
|
});
|
|
}
|
|
this.questionLevelList = list;
|
|
});
|
|
},
|
|
handleChangeType() {
|
|
this.remoteOptions = [];
|
|
this.paramsData = {
|
|
wagaType: "",
|
|
adcd: "",
|
|
remoteValue: "",
|
|
};
|
|
if (this.typeSelect === "") {
|
|
this.initData();
|
|
}
|
|
},
|
|
handleChangeQuery() {
|
|
this.initData();
|
|
},
|
|
handleGetRemoteRiverLocationData() {
|
|
// 获取远程搜索数据
|
|
// api({
|
|
// data: {
|
|
// name: query,
|
|
// },
|
|
// pageSize: 20,
|
|
// pageNum: 1,
|
|
// }).then((res) => {
|
|
// if (res) {
|
|
// this.remoteOptions = res.records.map((item) => {
|
|
// return {
|
|
// label: item.name,
|
|
// value: item.id,
|
|
// };
|
|
// });
|
|
// }
|
|
// });
|
|
},
|
|
// 获取远程搜索数据
|
|
handleGetRemoteTasksData(query) {
|
|
getDangerTaskListData({
|
|
data: {
|
|
name: query,
|
|
},
|
|
pageSize: 20,
|
|
pageNum: 1,
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.tasksList = res.records.map((item) => {
|
|
return {
|
|
label: item.name,
|
|
value: item.id,
|
|
};
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 获取行政区划数据
|
|
getTreeData() {
|
|
getAreasData().then((items) => {
|
|
let res = [];
|
|
let getChildren = (res, pid) => {
|
|
for (const i of items.data) {
|
|
if (i.parentid === pid) {
|
|
const newItem = {
|
|
label: i.name,
|
|
value: i.id,
|
|
};
|
|
if (i.layer != 3) newItem.children = [];
|
|
res.push(newItem);
|
|
getChildren(newItem.children, newItem.value);
|
|
}
|
|
}
|
|
};
|
|
getChildren(res, items.data[0].parentid);
|
|
this.areasOptions = res;
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
// 水闸类型
|
|
this.getDicts("sluice_type").then((response) => {
|
|
this.projectTypeOptions = response.data;
|
|
});
|
|
},
|
|
mounted() {
|
|
this.getTreeData();
|
|
this.initData();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="body slider-right">
|
|
<TopBackTitle :showBackBtn="false" title="统计分析"></TopBackTitle>
|
|
|
|
<div class="table-box slider-right-body">
|
|
<div class="flex title-box justify-between items-center">
|
|
<div class="title">监督检查任务统计分析</div>
|
|
<div class="select-box flex items-center font-14">
|
|
<span class="mr-12">所属流域</span>
|
|
<el-select
|
|
size="mini"
|
|
class="statistic-analysis-select-style"
|
|
v-model="paramsData.riverLocation"
|
|
filterable
|
|
link
|
|
remote
|
|
placeholder="请输入关键词"
|
|
:remote-method="handleGetRemoteRiverLocationData"
|
|
@focus="handleGetRemoteRiverLocationData('')"
|
|
@change="handleChangeQuery"
|
|
>
|
|
<el-option label="全部" value=""> </el-option>
|
|
<el-option
|
|
v-for="item in riverLocationList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<span class="ml-32 mr-12">工程类型</span>
|
|
<el-select
|
|
size="mini"
|
|
class="statistic-analysis-select-style"
|
|
v-model="paramsData.wagaType"
|
|
filterable
|
|
@change="handleChangeQuery"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option label="全部" value=""> </el-option>
|
|
<el-option
|
|
v-for="item in projectTypeOptions"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<span class="ml-32 mr-12">行政区划</span>
|
|
<el-cascader
|
|
size="mini"
|
|
class="statistic-analysis-select-style"
|
|
v-model="paramsData.adcd"
|
|
:props="areasOptionProps"
|
|
placeholder="请选择行政区划"
|
|
clearable
|
|
@change="handleChangeQuery"
|
|
>
|
|
</el-cascader>
|
|
<span class="ml-32 mr-12">病险核查任务</span>
|
|
<el-select
|
|
size="mini"
|
|
class="statistic-analysis-select-style"
|
|
v-model="paramsData.taskId"
|
|
filterable
|
|
link
|
|
remote
|
|
placeholder="请输入关键词"
|
|
:remote-method="handleGetRemoteTasksData"
|
|
@focus="handleGetRemoteTasksData('')"
|
|
@change="handleChangeQuery"
|
|
>
|
|
<el-option label="全部" value=""> </el-option>
|
|
<el-option
|
|
v-for="item in tasksList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 问题列表 -->
|
|
<div class="question-box" v-if="questionLevelList.length">
|
|
<Pie
|
|
title="工程统计"
|
|
echartsTitle="工程总数"
|
|
:itemData="questionLevelList.slice(1, 3)"
|
|
ref="pieRef1"
|
|
class="question-item"
|
|
></Pie>
|
|
<Pie
|
|
ref="pieRef2"
|
|
title="任务数统计"
|
|
echartsTitle="任务总数"
|
|
class="question-item"
|
|
:itemData="questionLevelList.slice(4, 6)"
|
|
></Pie>
|
|
<Pie
|
|
ref="pieRef2"
|
|
title="核查项统计"
|
|
echartsTitle="核查项总数"
|
|
class="question-item"
|
|
:itemData="questionLevelList.slice(7, 9)"
|
|
></Pie>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.body {
|
|
width: 100%;
|
|
padding-left: 24px;
|
|
.top-title {
|
|
height: 40px;
|
|
background-color: white;
|
|
display: flex;
|
|
padding-left: 16px;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-box {
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
background-color: white;
|
|
.title-box {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.title {
|
|
padding-left: 20px;
|
|
position: relative;
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
content: "";
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #1890ff;
|
|
}
|
|
}
|
|
}
|
|
.question-box {
|
|
padding: 24px;
|
|
.question-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|