admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/details/technique.vue

<!-- 技术 -->
<template>
    <el-dialog draggable title="技术监督统计" v-model="dialogVisible" width="1400px">
        <div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
                <vxe-column field="orgName" title="区域" />
                <vxe-column field="abnormalNum" title="异常问题总数" />
                <vxe-column field="workNum" title="工单总数" />
                <!-- <vxe-column field="num" title="已关联工单数" /> -->
                <vxe-column field="conversionNum" title="工单转换率(%)" />

                <vxe-column field="processedNum" title="已处理工单数" />
                <vxe-column field="disposalNum" title="工单处置率(%)" />
            </vxe-table>
        </div>
        <div style="height: 300px; margin-top: 10px">
            <MyEChart style="height: 300px" :options="picEChart" />
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getSupervisionDetailsData, getSupervisionCityDetailsData } from '@/api/device-boot/panorama'
const dialogVisible: any = ref(false)

const tableData: any = ref([])

const picEChart = ref({})
const open = async (row: any) => {
    dialogVisible.value = true
    getSupervisionDetailsData(row).then(res => {
        tableData.value = res.data
    })
    getSupervisionCityDetailsData(row).then(res => {
        picEChart.value = {
            title: {
                text: ''
            },
            xAxis: {
                name: '',
                data: ['技术监督计划', '用户投诉', '在线监测问题']
            },

            yAxis: {
                name: '',
                min: 0,
                max: 100
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '问题个数',
                        type: 'bar',
                        data: [res.data.survey.abnormalNum, res.data.user.abnormalNum, res.data.onLine.abnormalNum]
                    },
                    {
                        name: '已处理',
                        type: 'bar',

                        data: [res.data.survey.processedNum, res.data.user.processedNum, res.data.onLine.processedNum]
                    }
                ]
            }
        }
    })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
    max-height: none !important;
}
</style>