联调市详情页面

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

@@ -14,15 +14,37 @@
             </el-col>
             <el-col :span="12">
                 <div class="title">
-                    <span>污染告警</span>
+                    <span>
+                        污染告警
+                        <el-popover placement="right" :width="150" trigger="hover">
+                            <template #reference>
+                                <WarningFilled class="WarningFilled" />
+                            </template>
+                            <div class="text">
+                                <span style="color: #00b07d">无污染：(0,1]</span>
+                                <br />
+                                <span style="color: #3399ff">轻微污染：(1,1.2]</span>
+                                <br />
+                                <span style="color: #ffcc33">轻度污染：(1.2,1.6]</span>
+                                <br />
+                                <span style="color: #ff9900">中度污染：(1.6,2]</span>
+                                <br />
+                                <span style="color: #cc0000">重度污染：(2,+∞)</span>
+                            </div>
+                        </el-popover>
+                    </span>
+                    <el-select v-model="contaminate" style="width: 120px; margin-right: 80px" @change="contaminateC">
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
                 </div>
+
                 <div class="pie">
                     <MyEChart v-for="item in picEChart" class="MyEChart" :options="item" />
                 </div>
             </el-col>
         </el-row>
         <div>
-            <div class="title">
+            <div class="title mb10">
                 <span>变电站详细列表</span>
             </div>
             <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
@@ -40,11 +62,19 @@ import { ref } from 'vue'
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
+
+import { WarningFilled } from '@element-plus/icons-vue'
 import { getPollutionAlarmPageData, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
 const dictData = useDictData()
 const dialogVisible: any = ref(false)
 const time = ref('1')
 const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
+const options: any = dictData.getBasicData('Pollution_Statis').filter(item => {
+    if (item.code == 'V_Harmonic' || item.code == 'I_All') {
+        return item
+    }
+})
+const contaminate = ref(options[0].id)
 const rowList: any = ref({})
 const trendEChart: any = ref({})
 const tableData: any = ref([])
@@ -62,7 +92,16 @@ const open = async (row: any) => {
     }
     analysis(1)
     // 污染
-    getPollutionAlarmData(rowList.value).then(res => {
+    contaminateC()
+    // 列表
+    getPollutionAlarmPageData(rowList.value).then(res => {
+        tableData.value = res.data.records
+    })
+
+    dialogVisible.value = true
+}
+const contaminateC = () => {
+    getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
         let data = []
 
         let a1 = 0
@@ -70,7 +109,7 @@ const open = async (row: any) => {
         let a3 = 0
         let a4 = 0
         let a5 = 0
-        if (row.isUpToGrid == 0) {
+        if (rowList.value.isUpToGrid == 0) {
             data = res.data.info
         } else {
             data = res.data.gwInfo
@@ -111,7 +150,7 @@ const open = async (row: any) => {
                 name: `重度污染：${a5}座`
             }
         ]
-        const color = ['#00B07D', '#FFAF00', '#FF7D00', '#B90000', '#62298B']
+        const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#cc0000']
 
         list.forEach((item, i) => {
             picEChart.value[i] = {
@@ -208,15 +247,9 @@ const open = async (row: any) => {
             }
         })
     })
-    // 列表
-    getPollutionAlarmPageData(rowList.value).then(res => {
-        tableData.value = res.data.records
-    })
-
-    dialogVisible.value = true
 }
 const analysis = (e: any) => {
-    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
+    let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
     // 分析
     getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
         let name = []
@@ -262,9 +295,9 @@ const analysis = (e: any) => {
 }
 const formatter = (row: any) => {
     if (row.column.field == 'dataV') {
-        return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
+        return row.cellValue == 3.14159 ? '/' : row.cellValue
     } else if (row.column.field == 'data') {
-        return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
+        return row.cellValue == 3.14159 ? '/' : row.cellValue
     } else if (row.column.field == 'voltageLevel') {
         return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
     } else {
@@ -276,7 +309,6 @@ const handleClose = () => {
     dialogVisible.value = false
 }
 
-
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
@@ -286,10 +318,15 @@ defineExpose({ open })
 .title {
     display: flex;
     justify-content: space-between;
+    position: relative;
     span {
         font-weight: 550;
         font-size: 18px;
     }
+    .WarningFilled {
+        width: 16px;
+        cursor: pointer;
+    }
 }
 .pie {
     display: flex;