<template>
|
<BaseProdProcess
|
v-model:active="active"
|
@onStep1="onStep1"
|
@onStep2="onStep2"
|
@onStep3="onStep3"
|
:loading="loading"
|
>
|
<template #step2="{ contentHeight }">
|
<el-scrollbar :height="contentHeight">
|
<el-row>
|
<el-col :span="24">
|
<el-table
|
id="prod-problem-type-table"
|
:data="tableData"
|
v-loading="loading"
|
table-layout="fixed"
|
:show-overflow-tooltip="true"
|
size="small"
|
border
|
>
|
<el-table-column
|
fixed="left"
|
type="index"
|
label="编号"
|
width="50"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="left"
|
prop="typeName"
|
label="问题类型"
|
min-width="200"
|
>
|
</el-table-column>
|
<el-table-column prop="count" label="数量" min-width="50" />
|
<el-table-column
|
prop="ratio"
|
label="本月占比"
|
min-width="70"
|
:formatter="ratioFormat"
|
/>
|
<el-table-column
|
prop="ratioDiff"
|
label="较上月占比变化"
|
min-width="70"
|
:formatter="ratioFormat"
|
/>
|
</el-table>
|
</el-col>
|
<el-col :span="24">
|
<el-row justify="center">
|
<div ref="chartRef" style="height: 400px; width: 100%;max-width: 800px;"></div>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-scrollbar>
|
</template>
|
</BaseProdProcess>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
import * as echarts from 'echarts';
|
import BaseProdProcess from '@/views/fysp/data-product/components/BaseProdProcess.vue';
|
import dataprodmiddleApi from '@/api/fysp/dataprodmiddleApi.js';
|
import { conversionFromTable } from '@/utils/excel';
|
import { useProdStepChange } from '@/views/fysp/data-product/prod-step-change.js';
|
import dayjs from 'dayjs';
|
import { pieChartOption, downloadChartImage } from '@/utils/echart-util.js';
|
|
const { active, changeActive } = useProdStepChange();
|
const loading = ref(false);
|
const tableData = ref([]);
|
const chartRef = ref(null);
|
let chart;
|
|
function onStep1(opt) {
|
loading.value = true;
|
dataprodmiddleApi
|
.fetchProblemTypeSummary(opt)
|
.then((res) => {
|
if (res.success) {
|
tableData.value = res.data;
|
}
|
changeActive();
|
setTimeout(() => {
|
genChart(opt);
|
}, 500);
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
function onStep2() {
|
changeActive();
|
}
|
|
function onStep3(val) {
|
if (val.downloadType == '1') {
|
loading.value = true;
|
// conversionFromTable('prod-problem-type-table', '扬尘污染问题类型占比清单');
|
downloadChartImage(chart, '扬尘污染问题类型占比');
|
loading.value = false;
|
}
|
}
|
|
function genChart(opt) {
|
if (chart == undefined) {
|
chart = echarts.init(chartRef.value);
|
}
|
const startTime = dayjs(opt.startTime).format('YYYY年MM月');
|
const option = pieChartOption();
|
option.title.text = `${startTime}扬尘污染问题类型占比`;
|
option.legend.data = tableData.value.map((item) => item.typeName);
|
option.series[0].name = '问题类型';
|
option.series[0].data = tableData.value.map((item) => ({
|
name: item.typeName,
|
value: item.count
|
}));
|
chart.setOption(option);
|
}
|
|
function ratioFormat(row, column, cellValue, index) {
|
return Math.round(cellValue * 1000) / 10 + '%';
|
}
|
</script>
|
