<template>
|
<FYTable
|
@search="onSearch"
|
:data="showData"
|
:pagination="false"
|
ref="tableRef"
|
>
|
<template #options>
|
<!-- 区县 -->
|
<FYOptionLocation
|
:allOption="false"
|
:level="3"
|
:checkStrictly="false"
|
v-model:value="formSearch.locations"
|
></FYOptionLocation>
|
<!-- 场景类型 -->
|
<FYOptionScene
|
:allOption="false"
|
:type="2"
|
v-model:value="formSearch.scenetype"
|
></FYOptionScene>
|
<!-- 时间 -->
|
<FYOptionTime
|
:initValue="false"
|
type="daterange"
|
v-model:value="formSearch.timeArr"
|
style="width: 300px"
|
></FYOptionTime>
|
</template>
|
|
<template #options-expand>
|
<el-radio-group v-model="radio">
|
<el-radio :value="1">按问题名称统计</el-radio>
|
<el-radio :value="2">按问题类型统计</el-radio>
|
</el-radio-group>
|
</template>
|
<template #buttons> </template>
|
<template #table-column="{ size }">
|
<!-- <el-table-column fixed="left" label="序号" width="53">
|
<template #default="{ row }">
|
{{ row.index + 1 }}
|
</template>
|
</el-table-column> -->
|
<el-table-column fixed="left" label="唯一编号" width="90" prop="index">
|
</el-table-column>
|
<el-table-column
|
prop="sceneName"
|
:show-overflow-tooltip="true"
|
label="名称"
|
>
|
</el-table-column>
|
<el-table-column prop="sceneType" label="类型" width="60" />
|
<!-- <el-table-column prop="provinceName" label="省份" width="90">
|
</el-table-column>
|
<el-table-column prop="cityName" label="城市" width="90">
|
</el-table-column> -->
|
<el-table-column prop="districtName" label="区县" width="90">
|
</el-table-column>
|
<el-table-column prop="townName" label="街镇" width="110">
|
</el-table-column>
|
<el-table-column prop="problemType" label="问题类型" width="110">
|
</el-table-column>
|
<el-table-column
|
v-if="radio == 1"
|
prop="problemName"
|
label="问题名称"
|
width="200"
|
>
|
</el-table-column>
|
<el-table-column prop="proNum" label="问题数" width="70">
|
</el-table-column>
|
<el-table-column prop="changeNum" label="整改数" width="70">
|
</el-table-column>
|
</template>
|
</FYTable>
|
</template>
|
<script setup>
|
import { ref, computed } from 'vue';
|
import dayjs from 'dayjs';
|
import dataproductApi from '@/api/fysp/dataproductApi.js';
|
|
const radio = ref(1);
|
const tableRef = ref(null);
|
const tableData = ref([]);
|
const formSearch = ref({
|
locations: {},
|
scenetype: {},
|
timeArr: [dayjs().add(-1, 'M').date(1).toDate(), dayjs().toDate()]
|
});
|
|
const option = computed(() => {
|
const { locations, scenetype, timeArr } = formSearch.value;
|
return {
|
provinceCode: locations.pCode,
|
cityCode: locations.cCode,
|
districtCode: locations.dCode,
|
townCode: locations.tCode,
|
startTime: dayjs(timeArr[0]).format('YYYY-MM-DD HH:mm:ss'),
|
endTime: dayjs(timeArr[1])
|
.hour(23)
|
.minute(59)
|
.second(59)
|
.format('YYYY-MM-DD HH:mm:ss'),
|
sceneTypeId: scenetype.value
|
};
|
});
|
|
const showData = computed(() => {
|
let res = [];
|
switch (radio.value) {
|
case 1:
|
res = tableData.value;
|
break;
|
case 2:
|
tableData.value.forEach((tb) => {
|
const r = res.find((v) => {
|
return v.sceneName == tb.sceneName && v.problemType == tb.problemType;
|
});
|
if (r == undefined) {
|
res.push({ ...tb });
|
} else {
|
r.proNum += tb.proNum;
|
r.changeNum += tb.changeNum;
|
}
|
});
|
break;
|
default:
|
res = tableData.value;
|
break;
|
}
|
if (tableRef.value) {
|
tableRef.value.doLayout();
|
}
|
return res;
|
});
|
|
function onSearch(page, callback) {
|
fetchProbRecurrence().finally(() => callback());
|
}
|
|
function fetchProbRecurrence() {
|
return dataproductApi.fetchProbRecurrence(option.value).then((res) => {
|
tableData.value = res.data;
|
});
|
}
|
// function handleChange(value) {
|
// switch (value) {
|
// case 1:
|
// break;
|
// case 2:
|
// break;
|
// default:
|
// break;
|
// }
|
// }
|
</script>
|
