admin-sjzx/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/provinceDetails.vue

<template>

    <el-dialog draggable v-model="dialogVisible" :title="title" width="70%">
        <div style="height: 55vh">
        <vxe-table height="auto" auto-resize :data="tableData" v-loading="loading" v-bind="defaultAttribute"
            :key="key">

            <vxe-column field="name" title="名称"></vxe-column>
            <vxe-column field="powerCompany" title="供电公司" v-if="voltageLevelFlag"></vxe-column>
            <vxe-column field="substation" title="变电站" v-if="voltageLevelFlag"></vxe-column>
            <vxe-column field="busBar" title="母线" v-if="voltageLevelFlag"></vxe-column>

            <vxe-column field="voltageLevel" title="电压等级"
                v-if="statisticalName == '谐波电压(%)' && !voltageLevelFlag"></vxe-column>
            <vxe-column field="data" :title="statisticalName">
                <template #default="scope">
                    <span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
                    <span v-else type="primary" size="small">
                        {{ parseFloat(scope.row.data.toFixed(2))  }}
                    </span>
                </template>
            </vxe-column>
            <vxe-column field="zd" title="评估">
                <template #default="scope">
                    <span v-if="
                        0 <= scope.row.data &&
                        scope.row.data < 1 &&
                        scope.row.data !== 3.14159
                    " style=" font-weight: bold;color: #339966;">
                        无污染
                    </span>
                    <span v-if="
                        1 <= scope.row.data &&
                        scope.row.data < 1.2 &&
                        scope.row.data !== 3.14159
                    " style=" font-weight: bold;color: #3399ff;">
                        轻微污染
                    </span>
                    <span v-if="
                        1.2 <= scope.row.data &&
                        scope.row.data < 1.6 &&
                        scope.row.data !== 3.14159
                    " style=" font-weight: bold;color: #ffcc33;">
                        轻度污染
                    </span>
                    <span v-if="
                        1.6 <= scope.row.data &&
                        scope.row.data < 2 &&
                        scope.row.data !== 3.14159
                    " style=" font-weight: bold;color: #ff9900;">
                        中度污染
                    </span>
                    <span v-if="
                        2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
                    " style=" font-weight: bold;color: #cc0000;">
                        重度污染
                    </span>
                    <span v-if="scope.row.data == 3.14159" style="color: #000;">
                        暂无评估
                    </span>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
    </el-dialog>

</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getSubstationInfoById, getLineInfoById } from '@/api/harmonic-boot/area'
const dialogVisible = ref(false)
const loading = ref(false)
const voltageLevelFlag = ref(false)
const tableData = ref([])
const title = ref('')
const key = ref(0)
const statisticalName = ref('')
const open = (row: any, flag: boolean, params: any) => {
    console.log("🚀 ~ open ~ row:", row)
    voltageLevelFlag.value = flag
    loading.value = true
    title.value = row.name + '详情'
    statisticalName.value = params.statisticalType.name + '(%)'
    tableData.value = []
    if (flag) {
        getLineInfoById({ ...params, deptIndex: row.pid, id: row.id ,powerFlag: row.powerFlag }).then((res: any) => {
            tableData.value = res.data
            loading.value = false
        }).catch(() => {
            loading.value = false
        })

    } else {
        getSubstationInfoById({ ...params, deptIndex: row.id }).then((res: any) => {
            tableData.value = res.data
            loading.value = false
        }).catch(() => {
            loading.value = false
        })
    }

    key.value += 1
    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>