联调 承载能力评估

src/views/pqs/bearingCapacity/evaluationList/components/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>