承载能力评估页面 绘制 79%

src/views/pqs/bearingCapacity/evaluationList/added.vue

@@ -0,0 +1,11 @@
+<template>
+    <el-tabs v-model="activeName" type="border-card">
+        <el-tab-pane label="光伏电站承载能力评估" name="1">User</el-tab-pane>
+        <el-tab-pane label="充电站、电加热负荷、电气化铁路承载能力评估" name="2">Config</el-tab-pane>
+    </el-tabs>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+const activeName = ref('1')
+</script>
+<style lang="scss" scoped></style>

src/views/pqs/bearingCapacity/evaluationList/index.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="default-main">
+        <div v-show="addedShow">
+            <TableHeader datePicker ref="TableHeaderRef">
+                <template #select>
+                    <el-form-item label="用户类型">
+                        <el-input
+                            v-model="tableStore.table.params.searchValue"
+                            clearable
+                            placeholder="输入关键字筛选"
+                        />
+                    </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="addedShow = false">
+                        新增承载能力评估
+                    </el-button>
+                </template>
+            </TableHeader>
+            <Table ref="tableRef" />
+            <el-dialog v-model="view" :title="title" width="600" :before-close="handleClose">
+                <el-form ref="ruleFormRef" :model="form" label-width="auto" :disabled="disabled" :rules="rules">
+                    <el-form-item label="用户名称：" prop="name">
+                        <el-input v-model="form.name" clearable placeholder="请输入用户名称" />
+                    </el-form-item>
+                    <el-form-item label="用户类型：" prop="userType">
+                        <el-select v-model="form.userType" clearable collapse-tagsplaceholder="请选择用户类型">
+                            <el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="电压等级：" prop="level">
+                        <el-select v-model="form.level" clearable collapse-tags placeholder="请选择电压等级">
+                            <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="用户协议容量(MVA)：" prop="mav1">
+                        <el-input v-model="form.mav1" clearable placeholder="请输入用户协议容量" />
+                    </el-form-item>
+                    <el-form-item label="拟接入容量(MVA)：" prop="mav2">
+                        <el-input v-model="form.mav2" clearable placeholder="请输入拟接入容量" />
+                    </el-form-item>
+                    <el-form-item label="区域">
+                        <Area v-model="form.deptIndex" style="width: 100%" />
+                    </el-form-item>
+                    <el-form-item label="详细地址：" prop="detailed">
+                        <el-input
+                            clearable
+                            v-model="form.detailed"
+                            :autosize="{ minRows: 2, maxRows: 4 }"
+                            type="textarea"
+                            placeholder="请输入详细地址"
+                        />
+                    </el-form-item>
+                </el-form>
+            </el-dialog>
+            <policy v-if="policyView" @View="policyView = false" />
+        </div>
+        <Added v-if="!addedShow" />
+    </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 Added from './added.vue'
+import policy from './policy.vue'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+defineOptions({
+    name: 'estimate/evaluationList'
+})
+const dictData = useDictData()
+const levelList = dictData.getBasicData('Dev_Voltage_Stand')
+const uesrList = dictData.getBasicData('Interference_Source')
+const view = ref(false)
+const disabled = ref(false)
+const policyView = ref(false)
+const addedShow = ref(false)
+const TableHeaderRef = ref()
+const title = ref('')
+
+const form = ref({
+    name: '',
+    level: '',
+    deptIndex: dictData.state.area[0].id,
+    userType: '光伏电站',
+    type: '光伏电站',
+    mav1: '100',
+    mav2: '100',
+    user: 'Admin',
+    time: '2024-01-03',
+    detailed: '详细地址'
+})
+const rules = {
+    name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
+    userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
+    level: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
+    mav1: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
+    mav2: [{ required: true, message: '请输入拟接入容量', trigger: 'blur' }],
+    detailed: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
+}
+
+const ruleFormRef = ref()
+const tableStore = new TableStore({
+    url: '/advance-boot/process/querySagEventsPage',
+    method: 'POST',
+    column: [
+        { width: '60', type: 'checkbox' },
+
+        {
+            field: 'index',
+            title: '序号',
+            width: '60',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'name', title: '配变台区' },
+        { field: 'type', title: '评估类型' },
+
+        { field: 'Area', title: '预评估用户' },
+        { field: 'level', title: '评估结果' },
+        { field: 'mav1', title: '评估日期' },
+
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '查看',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        if (ruleFormRef.value) ruleFormRef.value.resetFields()
+
+                        disabled.value = true
+                        title.value = '查看承载能力预评估用户'
+                        form.value = JSON.parse(JSON.stringify(row))
+                        view.value = true
+                    }
+                },
+                {
+                    name: 'del',
+                    text: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除？'
+                    },
+                    click: row => {}
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+        tableStore.table.data = [
+            {
+                name: '光伏电站用户1',
+                type: '光伏电站',
+                Area: '中国',
+                level: '220',
+                mav1: '100',
+                mav2: '100',
+                detailed: '详情',
+                user: 'Admin',
+                time: '2024-01-03'
+            }
+        ]
+    }
+})
+tableStore.table.params.searchValue = ''
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    TableHeaderRef.value.setDatePicker([{ label: '周', value: 4 }])
+    TableHeaderRef.value.setInterval(4)
+    tableStore.index()
+})
+// 配置
+const configuration = () => {
+    policyView.value = true
+}
+
+// 取消
+const handleClose = () => {
+    ruleFormRef.value.resetFields()
+    view.value = false
+}
+</script>

src/views/pqs/bearingCapacity/evaluationList/policy.vue

@@ -0,0 +1,231 @@
+<template>
+    <el-dialog v-model="policyView" title="承载能力评估策略" width="1400" :before-close="handleClose">
+        <div style="display: flex; justify-content:end">
+            <el-button icon="el-icon-Refresh" type="primary" >一键还原</el-button>
+        </div>
+        <el-divider content-position="left">光伏电站承载能力评估策略</el-divider>
+        <vxe-table
+            v-bind="defaultAttribute"
+            ref="xTable"
+            :column-config="{ resizable: true }"
+            :loading="loading"
+            :data="tableData"
+            :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
+        >
+            <vxe-colgroup field="group0" title="等级" align="right">
+                <vxe-column field="name" width="180" title="结果" :edit-render="{}">
+                    <template #edit="{ row }">
+                        <vxe-input v-model="form.name" type="text"></vxe-input>
+                    </template>
+                </vxe-column>
+            </vxe-colgroup>
+
+            <vxe-column field="role" title="安全(个)" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.role" type="text" placeholder="请输入昵称"></vxe-input>
+                </template>
+            </vxe-column>
+
+            <vxe-column field="num6" title="III级预警(个)" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.num6" type="text"></vxe-input>
+                </template>
+            </vxe-column>
+            <vxe-column field="date12" title="II级预警(个)" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.date12" type="text"></vxe-input>
+                </template>
+            </vxe-column>
+            <vxe-column field="date13" title="I级预警(个)" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.date13" type="text"></vxe-input>
+                </template>
+            </vxe-column>
+
+            <vxe-column title="操作" width="160">
+                <template #default="{ row }">
+                    <template v-if="isActiveStatus(row)">
+                        <el-button type="primary" size="small" @click="saveRowEvent(row)" link>保存</el-button>
+                        <el-button type="primary" size="small" @click="cancelRowEvent(row)" link>取消</el-button>
+                    </template>
+                    <template v-else>
+                        <el-button size="small" @click="editRowEvent(row)" link>编辑</el-button>
+                    </template>
+                </template>
+            </vxe-column>
+        </vxe-table>
+        <el-divider content-position="left">充电站、电加热负荷、电气化铁路承载能力评估</el-divider>
+        <vxe-table
+            v-bind="defaultAttribute"
+            ref="xTable"
+            :column-config="{ resizable: true }"
+            :loading="loading"
+            :data="tableData"
+            :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
+        >
+            <vxe-colgroup field="group0" title="等级" align="right">
+                <vxe-column field="name" width="180" title="结果" :edit-render="{}">
+                    <template #edit="{ row }">
+                        <vxe-input v-model="form.name" type="text"></vxe-input>
+                    </template>
+                </vxe-column>
+            </vxe-colgroup>
+
+            <vxe-column field="role" title="THD(%)" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.role" type="text" placeholder="请输入昵称"></vxe-input>
+                </template>
+            </vxe-column>
+
+            <vxe-column field="num6" title="2~25次谐波合格个数" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.num6" type="text"></vxe-input>
+                </template>
+            </vxe-column>
+            <vxe-column field="date12" title="畸次谐波合格个数" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.date12" type="text"></vxe-input>
+                </template>
+            </vxe-column>
+            <vxe-column field="date13" title="偶次谐波合格个数" :edit-render="{}">
+                <template #edit="{ row }">
+                    <vxe-input v-model="form.date13" type="text"></vxe-input>
+                </template>
+            </vxe-column>
+
+            <vxe-column title="操作" width="160">
+                <template #default="{ row }">
+                    <template v-if="isActiveStatus(row)">
+                        <el-button type="primary" size="small" @click="saveRowEvent(row)" link>保存</el-button>
+                        <el-button type="primary" size="small" @click="cancelRowEvent(row)" link>取消</el-button>
+                    </template>
+                    <template v-else>
+                        <el-button size="small" @click="editRowEvent(row)" link>编辑</el-button>
+                    </template>
+                </template>
+            </vxe-column>
+        </vxe-table>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
+import { json } from 'stream/consumers'
+defineOptions({
+    name: 'Advancedanalysis/eventcorrelation'
+})
+const emit = defineEmits(['View'])
+const view = ref(false)
+const policyView = ref(true)
+
+const xTable = ref()
+const loading = ref(false)
+
+const tableData = ref([
+    {
+        id: 10001,
+        name: '安全',
+        role: '0',
+        num6: '0',
+        date12: '0',
+        date13: '0'
+    },
+    {
+        id: 10002,
+        name: 'III级预警',
+        role: '0',
+        num6: '0',
+        date12: '0',
+        date13: '0'
+    },
+    {
+        id: 10003,
+        name: 'II级预警',
+        role: 'Test',
+        date12: '0',
+        num6: '0',
+        date13: '0'
+    },
+    {
+        id: 10004,
+        name: 'I级预警',
+        role: '0',
+        date12: '0',
+        num6: '0',
+        date13: '0'
+    }
+])
+const form = ref({
+    id: '',
+    name: '',
+    role: '',
+
+    num6: '',
+    date12: '',
+    date13: ''
+})
+
+const isActiveStatus = row => {
+    return xTable.value.isEditByRow(row)
+}
+// 编辑配置
+const editRowEvent = row => {
+    form.value = JSON.parse(JSON.stringify(row))
+    xTable.value.setEditRow(row)
+}
+// 保存配置
+const saveRowEvent = row => {
+    xTable.value.clearEdit().then(() => {
+        loading.value = true
+        setTimeout(() => {
+            loading.value = false
+            console.log('🚀 ~ saveRowEvent ~ row:', form.value)
+        }, 300)
+    })
+}
+// 取消配置
+const cancelRowEvent = row => {
+    xTable.value.clearEdit().then(() => {
+        // 还原行数据
+        xTable.value.revertData(row)
+    })
+}
+
+// 取消
+const handleClose = () => {
+    emit('View')
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .vxe-table--header thead tr:first-of-type th:first-of-type {
+    background: #f8f8f9;
+}
+::v-deep .vxe-table--header thead tr:first-of-type th:first-of-type:before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
+    top: 0;
+    left: 0;
+    background-color: grey;
+    opacity: 0.3;
+    display: block;
+    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
+    transform-origin: top;
+}
+::v-deep .vxe-table--header thead tr:last-of-type th:first-of-type:before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
+    bottom: 0;
+    right: 0;
+    background-color: grey;
+    opacity: 0.3;
+    display: block;
+    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
+    transform-origin: bottom;
+}
+</style>