联调全景展示 省级 详情页

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

@@ -3,29 +3,29 @@
     <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" title="所属区域" />
-                <vxe-column field="devName" title="综合评估得分" />
-                <vxe-column field="devName" title="指标合格率" />
+                <vxe-column field="deptName" title="所属区域" />
+                <vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
+                <vxe-column field="qualifyData" title="指标合格率" :formatter="formatter" />
                 <vxe-colgroup title="各项指标得分">
                     <vxe-colgroup title="电压偏差">
-                        <vxe-column field="devName" title="评估得分" />
-                        <vxe-column field="devName" title="指标合格率" />
+                        <vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
+                        <vxe-column field="vdevQualifyData" title="指标合格率" :formatter="formatter" />
                     </vxe-colgroup>
-                    <vxe-colgroup title="评率偏差">
-                        <vxe-column field="devName" title="评估得分" />
-                        <vxe-column field="devName" title="指标合格率" />
+                    <vxe-colgroup title="频率偏差">
+                        <vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
+                        <vxe-column field="freqQualifyData" title="指标合格率" :formatter="formatter" />
                     </vxe-colgroup>
                     <vxe-colgroup title="谐波含量">
-                        <vxe-column field="devName" title="评估得分" />
-                        <vxe-column field="devName" title="指标合格率" />
+                        <vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
+                        <vxe-column field="harmQualifyData" title="指标合格率" :formatter="formatter" />
                     </vxe-colgroup>
                     <vxe-colgroup title="电压闪变">
-                        <vxe-column field="devName" title="评估得分" />
-                        <vxe-column field="devName" title="指标合格率" />
+                        <vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
+                        <vxe-column field="flickerQualifyData" title="指标合格率" :formatter="formatter" />
                     </vxe-colgroup>
                     <vxe-colgroup title="三相不平衡度">
-                        <vxe-column field="devName" title="评估得分" />
-                        <vxe-column field="devName" title="指标合格率" />
+                        <vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
+                        <vxe-column field="unbalanceQualifyData" title="指标合格率" :formatter="formatter" />
                     </vxe-colgroup>
                 </vxe-colgroup>
             </vxe-table>
@@ -39,42 +39,63 @@
 import { ref } from 'vue'
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
-
+import { getAssessDetail } from '@/api/device-boot/panorama'
 const dialogVisible: any = ref(false)
 
-const tableData: any = ref([
-    {
-        devName: 123
-    }
-])
+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, 12, 12, 12]
-            }
-        ]
-    }
-})
+const picEChart = ref()
 const open = async (row: any) => {
+    getAssessDetail(row).then(res => {
+        tableData.value = res.data
+        picEChart.value = {
+            tooltip: {
+                formatter: function (params: any) {
+                    let tips = ''
+
+                    if (params[0].value == 3.14159) {
+                        tips += params[0].name + ':暂无数据<br/>'
+                    } else {
+                        tips += params[0].name + ':' + params[0].value + '%<br/>'
+                    }
+
+                    return tips
+                }
+            },
+            title: {
+                text: ''
+            },
+            xAxis: {
+                name: '(区域)',
+                data: res.data.map((item: any) => item.deptName)
+            },
+            yAxis: {
+                name: '',
+                min: 0,
+                max: 100
+            },
+            options: {
+                series: [
+                    {
+                        name: '评估得分',
+                        type: 'bar',
+
+                        data: res.data.map((item: any) => item.assessData)
+                    }
+                ]
+            }
+        }
+    })
+
     dialogVisible.value = true
 }
+const formatter = (row: any) => {
+    if (row.cellValue == 3.14159) {
+        return '暂无数据'
+    } else {
+        return row.cellValue
+    }
+}
 
 defineExpose({ open })
 </script>