admin-sjzx/src/views/pqs/bearingCapacity/evaluationList/index.vue

<template>
    <div class="default-main">
        <div v-show="addedShow">
            <TableHeader datePicker showExport ref="TableHeaderRef">
                <template #select>
                    <el-form-item label="评估类型">
                        <el-select
                            v-model="tableStore.table.params.evaluateType"
                            clearable
                            placeholder="请选择评估类型"
                        >
                            <el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </template>
                <template #operation>
                    <el-button icon="el-icon-Setting" type="primary" @click="configuration">评估策略配置</el-button>
                    <el-button icon="el-icon-Plus" type="primary" @click="addAssess">新增评估</el-button>
                </template>
            </TableHeader>
            <Table ref="tableRef" />

            <policy v-if="policyView" @View="policyView = false" />
        </div>
        <!-- <Added v-if="!addedShow" @quit="addedShow = true" /> -->
        <div v-if="!addedShow" style="position: relative">
            <el-tabs v-model="activeName" type="border-card" :style="{ height: height }">
                <el-tab-pane label="光伏电站承载能力评估" name="1" v-if="code == null || code == 1">
                    <photovoltaic :rowList="rowList" />
                </el-tab-pane>
                <el-tab-pane
                    label="充电站、电加热负荷、电气化铁路承载能力评估"
                    name="2"
                    v-if="code == null || code == 2"
                >
                    <charge :rowList="rowList" />
                </el-tab-pane>
            </el-tabs>
            <el-button class="quit" icon="el-icon-Back" @click="quit">返回</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import policy from './components/policy.vue'
import photovoltaic from './components/photovoltaic.vue'
import charge from './components/charge.vue'
import { remove } from '@/api/advance-boot/bearingCapacity'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
defineOptions({
    name: 'estimate/evaluationList'
})
const height = mainHeight(20).height
const dictData = useDictData()
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE')
const activeName = ref('1')

const policyView = ref(false)
const addedShow = ref(true)
const code = ref(null)
const rowList = ref({})
const TableHeaderRef = ref()

const tableStore: any = new TableStore({
    url: '/advance-boot/result/queryResultList',
    method: 'POST',
    column: [
        {
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'userName', title: '用户名称' },
        {
            field: 'evaluateType',
            title: '评估类型',
            formatter: (row: any) => {
                return uesrList.filter(item => item.id == row.cellValue)[0].name
            }
        },
        {
            field: 'lineName',
            title: '配变台区',
            width: '500',
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },

        {
            field: 'reslutLevel',
            title: '评估结果',
            type: 'html',
            formatter: (row: any) => {
                // 1-安全，2-III级预警，3-II级预警，4-I 级预警,5-禁止接入
                return `<span style="color: ${
                    row.cellValue == 1
                        ? '#2E7D32' // 深绿色 - 安全
                        : row.cellValue == 2
                        ? '#0288D1' // 深蓝色 - III级预警
                        : row.cellValue == 3
                        ? '#F57C00' // 橙色 - II级预警
                        : row.cellValue == 4
                        ? '#E64A19' // 深橙色 - I级预警
                        : row.cellValue == 5
                        ? '#C62828' // 深红色 - 禁止接入
                        : row.cellValue == 6
                        ? '#00897B' // 深青色 - 允许接入
                        : ''
                }">${
                    row.cellValue == 1
                        ? '安全'
                        : row.cellValue == 2
                        ? 'III级预警'
                        : row.cellValue == 3
                        ? 'II级预警'
                        : row.cellValue == 4
                        ? 'I 级预警'
                        : row.cellValue == 5
                        ? '禁止接入'
                        : row.cellValue == 6
                        ? '允许接入'
                        : ''
                }</span>`
            }
        },
        { field: 'evaluateDate', title: '评估日期' },

        {
             title: '操作',fixed: 'right',
            width: '180',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '查看',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        rowList.value = row
                        let data = uesrList.filter(item => item.id == row.evaluateType)[0].code
                        data == 'Power_Station_Users'
                            ? ((code.value = 1), (activeName.value = '1'))
                            : ((code.value = 2), (activeName.value = '2'))
                        addedShow.value = false
                    }
                },
                {
                    name: 'del',
                    text: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除？'
                    },
                    click: row => {
                        remove({ ids: row.id }).then(() => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => {}
})
tableStore.table.params.evaluateType = ''
tableStore.table.params.id = dictData.state.area[0].id

provide('tableStore', tableStore)
const quit = () => {
    addedShow.value = true
    tableStore.index()
    rowList.value = {}
}
onMounted(() => {
    tableStore.index()
})
const addAssess = () => {
    addedShow.value = false
    code.value = null
    activeName.value = '1'
}
// 配置
const configuration = () => {
    policyView.value = true
}
</script>
<style lang="scss" scoped>
.quit {
    position: absolute;
    top: 5px;
    right: 10px;
}
</style>