2022-11-18 update

1. 增加chart的主题色
2. 增加拟合及数据准备 数据预处理 菜单的tree组件 activated生命周期获取ajax
3. 增加数据准备时, 5秒内阻止重复点击的功能
4.

src/App.vue

@@ -2,25 +2,53 @@
   <router-view />
 </template>
 
-<script>
-export default {
-  created(){
-    const res = {
-      data: {
-        chineseName: "管理员",
-        enabled: 0,
-        id: '715588739656581120',
-        identity: 'admin',
-        userName: 'admin',
-      }
-    }
-    sessionStorage.setItem("ms_username", res.data.userName);
-    sessionStorage.setItem("ms_chinesename", res.data.chineseName);
-    sessionStorage.setItem("ms_id", res.data.id);
-    sessionStorage.setItem("token", res.token);
-    sessionStorage.setItem("identity", res.data.identity);
+<script lang="ts" setup>
+// import dotList from './data.json'
+const res = {
+  data: {
+    chineseName: "管理员",
+    enabled: 0,
+    id: '715588739656581120',
+    identity: 'admin',
+    userName: 'admin',
   }
-};
+}
+sessionStorage.setItem("ms_username", res.data.userName);
+sessionStorage.setItem("ms_chinesename", res.data.chineseName);
+sessionStorage.setItem("ms_id", res.data.id);
+sessionStorage.setItem("token", res.token);
+sessionStorage.setItem("identity", res.data.identity);
+// const pointX = 0.01
+// const pointY = 0.1
+// const dotRes = []
+// console.log('dotList', dotList)
+// for (const dotValue of dotList) {
+//   const xPage = Math.floor((dotValue.s) / pointX)
+//   const minX = xPage * pointX
+//   const yPage = Math.floor((dotValue.p) / pointY)
+//   const minY = yPage * pointY
+//   const res = {
+//     s: minX + (pointX / 2),
+//     p: minY + (pointY / 2)
+//   }
+//   if (dotRes.length) {
+//     const findIndex = dotRes.findIndex(o => o.s === res.s && o.p === res.p)
+//     if (findIndex != -1) {
+//       dotRes[findIndex].children.push(dotValue)
+//     } else {
+//       dotRes.push({
+//         ...res,
+//         children: [dotValue]
+//       })
+//     }
+//   } else {
+//     dotRes.push({
+//       ...res,
+//       children: [dotValue]
+//     })
+//   }
+// }
+// console.log(dotRes)
 </script>
 
 <style>

src/main.js

@@ -12,6 +12,9 @@ import 'default-passive-events'
 import 'virtual:windi.css'
 import dialogDrag from '/@/assets/js/dialogDrag.js' // 地址就是dialogDrag.js在位置
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import {
+    ElMessage
+} from 'element-plus'
 
 // 引入请求工具
 import axios from "@api/axios2";
@@ -50,6 +53,24 @@ const VUE = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     VUE.component(key, component)
 }
+/**阻止多次重复点击指令  延时暂定5秒 示例 v-prevdbclick:arg='func' */
+const funListener = (el, binding) => {
+    let time = null
+    el.addEventListener('click', ()=> {
+        binding.value()
+        time = setTimeout(() => {
+            clearTimeout(time)
+            funListener(el, binding)
+        }, Number(binding.arg) || 5000)
+    },{
+        once: true
+    })
+}
+VUE.directive('prevdbclick', {
+    mounted(el, binding) {
+        funListener(el, binding)
+    }
+})
 
 window.__STATICVUE__ = VUE;
 

src/pages/dataFilter/combine/components/chartTheme.json

@@ -0,0 +1,396 @@
+
+{
+	"color": [
+			"#db60c8",
+			"#c12e34",
+			"#e6b600d9",
+			"#0098d9",
+			"#465a83",
+			"#005eaa",
+			"#cda819",
+			"#32a487"
+	],
+	"backgroundColor": "rgba(0,0,0,0)",
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#333333"
+			},
+			"subtextStyle": {
+					"color": "#aaaaaa"
+			}
+	},
+	"line": {
+			"itemStyle": {
+					"borderWidth": 1
+			},
+			"lineStyle": {
+					"width": 2
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"radar": {
+			"itemStyle": {
+					"borderWidth": 1
+			},
+			"lineStyle": {
+					"width": 2
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"bar": {
+			"itemStyle": {
+					"barBorderWidth": 0,
+					"barBorderColor": "#ccc"
+			}
+	},
+	"pie": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"scatter": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"boxplot": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"parallel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"sankey": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"funnel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"gauge": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"candlestick": {
+			"itemStyle": {
+					"color": "#c12e34",
+					"color0": "#2b821d",
+					"borderColor": "#c12e34",
+					"borderColor0": "#2b821d",
+					"borderWidth": 1
+			}
+	},
+	"graph": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			},
+			"lineStyle": {
+					"width": 1,
+					"color": "#aaaaaa"
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false,
+			"color": [
+					"#c12e34",
+					"#e6b600",
+					"#0098d9",
+					"#50ec39",
+					"#005eaa",
+					"#339ca8",
+					"#cda819",
+					"#32a487"
+			],
+			"label": {
+					"color": "#eeeeee"
+			}
+	},
+	"map": {
+			"itemStyle": {
+					"areaColor": "#ddd",
+					"borderColor": "#eee",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#c12e34"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "#e6b600",
+							"borderColor": "#ddd",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#c12e34"
+					}
+			}
+	},
+	"geo": {
+			"itemStyle": {
+					"areaColor": "#ddd",
+					"borderColor": "#eee",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#c12e34"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "#e6b600",
+							"borderColor": "#ddd",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#c12e34"
+					}
+			}
+	},
+	"categoryAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"splitLine": {
+					"show": false,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"valueAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"logAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"timeAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"toolbox": {
+			"iconStyle": {
+					"borderColor": "#06467c"
+			},
+			"emphasis": {
+					"iconStyle": {
+							"borderColor": "#4187c2"
+					}
+			}
+	},
+	"legend": {
+			"textStyle": {
+					"color": "#333333"
+			}
+	},
+	"tooltip": {
+			"axisPointer": {
+					"lineStyle": {
+							"color": "#cccccc",
+							"width": 1
+					},
+					"crossStyle": {
+							"color": "#cccccc",
+							"width": 1
+					}
+			}
+	},
+	"timeline": {
+			"lineStyle": {
+					"color": "#005eaa",
+					"width": 1
+			},
+			"itemStyle": {
+					"color": "#005eaa",
+					"borderWidth": 1
+			},
+			"controlStyle": {
+					"color": "#005eaa",
+					"borderColor": "#005eaa",
+					"borderWidth": 0.5
+			},
+			"checkpointStyle": {
+					"color": "#005eaa",
+					"borderColor": "#316bc2"
+			},
+			"label": {
+					"color": "#005eaa"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"color": "#005eaa"
+					},
+					"controlStyle": {
+							"color": "#005eaa",
+							"borderColor": "#005eaa",
+							"borderWidth": 0.5
+					},
+					"label": {
+							"color": "#005eaa"
+					}
+			}
+	},
+	"visualMap": {
+			"color": [
+					"#1790cf",
+					"#a2d4e6"
+			]
+	},
+	"dataZoom": {
+			"backgroundColor": "rgba(47,69,84,0)",
+			"dataBackgroundColor": "rgba(47,69,84,0.3)",
+			"fillerColor": "rgba(167,183,204,0.4)",
+			"handleColor": "#a7b7cc",
+			"handleSize": "100%",
+			"textStyle": {
+					"color": "#333333"
+			}
+	},
+	"markPoint": {
+			"label": {
+					"color": "#eeeeee"
+			},
+			"emphasis": {
+					"label": {
+							"color": "#eeeeee"
+					}
+			}
+	}
+}

src/pages/dataFilter/combine/components/current-scatter-chart.vue

@@ -6,6 +6,7 @@
 import util from "@tools/util";
 import partten from "@tools/partten";
 import * as echarts from "echarts";
+import chartTheme from './chartTheme.json'
 
 export default {
   name: 'currentScatterChart',
@@ -81,7 +82,8 @@ export default {
     resize() {},
     initChart() {
       const that = this;
-      let myChart = echarts.init(document.getElementById(this.id));
+      echarts.registerTheme('chartTheme', chartTheme)
+      let myChart = echarts.init(document.getElementById(this.id), 'chartTheme');
 
       //指定图表的配置项和数据
       const option = {
@@ -145,7 +147,7 @@ export default {
           formatter(params) {
             return params.name
               ? `${params.seriesName}<br />风速：${params.name}m/s<br />功率：${params.value}kW`
-              : `${params.seriesName}<br />风速：${params.value.s}m/s<br />功率：${params.value.p}kW`;
+              : `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW`;
           },
         },
         brush: {
@@ -153,7 +155,7 @@ export default {
           yAxisIndex: 0,
           transformable: true,
           throttleType: "debounce",
-          throttleDelay: 600,
+          throttleDelay: 1000,
           removeOnClick: true,
           brushType: "polygon",
           brushMode: "multiple",
@@ -271,7 +273,7 @@ export default {
             yAxisIndex: 0,
             transformable: true,
             throttleType: "debounce",
-            throttleDelay: 600,
+            throttleDelay: 1000,
             removeOnClick: true,
             brushType: "polygon",
             brushMode: "multiple",

src/pages/dataFilter/combine/index.vue

@@ -3,7 +3,7 @@ import searchCop from './components/search.vue'
 import excelCop from '@/components/excel.vue'
 import treeCop from '@/components/tree.vue'
 import tableCop from './components/table.vue'
-import { ref } from 'vue'
+import { ref, nextTick, onActivated } from 'vue'
 import request from '@/api/axios.js'
 import { ElMessage } from 'element-plus'
 import CurrentScatterChart from './components/current-scatter-chart.vue'
@@ -37,7 +37,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 	} else if (obj.type === 'fitting') {
 		activeTab.value = '2'
 		res = await request.get('/power/fitting/show', { params: { id: obj.id } })
-		chartResponse = await request.get('/power/fitting/curve', { params: { id: obj.id } })
+		chartResponse = await request.get('/power/fitting/curve', { params: { id: obj.id, p: 1 } })
 	}
 	tableColumn.value = res.data.title.map(o => {
 		return {
@@ -53,13 +53,15 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 		chartRes = chartResponse.data
 		dataSet.value = JSON.stringify([
 			{
-				source: chartRes.scatterls
+				source: chartRes.wyd
+				// source: chartRes.scatterls
 			},
 			{
-				source: chartRes.scatterhs
+				source: chartRes.yyd
+				// source: chartRes.scatterhs
 			}
 		])
-		seriesData.value = [
+		seriesData.value = <any>[
 			{
 				name: "实际功率",
 				type: "line",
@@ -67,14 +69,6 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 				symbolSize: 0, //设定实心点的大小
 				smooth: true, //这个是把线变成曲线
 				data: chartRes.sjgl,
-				itemStyle: {
-					normal: {
-						color: "rgb(158,138,103)",
-						lineStyle: {
-							color: "rgb(158,138,103)",
-						},
-					},
-				},
 				xAxisIndex: 0,
 			},
 			{
@@ -84,78 +78,40 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 				symbolSize: 0, //设定实心点的大小
 				smooth: true, //这个是把线变成曲线
 				data: chartRes.llgl,
-				itemStyle: {
-					normal: {
-						color: "red",
-						lineStyle: {
-							color: "red",
-						},
-					},
-				},
 				xAxisIndex: 0,
 			},
 			{
 				type: 'effectScatter',
 				showEffectOn: "emphasis",
 				name: '无用点',
-				// data: chartRes.scatterls,
-				symbolSize: 5,
+				symbolSize: (data) => {
+					return data.s? data.s>10 ? 10 : data.s : 4
+				},
 				datasetIndex: 0,
 				encode: {
-					x: 's',
-					y: 'p'
+					x: 'x',
+					y: 'y'
 				},
 				animation: false,
-				// large: true,
-				// largeThreshold: 500,
 				xAxisIndex: 0,
 				yAxisIndex: 0,
 			},
-			// {
-			// 	name: "无用点",
-			// 	type: "effectScatter",
-			// 	showEffectOn: "emphasis",
-			// 	symbolSize: 5,
-			// 	data: chartRes.scatterls,
-			// 	xAxisIndex: 0,
-			// 	yAxisIndex: 0,
-			// },
 			{
 				type: 'effectScatter',
 				showEffectOn: "emphasis",
 				name: '有用点',
-				// data: chartRes.scatterhs,
-				symbolSize: 5,
+				symbolSize: (data) => {
+					return data.s? data.s>10 ? 10 : data.s : 4
+				},
 				datasetIndex: 1,
 				animation: false,
 				encode: {
-					x: 's',
-					y: 'p'
-				},
-				itemStyle: {
-					normal: {
-						color: "#05bb4c",
-						lineStyle: {
-							color: "#05bb4c",
-						},
-					},
+					x: 'x',
+					y: 'y'
 				},
-				// large: true,
-				// largeThreshold: 500,
 				xAxisIndex: 0,
 				yAxisIndex: 0,
 			},
-
-			// {
-			// 	name: "有用点",
-			// 	type: "effectScatter",
-			// 	showEffectOn: "emphasis",
-			// 	symbolSize: 5,
-			// 	data: chartRes.scatterhs,
-			// 	animationThreshold: 500,
-			// 	xAxisIndex: 0,
-			// 	yAxisIndex: 0,
-			// },
 			{
 				name: "Cp值",
 				type: "line",
@@ -163,14 +119,6 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 				symbolSize: 0, //设定实心点的大小
 				smooth: true, //这个是把线变成曲线
 				data: chartRes.cpz,
-				itemStyle: {
-					normal: {
-						color: "#f8de5b",
-						lineStyle: {
-							color: "#f8de5b",
-						},
-					},
-				},
 				xAxisIndex: 0,
 				yAxisIndex: 1,
 			},
@@ -292,17 +240,13 @@ const funSubmit = async (query) => {
 const xAxisData = ref([])
 const seriesData = ref([])
 const dataSet = ref('')
-const funChartSelect = (batch) => {
-	wtTab.value = 'table'
-	console.log(batch)
-	const dataArr = []
-	const tempArr = [] //用于以风机id 聚合dataArr
+const funChartSelect = async (batch) => {
+	const wDataArr = []
+	const yDataArr = []
 	let scatterls = []
 	let scatterhs = []
 	let dataSetObj = []
-	let id = 1
 	wtData.value = []
-	wtDialog.value = false
 	if (batch?.length && dataSet.value) {
 		scatterls = batch[0].selected[2].dataIndex
 		scatterhs = batch[0].selected[3].dataIndex
@@ -310,34 +254,44 @@ const funChartSelect = (batch) => {
 			dataSetObj = JSON.parse(dataSet.value)
 			if (scatterls?.length) {
 				for (const scatterIndex of scatterls) {
-					dataArr.push({...dataSetObj[0].source[scatterIndex], u: '否'})  // s p w u  w: '风机'
+					wDataArr.push(dataSetObj[0].source[scatterIndex].k)
 				}
 			}
 			if (scatterhs?.length) {
 				for (const scatterIndex of scatterhs) {
-					dataArr.push({...dataSetObj[1].source[scatterIndex], u: '是'})
+					yDataArr.push(dataSetObj[1].source[scatterIndex].k)
 				}
 			}
-			for(const data of dataArr){
-				if(tempArr.length){
-					const findIndex = tempArr.findIndex(o => o.w === data.w)
-					if(findIndex !== -1){
-						if(!tempArr[findIndex].children){
-							tempArr[findIndex].children = []
+			const wtRes = await request.get('/power/fitting/filter', {params: {yk: yDataArr.join(','), wk: wDataArr.join(',')}})
+			if(wtRes.code === 200){
+				let id = 1
+				const tempArr = [] //用于以风机id 聚合dataArr
+				if(wtRes.data?.length){
+					for(const data of wtRes.data){
+					if(tempArr.length){
+						const findIndex = tempArr.findIndex(o => o.wtId === data.wtId)
+						if(findIndex !== -1){
+							if(!tempArr[findIndex].children){
+								tempArr[findIndex].children = []
+							}
+							tempArr[findIndex].children.push({...data, id: id, filter: data.filter === 0? '是': '否'})
+							id++
+						}else{
+							tempArr.push({...data, id: id, filter: data.filter === 0? '是': '否'})
+							id++
 						}
-						tempArr[findIndex].children.push({...data, id: id})
-						id++
 					}else{
-						tempArr.push({...data, id: id})
+						tempArr.push({...data, id: id, filter: data.filter === 0? '是': '否'})
 						id++
 					}
-				}else{
-					tempArr.push({...data, id: id})
-					id++
+				}
+				wtDialog.value = true
+				nextTick(() => {
+					wtTab.value = 'table'
+					wtData.value = tempArr
+				})
 				}
 			}
-			wtData.value = tempArr
-			wtDialog.value = true
 		}
 	}
 }
@@ -350,18 +304,25 @@ const activeTab = ref('1')
 /**created */
 funGetTree()
 funGetProcessTree()
+/**activated */
+onActivated(() => {
+	funGetTree()
+	funGetProcessTree()
+})
 </script>
 <template>
 	<div class="bg-white pb-[10px]">
 		<search-cop @submit="funSubmit"></search-cop>
 		<el-dialog v-model="wtDialog" title="风机功率点位">
 			<el-tabs v-model="wtTab">
-				<el-tab-pane label="表格数据" name="table">
+				<el-tab-pane label="数据" name="table">
 					<el-table :data="wtData" row-key="id" :max-height="550">
-						<el-table-column property="w" align="center" label="风机" />
-						<el-table-column property="s" sortable align="center" label="风速(m/s)" />
-						<el-table-column property="p" sortable align="center" label="功率(kw)" />
-						<el-table-column property="u" sortable align="center" label="是否有用点" />
+						<el-table-column property="wtId" align="center" label="风机" />
+						<el-table-column property="time" sortable :width="160" align="center" label="时间" />
+						<el-table-column property="speed" sortable align="center" label="风速(m/s)" />
+						<el-table-column property="power" sortable align="center" label="功率(kw)" />
+						<el-table-column property="rr" sortable align="center" label="转速" />
+						<el-table-column property="filter" sortable align="center" label="是否有用点" />
 					</el-table>
 				</el-tab-pane>
 				<el-tab-pane label="故障" name="problem" disabled>

src/pages/dataFilter/prepare/components/search.vue

@@ -87,7 +87,7 @@ funGetStation()
 				</el-radio-group>
 			</el-form-item>
 			<el-form-item>
-				<el-button type="primary" @click="funSubmit">执行</el-button>
+				<el-button type="primary" v-prevdbclick:5000="funSubmit">执行</el-button>
 			</el-form-item>
 		</el-form>
 	</div>

src/pages/dataFilter/prepare/index.vue

@@ -4,7 +4,7 @@ import excelCop from '@/components/excel.vue'
 import treeCop from '@/components/tree.vue'
 import tableCop from './components/table.vue'
 import { ElMessage } from 'element-plus';
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, onActivated } from 'vue'
 import request from "@/api/axios.js"
 import config from '@/api/config.js'
 /**配置参数 */
@@ -108,6 +108,10 @@ const funSubmit = async (params) => {
 /**created */
 funGetTree()
 funWebSocket()
+/**activated */
+onActivated(() => {
+	funGetTree()
+})
 </script>
 <template>
 	<div class="bg-white pb-[10px] relative">

src/pages/dataFilter/process/index.vue

@@ -3,7 +3,7 @@ import searchCop from './components/search.vue'
 import excelCop from '@/components/excel.vue'
 import treeCop from '@/components/tree.vue'
 import tableCop from './components/table.vue'
-import { ref } from 'vue'
+import { ref,onActivated } from 'vue'
 import request from '@/api/axios.js'
 import config from '@/api/config.js'
 import { ElMessage } from 'element-plus'
@@ -152,6 +152,11 @@ const funSubmit = async (query) => {
 /**created */
 funGetTree()
 funGetProcessTree()
+/**activated */
+onActivated(() => {
+	funGetTree()
+	funGetProcessTree()
+})
 </script>
 <template>
 	<div class="bg-white pb-[10px]">