完成 承载能力评估页面绘制

src/components/echarts/MyEchart.vue

@@ -77,7 +77,8 @@ const initChart = () => {
             left: '10px',
             right: '60px',
             bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
-            containLabel: true
+            containLabel: true,
+            ...(props.options.grid || null)
         },
         xAxis: props.options.xAxis ? handlerXAxis() : null,
         yAxis: props.options.yAxis ? handlerYAxis() : null,

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

@@ -1,11 +0,0 @@
-<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/charge.vue

@@ -0,0 +1,199 @@
+<template>
+    <el-row :gutter="30" class="mb20">
+        <el-col :span="8">
+            <el-card >
+                <template #header>
+                    <div class="card-header">
+                        <span>公共连接点参数</span>
+                    </div>
+                </template>
+               <div :style="`height: calc(${height} / 2 - 117px);overflow-y: auto`">
+                <el-form :model="form" label-width="auto" style="max-width: 500px; margin: auto">
+                    <el-form-item label="变压器接线方式">
+                        <el-input v-model="form.name" />
+                    </el-form-item>
+                    <el-form-item label="电压等级">
+                        <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)">
+                        <el-input v-model="form.name" />
+                    </el-form-item>
+                    <el-form-item label="最小短路容量(MVA)">
+                        <el-input v-model="form.name" />
+                    </el-form-item>
+                </el-form>
+               </div>
+            </el-card>
+        </el-col>
+        <el-col :span="16">
+            <el-card>
+                <template #header>
+                    <div class="card-header">
+                        <span>干扰源用户</span>
+                        <el-button type="primary" size="default" icon="el-icon-Plus">新增</el-button>
+                    </div>
+                </template>
+                <div :style="`height: calc(${height} / 2 - 128px);overflow-y: auto`">
+                    <vxe-table v-bind="defaultAttribute" height="auto" ref="xTable" :data="tableData">
+                        <vxe-column field="name" title="预评估用户"></vxe-column>
+                        <vxe-column field="role" title="用户协议容量(MVA)"></vxe-column>
+                        <vxe-column field="num6" title="操作" width="120">
+                            <template #default="{ row }">
+                                <el-button type="danger" link>删除</el-button>
+                            </template>
+                        </vxe-column>
+                    </vxe-table>
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+
+    <div class="bottomBox">
+        <div style="height: 70px">一级评估：0.02% &lt; 0.1% 满足</div>
+        <div style="height: 20px" class="mb10">二级评估:</div>
+        <el-row>
+            <el-col :span="16" :style="`height: calc(${height} / 2 - 100px)`">
+                <vxe-table style="flex: 1.5" v-bind="defaultAttribute" height="auto" ref="xTable" :data="tableData">
+                    <vxe-column field="name" title="等级"></vxe-column>
+                    <vxe-column field="role" title="安全"></vxe-column>
+                    <vxe-column field="num6" title="III级预警"></vxe-column>
+                    <vxe-column field="date12" title="II级预警"></vxe-column>
+                    <vxe-column field="date13" title="I级预警"></vxe-column>
+                </vxe-table>
+            </el-col>
+            <el-col :span="8" :style="`height: calc(${height} / 2 - 100px)`">
+                <MyEChart style="flex: 1" :options="pieCharts" />
+            </el-col>
+        </el-row>
+        <el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+const dictData = useDictData()
+const height = mainHeight(80).height
+const levelList = dictData.getBasicData('Dev_Voltage_Stand')
+const tableData = ref([
+    {
+        id: 10001,
+        name: '配变首端电压',
+        role: '/',
+        num6: '/',
+        date12: '/',
+        date13: '/'
+    },
+    {
+        id: 10002,
+        name: '配变功率因素',
+        role: '/',
+        num6: '/',
+        date12: '/',
+        date13: '/'
+    },
+    {
+        id: 10003,
+        name: '等效负载率最小值',
+        role: '/',
+        date12: '/',
+        num6: '/',
+        date13: '/'
+    },
+    {
+        id: 10004,
+        name: '各次谐波电流幅值',
+        role: '/',
+        date12: '/',
+        num6: '/',
+        date13: '/'
+    }
+])
+const form: any = ref({})
+const pieCharts = ref({})
+// 承载能力评估
+const assess = () => {
+    pieCharts.value = {
+        title: {
+            text: '承载能力评估结果',
+            x: 'center',
+            top: `30px`,
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            left: 10,
+            top: '10%',
+            tooltip: {
+                show: true
+            }
+        },
+
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600'],
+        dataZoom: { show: false },
+        series: [
+            {
+                type: 'pie',
+                center: ['50%', '50%'],
+                radius: ['35%', '48%'],
+                selectedOffset: 30,
+                clockwise: true,
+                label: {
+                    formatter: '{b}：{c}'
+                },
+                labelLine: {
+                    length: 1,
+                    length2: 20
+                },
+
+                data: [
+                    {
+                        name: '安全',
+                        value: 1
+                    },
+                    {
+                        name: 'III级',
+                        value: 3
+                    },
+                    {
+                        name: 'II级',
+                        value: 3
+                    },
+                    {
+                        name: 'I级',
+                        value: 2
+                    }
+                ]
+            }
+        ]
+    }
+}
+</script>
+<style lang="scss" scoped>
+.bottomBox {
+    position: relative;
+    .el-button {
+        position: absolute;
+        top: 0;
+        right: 10px;
+    }
+}
+.card-header {
+    font-weight: 600;
+    display: FLEX;
+    justify-content: space-between;
+}
+</style>

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

@@ -4,11 +4,14 @@
             <TableHeader datePicker ref="TableHeaderRef">
                 <template #select>
                     <el-form-item label="用户类型">
-                        <el-input
+                        <el-select v-model="tableStore.table.params.searchValue" placeholder="请选择用户类型">
-                            v-model="tableStore.table.params.searchValue"
+                            <el-option
-                            clearable
+                                v-for="item in userTypeList"
-                            placeholder="输入关键字筛选"
+                                :key="item.id"
-                        />
+                                :label="item.label"
+                                :value="item.id"
+                            />
+                        </el-select>
                     </el-form-item>
                 </template>
                 <template #operation>
@@ -56,7 +59,16 @@
             </el-dialog>
             <policy v-if="policyView" @View="policyView = false" />
         </div>
-        <Added v-if="!addedShow" />
+        <!-- <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"><photovoltaic /></el-tab-pane>
+                <el-tab-pane label="充电站、电加热负荷、电气化铁路承载能力评估" name="2">
+                    <charge />
+                </el-tab-pane>
+            </el-tabs>
+            <el-button class="quit" icon="el-icon-Close" type="primary" @click="addedShow = true">返回</el-button>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -66,22 +78,27 @@ 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 photovoltaic from './photovoltaic.vue'
+import charge from './charge.vue'
+
 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('Interference_Source')
 const view = ref(false)
+const activeName = ref('1')
 const disabled = ref(false)
 const policyView = ref(false)
-const addedShow = ref(false)
+const addedShow = ref(true)
 const TableHeaderRef = ref()
 const title = ref('')
+const userTypeList: any = ref([])
 
 const form = ref({
     name: '',
@@ -199,3 +216,10 @@ const handleClose = () => {
     view.value = false
 }
 </script>
+<style lang="scss" scoped>
+.quit {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+}
+</style>

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

@@ -0,0 +1,311 @@
+<template>
+    <div>
+        <splitpanes :style="{ height: height }" class="default-theme" id="navigation-splitpanes">
+            <pane :size="size">
+                <PointTree
+                    :default-expand-all="false"
+                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
+                    :current-node-key="monitoringPoint.state.lineId"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
+            </pane>
+            <pane style="background: #fff">
+                <el-form :inline="true">
+                    <el-form-item label="日期">
+                        <DatePicker ref="datePickerRef"></DatePicker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-Search" @click="onSubmit">查询</el-button>
+                        <el-button type="primary" icon="el-icon-DocumentAdd">离线导入</el-button>
+                    </el-form-item>
+                </el-form>
+
+                <el-descriptions class="mb10" title="基础数据" :column="2" size="" border>
+                    <el-descriptions-item label="电压等级" label-align="center" width="25%">12</el-descriptions-item>
+                    <el-descriptions-item label="额定容量" label-align="center" width="25%">12</el-descriptions-item>
+                    <el-descriptions-item label="待评估用户" label-align="center" width="25%">
+                        <el-select
+                            v-model="user"
+                            placeholder="请选择待评估用户"
+                            size="small"
+                            clearable
+                            filterable
+                            style="width: 240px"
+                        >
+                            <el-option
+                                v-for="item in userList"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="拟接入光伏容量" label-align="center" width="25%">
+                        12
+                    </el-descriptions-item>
+                </el-descriptions>
+                <el-tabs v-model="activeName" class="mb10" :style="`height: calc(${tabsHeight} / 2)`">
+                    <el-tab-pane label="有功功率" name="1" class="mt10">
+                        <MyEChart :options="options" />
+                    </el-tab-pane>
+                    <el-tab-pane label="无功功率" name="2"></el-tab-pane>
+                    <el-tab-pane label="谐波电流幅值" name="3"></el-tab-pane>
+                    <el-tab-pane label="首端电压模型参数" name="4"></el-tab-pane>
+                </el-tabs>
+                <div class="bottomBox">
+                    <el-row v-if="showAssess">
+                        <el-col :span="16" :style="`height: calc(${tabsHeight} / 2)`">
+                            <vxe-table
+                                style="flex: 1.5"
+                                v-bind="defaultAttribute"
+                                height="auto"
+                                ref="xTable"
+                                :data="tableData"
+                            >
+                                <vxe-column field="name" title="等级"></vxe-column>
+                                <vxe-column field="role" title="安全"></vxe-column>
+                                <vxe-column field="num6" title="III级预警"></vxe-column>
+                                <vxe-column field="date12" title="II级预警"></vxe-column>
+                                <vxe-column field="date13" title="I级预警"></vxe-column>
+                            </vxe-table>
+                        </el-col>
+                        <el-col :span="8" :style="`height: calc(${tabsHeight} / 2)`">
+                            <MyEChart style="flex: 1" :options="pieCharts" />
+                        </el-col>
+                    </el-row>
+
+                    <el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
+                </div>
+            </pane>
+        </splitpanes>
+    </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, provide } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import PointTree from '@/components/tree/pms/pointTree.vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { mainHeight } from '@/utils/layout'
+import { text } from './text'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { ElMessage } from 'element-plus'
+const monitoringPoint = useMonitoringPoint()
+
+const size = ref(0)
+const datePickerRef = ref()
+const height = mainHeight(80).height
+const tabsHeight = mainHeight(260).height
+const tableData = ref([
+    {
+        id: 10001,
+        name: '配变首端电压',
+        role: '/',
+        num6: '/',
+        date12: '/',
+        date13: '/'
+    },
+    {
+        id: 10002,
+        name: '配变功率因素',
+        role: '/',
+        num6: '/',
+        date12: '/',
+        date13: '/'
+    },
+    {
+        id: 10003,
+        name: '等效负载率最小值',
+        role: '/',
+        date12: '/',
+        num6: '/',
+        date13: '/'
+    },
+    {
+        id: 10004,
+        name: '各次谐波电流幅值',
+        role: '/',
+        date12: '/',
+        num6: '/',
+        date13: '/'
+    }
+])
+const showAssess = ref(false)
+const user = ref('')
+const userList = [
+    {
+        value: 'Option1',
+        label: '光伏电站用户1'
+    },
+    {
+        value: 'Option2',
+        label: '光伏电站用户2'
+    },
+    {
+        value: 'Option3',
+        label: '光伏电站用户3'
+    }
+]
+const options = ref({})
+const pieCharts = ref({})
+const activeName = ref('1')
+
+const dotList: any = ref({
+    name: monitoringPoint.state.lineName.split('>')[3],
+    id: monitoringPoint.state.lineId,
+    level: 6
+})
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+    if (dom) {
+        size.value = Math.round((280 / dom.offsetHeight) * 100)
+    }
+    datePickerRef.value.setTimeOptions([{ label: '周', value: 4 }])
+    datePickerRef.value.setInterval(4)
+})
+
+// 查询
+const onSubmit = () => {
+    console.log(text.data.data)
+
+    options.value = {
+        title: {
+            text: '在线率统计',
+            x: 'center',
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        xAxis: {
+            data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.time),
+            // name: '时间',
+            onZero: false,
+            position: 'bottom' // 设置 x 轴在底部
+        },
+        yAxis: {
+            type: 'value',
+            max: Math.ceil(Math.max(...text.data.data.map(item => item.value))),
+            min: Math.floor(Math.min(...text.data.data.map(item => item.value)))
+        },
+        legend: {
+            data: ['A', 'B', 'C']
+            // selectedMode: false,
+        },
+        grid: {
+            left: '30px'
+        },
+        series: [
+            {
+                name: 'A',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.value.toFixed(3))
+            },
+            {
+                name: 'B',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: text.data.data.filter(item => item.phaseType == 'B').map(item => item.value.toFixed(3))
+            },
+            {
+                name: 'C',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: text.data.data.filter(item => item.phaseType == 'C').map(item => item.value.toFixed(3))
+            }
+        ]
+    }
+}
+// 承载能力评估
+const assess = () => {
+    pieCharts.value = {
+        title: {
+            text: '承载能力评估结果',
+            x: 'center',
+            top: `30px`,
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            left: 10,
+            top: '10%',
+            tooltip: {
+                show: true
+            }
+        },
+
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600'],
+        dataZoom: { show: false },
+        series: [
+            {
+                type: 'pie',
+                center: ['50%', '50%'],
+                radius: ['35%', '48%'],
+                selectedOffset: 30,
+                clockwise: true,
+                label: {
+                    formatter: '{b}：{c}'
+                },
+                labelLine: {
+                    length: 1,
+                    length2: 20
+                },
+
+                data: [
+                    {
+                        name: '安全',
+                        value: 1
+                    },
+                    {
+                        name: 'III级',
+                        value: 3
+                    },
+                    {
+                        name: 'II级',
+                        value: 3
+                    },
+                    {
+                        name: 'I级',
+                        value: 2
+                    }
+                ]
+            }
+        ]
+    }
+    showAssess.value = true
+}
+const handleNodeClick = (data: any, node: any) => {
+    dotList.value = data
+}
+</script>
+<style lang="scss">
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
+.grid-content {
+    text-align: center;
+}
+.bottomBox {
+    position: relative;
+    .el-button {
+        position: absolute;
+        top: 0;
+        right: 10px;
+    }
+}
+</style>

src/views/pqs/business/terminal/TerminalManagement/index.vue

@@ -95,7 +95,7 @@
                 <vxe-column field="runFlag" title="终端状态">
                     <template #default="{ row }">
                         <el-tag
-                            type="primary"
+                          
                             v-if="row.runFlag === 0"
                             style="color: #fff; background: #0099cc"
                             size="small"
@@ -103,7 +103,7 @@
                             投运
                         </el-tag>
                         <el-tag
-                            type="primary"
+                          
                             v-if="row.runFlag === 1"
                             style="color: #fff; background: #996600"
                             size="small"
@@ -111,7 +111,7 @@
                             热备用
                         </el-tag>
                         <el-tag
-                            type="primary"
+                          
                             v-if="row.runFlag === 2"
                             style="color: #fff; background: #cc0000"
                             size="small"
@@ -123,7 +123,7 @@
                 <vxe-column field="comFlag" title="通讯状态">
                     <template #default="{ row }">
                         <el-tag
-                            type="primary"
+                          
                             v-if="row.comFlag === 0"
                             style="color: #fff; background: #cc0000"
                             size="small"
@@ -131,7 +131,7 @@
                             中断
                         </el-tag>
                         <el-tag
-                            type="primary"
+                          
                             v-if="row.comFlag === 1"
                             style="color: #fff; background: #2e8b57"
                             size="small"