页面调整

2025-04-25 15:15:25 +08:00
parent e9a462f736
commit 1cc3b32ad8
9 changed files with 408 additions and 143 deletions
--- a/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
@@ -2,47 +2,96 @@
    <TableHeader area datePicker ref="TableHeaderRef">
        <template #select>
            <el-form-item label="筛选">
-                <el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
+                <el-input
+                    v-model="tableStore.table.params.filterName"
+                    @keyup="searchEvent"
+                    placeholder="输入关键字筛选"
+                />
            </el-form-item>
            <el-form-item label="统计类型:">
-                <el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
-                    <el-option v-for="item in classificationData" :key="item.id" :label="item.name"
-                        :value="item"></el-option>
+                <el-select
+                    v-model="tableStore.table.params.statisticalType"
+                    value-key="id"
+                    placeholder="请选择统计类型"
+                >
+                    <el-option
+                        v-for="item in classificationData"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="电压等级:">
-                <el-select v-model="tableStore.table.params.scale" multiple collapse-tags clearable value-key="id"
-                    placeholder="请选择电压等级">
-                    <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name"
-                        :value="item"></el-option>
+                <el-select
+                    v-model="tableStore.table.params.scale"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择电压等级"
+                >
+                    <el-option
+                        v-for="item in voltageleveloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="终端厂家:">
-                <el-select v-model="tableStore.table.params.manufacturer" multiple collapse-tags clearable
-                    value-key="id" placeholder="请选择终端厂家">
-                    <el-option v-for="item in terminaloption" :key="item.id" :label="item.name"
-                        :value="item"></el-option>
+                <el-select
+                    v-model="tableStore.table.params.manufacturer"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择终端厂家"
+                >
+                    <el-option
+                        v-for="item in terminaloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="干扰源类型:">
-                <el-select v-model="tableStore.table.params.loadType" multiple collapse-tags clearable value-key="id"
-                    placeholder="请选择干扰源类型">
-                    <el-option v-for="item in interfereoption" :key="item.id" :label="item.name"
-                        :value="item"></el-option>
+                <el-select
+                    v-model="tableStore.table.params.loadType"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择干扰源类型"
+                >
+                    <el-option
+                        v-for="item in interfereoption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
                </el-select>
            </el-form-item>
        </template>
        <template #operation>
            <!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button> -->
-            <el-button icon="el-icon-Download" :loading="loading" @click="exportEvent" type="primary">下载报告</el-button>
+            <el-button icon="el-icon-Download" :loading="loading" @click="exportEvent" type="primary">
+                下载报告
+            </el-button>
        </template>
    </TableHeader>
-    <Table ref="tableRef" :radio-config="{
-        labelField: 'name',
-        highlight: true,
-        visibleMethod: row => row.row.level == 6
-    }" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }" :scroll-y="{ enabled: true }" />
+    <Table
+        ref="tableRef"
+        :radio-config="{
+            labelField: 'name',
+            highlight: true,
+            visibleMethod: row => row.row.level == 6
+        }"
+        :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
+        :scroll-y="{ enabled: true }"
+    />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, provide, reactive } from 'vue'
@@ -71,7 +120,7 @@ const tableStore = new TableStore({
    method: 'POST',
    column: [
        // { width: '60', title: '111',  },
-        { field: 'name', title: '电网拓扑', width: '150', type: 'radio', align: 'left', treeNode: true },
+        { field: 'name', title: '电网拓扑', width: 350, type: 'radio', align: 'left', treeNode: true },
        {
            field: 'ip',
            title: '网络参数',
@@ -147,11 +196,11 @@ const tableStore = new TableStore({
        setTimeout(() => {
            tableRef.value.getRef().setAllTreeExpand(true)
        }, 1000)
-      
+
        treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
        treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
        tableStore.table.data = treeData.value
-        tableStore.table.params.filterName=''
+        tableStore.table.params.filterName = ''
        searchEvent()
    }
 })
@@ -169,7 +218,7 @@ const tree2List = (list: any, id: any) => {
    // 遍历 tree 数组
    list.forEach((item: any) => {
        item.uPid = id
-        item.uId = (Math.random() * 1000)
+        item.uId = Math.random() * 1000
        item.comFlag = item.comFlag == null ? 3 : item.comFlag
        item.assess = item.integrityData == 3.14159 ? 0 : item.integrityData < 60 ? 1 : item.integrityData < 90 ? 2 : 3
        // 判断item是否存在children
@@ -200,7 +249,7 @@ const searchEvent = debounce(() => {
            (item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
            options
        )
-        console.log("🚀 ~ searchEvent ~ rest:", rest)
+        console.log('🚀 ~ searchEvent ~ rest:', rest)

        tableStore.table.data = rest

@@ -237,26 +286,28 @@ const exportEvent = () => {
        message: '下载报告中,请稍等.....',
        duration: 1000
    })
-    exportModelJB(form).then(async res => {
-        let blob = new Blob([res], {
-            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-        })
+    exportModelJB(form)
+        .then(async res => {
+            let blob = new Blob([res], {
+                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+            })

-        const url = window.URL.createObjectURL(blob)
-        const link = document.createElement('a') // 创建a标签
-        link.href = url
-        link.download =
-            line.name +
-            TableHeaderRef.value.datePickerRef.timeValue[0] +
-            '_' +
-            TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
-        document.body.appendChild(link)
-        link.click() //执行下载
-        document.body.removeChild(link)
-        loading.value = false
-    }).catch(() => {
-        loading.value = false
-    })
+            const url = window.URL.createObjectURL(blob)
+            const link = document.createElement('a') // 创建a标签
+            link.href = url
+            link.download =
+                line.name +
+                TableHeaderRef.value.datePickerRef.timeValue[0] +
+                '_' +
+                TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
+            document.body.appendChild(link)
+            link.click() //执行下载
+            document.body.removeChild(link)
+            loading.value = false
+        })
+        .catch(() => {
+            loading.value = false
+        })
 }
 </script>

--- a/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
@@ -62,7 +62,7 @@ const tableStore = new TableStore({
    showPage: false,
    method: 'POST',
    column: [
-        { field: 'name', title: '电网拓扑', minWidth: '150', align: 'left', treeNode: true },
+        { field: 'name', title: '电网拓扑',     width: 350, align: 'left', treeNode: true },
        {
            field: 'ip',
            title: '网络参数',