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="300px" :data="tableData">
                <vxe-column field="devName" />
                <vxe-column field="devName" title="异常问题总数" />
                <vxe-column field="devName" title="已关联工单数" />
                <vxe-column field="devName" title="工单转换率(%)" />
                <vxe-column field="devName" title="工单总数" />
                <vxe-column field="devName" title="已处理工单数" />
                <vxe-column field="devName" 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'

const dialogVisible: any = ref(false)

const tableData: any = ref([])

const picEChart = ref({
    title: {
        text: ''
    },
    xAxis: {
        name: '(区域)',
        data: ['技术监督计划', '用户投诉', '谐波普测问题', '在线率问题']
    },
    yAxis: {
        name: '',
        min: 0,
        max: 100
    },
    options: {
        series: [
            {
                name: '问题个数',
                type: 'bar',
                data: [12, 12, 12, 12]
            },
            {
                name: '已处理',
                type: 'bar',

                data: [12, 12, 12, 12]
            }
        ]
    }
})
const open = async (row: any) => {
    dialogVisible.value = true
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>