联调电网一张图

src/views/pqs/qualityInspeection/panorama/components/details/technique.vue

@@ -0,0 +1,68 @@
+<!-- 技术 -->
+<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([
+    {
+        devName: 123
+    }
+])
+
+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>