同步现场电网一张图

src/api/system/subject/index.ts

@@ -0,0 +1,34 @@
+import createAxios from '@/utils/request'
+
+//激活主题
+export function activateTheme(params: String) {
+    return createAxios({
+        url: '/system-boot/theme/activateTheme',
+        method: 'PUT',
+        params: params
+    })
+}
+//删除主题
+export function deleteTheme(params: String) {
+    return createAxios({
+        url: '/system-boot/theme/deleteTheme',
+        method: 'DELETE',
+        params: params
+    })
+}
+//新增主题
+export function addTheme(data: anyObj) {
+    return createAxios({
+        url: '/system-boot/theme/addTheme',
+        method: 'POST',
+        data
+    })
+}
+//修改主题
+export function updateTheme(data: anyObj) {
+    return createAxios({
+        url: '/system-boot/theme/updateTheme',
+        method: 'PUT',
+        data
+    })
+}

src/components/icon/src/data.ts

@@ -603,6 +603,7 @@ export const IconJson = {
     'id-badge',
     'ils',
     'image',
+    'imagebes64',
     'imdb',
     'inbox',
     'indent',

src/components/table/fieldRender/index.vue

@@ -22,7 +22,7 @@
             :hide-on-click-modal="true"
             :preview-teleported="true"
             :preview-src-list="[fullUrl(fieldValue)]"
-            :src="fullUrl(fieldValue)"
+            :src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"
         ></el-image>
     </div>
 
@@ -240,7 +240,7 @@ const handlerCommand = (item: OptButton) => {
 }
 .el-image {
     height: 36px;
-    width: 36px;
+    // width: 36px;
 }
 .table-operate-text {
     padding-left: 5px;

src/components/table/header/index.vue

@@ -17,7 +17,7 @@
                 </el-form-item>
                 <slot name="select"></slot>
             </el-form>
-            <template v-if="$slots.select || datePicker">
+            <template v-if="$slots.select || datePicker || showSearch">
                 <el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
                     <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
                     <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />

src/layouts/admin/components/navMenus.vue

@@ -39,18 +39,19 @@
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
-        <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
+        <!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
             <Icon
                 :color="configStore.getColorVal('headerBarTabColor')"
                 class="nav-menu-icon"
                 name="fa fa-cogs"
                 size="18"
             />
-        </div>
+        </div> -->
         <Config />
         <PopupPwd ref="popupPwd" />
         <AdminInfo ref="popupAdminInfo" />
         <!-- <TerminalVue /> -->
+        
     </div>
 </template>
 

src/stores/config.ts

@@ -120,6 +120,124 @@ export const useConfig = defineStore(
 
         return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
     },
+    // () => {
+    //    
+    //     console.log('🚀 ~ subject:', subject)
+    //     const layout: Layout = reactive({
+    //         /* 全局 */
+    //         showDrawer: false,
+    //         // 是否收缩布局(小屏设备)
+    //         shrink: false,
+    //         // 后台布局方式，可选值<Default|Classic|Streamline|Double>
+    //         layoutMode: 'Classic',
+    //         // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
+    //         mainAnimation: subject.mainAnimation,
+    //         // 是否暗黑模式
+    //         isDark: false,
+    //         elementUiPrimary: JSON.parse(subject.elementUiPrimary),
+    //         tableHeaderBackground: JSON.parse(subject.tableHeaderBackground),
+    //         tableHeaderColor:JSON.parse(subject.tableHeaderColor),
+    //         tableCurrent:  JSON.parse(subject.tableCurrent),
+    //         /* 侧边菜单 */
+    //         // 侧边菜单背景色
+    //         menuBackground: JSON.parse(subject.menuBackground),
+    //         // 侧边菜单文字颜色
+    //         menuColor:JSON.parse(subject.menuColor),
+    //         // 侧边菜单激活项背景色
+    //         menuActiveBackground:JSON.parse(subject.menuActiveBackground),
+    //         // 侧边菜单激活项文字色
+    //         menuActiveColor:JSON.parse(subject.menuActiveColor),
+    //         // 侧边菜单顶栏背景色
+    //         menuTopBarBackground: JSON.parse(subject.menuTopBarBackground),
+    //         // 侧边菜单宽度(展开时)，单位px
+    //         menuWidth: 260,
+    //         // 侧边菜单项默认图标
+    //         menuDefaultIcon: 'fa fa-circle-o',
+    //         // 是否水平折叠收起菜单
+    //         menuCollapse: false,
+    //         // 是否只保持一个子菜单的展开(手风琴)
+    //         menuUniqueOpened: false,
+    //         // 显示菜单栏顶栏(LOGO)
+    //         menuShowTopBar: true,
+
+    //         /* 顶栏 */
+    //         // 顶栏文字色
+    //         headerBarTabColor:JSON.parse(subject.headerBarTabColor),
+    //         // // 顶栏激活项背景色
+    //         headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
+    //         // 顶栏激活项文字色
+    //         headerBarTabActiveColor: ['#000000', '#409EFF'],
+    //         // 顶栏背景色
+    //         headerBarBackground: JSON.parse(subject.headerBarBackground),
+    //         // 顶栏悬停时背景色
+    //         headerBarHoverBackground: ['#f5f5f5', '#18222c']
+    //     })
+    //     // console.log(123, window.localStorage.getItem('getTheme'))
+
+    //     const lang = reactive({
+    //         // 默认语言，可选值<zh-cn|en>
+    //         defaultLang: 'zh-cn',
+    //         // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
+    //         fallbackLang: 'zh-cn',
+    //         // 支持的语言列表
+    //         langArray: [
+    //             { name: 'zh-cn', value: '中文简体' },
+    //             { name: 'en', value: 'English' }
+    //         ]
+    //     })
+
+    //     function menuWidth() {
+    //         if (layout.shrink) {
+    //             return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
+    //         }
+    //         // 菜单是否折叠
+    //         return layout.menuCollapse ? '64px' : layout.menuWidth + 'px'
+    //     }
+
+    //     function setLang(val: string) {
+    //         lang.defaultLang = val
+    //     }
+
+    //     function onSetLayoutColor(data = layout.layoutMode) {
+    //         // 切换布局时，如果是为默认配色方案，对菜单激活背景色重新赋值
+    //         const tempValue = layout.isDark
+    //             ? { idx: 1, color: '#1d1e1f', newColor: '#141414' }
+    //             : { idx: 0, color: '#ffffff', newColor: '#f5f5f5' }
+    //         if (
+    //             data == 'Classic' &&
+    //             layout.headerBarBackground[tempValue.idx] == tempValue.color &&
+    //             layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.color
+    //         ) {
+    //             layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.newColor
+    //         } else if (
+    //             data == 'Default' &&
+    //             layout.headerBarBackground[tempValue.idx] == tempValue.color &&
+    //             layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.newColor
+    //         ) {
+    //             layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.color
+    //         }
+    //     }
+
+    //     function setLayoutMode(data: string) {
+    //         layout.layoutMode = data
+    //         onSetLayoutColor(data)
+    //     }
+
+    //     const setLayout = (name: keyof Layout, value: any) => {
+    //         layout[name] = value as never
+    //     }
+
+    //     const getColorVal = function (name: keyof Layout): string {
+    //         const colors = layout[name] as string[]
+    //         if (layout.isDark) {
+    //             return colors[1]
+    //         } else {
+    //             return colors[0]
+    //         }
+    //     }
+
+    //     return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
+    // },
     {
         persist: {
             key: STORE_CONFIG

src/views/pqs/harmonicMonitoring/embed/liabiiyty/inex.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="default-main" :style="height" v-loading="loading">
+        <iframe
+            :key="num"
+            :src="iframeSrc"
+            id="frame1"
+            ref="iframeRef"
+            frameborder="0"
+            style="width: 100%; height: 100%; border: 0px solid"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, nextTick } from 'vue'
+import { mainHeight } from '@/utils/layout'
+defineOptions({
+    name: 'harmonic-boot/detailedAnalysis/responsibility'
+})
+const height = mainHeight(20)
+
+const num = ref(0)
+const loading = ref(true)
+// console.log("🚀 ~ num:", window.location.origin)
+const iframeRef: any = ref(null)
+const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
+
+onMounted(() => {
+    iframeRef.value.onload = () => {
+        iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
+        setTimeout(() => {
+            num.value++
+            loading.value = false
+        }, 0)
+    }
+})
+</script>
+<style lang="scss" scoped></style>

src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue

@@ -115,7 +115,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12
+                            fontSize: 10
                         }
                     }
                 ]
@@ -142,7 +142,7 @@ const info = (row: any) => {
                 },
                 {
                     type: 'value',
-                    name: '在线率',
+                    name: '%',
                     splitLine: {
                         show: false
                     },
@@ -165,7 +165,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12
+                            fontSize: 10
                         }
                     },
                     {
@@ -176,7 +176,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12
+                            fontSize: 10
                         }
                     }
                 ]
@@ -223,7 +223,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12
+                            fontSize: 10
                         }
                     }
                 ]

src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue

@@ -342,7 +342,7 @@ const info = (row: any) => {
                 axisLabel: {
                     color: '#000',
                     fontSize: 12,
-                    interval:0
+                    interval: 0
                 }
             },
             grid: {
@@ -361,7 +361,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12,
+                            fontSize: 10,
                             formatter: function (params: any) {
                                 return `${params.value == 3.14159 ? '' : params.value}`
                             }
@@ -374,7 +374,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12,
+                            fontSize: 10,
                             formatter: function (params: any) {
                                 return `${params.value == 3.14159 ? '' : params.value}`
                             }
@@ -415,7 +415,7 @@ const info = (row: any) => {
                         label: {
                             show: true,
                             position: 'top',
-                            fontSize: 12
+                            fontSize: 10
                         }
                     }
                 ]
@@ -548,6 +548,7 @@ defineExpose({ info, show })
 }
 .monitoringPoints {
     display: grid;
+    font-size: 12px;
     grid-template-columns: 1fr 1fr 1fr;
     margin-top: 10px;
     margin-bottom: 10px;

src/views/pqs/qualityInspeection/panorama/components/details/evaluate.vue

@@ -5,29 +5,29 @@
             <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
                 <vxe-column field="deptName" title="地市" />
                 <vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
-                <vxe-column field="qualifyData" title="指标合格率" :formatter="formatter" />
+                <vxe-column field="qualifyData" title="指标合格率(%)" :formatter="formatter" />
-                <vxe-colgroup title="各项指标得分">
+                
                     <vxe-colgroup title="电压偏差">
                         <vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
-                        <vxe-column field="vdevQualifyData" title="指标合格率" :formatter="formatter" />
+                        <vxe-column field="vdevQualifyData" title="指标合格率(%)" :formatter="formatter" />
                     </vxe-colgroup>
                     <vxe-colgroup title="频率偏差">
                         <vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
-                        <vxe-column field="freqQualifyData" title="指标合格率" :formatter="formatter" />
+                        <vxe-column field="freqQualifyData" title="指标合格率(%)" :formatter="formatter" />
                     </vxe-colgroup>
-                    <vxe-colgroup title="谐波含量">
+                    <vxe-colgroup title="电压总谐波畸变率">
                         <vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
-                        <vxe-column field="harmQualifyData" title="指标合格率" :formatter="formatter" />
+                        <vxe-column field="harmQualifyData" title="指标合格率(%)" :formatter="formatter" />
                     </vxe-colgroup>
                     <vxe-colgroup title="电压闪变">
                         <vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
-                        <vxe-column field="flickerQualifyData" title="指标合格率" :formatter="formatter" />
+                        <vxe-column field="flickerQualifyData" title="指标合格率(%)" :formatter="formatter" />
                     </vxe-colgroup>
-                    <vxe-colgroup title="三相不平衡度">
+                    <vxe-colgroup title="三相电压不平衡度">
                         <vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
-                        <vxe-column field="unbalanceQualifyData" title="指标合格率" :formatter="formatter" />
+                        <vxe-column field="unbalanceQualifyData" title="指标合格率(%)" :formatter="formatter" />
                     </vxe-colgroup>
-                </vxe-colgroup>
+            
             </vxe-table>
         </div>
         <div style="height: 300px; margin-top: 10px">

src/views/pqs/qualityInspeection/panorama/components/details/point.vue

@@ -33,11 +33,11 @@
             <div class="title">
                 <span>区域监测点统计</span>
             </div>
-            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
                 <vxe-column field="orgName" title="区域" :formatter="formatter" />
                 <vxe-column field="num" title="监测点个数" :formatter="formatter" />
-                <vxe-column field="integrityRate" title="数据完整率(%)" />
+                <vxe-column field="integrityRate" title="完整率(%)" />
-                <vxe-column field="onLineRate" title="数据在线率(%)" />
+                <vxe-column field="onLineRate" title="在线率(%)" />
                 <vxe-column field="outOfStandardRate" title="超标监测点占比(%)" />
             </vxe-table>
         </div>
@@ -99,7 +99,7 @@ const analysis = (e: any) => {
 
         trendEChart.value = {
             title: {
-                text: '监测点数量'
+                text: '在线监测点数量'
             },
             xAxis: {
                 name: '时间',

src/views/pqs/qualityInspeection/panorama/components/details/stand.vue

@@ -52,7 +52,7 @@
             <div class="title mb10">
                 <span>区域变电站统计</span>
             </div>
-            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
                 <vxe-column field="name" title="区域" />
                 <vxe-column field="num" title="变电站总数" />
                 <vxe-column field="num1" title="无污染数量" :formatter="formatter" />

src/views/pqs/qualityInspeection/panorama/components/details/steadyState.vue

@@ -2,7 +2,7 @@
 <template>
     <!-- 终端 -->
     <el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
-        <el-row style="height: 330px" :gutter="20">
+        <el-row style="height: 300px" :gutter="20">
             <el-col :span="12">
                 <div class="title">
                     <span>稳态电能质量水平评估</span>
@@ -42,7 +42,7 @@
                     <span>稳态电能质量水平评估环比变化</span>
                 </div>
                 <div class="pie">
-                    <div style="height: 260px; width: 100%" ref="chartRef"></div>
+                    <div style="height: 250px; width: 100%" ref="chartRef"></div>
                 </div>
             </el-col>
         </el-row>
@@ -50,7 +50,7 @@
             <div class="title">
                 <span>区域稳态电能质量水平评估</span>
             </div>
-            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
                 <vxe-column field="deptName" title="区域" />
                 <vxe-column field="onlineNum" title="在线监测点数量(个)" />
                 <vxe-column field="overNum" title="超标监测点数量(个)" />
@@ -103,15 +103,21 @@ const tableData: any = ref([])
 const title = ['电压偏差', '频率偏差', '电压总谐波畸变率', '闪变', '三相电压不平衡度']
 
 const echart = (row: any) => {
+    let maxList: any = []
+    row.forEach((item: any) => {
+        maxList.push(...(item.ratioList || [0]))
+    })
+    let max = Math.max(...maxList) > 50 ? 100 : 50
+
     let chart = echarts.init(chartRef.value as HTMLDivElement)
 
     let dataname = ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变']
-    let datamax = [100, 100, 100, 100, 100, 100]
+    // let datamax = [100, 100, 100, 100, 100, 100]
     let indicator = []
     for (let i = 0; i < dataname.length; i++) {
         indicator.push({
             name: dataname[i],
-            max: datamax[i]
+            max: max
         })
     }
 
@@ -150,8 +156,8 @@ const echart = (row: any) => {
             }
         },
         radar: {
-            center: ['50%', '50%'],
+            center: ['50%', '60%'],
-            radius: '65%',
+            radius: '75%',
             startAngle: 90,
             splitNumber: 5,
             splitArea: {
@@ -252,17 +258,17 @@ defineExpose({ open })
     justify-content: space-around;
 }
 .evaluationData {
-    height: 40px;
+    height: 33px;
     margin: 8px 30px;
     width: 100%;
     box-shadow: 1px 1px 1px 1px #e8e3e3;
     display: flex;
     font-size: 18px;
-    line-height: 40px;
+    line-height: 35px;
     img {
-        height: 30px;
+        height: 25px;
-        width: 30px;
+        width: 25px;
-        margin: 5px 30px;
+        margin: 4px 20px 0px 30px;
     }
 }
 

src/views/pqs/qualityInspeection/panorama/components/details/technique.vue

@@ -2,14 +2,14 @@
 <template>
     <el-dialog draggable title="技术监督管理统计" v-model="dialogVisible" width="1400px">
         <div>
-            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
-                <vxe-column field="devName" />
+                <vxe-column field="devName" title="区域" />
-                <vxe-column field="devName" title="异常问题总数" />
+                <vxe-column field="num" title="异常问题总数" />
-                <vxe-column field="devName" title="已关联工单数" />
+                <vxe-column field="num" title="已关联工单数" />
-                <vxe-column field="devName" title="工单转换率(%)" />
+                <vxe-column field="num" title="工单转换率(%)" />
-                <vxe-column field="devName" title="工单总数" />
+                <vxe-column field="num" title="工单总数" />
-                <vxe-column field="devName" title="已处理工单数" />
+                <vxe-column field="num" title="已处理工单数" />
-                <vxe-column field="devName" title="工单处置率(%)" />
+                <vxe-column field="num" title="工单处置率(%)" />
             </vxe-table>
         </div>
         <div style="height: 300px; margin-top: 10px">
@@ -24,7 +24,36 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
 
 const dialogVisible: any = ref(false)
 
-const tableData: any = ref([])
+const tableData: any = ref([
+    {
+        devName: '张家口',
+        num: ''
+    },
+    {
+        devName: '秦皇岛',
+        num: ''
+    },
+    {
+        devName: '承德',
+        num: ''
+    },
+    {
+        devName: '唐山',
+        num: ''
+    },
+    {
+        devName: '廊坊',
+        num: ''
+    },
+    {
+        devName: '风光储',
+        num: ''
+    },
+    {
+        devName: '超高压',
+        num: ''
+    }
+])
 
 const picEChart = ref({
     title: {

src/views/pqs/qualityInspeection/panorama/components/details/temporaryState.vue

@@ -2,7 +2,7 @@
 <template>
     <el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
         <div>
-            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
                 <vxe-column field="name" title="区域" />
 
                 <vxe-column field="sagTimes" title="暂降次数" />
@@ -16,22 +16,22 @@
                 </vxe-colgroup>
             </vxe-table>
         </div>
-        <div style="height: 300px; margin-top: 10px; display: flex">
+        <div style="height: 250px; margin-top: 10px; display: flex">
             <!-- 
             -->
             <div class="statistics-main">
                 <div class="statistics-box">
-                    <MyEChart style="height: 300px" :options="picEChart" />
+                    <MyEChart style="height: 250px" :options="picEChart" />
 
-                    <el-table size="small" height="300px" :data="descentData">
+                    <el-table size="small" height="250px" :data="descentData">
                         <el-table-column prop="name" label="暂降原因" width="80px" align="center" />
                         <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
                     </el-table>
                 </div>
 
                 <div class="statistics-box">
-                    <MyEChart style="height: 300px" :options="picEChart1" />
+                    <MyEChart style="height: 250px" :options="picEChart1" />
-                    <el-table size="small" height="300px" :data="resembleData">
+                    <el-table size="small" height="250px" :data="resembleData">
                         <el-table-column prop="name" label="暂降类型" width="80px" align="center" />
                         <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
                     </el-table>

src/views/pqs/qualityInspeection/panorama/components/details/terminal.vue

@@ -52,12 +52,12 @@
             <div class="title">
                 <span>区域终端统计</span>
             </div>
-            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
                 <vxe-column field="orgName" title="区域" />
                 <vxe-column field="runNum" title="运行个数	" />
                 <vxe-column field="overhaulNum" title="检修个数	" />
                 <vxe-column field="refundNum" title="退役个数" />
-                <vxe-column field="onLineRate" title="数据在线率(%)" />
+                <vxe-column field="onLineRate" title="终端在线率(%)" />
             </vxe-table>
         </div>
     </el-dialog>
@@ -177,14 +177,16 @@ const analysis = (e: any) => {
     getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
         let name = []
         let data = []
+        let num = 0
         for (let k in res.data) {
             name.push(k)
-            data.push(res.data[k])
+            num = num + res.data[k]
+            data.push(num)
         }
 
         trendEChart.value = {
             title: {
-                text: '终端接入数量'
+                text: '终端接入总数量'
             },
             xAxis: {
                 name: '时间',

src/views/pqs/qualityInspeection/panorama/components/line/history.vue

@@ -16,7 +16,7 @@
             ></el-option>
         </el-option-group>
     </el-select>
-    <MyEChart :options="list[0]?.option" :style="`height: calc(${rowHeight} - 31px)`" />
+    <MyEChart v-loading="loading" :options="list[0]?.option" :style="`height: calc(${rowHeight} - 31px)`" />
 </template>
 
 <script setup lang="ts">
@@ -34,6 +34,7 @@ const prop = defineProps({
 })
 
 const datePickerRef = ref()
+const loading = ref(true)
 const traceability = ref<any>([])
 const list = ref<any>([])
 const rowHeight = mainHeight(-80, 3).height
@@ -49,6 +50,7 @@ const formData: any = reactive({
 })
 
 const History = () => {
+    loading.value = true
     formData.lineId = [prop.lineId]
     formData.searchBeginTime = datePickerRef.value.timeValue[0]
     formData.searchEndTime = datePickerRef.value.timeValue[1]
@@ -1123,12 +1125,12 @@ const rendering = () => {
                 }
                 opitonserise.push(data)
             } else if (item.chufa !== undefined && item2 == '暂态触发点') {
-                console.log(123,new URL('@/assets/point.png', import.meta.url).href);
+                console.log(123, new URL('@/assets/point.png', import.meta.url).href)
-                
+
                 let data = {
                     name: item2,
                     type: 'scatter',
-                    symbol:`image://`+ new URL('@/assets/point.png', import.meta.url).href,
+                    symbol: `image://` + new URL('@/assets/point.png', import.meta.url).href,
                     symbolSize: 16,
                     itemStyle: {
                         width: '16px',
@@ -1505,13 +1507,13 @@ const getEcharts = () => {
             ]
         }
     })
+    loading.value = false
 }
 onMounted(() => {
     nextTick(() => {
         setTimeout(() => {
             History()
         }, 0)
-  
     })
 })
 defineExpose({ History })

src/views/pqs/qualityInspeection/panorama/components/line/info.vue

@@ -37,13 +37,21 @@
                     <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts" />
                 </div>
             </el-col>
+            <el-col :span="8">
+                <h3 class="mb10 iconBox">
+                    <span></span>
+                    暂态事件统计
+                </h3>
+                <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
+            </el-col>
+        </el-row>
+        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
             <el-col :span="8">
                 <h3 class="mb10 iconBox">
                     <span></span>
                     监测点总体评价结论
                 </h3>
 
-               
                 <div class="evaluationData">
                     <el-row style="width: 96%" class="row pb5">
                         <el-col :span="12" style="display: flex">
@@ -72,8 +80,6 @@
                     </el-row>
                 </div>
             </el-col>
-        </el-row>
-        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
             <el-col :span="8">
                 <h3 class="mb10 iconBox">
                     <span></span>
@@ -81,13 +87,6 @@
                 </h3>
                 <div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
             </el-col>
-            <el-col :span="8">
-                <h3 class="mb10 iconBox">
-                    <span></span>
-                    暂态事件统计
-                </h3>
-                <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
-            </el-col>
         </el-row>
         <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
             <el-col :span="24">
@@ -119,8 +118,7 @@ import {
     getLineAssess,
     getEventDetailByLineId
 } from '@/api/device-boot/panorama'
-import { title } from 'process'
+
-import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight'
 const emit = defineEmits(['back'])
 const dropList: any = ref({})
 const evaluationData: any = ref([])
@@ -227,7 +225,7 @@ const open = async (id: string) => {
         // 稳态指标合格率
     })
     // 在线率
-    getTotalOnlineRates(form).then((res: any) => {
+    getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
         let num = (res.data || 0) / 100
         onLineCharts.value = {
             title: {
@@ -375,8 +373,8 @@ const open = async (id: string) => {
         ]
         incidentCharts.value = {
             title: {
-                text: `${res.data?.swellTimes + res.data?.sagTimes + res.data?.interruptTimes}`,
+                text: ' ' + (data[0].value + data[1].value + data[2].value),
-                left: '37%',
+                left: '41%',
                 top: '40%',
                 textStyle: {
                     fontWeight: 600,
@@ -397,7 +395,6 @@ const open = async (id: string) => {
                 top: 'center',
                 right: '10%',
                 formatter: function (e: any) {
-                    console.log('🚀 ~ open ~ e:', e)
                     return e + '   ' + data.filter(item => item.name == e)[0].value + '条'
                 }
             },
@@ -412,8 +409,8 @@ const open = async (id: string) => {
                 series: [
                     {
                         type: 'pie',
-                        center: ['40%', '50%'],
+                        center: ['45%', '50%'],
-                        radius: ['50%', '70%'],
+                        radius: ['60%', '80%'],
                         label: {
                             show: false,
                             position: 'outside',
@@ -590,12 +587,12 @@ defineExpose({ open })
     display: grid;
     grid-template-rows: repeat(5, auto);
     .row {
-        margin: 5px 2%;
+        margin: 4px 2%;
         width: 100%;
         box-shadow: 1px 1px 1px 1px #e8e3e3;
     }
     img {
-        width: 7%;
+        width: 6%;
         margin: 0px 15px;
     }
 }

src/views/pqs/qualityInspeection/panorama/components/map.vue

@@ -1,82 +1,643 @@
 <template>
-    <div id="mapId" style="width: 100%; height: 100%"></div>
+    <DatePicker ref="datePickerRef" style="display: none" />
+    <div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
+    <div id="nrDeviceCard"></div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref, nextTick } from 'vue'
-// import '@/assets/panorama/map.js'
 import { mainHeight } from '@/utils/layout'
-
+import { useDictData } from '@/stores/dictData'
-const powerMap: any = ref(null)
+// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
-powerMap.value = new PowerMapProgram(() => {
+import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
-    // 初始化地图
+import DatePicker from '@/components/form/datePicker/index.vue'
-    powerMap.value.initMap({
+import '@/assets/panorama/narimap.css'
-        mapId: 'mapId',
+import '@/assets/panorama/nrgisCommon.css'
-        style: 'sjDark', // sjRaster sjBase sjDark
+const emit = defineEmits(['changeValue', 'drop', 'show'])
+const prop = defineProps({
+    lineInfo: {
+        type: Boolean
+    }
+})
+const narimap = window?.narimap
+const dictData = useDictData()
+const datePickerRef = ref()
+const map: any = ref(null)
+const deviceCard: any = ref(null)
+const popup: any = ref(null)
+const powerManageGridMap: any = ref(null)
+const orgId = ref(dictData.state.area[0].code)
+const deptIndex = ref(dictData.state.area[0].id)
+narimap.Require(
+    ['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
+    () => {
+        if (narimap.Config.examples.notlogin) {
+            initMap(narimap.Config.styles.sjDark)
+        } else {
+            //电网GIS地图服务登录
+            narimap.SGAuth.login()
+                .then((result: any) => {
+                    if (result.success) {
+                        console.log('登录成功')
+                    } else {
+                        console.log('登录失败', result)
+                    }
+                    //默认打开电网GIS影像图
+                    initMap(narimap.Config.styles.sjDark)
+                })
+                .catch((err: any) => {
+                    console.log('错误', err)
+                })
+        }
+    }
+)
+function initMap(styleurl: any) {
+    map.value = new narimap.Map({
+        container: 'map',
+        style: styleurl,
         zoom: 6,
-        center: [116.478, 39.997] 
+        center: [116.478935, 39.997761],
+        controls: false,
+        country: true,
+        // 地图默认字体
+        localIdeographFontFamily: 'Microsoft YoHei'
     })
-    setTimeout(() => {
+    map.value.on('load', () => {
-        powerMap.value.createGridMap({
+        nextTick(() => {
-            theme: 'light',
+            // 添加图层
-            zoom: 7,
+            addLayer()
-            country: true,
+
-            
+            Query()
-            city: {
+        })
-                minzoom: 5,
+    })
-                maxzoom: 8
+}
-            },
+
-            label: {
+const Query = () => {
-                // label 文字颜色
+    // 添加行政区划
-                textColor: '#fff',
+    powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
-                // label 文字透明度
+    powerManageGridMap.value.init(
-                textOpacity: 1
+        {
-            },
+            base: {
-            default: {
-                fill: {
-                    // 默认填充颜色, 支持 rgba 格式
-                    fillColor: '#028b98',
-                    fillOpacity: 0.4
-                },
                 outline: {
-                    // 默认轮廓线颜色
+                    paint: {
-                    lineColor: '#0ec6d0',
+                        'line-color': '#0D867F',
-                    // 默认轮廓线宽
+                        'line-width': 1,
-                    lineWidth: 2
+                        'line-opacity': 1
+                    }
+                },
+                fill: {
+                    paint: {
+                        'fill-color': '#0D867F',
+                        'fill-opacity': 0.3
+                    }
+                },
+                label: {
+                    paint: {
+                        'text-color': '#063094',
+                        'text-halo-color': '#ffffff',
+                        'text-halo-width': 1
+                    }
+                },
+                hover: {
+                    type: 'all',
+                    fill: {
+                        paint: {
+                            'fill-color': 'rgba(1,1,1,0)',
+                            'fill-opacity': 0
+                        }
+                    },
+                    outline: {
+                        paint: {
+                            'line-color': '#0D867F',
+                            'line-width': 4,
+                            'line-opacity': 1
+                        }
+                    }
                 }
             },
-            hover: {
+            levels: {
-                fill: {
+                city: {
-                    fillColor: '#028b98',
+                    // minzoom: 10,
-                    fillOpacity: 0.6
+                    maxzoom: 13
-                },
-                outline: {
-                    lineColor: '#009ea8',
-                    lineWidth: 2
-                }
-            },
-            highLight: {
-                fill: {
-                    fillColor: '#028b98',
-                    fillOpacity: 0.6
-                },
-                outline: {
-                    lineColor: '#009ea8',
-                    lineWidth: 2
                 }
             }
+        },
+        {
+            initOrgIds: [orgId.value],
+            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
+            cascade: true
+        }
+    )
+
+    setTimeout(() => {
+        addLine()
+        const query = new narimap.Components.Query(map.value)
+        query.init(map.value.getContainer())
+        query.setQueryOrgId(orgId.value)
+
+        setTimeout(() => {
+            locatePositions({ data: dictData.state.area[0] })
+        }, 500)
+    }, 500)
+}
+// 添加变电站线路
+const addLine = () => {
+    //添加电网图层
+    let psrmap = new narimap.PSRMap(map.value, {
+        orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
+    })
+    psrmap.addPSR()
+    initDeviceCard()
+    const devTree = new narimap.Components.DeviceTreeGW(map.value)
+
+    devTree.init({ orgId: orgId.value })
+
+    //添加电网要素点击事件
+    // device-tree-gw__button
+    document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
+        emit('show', true)
+    }
+    //添加电网要素点击事件
+    psrmap.on('click', (features: any) => {
+        console.log(features)
+    })
+}
+// 添加变电站弹框
+const initDeviceCard = () => {
+    deviceCard.value && deviceCard.value.close()
+
+    let options = {
+        map: map.value, // map实例
+        container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
+        narimap: narimap, //nariMap实例
+        //用户自定义功能
+        customButtons: {
+            popupButtons: {
+                buttons: []
+            },
+            detailsButtons: {
+                buttons: []
+            }
+        }
+    }
+
+    deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
+    deviceCard.value.on('click', (res: any) => {
+        if (res.button.id == 'nariPopupViewDetail') {
+            emit('show', true)
+        }
+        setTimeout(() => {
+            document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
+                emit('show', false)
+            }
+        }, 10)
+    })
+    //
+}
+// 添加图层
+const addLayer = () => {
+    map.value.loadImage(
+        new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi1', image)
+            map.value.addLayer({
+                id: 'spotImg-ZY',
+                type: 'symbol',
+                minzoom: 8,
+                source: {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi1',
+                    'icon-size': 0.7,
+                    'icon-ignore-placement': true,
+                    'icon-allow-overlap': true
+                }
+            })
+            map.value.addLayer({
+                id: 'spotName-ZY',
+                type: 'symbol',
+                minzoom: 10,
+                source: {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+
+                    'text-field': '{name}',
+                    'icon-ignore-placement': true,
+                    'text-ignore-placement': false,
+                    'text-size': 12,
+                    'text-max-width': 8,
+                    'text-offset': [0, 2],
+                    'text-font': ['Microsoft YaHei Regular']
+                },
+                paint: {
+                    'text-color': '#ccc',
+
+                    'text-halo-width': 1.33333
+                }
+            })
+        }
+    )
+    map.value.loadImage(
+        new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi2', image)
+            map.value.addLayer({
+                id: 'spotImg-TY',
+                type: 'symbol',
+                minzoom: 8,
+                source: {
+                    type: 'geojson',
+
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi2',
+                    'icon-size': 0.7,
+                    // 'text-field': '{name}',
+                    'icon-ignore-placement': true,
+                    'icon-allow-overlap': true
+                    // 'text-ignore-placement': false,
+                    // 'text-size': 12,
+                    // 'text-max-width': 8,
+                    // 'text-offset': [0, 2],
+                    // 'text-font': ['Microsoft YaHei Regular']
+                }
+                // paint: {
+                //     'text-color': '#ccc',
+                //     // 'text-halo-color': '#FFFFFF',
+                //     'text-halo-width': 1.33333
+                // }
+            })
+            map.value.addLayer({
+                id: 'spotName-TY',
+                type: 'symbol',
+                minzoom: 8,
+                source: {
+                    type: 'geojson',
+
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    // 'icon-image': 'poi2',
+                    // 'icon-size': 0.7,
+                    'text-field': '{name}',
+                    'icon-ignore-placement': true,
+                    'text-ignore-placement': false,
+                    'text-size': 12,
+                    'text-max-width': 8,
+                    'text-offset': [0, 2],
+                    'text-font': ['Microsoft YaHei Regular']
+                },
+                paint: {
+                    'text-color': '#ccc',
+                    // 'text-halo-color': '#FFFFFF',
+                    'text-halo-width': 1.33333
+                }
+            })
+        }
+    )
+    // 添加地图弹框
+    map.value.on('click', (e: any) => {
+        const features = map.value.queryRenderedFeatures(e.point, {
+            layers: ['spotImg-ZY', 'spotImg-TY']
         })
-        // 监听行政区域点击事件
+
-    }, 1000)
+        if (features.length > 0) {
-})
+            popup.value && popup.value.remove()
+            setTimeout(() => {
+                deviceCard.value.popup && deviceCard.value.popup.remove()
+            }, 10)
+            let data = JSON.parse(features[0].properties.list)
+            let markerHeight = 20
+            let markerRadius = 10
+            let linearOffset = 25
+            let popupOffsets = {
+                top: [0, 0],
+                'top-left': [0, 0],
+                'top-right': [0, 0],
+                bottom: [0, -markerHeight + 10],
+                'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
+                'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
+                left: [markerRadius, (markerHeight - markerRadius) * -1],
+                right: [-markerRadius, (markerHeight - markerRadius) * -1]
+            }
+
+            popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
+                .setLngLat([data.lng, data.lat])
+                .setHTML(
+                    `<div class="popup-box"><div class="popup_content">
+                  <img src="${data.imageUrl}"/>
+                  <div>
+                      <div style="display: flex">
+                          <span class="title">${data.lineName}</span>
+                          <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
+                        data.comFlag == 0 ? '停运' : '在运'
+                    }</span>
+                          </div>
+                          <div class="info">
+                           <span>${data.subName} </span>
+                           <span>${data.voltageName}</span>
+                          </div>
+
+                   </div>
+                  </div>
+                  <div class="popup_footer">
+                      <span id="ids" data-sid="${data.lineId}">查看详情</span>
+                  </div>
+                  </div>
+
+                  `
+                )
+                .addTo(map.value)
+            document.getElementById('ids').onclick = function (v: any) {
+                // console.log(e.target.dataset.sid)
+                emit('drop', v.target.dataset.sid)
+            }
+        }
+    })
+}
+//添加多个监测点
+const addMarkers = async (row?: any) => {
+    let params = {
+        deptIndex: deptIndex.value,
+        monitorFlag: 2,
+        powerFlag: 2,
+        searchBeginTime: datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value.timeValue[1],
+        serverName: 'event-boot',
+        statisticalType: {},
+        ...row
+    }
+    let { data } = await getAreaLineInfo(params)
+    let r = 0.0035
+    let tempFeatureZ: any = []
+    let tempFeatureT: any = []
+    data.forEach((item: any) => {
+        if (item.children.length > 10 && item.children.length < 100) {
+            r = 0.0055
+        } else if (item.children.length >= 100) {
+            r = 0.01055
+        }
+
+        item.children.forEach((val: any, i: number) => {
+            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
+            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
+            val.imageUrl =
+                val.comFlag == 0
+                    ? new URL('@/assets/txzdwzj.png', import.meta.url).href
+                    : new URL('@/assets/txzcwzj.png', import.meta.url).href
+            // // 监测点图标
+
+            let tempFeature = {
+                type: 'Feature',
+
+                geometry: {
+                    type: 'Point',
+                    coordinates: [val.lng, val.lat]
+                },
+                properties: {
+                    name: val.lineName,
+                    list: val
+                }
+            }
+
+            switch (val.comFlag) {
+                case 0:
+                    tempFeatureT.push(tempFeature)
+                    break
+                case 1:
+                    tempFeatureZ.push(tempFeature)
+                    break
+            }
+        })
+    })
+
+    map.value.getSource('spotImg-ZY').setData({
+        type: 'FeatureCollection',
+        features: tempFeatureZ
+    })
+    map.value.getSource('spotName-ZY').setData({
+        type: 'FeatureCollection',
+        features: tempFeatureZ
+    })
+    map.value.getSource('spotImg-TY').setData({
+        type: 'FeatureCollection',
+        features: tempFeatureT
+    })
+    map.value.getSource('spotName-TY').setData({
+        type: 'FeatureCollection',
+        features: tempFeatureT
+    })
+}
 
 onMounted(() => {
     // 监听地图初始化完成事件
 })
 
+const locatePositions = (e: any) => {
+    // let mapList = [
+    //     {
+    //         code: '1100F3DE20806FADE050007F01006CBE', //冀北
+    //         centralCoordinate: [117.14740482, 40.5478448705],
+    //         zoom: 6
+    //     },
+    //     {
+    //         code: '1100F3DE246A6FADE050007F01006CBE', //超高压
+    //         centralCoordinate: [117.14740482, 40.5478448705],
+    //         zoom: 6
+    //     },
+
+    //     {
+    //         code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
+    //         centralCoordinate: [118.335849137, 39.7213593355],
+    //         zoom: 7
+    //     },
+    //     {
+    //         code: '1100F3DE20816FADE050007F01006CBE', //张家口
+    //         centralCoordinate: [115.032504679, 40.8651549951],
+    //         zoom: 7
+    //     },
+    //     {
+    //         code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
+    //         centralCoordinate: [119.185113833, 40.0879119754],
+    //         zoom: 7
+    //     },
+    //     {
+    //         code: '1100F3DE23466FADE050007F01006CBE', //承德
+    //         centralCoordinate: [117.548498365, 41.3475890632],
+    //         zoom: 7
+    //     },
+    //     {
+    //         code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
+    //         centralCoordinate: [116.628004129, 39.2589378611],
+    //         zoom: 7
+    //     }
+    // ]
+    // let data: any = []
+    // data = mapList.filter(item => item.code == e.data.code) || []
+
+    if (map.value != null) {
+        deptIndex.value = e.data.id
+        // 加载点
+        addMarkers()
+        powerManageGridMap.value.drillDown({
+            // 判断超高压
+            orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
+            onlyDisplay: true
+        })
+    }
+}
+defineExpose({ locatePositions, addMarkers })
 const height = mainHeight(20)
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/panorama/map.css';
+:deep(.query-box-wrap) {
+    position: absolute;
+    top: 10px;
+    left: calc(50% - 295px);
+    .query-box {
+        border-radius: 8px 0 0 8px;
+    }
+}
+:deep(.device-tree-gw__button) {
+    position: absolute;
+    top: 10px;
+    border-radius: 0 8px 8px 0;
+    left: calc(50% + 35px);
+    z-index: 0 !important;
+}
+
+:deep(.province-selector) {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    .distribution__body {
+        height: auto;
+    }
+    .province-selector__options {
+        height: auto;
+    }
+    .province-op {
+        width: 48%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .province-selector__button {
+        width: 100px;
+        padding: 4px 12px;
+        span {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    .province-selector__options {
+        z-index: 1;
+    }
+}
+:deep(.sgmap-canvas) {
+    width: 100% !important;
+}
+:deep(.my-popup) {
+    max-width: 400px !important;
+    .popup-box {
+        width: 300px;
+        height: 70px;
+        .popup_content {
+            display: grid;
+            grid-template-columns: 50px 1fr;
+            img {
+                width: 42px;
+                height: 42px;
+            }
+            .title {
+                font-weight: 550;
+            }
+            .state {
+                width: 45px;
+                margin-left: 5px;
+                text-align: center;
+                border-radius: 3px;
+                color: #fff;
+            }
+            .info {
+                color: #18181b99;
+                margin: 5px 0;
+                span {
+                    display: inline-block;
+                    width: 120px;
+                    height: 14px;
+                    line-height: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    -webkit-box-orient: vertical;
+                    &::after {
+                        display: inline-block;
+                        margin: 0 3px;
+                        content: ' ';
+                        width: 2px;
+                        height: 11px;
+                        background: #e5e6eb73;
+                        vertical-align: middle;
+                    }
+                }
+            }
+        }
+        .popup_footer {
+            padding: 5px 5px;
+            border-top: 1px solid #e5e6eb;
+            color: var(--el-color-primary);
+            span {
+                margin-right: 8px;
+                cursor: pointer;
+            }
+        }
+    }
+    .sgmap-popup-content {
+        padding: 15px 10px 10px !important;
+    }
+    .sgmap-popup-close-button {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        font-size: 16px;
+    }
+}
+#nrDeviceCard {
+    position: absolute;
+    top: 11px;
+    right: 70px;
+    width: 450px;
+    z-index: 0;
+}
 </style>

src/views/pqs/qualityInspeection/panorama/components/map1.vue

@@ -1,717 +0,0 @@
-<template>
-    <DatePicker ref="datePickerRef" style="display: none" />
-    <div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
-    <div id="nrDeviceCard"></div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, nextTick } from 'vue'
-import { mainHeight } from '@/utils/layout'
-import { useDictData } from '@/stores/dictData'
-// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
-import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import '@/assets/panorama/narimap.css'
-import '@/assets/panorama/nrgisCommon.css'
-const emit = defineEmits(['changeValue', 'drop', 'show'])
-const prop = defineProps({
-    lineInfo: {
-        type: Boolean
-    }
-})
-const narimap = window?.narimap
-const dictData = useDictData()
-const datePickerRef = ref()
-const map: any = ref(null)
-const deviceCard: any = ref(null)
-const popup: any = ref(null)
-const markerGroup: any = ref(null)
-const orgId = ref(dictData.state.area[0].code)
-narimap.Require(
-    ['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
-    () => {
-        if (narimap.Config.examples.notlogin) {
-            initMap(narimap.Config.styles.sjDark)
-        } else {
-            //电网GIS地图服务登录
-            narimap.SGAuth.login()
-                .then((result: any) => {
-                    if (result.success) {
-                        console.log('登录成功')
-                    } else {
-                        console.log('登录失败', result)
-                    }
-                    //默认打开电网GIS影像图
-                    initMap(narimap.Config.styles.sjDark)
-                })
-                .catch((err: any) => {
-                    console.log('错误', err)
-                })
-        }
-    }
-)
-function initMap(styleurl: any) {
-    map.value = new narimap.Map({
-        container: 'map',
-        style: styleurl,
-        zoom: 6,
-        center: [116.478935, 39.997761],
-        controls: false,
-        country: true,
-        // 地图默认字体
-        localIdeographFontFamily: 'Microsoft YoHei'
-    })
-    map.value.on('load', () => {
-        nextTick(() => {
-            // 加载点
-            addMarkers()
-            // 查询组件
-
-            Query()
-        })
-    })
-}
-const Query = () => {
-    // 添加行政区划
-    let powerManageGridMap = new narimap.ManageGrid.PowerManageGridMap(map.value)
-    powerManageGridMap.init(
-        {
-            base: {
-                outline: {
-                    paint: {
-                        'line-color': '#0D867F',
-                        'line-width': 1,
-                        'line-opacity': 1
-                    }
-                },
-                fill: {
-                    paint: {
-                        'fill-color': '#0D867F',
-                        'fill-opacity': 0
-                    }
-                },
-                label: {
-                    paint: {
-                        'text-color': '#063094',
-                        'text-halo-color': '#ffffff',
-                        'text-halo-width': 1
-                    }
-                },
-                hover: {
-                    enable: !0,
-                    type: 'all',
-                    fill: {
-                        enable: !0,
-                        paint: {
-                            'fill-color': 'rgba(1,1,1,0)',
-                            'fill-opacity': 0
-                        }
-                    },
-                    outline: {
-                        enable: !0,
-                        paint: {
-                            'line-color': '#0D867F',
-                            'line-width': 4,
-                            'line-opacity': 1
-                        }
-                    }
-                }
-            }
-        },
-        {
-            initOrgIds: [orgId.value],
-            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
-            cascade: true
-        }
-    )
-    // 添加区域选择
-    let component = new narimap.Components.RegionSelector(map.value, {
-        isIntegratedGridmap: true,
-        //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
-        cascade: true,
-        orgId: orgId.value
-    })
-    component.on('regionSelect', (e: any) => {
-        emit('changeValue', e)
-    })
-    setTimeout(() => {
-        addLine()
-        const query = new narimap.Components.Query(map.value)
-        query.init(map.value.getContainer())
-        query.setQueryOrgId(orgId.value)
-    }, 500)
-}
-// 添加变电站线路
-const addLine = () => {
-    //添加电网图层
-    let psrmap = new narimap.PSRMap(map.value, {
-        orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
-    })
-    psrmap.addPSR()
-    initDeviceCard()
-    const devTree = new narimap.Components.DeviceTreeGW(map.value)
-
-    devTree.init({ orgId: orgId.value })
-
-    //添加电网要素点击事件
-    // device-tree-gw__button
-    document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
-        emit('show', true)
-    }
-    //添加电网要素点击事件
-    psrmap.on('click', (features: any) => {
-        console.log(features)
-    })
-}
-// 添加变电站弹框
-const initDeviceCard = () => {
-    deviceCard.value && deviceCard.value.close()
-
-    let options = {
-        map: map.value, // map实例
-        container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
-        narimap: narimap, //nariMap实例
-        //用户自定义功能
-        customButtons: {
-            popupButtons: {
-                buttons: []
-            },
-            detailsButtons: {
-                buttons: []
-            }
-        }
-    }
-
-    deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
-    deviceCard.value.on('click', (res: any) => {
-        if (res.button.id == 'nariPopupViewDetail') {
-            emit('show', true)
-        }
-        setTimeout(() => {
-            document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
-                emit('show', false)
-            }
-        }, 10)
-    })
-    //
-}
-
-//添加多个监测点
-const addMarkers = async () => {
-    let params = {
-        deptIndex: dictData.state.area[0].id,
-        monitorFlag: 2,
-        powerFlag: 2,
-        searchBeginTime: datePickerRef.value.timeValue[0],
-        searchEndTime: datePickerRef.value.timeValue[1],
-        serverName: 'event-boot',
-        statisticalType: {}
-    }
-    let { data } = await getAreaLineInfo(params)
-    let r = 0.0035
-    let tempFeatureZ: any = []
-    let tempFeatureT: any = []
-    data.forEach((item: any) => {
-        if (item.children.length > 10 && item.children.length < 100) {
-            r = 0.0055
-        } else if (item.children.length >= 100) {
-            r = 0.01055
-        }
-
-        item.children.forEach((val: any, i: number) => {
-            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
-            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
-            val.imageUrl =
-                val.comFlag == 0
-                    ? new URL('@/assets/txzdwzj.png', import.meta.url).href
-                    : new URL('@/assets/txzcwzj.png', import.meta.url).href
-            // // 监测点图标
-
-            let tempFeature = {
-                type: 'Feature',
-
-                geometry: {
-                    type: 'Point',
-                    coordinates: [val.lng, val.lat]
-                },
-                properties: {
-                    name: val.lineName,
-                    list: val
-                }
-            }
-
-            switch (val.comFlag) {
-                case 0:
-                    tempFeatureT.push(tempFeature)
-                    break
-                case 1:
-                    tempFeatureZ.push(tempFeature)
-                    break
-            }
-        })
-    })
-
-    map.value.loadImage(
-        new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
-        (error: any, image: any) => {
-            if (error) throw error
-
-            //添加图片到map，第一个参数为图片设置id
-            map.value.addImage('poi1', image)
-            map.value.addLayer({
-                id: 'spotImg-ZY',
-                type: 'symbol',
-                minzoom: 8,
-                source: {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: tempFeatureZ
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    'icon-image': 'poi1',
-                    'icon-size': 0.7,
-                    'icon-ignore-placement': true,
-                    'icon-allow-overlap': true
-                }
-            })
-            map.value.addLayer({
-                id: 'spotName-ZY',
-                type: 'symbol',
-                minzoom: 10,
-                source: {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: tempFeatureZ
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-
-                    'text-field': '{name}',
-                    'icon-ignore-placement': true,
-                    'text-ignore-placement': false,
-                    'text-size': 12,
-                    'text-max-width': 8,
-                    'text-offset': [0, 2],
-                    'text-font': ['Microsoft YaHei Regular']
-                },
-                paint: {
-                    'text-color': '#ccc',
-
-                    'text-halo-width': 1.33333
-                }
-            })
-        }
-    )
-    map.value.loadImage(
-        new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
-        (error: any, image: any) => {
-            if (error) throw error
-
-            //添加图片到map，第一个参数为图片设置id
-            map.value.addImage('poi2', image)
-            map.value.addLayer({
-                id: 'spotImg-TY',
-                type: 'symbol',
-                minzoom: 8,
-                source: {
-                    type: 'geojson',
-
-                    data: {
-                        type: 'FeatureCollection',
-                        features: tempFeatureT
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    'icon-image': 'poi2',
-                    'icon-size': 0.7,
-                    // 'text-field': '{name}',
-                    'icon-ignore-placement': true,
-                    'icon-allow-overlap': true
-                    // 'text-ignore-placement': false,
-                    // 'text-size': 12,
-                    // 'text-max-width': 8,
-                    // 'text-offset': [0, 2],
-                    // 'text-font': ['Microsoft YaHei Regular']
-                }
-                // paint: {
-                //     'text-color': '#ccc',
-                //     // 'text-halo-color': '#FFFFFF',
-                //     'text-halo-width': 1.33333
-                // }
-            })
-            map.value.addLayer({
-                id: 'spotName-TyY',
-                type: 'symbol',
-                minzoom: 8,
-                source: {
-                    type: 'geojson',
-
-                    data: {
-                        type: 'FeatureCollection',
-                        features: tempFeatureT
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    // 'icon-image': 'poi2',
-                    // 'icon-size': 0.7,
-                    'text-field': '{name}',
-                    'icon-ignore-placement': true,
-                    'text-ignore-placement': false,
-                    'text-size': 12,
-                    'text-max-width': 8,
-                    'text-offset': [0, 2],
-                    'text-font': ['Microsoft YaHei Regular']
-                },
-                paint: {
-                    'text-color': '#ccc',
-                    // 'text-halo-color': '#FFFFFF',
-                    'text-halo-width': 1.33333
-                }
-            })
-        }
-    )
-    map.value.on('click', (e: any) => {
-        const features = map.value.queryRenderedFeatures(e.point, {
-            layers: ['spotImg-ZY', 'spotImg-TY']
-        })
-       
-        if (features.length > 0) {
-            popup.value && popup.value.remove()
-            setTimeout(() => {
-                deviceCard.value.popup && deviceCard.value.popup.remove()
-            }, 10)
-            let data = JSON.parse(features[0].properties.list)
-            let markerHeight = 20
-            let markerRadius = 10
-            let linearOffset = 25
-            let popupOffsets = {
-                top: [0, 0],
-                'top-left': [0, 0],
-                'top-right': [0, 0],
-                bottom: [0, -markerHeight + 10],
-                'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-                'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-                left: [markerRadius, (markerHeight - markerRadius) * -1],
-                right: [-markerRadius, (markerHeight - markerRadius) * -1]
-            }
-
-            popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
-                .setLngLat([data.lng, data.lat])
-                .setHTML(
-                    `<div class="popup-box"><div class="popup_content">
-                  <img src="${data.imageUrl}"/>
-                  <div>
-                      <div style="display: flex">
-                          <span class="title">${data.lineName}</span>
-                          <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
-                        data.comFlag == 0 ? '停运' : '在运'
-                    }</span>
-                          </div>
-                          <div class="info">
-                           <span>监测点</span>
-                           <span>${data.voltageScale}</span>
-                           <span>${data.gdName} </span>
-                          </div>
-
-                   </div>
-                  </div>
-                  <div class="popup_footer">
-                      <span id="ids" data-sid="${data.lineId}">查看详情</span>
-                  </div>
-                  </div>
-
-                  `
-                )
-                .addTo(map.value)
-            document.getElementById('ids').onclick = function (v: any) {
-                // console.log(e.target.dataset.sid)
-                emit('drop', v.target.dataset.sid)
-            }
-        }
-    })
-}
-//添加多个监测点
-// const addMarkers = async () => {
-//     let params = {
-//         deptIndex: dictData.state.area[0].id,
-//         monitorFlag: 2,
-//         powerFlag: 2,
-//         searchBeginTime: datePickerRef.value.timeValue[0],
-//         searchEndTime: datePickerRef.value.timeValue[1],
-//         serverName: 'event-boot',
-//         statisticalType: {}
-//     }
-//     let markerGroup = new narimap.MarkerGroup(map.value)
-//     let { data } = await getAreaLineInfo(params)
-//     let r = 0.0035
-
-//     data.forEach((item: any) => {
-//         if (item.children.length > 10 && item.children.length < 100) {
-//             r = 0.0055
-//         } else if (item.children.length >= 100) {
-//             r = 0.01055
-//         }
-//         item.children.forEach((val: any, i: number) => {
-//             val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
-//             val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
-//             // // 监测点图标
-//             val.icon = {
-//                 imageUrl: '',
-//                 iconSize: [24, 24] // 设置图标大小
-//             }
-//             switch (val.comFlag) {
-//                 case 0:
-//                     val.icon.imageUrl = new URL('@/assets/txzdwzj.png', import.meta.url).href
-//                     break
-//                 case 1:
-//                     val.icon.imageUrl = new URL('@/assets/txzcwzj.png', import.meta.url).href
-//                     break
-//             }
-
-//             let marker = new narimap.Marker().setLngLat([val.lng, val.lat]).setImage(val.icon)
-//             marker.data = val
-//             markerGroup.addMarker(val.lineId, marker)
-//             markerGroup.hide()
-//         })
-//     })
-//     setTimeout(() => {
-//         markerGroup.on('click', (e: any) => {
-//             popup.value && popup.value.close()
-//             deviceCard.value.popup && deviceCard.value.popup.remove()
-
-//             let data = e.marker.data
-//             let markerHeight = 20
-//             let markerRadius = 10
-//             let linearOffset = 25
-//             let popupOffsets = {
-//                 top: [0, 0],
-//                 'top-left': [0, 0],
-//                 'top-right': [0, 0],
-//                 bottom: [0, -markerHeight],
-//                 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-//                 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-//                 left: [markerRadius, (markerHeight - markerRadius) * -1],
-//                 right: [-markerRadius, (markerHeight - markerRadius) * -1]
-//             }
-
-//             popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
-//                 .setLngLat([data.lng, data.lat])
-//                 .setHTML(
-//                     `<div class="popup-box"><div class="popup_content">
-//                   <img src="${data.icon.imageUrl}"/>
-//                   <div>
-//                       <div style="display: flex">
-//                           <span class="title">${data.lineName}</span>
-//                           <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
-//                         data.comFlag == 0 ? '停运' : '在运'
-//                     }</span>
-//                           </div>
-//                           <div class="info">
-//                            <span>监测点</span>
-//                            <span>${data.voltageScale}</span>
-//                            <span>${data.gdName} </span>
-//                           </div>
-
-//                    </div>
-//                   </div>
-//                   <div class="popup_footer">
-//                       <span id="ids" data-sid="${data.lineId}">查看详情</span>
-//                   </div>
-//                   </div>
-
-//                   `
-//                 )
-//                 .addTo(map.value)
-//             document.getElementById('ids').onclick = function (v: any) {
-//                 // console.log(e.target.dataset.sid)
-//                 emit('drop', v.target.dataset.sid)
-//             }
-//         })
-//     }, 0)
-//     map.value.on('zoom', (e: any) => {
-//         // map.value.getZoom()
-//         if (map.value.getZoom() > 7) {
-//             markerGroup.show()
-//         } else {
-//             markerGroup.hide()
-//         }
-//     })
-// }
-
-onMounted(() => {
-    // 监听地图初始化完成事件
-})
-
-// const locatePositions = (e: any) => {
-//     let mapList = [
-//         {
-//             code: '1100F3DE20806FADE050007F01006CBE', //冀北
-//             centralCoordinate: [116.13740482, 39.5478448705],
-//             zoom: 6
-//         },
-//         {
-//             code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
-//             centralCoordinate: [118.335849137, 39.7213593355],
-//             zoom: 7
-//         },
-//         {
-//             code: '1100F3DE20816FADE050007F01006CBE', //张家口
-//             centralCoordinate: [115.032504679, 40.8651549951],
-//             zoom: 7
-//         },
-//         {
-//             code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
-//             centralCoordinate: [119.185113833, 40.0879119754],
-//             zoom: 7
-//         },
-//         {
-//             code: '1100F3DE23466FADE050007F01006CBE', //承德
-//             centralCoordinate: [117.548498365, 41.3475890632],
-//             zoom: 7
-//         },
-//         {
-//             code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
-//             centralCoordinate: [116.628004129, 39.2589378611],
-//             zoom: 7
-//         }
-//     ]
-//     let data: any = []
-//     data = mapList.filter(item => item.code == e.data.code) || []
-
-//     if (data.length > 0) {
-//         // orgId.value = e.data.code
-//         // addCity()
-
-//         console.log('🚀 ~ locatePositions ~ data[0].zoom:', data[0].zoom)
-//         map.value.locatePositions(data[0].centralCoordinate, {
-//             zoom: data[0].zoom
-//         })
-//     }
-// }
-// defineExpose({ locatePositions })
-const height = mainHeight(20)
-</script>
-
-<style lang="scss" scoped>
-:deep(.query-box-wrap) {
-    position: absolute;
-    top: 10px;
-    left: calc(50% - 385px);
-    .query-box {
-        border-radius: 8px 0 0 8px;
-    }
-}
-:deep(.device-tree-gw__button) {
-    position: absolute;
-    top: 10px;
-    border-radius: 0 8px 8px 0;
-    left: calc(50% - 55px);
-    z-index: 0 !important;
-}
-
-:deep(.province-selector) {
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    .distribution__body {
-        height: auto;
-    }
-    .province-selector__options {
-        height: auto;
-    }
-    .province-op {
-        width: 48%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .province-selector__button {
-        width: 100px;
-        padding: 4px 12px;
-        span {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-    .province-selector__options {
-        z-index: 1;
-    }
-}
-:deep(.sgmap-canvas) {
-    width: 100% !important;
-}
-:deep(.my-popup) {
-    max-width: 400px !important;
-    .popup-box {
-        width: 260px;
-        height: 70px;
-        .popup_content {
-            display: grid;
-            grid-template-columns: 50px 1fr;
-            img {
-                width: 42px;
-                height: 42px;
-            }
-            .title {
-                font-weight: 550;
-            }
-            .state {
-                width: 45px;
-                margin-left: 5px;
-                text-align: center;
-                border-radius: 3px;
-                color: #fff;
-            }
-            .info {
-                color: #18181b99;
-                margin: 5px 0;
-                span {
-                    &::after {
-                        display: inline-block;
-                        margin: 0 5px;
-                        content: ' ';
-                        width: 2px;
-                        height: 11px;
-                        background: #e5e6eb73;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-        .popup_footer {
-            padding: 5px 5px;
-            border-top: 1px solid #e5e6eb;
-            color: var(--el-color-primary);
-            span {
-                margin-right: 8px;
-                cursor: pointer;
-            }
-        }
-    }
-    .sgmap-popup-content {
-        padding: 15px 10px 10px !important;
-    }
-    .sgmap-popup-close-button {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        font-size: 16px;
-    }
-}
-#nrDeviceCard {
-    position: absolute;
-    top: 11px;
-    right: 70px;
-    width: 450px;
-    z-index: 0;
-}
-</style>

src/views/pqs/qualityInspeection/panorama/components/mapL.vue

@@ -20,12 +20,22 @@
                             <el-col :span="12" class="cor">
                                 <img :src="item.img[0]" />
                                 {{ item.titleT[0] }}：
-                                <span :style="`color: ${item.color[0]}`">{{ item.list[4].numOne }}</span>
+                                <span
+                                    :style="`color: ${item.color[0]}; cursor: pointer;`"
+                                    @click="LookMap(item.list[4].numOneList, 0)"
+                                >
+                                    {{ item.list[4].numOne }}
+                                </span>
                             </el-col>
                             <el-col :span="12" class="cor">
                                 <img :src="item.img[1]" />
                                 {{ item.titleT[1] }}：
-                                <span :style="`color: ${item.color[1]}`">{{ item.list[4].numTwo }}</span>
+                                <span
+                                    :style="`color: ${item.color[1]}; cursor: pointer;`"
+                                    @click="LookMap(item.list[4].numTwoList, 1)"
+                                >
+                                    {{ item.list[4].numTwo }}
+                                </span>
                             </el-col>
                         </el-row>
                     </div>
@@ -36,11 +46,11 @@
                                 <span class="vol">500kV</span>
                             </div>
                             <div class="num">
-                                <div>
+                                <div @click="LookMap(item.list[0].numOneList, 0)">
                                     {{ item.titleT[0] }}:
                                     <span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
                                 </div>
-                                <div>
+                                <div @click="LookMap(item.list[0].numTwoList, 1)">
                                     {{ item.titleT[1] }}:
                                     <span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
                                 </div>
@@ -52,11 +62,11 @@
                                 <span class="vol">220kV</span>
                             </div>
                             <div class="num">
-                                <div>
+                                <div @click="LookMap(item.list[1].numOneList, 0)">
                                     {{ item.titleT[0] }}:
                                     <span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
                                 </div>
-                                <div>
+                                <div @click="LookMap(item.list[1].numTwoList, 1)">
                                     {{ item.titleT[1] }}:
                                     <span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
                                 </div>
@@ -68,11 +78,11 @@
                                 <span class="vol">110kV</span>
                             </div>
                             <div class="num">
-                                <div>
+                                <div @click="LookMap(item.list[2].numOneList, 0)">
                                     {{ item.titleT[0] }}:
                                     <span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
                                 </div>
-                                <div>
+                                <div @click="LookMap(item.list[2].numTwoList, 1)">
                                     {{ item.titleT[1] }}:
                                     <span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
                                 </div>
@@ -84,11 +94,11 @@
                                 <span class="vol">350kV</span>
                             </div>
                             <div class="num">
-                                <div>
+                                <div @click="LookMap(item.list[3].numOneList, 0)">
                                     {{ item.titleT[0] }}:
                                     <span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
                                 </div>
-                                <div>
+                                <div @click="LookMap(item.list[3].numTwoList, 1)">
                                     {{ item.titleT[1] }}:
                                     <span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
                                 </div>
@@ -123,7 +133,7 @@ import stand from './details/stand.vue'
 import terminal from './details/terminal.vue'
 import point from './details/point.vue'
 import { getSubLineGiveAnAlarm, getGridDiagramMonitor, getGridDiagramDev } from '@/api/device-boot/panorama'
-
+const emit = defineEmits(['LookMap'])
 const dictData = useDictData()
 const show = ref(false)
 const standRef = ref()
@@ -138,23 +148,33 @@ const list: any = ref([
         list: [
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             }
         ]
     },
@@ -166,23 +186,33 @@ const list: any = ref([
         list: [
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             }
         ]
     },
@@ -194,23 +224,33 @@ const list: any = ref([
         list: [
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             },
             {
                 numOne: 0,
-                numTwo: 0
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
             }
         ]
     }
@@ -263,6 +303,15 @@ const info = (row: any) => {
         })
     })
 }
+// 点击
+const LookMap = (row: object, num: number) => {
+    console.log('🚀 ~ LookMap ~ row:', row)
+    let form = {
+        coutList: num == 0 ? row : [],
+        alarmList: num == 1 ? row : []
+    }
+    emit('LookMap', form)
+}
 onMounted(() => {})
 defineExpose({ info, show })
 </script>
@@ -280,10 +329,12 @@ defineExpose({ info, show })
 .cardBox {
     display: flex;
     flex-wrap: wrap;
+
     .card {
         margin-top: 10px;
         width: 48%;
         margin-right: 2%;
+
         .cor {
             display: flex;
             align-items: center;
@@ -330,6 +381,9 @@ defineExpose({ info, show })
                 grid-template-columns: 1fr 1fr;
                 font-size: 12px;
                 color: #6d6d6d;
+                div {
+                    cursor: pointer;
+                }
                 span {
                     font-size: 14px;
                     font-weight: 550;

src/views/pqs/qualityInspeection/panorama/components/mapR.vue

@@ -379,9 +379,9 @@ const transientChange = () => {
         transientNum.value = 0
         if (formRow.value.isUpToGrid == 0) {
             data = res.data.info
-            transientNum.value = res.data.data
+            transientNum.value = res.data.data.toFixed(2)
         } else {
-            transientNum.value = res.data.gwData
+            transientNum.value = res.data.gwData.toFixed(2)
             data = res.data.gwInfo
         }
         WTList.value = data

src/views/pqs/qualityInspeection/panorama/index.vue

@@ -4,13 +4,13 @@
             <DatePicker ref="datePickerRef" style="display: none" />
             <el-form :inline="true" :model="form" class="demo-form-inline">
                 <el-form-item>
-                    <!-- <Area
+                    <Area
                         ref="areaRef"
                         :show-all-levels="false"
                         v-model="form.orgNo"
                         style="width: 100px"
                         @changeValue="changeValue"
-                    /> -->
+                    />
                 </el-form-item>
                 <el-form-item>
                     <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
@@ -27,13 +27,13 @@
         <!-- <Map ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop" @show="infoShow" /> -->
         <div v-show="lineInfo">
             <!-- 省级 -->
-            <div v-show="control == 3">
+            <div v-show="control == 1">
-                <mapL ref="mapLRef" class="mapL" />
+                <mapL ref="mapLRef" class="mapL" @LookMap="LookMap" />
                 <mapR ref="mapRRef" class="mapR" />
             </div>
             <!-- 市级 -->
             <!-- <div v-show="control == 4"> -->
-            <div v-show="control > 3">
+            <div v-show="control == 2">
                 <cityMapL ref="cityMapLRef" class="mapL" />
                 <cityMapR ref="cityMapRRef" class="mapR" />
             </div>
@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import { onMounted, nextTick, ref, provide } from 'vue'
 import Area from '@/components/form/area/index.vue'
-// import Map from './components/map1.vue'
+// import Map from './components/map.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { Search, Refresh } from '@element-plus/icons-vue'
@@ -57,9 +57,10 @@ import cityMapR from './components/cityMapR.vue'
 
 import Info from './components/line/info.vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
+import { map } from 'xe-utils'
 const dictData = useDictData()
 defineOptions({
-    name: '/panorama'
+    name: 'panorama'
 })
 const datePickerRef = ref()
 const areaRef = ref()
@@ -70,7 +71,7 @@ const InfoRef = ref()
 const mapRRef = ref()
 const cityMapLRef = ref()
 const cityMapRRef = ref()
-const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
+// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
 const options: any = ref([
     {
         name: dictData.state.area[0].name,
@@ -81,21 +82,21 @@ const options: any = ref([
         id: 1
     }
 ])
-const control = ref(3)
+const control = ref(1)
 const form: any = ref({
     name: '',
     orgNo: dictData.state.area[0].id,
     isUpToGrid: 0
 })
 
-
 const height = mainHeight(10)
 // 获取区域名称
 const changeValue = (e: any) => {
-    form.value.orgNo = list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
+    mapRef.value.locatePositions(e)
-    options.value[0].name = e.name
+    form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
+    options.value[0].name = e.data.areaName
 
-    control.value = e.type
+    control.value = e.data.level
 
     info()
 }
@@ -107,21 +108,15 @@ const drop = (id: string) => {
     })
 }
 // 关闭左右数据展示
-const infoShow = (e:boolean) => {
+const infoShow = (e: boolean) => {
     mapLRef.value.show = e
     mapRRef.value.show = e
     cityMapLRef.value.show = e
     cityMapRRef.value.show = e
 }
-
+// 地图控制图层
-const reset = () => {
+const LookMap = (row: any) => {
-    form.value = {
+    mapRef.value.addMarkers({ ...row, type: 1 })
-        name: '',
-        orgNo: dictData.state.area[0].id,
-        isUpToGrid: 0
-    }
-
-    info()
 }
 const info = () => {
     form.value.startTime = datePickerRef.value.timeValue[0]
@@ -133,7 +128,8 @@ const info = () => {
     // form.value.endTime = `2024-07-30`
     // form.value.searchEndTime = `2024-07-30`
     form.value.type = datePickerRef.value.interval
-    if (control.value == 3) {
+    mapRef.value.addMarkers()
+    if (control.value == 1) {
         mapLRef.value.info(form.value)
         mapRRef.value.info(form.value)
     } else {
@@ -142,7 +138,8 @@ const info = () => {
     }
 }
 onMounted(() => {
-    info()
+    // info()
+    changeValue({ data: dictData.state.area[0] })
     // aaa()
 })
 </script>
@@ -162,6 +159,10 @@ onMounted(() => {
             border-radius: 8px;
         }
     }
+    .el-input__wrapper {
+        height: 46px;
+        border-radius: 8px;
+    }
     .el-form-item {
         margin-right: 15px;
     }

src/views/system/auth/userList/popupPwd.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" title="修改密码">
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible"  title="修改密码">
         <el-scrollbar>
             <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
                 <el-form-item label="新密码" prop="newPwd">

src/views/system/subject/form/index.vue

@@ -0,0 +1,237 @@
+<template>
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" :before-close="Cancel">
+        <el-scrollbar>
+            <el-form :inline="false" :model="configStore" label-width="160px">
+                <el-divider border-style="dashed">全局</el-divider>
+                <div class="layout-config-global form-two">
+                    <el-form-item label="组件主名称">
+                        <el-input v-model="configStore.name" placeholder="请输入主题名称" />
+                    </el-form-item>
+                    <el-form-item label="后台页面切换动画">
+                        <el-select v-model="configStore.mainAnimation">
+                            <el-option label="slide-right" value="slide-right"></el-option>
+                            <el-option label="slide-left" value="slide-left"></el-option>
+                            <el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
+                            <el-option label="el-fade-in" value="el-fade-in"></el-option>
+                            <el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
+                            <el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
+                            <el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="组件主题色">
+                        <el-color-picker v-model="configStore.elementUiPrimary[0]" />
+                    </el-form-item>
+                    <el-form-item label="表格标题栏背景颜色">
+                        <el-color-picker v-model="configStore.tableHeaderBackground[0]" />
+                    </el-form-item>
+                    <el-form-item label="表格标题栏文字颜色">
+                        <el-color-picker v-model="configStore.tableHeaderColor[0]" />
+                    </el-form-item>
+                    <el-form-item label="表格激活栏颜色">
+                        <el-color-picker v-model="configStore.tableCurrent[0]" />
+                    </el-form-item>
+                    <el-form-item label="组件主描述">
+                        <el-input
+                            v-model="configStore.remark"
+                            :autosize="{ minRows: 2, maxRows: 4 }"
+                            type="textarea"
+                            placeholder="请输入描述"
+                        />
+                    </el-form-item>
+                </div>
+                <el-divider border-style="dashed">侧边栏</el-divider>
+                <div class="layout-config-aside form-two">
+                    <el-form-item label="侧边菜单栏背景色">
+                        <el-color-picker v-model="configStore.menuBackground[0]" />
+                    </el-form-item>
+                    <el-form-item label="侧边菜单文字颜色">
+                        <el-color-picker v-model="configStore.menuColor[0]" />
+                    </el-form-item>
+                    <el-form-item label="侧边菜单激活项背景色">
+                        <el-color-picker v-model="configStore.menuActiveBackground[0]" />
+                    </el-form-item>
+                    <el-form-item label="侧边菜单激活项文字色">
+                        <el-color-picker v-model="configStore.menuActiveColor[0]" />
+                    </el-form-item>
+                    <el-form-item label="侧边菜单顶栏背景色">
+                        <el-color-picker v-model="configStore.menuTopBarBackground[0]" />
+                    </el-form-item>
+                </div>
+
+                <el-divider border-style="dashed">顶栏</el-divider>
+                <div class="layout-config-aside form-two">
+                    <el-form-item label="顶栏背景色">
+                        <el-color-picker v-model="configStore.headerBarBackground[0]" />
+                    </el-form-item>
+                    <el-form-item label="顶栏文字色">
+                        <el-color-picker v-model="configStore.headerBarTabColor[0]" />
+                    </el-form-item>
+                    <el-form-item label="顶栏logo">
+                        <el-image
+                            style="height: 50px"
+                            :src="logoFile.url"
+                            :preview-src-list="[logoFile.url]"
+                            v-if="logoFile.url"
+                            class="mr10"
+                        ></el-image>
+                        <el-upload
+                            action=""
+                            :show-file-list="false"
+                            :auto-upload="false"
+                            accept=".png,.jpg"
+                            :on-change="chooseImage"
+                        >
+                            <el-button type="primary">上传图片</el-button>
+                        </el-upload>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="onSubmit">确定</el-button>
+                <el-button @click="Cancel">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+
+import { ElMessage } from 'element-plus'
+const dialogVisible = ref(false)
+const title = ref('')
+import { addTheme, updateTheme } from '@/api/system/subject/index'
+const emit = defineEmits(['Cancels'])
+const configStore = ref({
+    // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
+    mainAnimation: 'slide-right',
+    elementUiPrimary: ['#0e8780', '#0e8780'],
+    tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
+    tableHeaderColor: ['#111', '#fff'],
+    tableCurrent: ['#F3F6F9', '#F3F6F9'],
+    /* 侧边菜单 */
+    // 侧边菜单背景色
+    menuBackground: ['#0e8780', '#1d1e1f'],
+    // 侧边菜单文字颜色
+    menuColor: ['#FFFFFF', '#CFD3DC'],
+    // 侧边菜单激活项背景色
+    menuActiveBackground: ['#0c7973', '#1d1e1f'],
+    // 侧边菜单激活项文字色
+    menuActiveColor: ['#00f5fd', '#3375b9'],
+    // 侧边菜单顶栏背景色
+    menuTopBarBackground: ['#0e8780', '#1d1e1f'],
+
+    // 顶栏文字色
+    headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
+    // 顶栏背景色
+    headerBarBackground: ['#0e8780', '#1d1e1f'],
+
+    logoFile: '',
+    name: '',
+    color: '',
+    faviconFile: '',
+    remark: ''
+})
+
+const logoFile = reactive({
+    url: '',
+    raw: ''
+})
+
+const open = (e: any) => {
+    title.value = e.text
+    dialogVisible.value = true
+    if (e.text == '修改主题') {
+        let form = JSON.parse(JSON.stringify(e.row))
+        for (let k in form) {
+            if (
+                k == 'elementUiPrimary' ||
+                k == 'tableHeaderBackground' ||
+                k == 'tableHeaderColor' ||
+                k == 'tableCurrent' ||
+                k == 'menuBackground' ||
+                k == 'menuColor' ||
+                k == 'menuActiveBackground' ||
+                k == 'menuActiveColor' ||
+                k == 'menuTopBarBackground' ||
+                k == 'headerBarTabColor' ||
+                k == 'headerBarBackground'
+            ) {
+                form[k] = JSON.parse(form[k])
+            }
+        }
+        logoFile.url = form.logoUrl
+        configStore.value = form
+    }
+}
+// 确定主题
+const onSubmit = () => {
+    configStore.value.faviconFile = configStore.value.logoFile
+    configStore.value.color = configStore.value.elementUiPrimary[0]
+    let form = new FormData()
+    for (let k in configStore.value) {
+        if (
+            k == 'logoFile' ||
+            k == 'faviconFile' ||
+            k == 'name' ||
+            k == 'color' ||
+            k == 'remark' ||
+            k == 'mainAnimation' ||
+            k == 'id'
+        ) {
+            form.append(k, configStore.value[k])
+        } else if (k == 'logoUrl' || k == 'faviconUrl') {
+            if (configStore.value.logoFile == null) {
+                let str = configStore.value[k].match(/base64,([^"]+)/)[1]
+                let bin = atob(str)
+                let arr = new Array(bin.length)
+                for (let i = 0; i < bin.length; i++) {
+                    arr[i] = bin.charCodeAt(i)
+                }
+                let b = new Uint8Array(arr)
+                const blob = new Blob([b], { type: 'image/jpeg' })
+                form.append('faviconFile', blob)
+                form.append('logoFile', blob)
+            }
+        } else {
+            form.append(k, JSON.stringify(configStore.value[k]))
+        }
+    }
+
+    if (title.value == '新增主题') {
+        addTheme(form).then(res => {
+            ElMessage.success('新增成功')
+            Cancel()
+        })
+    }
+    if (title.value == '修改主题') {
+        updateTheme(form).then(res => {
+            ElMessage.success('修改成功')
+            Cancel()
+        })
+    }
+}
+// 取消
+const Cancel = () => {
+    // dialogVisible.value = false
+    emit('Cancels')
+}
+/**
+ * 选择图片上传
+ * @param e
+ */
+const chooseImage = (e: any) => {
+    console.log('🚀 ~ chooseImage ~ e:', URL.createObjectURL(e.raw!))
+    logoFile.url = URL.createObjectURL(e.raw!)
+    configStore.value.logoFile = e.raw
+    // uploadFile(e.raw, 'sgGovern/').then(res => {
+    //     logoFile.name = res.data.name
+    //     logoFile.url = res.data.url
+    //     configStore.logoFile = res.data.name
+    //     ElMessage.success('新增成功')
+    // })
+}
+defineExpose({ open })
+</script>

src/views/system/subject/index.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="default-main">
+        <TableHeader select ref="TableHeaderRef">
+            <template #operation>
+                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <formTab ref="formTabRef" v-if="show" @Cancels=";(show = false), tableStore.index()" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { activateTheme, deleteTheme } from '@/api/system/subject/index'
+import formTab from './form/index.vue'
+import { ElMessage } from 'element-plus'
+import { useConfig } from '@/stores/config'
+import { getTheme } from '@/api/systerm'
+const configStore = useConfig()
+defineOptions({
+    name: 'user-boot/function/functionTree'
+})
+
+const formTabRef = ref()
+const TableHeaderRef = ref()
+const show = ref(false)
+const tableStore: any = new TableStore({
+    url: '/system-boot/theme/getAllThemes',
+    method: 'GET',
+    column: [
+        {
+            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: 'remark', title: '描述' },
+        { field: 'logoUrl', title: '主题图标', render: 'image' },
+
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '激活 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.active == 1
+                    },
+                    click: row => {
+                        activateTheme({ id: row.id }).then(res => {
+                            ElMessage({
+                                message: '激活成功!',
+                                type: 'success'
+                            })
+                            tableStore.index()
+                        })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '修改 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        show.value = true
+                        setTimeout(() => {
+                            formTabRef.value.open({
+                                text: '修改主题',
+                                row: row
+                            })
+                        }, 10)
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        deleteTheme({ id: row.id }).then(res => {
+                            ElMessage({
+                                message: '删除成功!',
+                                type: 'success'
+                            })
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+        getTheme().then(res => {
+            let list: any = [
+                'elementUiPrimary',
+                'tableHeaderBackground',
+                'tableHeaderColor',
+                'tableCurrent',
+                'menuBackground',
+                'menuColor',
+                'menuTopBarBackground',
+                'menuActiveBackground',
+                'menuActiveColor',
+                'headerBarTabColor',
+                'headerBarBackground'
+            ]
+
+            window.localStorage.setItem('getTheme', JSON.stringify(res.data))
+            for (let i = 0; i < list.length; i++) {
+                configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
+            }
+            configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
+        })
+    }
+})
+
+provide('tableStore', tableStore)
+// 新增主题
+const add = () => {
+    show.value = true
+    setTimeout(() => {
+        formTabRef.value.open({
+            text: '新增主题'
+        })
+    }, 10)
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>

src/views/user/login.vue

@@ -74,12 +74,13 @@ import type { FormInstance, InputInstance, FormRules } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { ADMIN_INFO } from '@/stores/constant/cacheKey'
 import { Local } from '@/utils/storage'
-import { getTheme } from '@/api/systerm.ts'
+import { getTheme } from '@/api/systerm'
+import { useConfig } from '@/stores/config'
 import PopupUpdatePwd from './popupUpdatePwd.vue'
 
 const router = useRouter()
 let timer: number
-
+const configStore = useConfig()
 const popupUpdatePwdRef = ref()
 const formRef = ref<FormInstance>()
 const usernameRef = ref<InputInstance>()
@@ -126,8 +127,26 @@ onBeforeUnmount(() => {
     pageBubble.removeListeners()
 })
 getTheme().then(res => {
+    let list: any = [
+        'elementUiPrimary',
+        'tableHeaderBackground',
+        'tableHeaderColor',
+        'tableCurrent',
+        'menuBackground',
+        'menuColor',
+        'menuTopBarBackground',
+        'menuActiveBackground',
+        'menuActiveColor',
+        'headerBarTabColor',
+        'headerBarBackground'
+    ]
     getThemeList.value = res.data
     window.localStorage.setItem('getTheme', JSON.stringify(res.data))
+    for (let i = 0; i < list.length; i++) {
+        
+        configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
+    }
+    configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
 })
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return