2022-11-14 update

1. 增加tree中对当前tree的刷新按钮
2. 调整了excel 和 tree组件的引入为全局组件
3. 调整了缓存页面的逻辑
4. 增加element-plus的icon组件引入
5. 调整页面的组件高度为动态高度 vh

components.d.ts

@@ -34,11 +34,13 @@ declare module '@vue/runtime-core' {
     ElEmpty: typeof import('element-plus/es/el-empty')['default']
     ElForm: typeof import('element-plus/es/el-form')['default']
     ElFormItem: typeof import('element-plus/es/el-form-item')['default']
+    ElIcon: typeof import('element-plus/es/el-icon')['default']
     ElInput: typeof import('element-plus/es/el-input')['default']
     ElInputNumber: typeof import('element-plus/es/el-input-number')['default']
     ElMenu: typeof import('element-plus/es/el-menu')['default']
     ElMenuItem: typeof import('element-plus/es/el-menu-item')['default']
     ElOption: typeof import('element-plus/es/el-option')['default']
+    ElProgress: typeof import('element-plus/es/el-progress')['default']
     ElRadio: typeof import('element-plus/es/el-radio')['default']
     ElRadioGroup: typeof import('element-plus/es/el-radio-group')['default']
     ElRow: typeof import('element-plus/es/el-row')['default']
@@ -49,6 +51,7 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es/el-tab-pane')['default']
     ElTabs: typeof import('element-plus/es/el-tabs')['default']
     ElTree: typeof import('element-plus/es/el-tree')['default']
+    Excel: typeof import('./src/components/excel.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     HealthBarLineChart: typeof import('./src/components/chart/combination/health-bar-line-chart.vue')['default']
     HorizontalBarChart: typeof import('./src/components/chart/bar/horizontal-bar-chart.vue')['default']
@@ -88,6 +91,7 @@ declare module '@vue/runtime-core' {
     Thermometer: typeof import('./src/components/chart/bar/thermometer.vue')['default']
     ThermometerChart: typeof import('./src/components/chart/other/thermometer-chart.vue')['default']
     ThermometerVChart: typeof import('./src/components/chart/other/thermometer-v-chart.vue')['default']
+    Tree: typeof import('./src/components/tree.vue')['default']
     VertivalBarLineChart: typeof import('./src/components/chart/combination/vertival-bar-line-chart.vue')['default']
     VProForm: typeof import('./src/components/vpro-materials/vpro-form/vProForm.vue')['default']
     VProTable: typeof import('./src/components/vpro-materials/vpro-table/vProTable.vue')['default']

package-lock.json

@@ -8,6 +8,7 @@
       "name": "intelligent-early-warning",
       "version": "1.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.0.10",
         "@stomp/stompjs": "^6.1.2",
         "@vue/runtime-core": "^3.2.33",
         "@vue/shared": "^3.2.33",
@@ -108,6 +109,14 @@
       "integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==",
       "deprecated": "Please use @element-plus/icons-vue instead."
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+      "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -5734,6 +5743,12 @@
       "resolved": "https://registry.npmjs.org/@element-plus/icons/-/icons-0.0.11.tgz",
       "integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
     },
+    "@element-plus/icons-vue": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+      "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
+      "requires": {}
+    },
     "@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",

package.json

@@ -8,6 +8,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.0.10",
     "@stomp/stompjs": "^6.1.2",
     "@vue/runtime-core": "^3.2.33",
     "@vue/shared": "^3.2.33",

src/pages/dataFilter/combine/components/excel.vue

@@ -28,15 +28,15 @@ const funCheckChange = (checkArr) => {
 		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
 		<el-empty v-if="!props.data.length" description="暂无数据" />
 		<el-checkbox-group size="small" v-model="excelCheckIds" v-if="props.showCheckbox" @change="funCheckChange">
-			<el-checkbox :label="item.id" v-for="item in props.data" :key="item.name">
-				<span class="mb-[6px] cursor-pointer text-[12px] text-[12px]"
-					@click.self.stop="funExcelChange(item)">{{ item.name }}</span>
+			<el-checkbox size="small" :label="item.id" v-for="item in props.data" :key="item.name">
+				<span class="mb-[6px] cursor-pointer text-[12px] leading-[10px] inline-flex items-end"
+					@click.self.stop="funExcelChange(item)"><el-icon class="mr-[4px]"><Document /></el-icon>{{ item.name }}</span>
 			</el-checkbox>
 		</el-checkbox-group>
 		<div v-else>
 			<div
-				class="ml-[6px] pl-[8px] text-[#606266] cursor-pointer inline-flex justify-center items-center h-[24px] text-[12px]"
-				v-for="item in props.data" :key="item.name" @click="funExcelChange(item)">{{ item.name }}</div>
+				class="ml-[6px] pl-[8px] text-[#606266] cursor-pointer leading-[10px] inline-flex justify-center items-center h-[24px] text-[12px]"
+				v-for="item in props.data" :key="item.name" @click="funExcelChange(item)"><el-icon class="mr-[4px]"><Document /></el-icon>{{ item.name }}</div>
 		</div>
 	</div>
 </template>

src/components/tree.vue

@@ -0,0 +1,186 @@
+<template>
+	<div class="shadow rounded-[6px] shadow-blue-500" :style="{
+		height:
+			typeof props.height === 'string' ? props.height : props.height + 'px',
+	}">
+		<el-input class="pb-[10px]" v-model="filterText" placeholder="输入关键字过滤" @input="funfilterChange" />
+		<el-tree ref="treeRef" icon="" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
+			highlight-current :props="defaultProps" :current-node-key="''" @check="funCheckChange"
+			:expand-on-click-node="false" @node-click="funCurrentChange" :filter-node-method="funTreeFilter">
+			<template #default="{ node, data }">
+				<p v-if="node.level == 1" class="flex justify-between items-center text-[12px]"
+					:class="[props.showCheckbox ? 'w-[84%]' : 'w-[90%]']">
+					<span>{{ node.label }}</span>
+					<el-icon @click.stop="emits('refresh')">
+						<RefreshRight />
+					</el-icon>
+				</p>
+				<el-dropdown ref="dropdown1" v-else size="small" trigger="contextmenu" @command="funCommand"
+					style="margin-right: 30px">
+					<span class="el-dropdown-link text-[12px] flex items-center">
+						<el-icon class="mr-[4px]">
+							<Folder v-if="!node.expanded" />
+							<FolderOpened v-else />
+						</el-icon>
+						{{ node.label }}
+					</span>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item v-if="data.childs && data.childs.length" :command="{ type: 'export', data, node }">导出
+							</el-dropdown-item>
+							<el-dropdown-item :command="{ type: 'delete', data, node }">删除</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+			</template>
+		</el-tree>
+
+		<!--
+			   <div class="buttons">
+				   <el-button @click="getCheckedNodes">get by node</el-button>
+				   <el-button @click="getCheckedKeys">get by key</el-button>
+				   <el-button @click="setCheckedNodes">set by node</el-button>
+				   <el-button @click="setCheckedKeys">set by key</el-button>
+				   <el-button @click="resetChecked">reset</el-button>
+			   </div>
+		   -->
+	</div>
+</template>
+<script lang="ts" setup name="search">
+import { ref } from "vue";
+import type Node from "element-plus/es/components/tree/src/model/node";
+import { ElMessage, ElMessageBox } from "element-plus";
+import config from "../api/config";
+import request from "../api/axios.js";
+const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
+interface Tree {
+	id: string;
+	label: string;
+	children?: Tree[];
+}
+const props = withDefaults(
+	defineProps<{
+		data: Tree[];
+		height?: number | string;
+		showCheckbox?: boolean;
+	}>(),
+	{
+		data: () => [],
+		height: 400,
+		showCheckbox: false,
+	}
+);
+
+const treeRef = ref();
+const filterText = ref("");
+/**输入框过滤 */
+const funfilterChange = () => {
+	treeRef.value!.filter(filterText.value);
+};
+const funTreeFilter = (value: string, data: Tree) => {
+	if (!value) return true;
+	return data.label.includes(value);
+};
+/**选中节点变化 */
+const funCurrentChange = (current: Tree, currentNode: Node) => {
+	emits("currentChange", { current, currentNode });
+};
+/**复选框选中变化 */
+const funCheckChange = (
+	current: Tree,
+	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
+) => {
+	emits("checkChange", {
+		current,
+		checkedNodes,
+		checkedKeys,
+		halfCheckedNodes,
+		halfCheckedKeys,
+	});
+};
+//右键时, command菜单
+const funCommand = async ({ type, data, node }) => {
+	console.log(type, data, node);
+	switch (type) {
+		case "export":
+			ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
+				confirmButtonText: "确认",
+				cancelButtonText: "取消",
+				type: "warning",
+			}).then(() => {
+				const a = document.createElement("a");
+				const childs = data.childs.map((o) => o.id);
+				a.href =
+					config.baseURL + "/data/option/download?ids=" + childs.join(",");
+				a.download = "";
+				a.click();
+			});
+			break;
+		case "delete":
+			ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
+				confirmButtonText: "确认",
+				cancelButtonText: "取消",
+				type: "warning",
+			}).then(async () => {
+				let deleteArr = [];
+				const repeatArr = (arr, deleteArr) => {
+					for (const unit of arr) {
+						if (unit.childs?.length) {
+							deleteArr.push(...unit.childs.map((o) => o.id));
+						} else if (unit.children?.length) {
+							repeatArr(unit.children, deleteArr);
+						}
+					}
+				};
+				if (data.childs?.length) {
+					deleteArr = data.childs.map((o) => o.id);
+				} else if (data.children?.length) {
+					repeatArr(data.children, deleteArr);
+				}
+				console.log(deleteArr);
+				const res = await request.get("/data/option/delete", {
+					params: { ids: deleteArr.join(",") },
+				}); //删除当前节点
+				if (res.code === 200) {
+					ElMessage.success(res.msg);
+					emits("refresh");
+				}
+			});
+
+			break;
+	}
+};
+
+const getCheckedNodes = () => {
+	console.log(treeRef.value!.getCheckedNodes(false, false));
+};
+const getCheckedKeys = () => {
+	console.log(treeRef.value!.getCheckedKeys(false));
+};
+const setCheckedNodes = () => {
+	treeRef.value!.setCheckedNodes(
+		[
+			{
+				id: 5,
+				label: "Level two 2-1",
+			},
+			{
+				id: 9,
+				label: "Level three 1-1-1",
+			},
+		],
+		false
+	);
+};
+const setCheckedKeys = () => {
+	treeRef.value!.setCheckedKeys([3], false);
+};
+const resetChecked = () => {
+	treeRef.value!.setCheckedKeys([], false);
+};
+
+const defaultProps = {
+	children: "children",
+	label: "label",
+};
+</script>

src/main.js

@@ -1,4 +1,6 @@
-import { createApp } from 'vue'
+import {
+    createApp
+} from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
@@ -9,6 +11,7 @@ import './assets/font/iconfont.css'
 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 axios from "@api/axios2";
@@ -44,10 +47,15 @@ Date.prototype.formatDate = function (fmt) {
 }
 
 const VUE = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    VUE.component(key, component)
+}
 
 window.__STATICVUE__ = VUE;
 
-window.__STATICVUE__.use(router).use(store).use(dialogDrag).use(ElementPlus, { size: 'small' });
+window.__STATICVUE__.use(router).use(store).use(dialogDrag).use(ElementPlus, {
+    size: 'small'
+});
 window.__STATICVUE__.config.globalProperties.API = axios; //全局注册
 window.__STATICVUE__.config.globalProperties.BASE = basicTool; //全局注册
 

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

@@ -8,6 +8,7 @@ import partten from "@tools/partten";
 import * as echarts from "echarts";
 
 export default {
+  name: 'currentScatterChart',
   props: {
     // 图表宽度
     width: {

src/pages/dataFilter/combine/components/tree.vue

@@ -1,204 +0,0 @@
-<template>
-	<div
-	  class="shadow rounded-[6px] shadow-blue-500"
-	  :style="{
-	    height:
-		 typeof props.height === 'string' ? props.height : props.height + 'px',
-	  }"
-	>
-	  <el-input
-	    class="pb-[10px]"
-	    v-model="filterText"
-	    placeholder="输入关键字过滤"
-	    @input="funfilterChange"
-	  />
-	  <el-tree
-	    ref="treeRef"
-	    :data="props.data"
-	    :show-checkbox="props.showCheckbox"
-	    default-expand-all
-	    node-key="id"
-	    highlight-current
-	    :props="defaultProps"
-	    :current-node-key="''"
-	    @check="funCheckChange"
-	    :expand-on-click-node="false"
-	    @node-click="funCurrentChange"
-	    :filter-node-method="funTreeFilter"
-	  >
-	    <template #default="{ node, data }">
-		 <span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
-		 <el-dropdown
-		   ref="dropdown1"
-		   v-else
-		   size="small"
-		   trigger="contextmenu"
-		   @command="funCommand"
-		   style="margin-right: 30px"
-		 >
-		   <span class="el-dropdown-link">{{ node.label }} </span>
-		   <template #dropdown>
-			<el-dropdown-menu>
-			  <el-dropdown-item
-			    v-if="data.childs && data.childs.length"
-			    :command="{ type: 'export', data, node }"
-			    >导出
-			  </el-dropdown-item>
-			  <el-dropdown-item :command="{ type: 'delete', data, node }"
-			    >删除</el-dropdown-item
-			  >
-			</el-dropdown-menu>
-		   </template>
-		 </el-dropdown>
-	    </template>
-	  </el-tree>
-   
-	  <!--
-			   <div class="buttons">
-				   <el-button @click="getCheckedNodes">get by node</el-button>
-				   <el-button @click="getCheckedKeys">get by key</el-button>
-				   <el-button @click="setCheckedNodes">set by node</el-button>
-				   <el-button @click="setCheckedKeys">set by key</el-button>
-				   <el-button @click="resetChecked">reset</el-button>
-			   </div>
-		   --></div>
-   </template>
-   <script lang="ts" setup name="search">
-   import { ref } from "vue";
-   import type Node from "element-plus/es/components/tree/src/model/node";
-   import { emit } from "process";
-   import { ElMessage, ElMessageBox } from "element-plus";
-   import config from "../../../../api/config";
-   import request from "../../../../api/axios.js";
-   const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-   interface Tree {
-	id: string;
-	label: string;
-	children?: Tree[];
-   }
-   const props = withDefaults(
-	defineProps<{
-	  data: Tree[];
-	  height?: number | string;
-	  showCheckbox?: boolean;
-	}>(),
-	{
-	  data: () => [],
-	  height: 400,
-	  showCheckbox: false,
-	}
-   );
-   
-   const treeRef = ref();
-   const filterText = ref("");
-   /**输入框过滤 */
-   const funfilterChange = () => {
-	treeRef.value!.filter(filterText.value);
-   };
-   const funTreeFilter = (value: string, data: Tree) => {
-	if (!value) return true;
-	return data.label.includes(value);
-   };
-   /**选中节点变化 */
-   const funCurrentChange = (current: Tree, currentNode: Node) => {
-	emits("currentChange", { current, currentNode });
-   };
-   /**复选框选中变化 */
-   const funCheckChange = (
-	current: Tree,
-	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
-   ) => {
-	emits("checkChange", {
-	  current,
-	  checkedNodes,
-	  checkedKeys,
-	  halfCheckedNodes,
-	  halfCheckedKeys,
-	});
-   };
-   //右键时, command菜单
-   const funCommand = async ({ type, data, node }) => {
-	console.log(type, data, node);
-	switch (type) {
-	  case "export":
-	    ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
-		 confirmButtonText: "确认",
-		 cancelButtonText: "取消",
-		 type: "warning",
-	    }).then(() => {
-		 const a = document.createElement("a");
-		 const childs = data.childs.map((o) => o.id);
-		 a.href =
-		   config.baseURL + "/data/option/download?ids=" + childs.join(",");
-		 a.download = "";
-		 a.click();
-	    });
-	    break;
-	  case "delete":
-	    ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
-		 confirmButtonText: "确认",
-		 cancelButtonText: "取消",
-		 type: "warning",
-	    }).then(async () => {
-		 let deleteArr = [];
-		 const repeatArr = (arr, deleteArr) => {
-		   for (const unit of arr) {
-			if (unit.childs?.length) {
-			  deleteArr.push(...unit.childs.map((o) => o.id));
-			} else if (unit.children?.length) {
-			  repeatArr(unit.children, deleteArr);
-			}
-		   }
-		 };
-		 if (data.childs?.length) {
-		   deleteArr = data.childs.map((o) => o.id);
-		 } else if (data.children?.length) {
-		   repeatArr(data.children, deleteArr);
-		 }
-		 console.log(deleteArr);
-		 const res = await request.get("/data/option/delete", {
-		   params: { ids: deleteArr.join(",") },
-		 }); //删除当前节点
-		 if (res.code === 200) {
-		   ElMessage.success(res.msg);
-		   emits("refresh");
-		 }
-	    });
-   
-	    break;
-	}
-   };
-   
-   const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false));
-   };
-   const getCheckedKeys = () => {
-	console.log(treeRef.value!.getCheckedKeys(false));
-   };
-   const setCheckedNodes = () => {
-	treeRef.value!.setCheckedNodes(
-	  [
-	    {
-		 id: 5,
-		 label: "Level two 2-1",
-	    },
-	    {
-		 id: 9,
-		 label: "Level three 1-1-1",
-	    },
-	  ],
-	  false
-	);
-   };
-   const setCheckedKeys = () => {
-	treeRef.value!.setCheckedKeys([3], false);
-   };
-   const resetChecked = () => {
-	treeRef.value!.setCheckedKeys([], false);
-   };
-   
-   const defaultProps = {
-	children: "children",
-	label: "label",
-   };
-   </script>

src/pages/dataFilter/combine/index.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup name="prepare">
 import searchCop from './components/search.vue'
-import excelCop from './components/excel.vue'
-import treeCop from './components/tree.vue'
+import excelCop from '@/components/excel.vue'
+import treeCop from '@/components/tree.vue'
 import tableCop from './components/table.vue'
 import { ref } from 'vue'
 import request from '@/api/axios.js'
 import { ElMessage } from 'element-plus'
 import CurrentScatterChart from './components/current-scatter-chart.vue'
 /**配置参数 */
-const treeHeight = 375 //tree高度
-const excelHeight = 375 //excel高度
-const tableHeight = 706
+const treeHeight = '40vh' //tree高度
+const excelHeight = '40vh' //excel高度
+const tableHeight = '75vh'
 /**excel 开始 */
 const excelCheckboxShow = ref(false)
 const excelType = ref('')
@@ -245,7 +245,7 @@ funGetTree()
 funGetProcessTree()
 </script>
 <template>
-	<div class="bg-white">
+	<div class="bg-white pb-[10px]">
 		<search-cop @submit="funSubmit"></search-cop>
 		<el-row :gutter="20">
 			<el-col :span="5">

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

@@ -1,20 +0,0 @@
-<script setup lang="ts" name="excel">
-const props = withDefaults(defineProps<{
-	data: { name: string }[],
-	height?: string | number
-}>(), {
-	data: () => [],
-	height: '400px'
-})
-const emits = defineEmits(['excelChange'])
-const funExcelChange = (obj: any) => {
-	emits('excelChange', obj)
-}
-</script>
-<template>
-	<div class="overflow-auto shadow rounded-[6px] shadow-blue-500 p-[6px]"
-		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
-		<el-empty v-if="!props.data.length" description="暂无数据" />
-		<div class="ml-[6px] mb-[6px] text-[#606266] cursor-pointer text-[12px] inline-flex justify-center" v-for="item in props.data" :key="item.name" @click="funExcelChange(item)">{{ item.name }}</div>
-	</div>
-</template>

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

@@ -1,204 +0,0 @@
-<template>
-	<div
-	  class="shadow rounded-[6px] shadow-blue-500"
-	  :style="{
-	    height:
-		 typeof props.height === 'string' ? props.height : props.height + 'px',
-	  }"
-	>
-	  <el-input
-	    class="pb-[10px]"
-	    v-model="filterText"
-	    placeholder="输入关键字过滤"
-	    @input="funfilterChange"
-	  />
-	  <el-tree
-	    ref="treeRef"
-	    :data="props.data"
-	    :show-checkbox="props.showCheckbox"
-	    default-expand-all
-	    node-key="id"
-	    highlight-current
-	    :props="defaultProps"
-	    :current-node-key="''"
-	    @check="funCheckChange"
-	    :expand-on-click-node="false"
-	    @node-click="funCurrentChange"
-	    :filter-node-method="funTreeFilter"
-	  >
-	    <template #default="{ node, data }">
-		 <span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
-		 <el-dropdown
-		   ref="dropdown1"
-		   v-else
-		   size="small"
-		   trigger="contextmenu"
-		   @command="funCommand"
-		   style="margin-right: 30px"
-		 >
-		   <span class="el-dropdown-link">{{ node.label }} </span>
-		   <template #dropdown>
-			<el-dropdown-menu>
-			  <el-dropdown-item
-			    v-if="data.childs && data.childs.length"
-			    :command="{ type: 'export', data, node }"
-			    >导出
-			  </el-dropdown-item>
-			  <el-dropdown-item :command="{ type: 'delete', data, node }"
-			    >删除</el-dropdown-item
-			  >
-			</el-dropdown-menu>
-		   </template>
-		 </el-dropdown>
-	    </template>
-	  </el-tree>
-   
-	  <!--
-			   <div class="buttons">
-				   <el-button @click="getCheckedNodes">get by node</el-button>
-				   <el-button @click="getCheckedKeys">get by key</el-button>
-				   <el-button @click="setCheckedNodes">set by node</el-button>
-				   <el-button @click="setCheckedKeys">set by key</el-button>
-				   <el-button @click="resetChecked">reset</el-button>
-			   </div>
-		   --></div>
-   </template>
-   <script lang="ts" setup name="search">
-   import { ref } from "vue";
-   import type Node from "element-plus/es/components/tree/src/model/node";
-   import { emit } from "process";
-   import { ElMessage, ElMessageBox } from "element-plus";
-   import config from "../../../../api/config";
-   import request from "../../../../api/axios.js";
-   const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-   interface Tree {
-	id: string;
-	label: string;
-	children?: Tree[];
-   }
-   const props = withDefaults(
-	defineProps<{
-	  data: Tree[];
-	  height?: number | string;
-	  showCheckbox?: boolean;
-	}>(),
-	{
-	  data: () => [],
-	  height: 400,
-	  showCheckbox: false,
-	}
-   );
-   
-   const treeRef = ref();
-   const filterText = ref("");
-   /**输入框过滤 */
-   const funfilterChange = () => {
-	treeRef.value!.filter(filterText.value);
-   };
-   const funTreeFilter = (value: string, data: Tree) => {
-	if (!value) return true;
-	return data.label.includes(value);
-   };
-   /**选中节点变化 */
-   const funCurrentChange = (current: Tree, currentNode: Node) => {
-	emits("currentChange", { current, currentNode });
-   };
-   /**复选框选中变化 */
-   const funCheckChange = (
-	current: Tree,
-	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
-   ) => {
-	emits("checkChange", {
-	  current,
-	  checkedNodes,
-	  checkedKeys,
-	  halfCheckedNodes,
-	  halfCheckedKeys,
-	});
-   };
-   //右键时, command菜单
-   const funCommand = async ({ type, data, node }) => {
-	console.log(type, data, node);
-	switch (type) {
-	  case "export":
-	    ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
-		 confirmButtonText: "确认",
-		 cancelButtonText: "取消",
-		 type: "warning",
-	    }).then(() => {
-		 const a = document.createElement("a");
-		 const childs = data.childs.map((o) => o.id);
-		 a.href =
-		   config.baseURL + "/data/option/download?ids=" + childs.join(",");
-		 a.download = "";
-		 a.click();
-	    });
-	    break;
-	  case "delete":
-	    ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
-		 confirmButtonText: "确认",
-		 cancelButtonText: "取消",
-		 type: "warning",
-	    }).then(async () => {
-		 let deleteArr = [];
-		 const repeatArr = (arr, deleteArr) => {
-		   for (const unit of arr) {
-			if (unit.childs?.length) {
-			  deleteArr.push(...unit.childs.map((o) => o.id));
-			} else if (unit.children?.length) {
-			  repeatArr(unit.children, deleteArr);
-			}
-		   }
-		 };
-		 if (data.childs?.length) {
-		   deleteArr = data.childs.map((o) => o.id);
-		 } else if (data.children?.length) {
-		   repeatArr(data.children, deleteArr);
-		 }
-		 console.log(deleteArr);
-		 const res = await request.get("/data/option/delete", {
-		   params: { ids: deleteArr.join(",") },
-		 }); //删除当前节点
-		 if (res.code === 200) {
-		   ElMessage.success(res.msg);
-		   emits("refresh");
-		 }
-	    });
-   
-	    break;
-	}
-   };
-   
-   const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false));
-   };
-   const getCheckedKeys = () => {
-	console.log(treeRef.value!.getCheckedKeys(false));
-   };
-   const setCheckedNodes = () => {
-	treeRef.value!.setCheckedNodes(
-	  [
-	    {
-		 id: 5,
-		 label: "Level two 2-1",
-	    },
-	    {
-		 id: 9,
-		 label: "Level three 1-1-1",
-	    },
-	  ],
-	  false
-	);
-   };
-   const setCheckedKeys = () => {
-	treeRef.value!.setCheckedKeys([3], false);
-   };
-   const resetChecked = () => {
-	treeRef.value!.setCheckedKeys([], false);
-   };
-   
-   const defaultProps = {
-	children: "children",
-	label: "label",
-   };
-   </script>

src/pages/dataFilter/prepare/index.vue

@@ -1,23 +1,23 @@
 <script lang="ts" setup name="prepare">
 import searchCop from './components/search.vue'
-import excelCop from './components/excel.vue'
-import treeCop from './components/tree.vue'
+import excelCop from '@/components/excel.vue'
+import treeCop from '@/components/tree.vue'
 import tableCop from './components/table.vue'
 import { onMounted, ref } from 'vue'
 import request from "@/api/axios.js"
 import config from '@/api/config.js'
 /**配置参数 */
-const treeHeight = 760 //tree高度
-const excelHeight = 760 //excel高度
-const tableHeight = 760
+const treeHeight = '81vh' //tree高度
+const excelHeight = '81vh' //excel高度
+const tableHeight = '81vh'
 /**excel 开始 */
-const excelList = ref<{id: string, name: string}[]>([])
+const excelList = ref<{ id: string, name: string }[]>([])
 const funExcelChange = async (obj: any) => { //点击excel项时
 	tableShowId.value = obj.id
 	tableName.value = obj.name
 	tableLoading.value = true
-	const res = await request.get('/power/prepare/show',{params: {id: obj.id}})
-	tableColumn.value = res.data.title.map(o=>{
+	const res = await request.get('/power/prepare/show', { params: { id: obj.id } })
+	tableColumn.value = res.data.title.map(o => {
 		return {
 			prop: o.key,
 			label: o.des,
@@ -39,7 +39,7 @@ const funRepeatMap = (arr: any) => {
 		}
 		return {
 			...o,
-			children: o.children ? funRepeatMap(o.children) : []
+			children: o.children?.length ? funRepeatMap(o.children) : []
 		}
 	})
 }
@@ -59,10 +59,10 @@ const funCurrentChange = ({ current, currentNode }) => {
 				time: o.time,
 				type: o.type,
 				windturbine: o.windturbine,
-				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station+'_').length)
+				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
 			}
 		})
-	}else{
+	} else {
 		excelList.value = []
 	}
 }
@@ -74,8 +74,8 @@ const tableLoading = ref(false)
 const tableData = ref([])
 const funExport = async () => {
 	const a = document.createElement('a')
-	a.href= config.baseURL + '/power/prepare/download?id=' + tableShowId.value
-	a.download=''
+	a.href = config.baseURL + '/power/prepare/download?id=' + tableShowId.value
+	a.download = ''
 	a.click()
 }
 /**table 结束 */
@@ -84,19 +84,22 @@ funGetTree()
 </script>
 <template>
 	<div class="bg-white">
-		<search-cop></search-cop>
+		<search-cop @submit="funGetTree"></search-cop>
 		<el-row :gutter="20">
 			<el-col :span="5">
-				<tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
+				<tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree">
+				</tree-cop>
 			</el-col>
 			<el-col :span="3">
 				<excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange"></excel-cop>
 			</el-col>
 			<el-col :span="16">
 				<div>
-					<table-cop :data="tableData" :column="tableColumn" :loading="tableLoading" :height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
+					<table-cop :data="tableData" :column="tableColumn" :loading="tableLoading" :height="tableHeight"
+						:tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
 				</div>
 			</el-col>
 		</el-row>
+		<!-- <el-progress :percentage="50" class="mt-[5px] mb-[2px]" :indeterminate="false" color="rgb(19,206,102)" :stroke-width="4" :show-text="false" /> -->
 	</div>
 </template>

src/pages/dataFilter/process/components/excel.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts" name="excel">
-import { ref, watch } from 'vue';
-const props = withDefaults(defineProps<{
-	data: { name: string, id: string }[],
-	height?: string | number,
-	showCheckbox?: boolean,
-	checkIds?: string[]
-}>(), {
-	data: () => [],
-	height: '400px',
-	showCheckbox: false,
-	checkIds: () => []
-})
-const excelCheckIds = ref<string[]>([])
-const emits = defineEmits(['excelChange', 'checkChange'])
-const funExcelChange = (obj: any) => {
-	emits('excelChange', obj)
-}
-watch(() => props.checkIds, (newVal, oldVal) => {  //监听外部checkIds 赋值当前全选
-	excelCheckIds.value = newVal
-})
-const funCheckChange = (checkArr) => {
-	emits('checkChange', { checkArr, data: props.data })  //抛出当前选择checkIds,  和当前的childs数据项
-}
-</script>
-<template>
-	<div class="overflow-auto shadow rounded-[6px] shadow-blue-500 p-[6px]"
-		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
-		<el-empty v-if="!props.data.length" description="暂无数据" />
-		<el-checkbox-group size="small" v-model="excelCheckIds" v-if="props.showCheckbox" @change="funCheckChange">
-			<el-checkbox :label="item.id" v-for="item in props.data" :key="item.name">
-				<span class="mb-[6px] cursor-pointer text-[12px] text-[12px]"
-					@click.self.stop="funExcelChange(item)">{{ item.name }}</span>
-			</el-checkbox>
-		</el-checkbox-group>
-		<div v-else>
-			<div
-				class="ml-[6px] pl-[8px] text-[#606266] cursor-pointer inline-flex justify-center items-center h-[24px] text-[12px]"
-				v-for="item in props.data" :key="item.name" @click="funExcelChange(item)">{{ item.name }}</div>
-		</div>
-	</div>
-</template>

src/pages/dataFilter/process/components/tree.vue

@@ -1,204 +0,0 @@
-<template>
-	<div
-	  class="shadow rounded-[6px] shadow-blue-500"
-	  :style="{
-	    height:
-		 typeof props.height === 'string' ? props.height : props.height + 'px',
-	  }"
-	>
-	  <el-input
-	    class="pb-[10px]"
-	    v-model="filterText"
-	    placeholder="输入关键字过滤"
-	    @input="funfilterChange"
-	  />
-	  <el-tree
-	    ref="treeRef"
-	    :data="props.data"
-	    :show-checkbox="props.showCheckbox"
-	    default-expand-all
-	    node-key="id"
-	    highlight-current
-	    :props="defaultProps"
-	    :current-node-key="''"
-	    @check="funCheckChange"
-	    :expand-on-click-node="false"
-	    @node-click="funCurrentChange"
-	    :filter-node-method="funTreeFilter"
-	  >
-	    <template #default="{ node, data }">
-		 <span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
-		 <el-dropdown
-		   ref="dropdown1"
-		   v-else
-		   size="small"
-		   trigger="contextmenu"
-		   @command="funCommand"
-		   style="margin-right: 30px"
-		 >
-		   <span class="el-dropdown-link">{{ node.label }} </span>
-		   <template #dropdown>
-			<el-dropdown-menu>
-			  <el-dropdown-item
-			    v-if="data.childs && data.childs.length"
-			    :command="{ type: 'export', data, node }"
-			    >导出
-			  </el-dropdown-item>
-			  <el-dropdown-item :command="{ type: 'delete', data, node }"
-			    >删除</el-dropdown-item
-			  >
-			</el-dropdown-menu>
-		   </template>
-		 </el-dropdown>
-	    </template>
-	  </el-tree>
-   
-	  <!--
-			   <div class="buttons">
-				   <el-button @click="getCheckedNodes">get by node</el-button>
-				   <el-button @click="getCheckedKeys">get by key</el-button>
-				   <el-button @click="setCheckedNodes">set by node</el-button>
-				   <el-button @click="setCheckedKeys">set by key</el-button>
-				   <el-button @click="resetChecked">reset</el-button>
-			   </div>
-		   --></div>
-   </template>
-   <script lang="ts" setup name="search">
-   import { ref } from "vue";
-   import type Node from "element-plus/es/components/tree/src/model/node";
-   import { emit } from "process";
-   import { ElMessage, ElMessageBox } from "element-plus";
-   import config from "../../../../api/config";
-   import request from "../../../../api/axios.js";
-   const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-   interface Tree {
-	id: string;
-	label: string;
-	children?: Tree[];
-   }
-   const props = withDefaults(
-	defineProps<{
-	  data: Tree[];
-	  height?: number | string;
-	  showCheckbox?: boolean;
-	}>(),
-	{
-	  data: () => [],
-	  height: 400,
-	  showCheckbox: false,
-	}
-   );
-   
-   const treeRef = ref();
-   const filterText = ref("");
-   /**输入框过滤 */
-   const funfilterChange = () => {
-	treeRef.value!.filter(filterText.value);
-   };
-   const funTreeFilter = (value: string, data: Tree) => {
-	if (!value) return true;
-	return data.label.includes(value);
-   };
-   /**选中节点变化 */
-   const funCurrentChange = (current: Tree, currentNode: Node) => {
-	emits("currentChange", { current, currentNode });
-   };
-   /**复选框选中变化 */
-   const funCheckChange = (
-	current: Tree,
-	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
-   ) => {
-	emits("checkChange", {
-	  current,
-	  checkedNodes,
-	  checkedKeys,
-	  halfCheckedNodes,
-	  halfCheckedKeys,
-	});
-   };
-   //右键时, command菜单
-   const funCommand = async ({ type, data, node }) => {
-	console.log(type, data, node);
-	switch (type) {
-	  case "export":
-	    ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
-		 confirmButtonText: "确认",
-		 cancelButtonText: "取消",
-		 type: "warning",
-	    }).then(() => {
-		 const a = document.createElement("a");
-		 const childs = data.childs.map((o) => o.id);
-		 a.href =
-		   config.baseURL + "/data/option/download?ids=" + childs.join(",");
-		 a.download = "";
-		 a.click();
-	    });
-	    break;
-	  case "delete":
-	    ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
-		 confirmButtonText: "确认",
-		 cancelButtonText: "取消",
-		 type: "warning",
-	    }).then(async () => {
-		 let deleteArr = [];
-		 const repeatArr = (arr, deleteArr) => {
-		   for (const unit of arr) {
-			if (unit.childs?.length) {
-			  deleteArr.push(...unit.childs.map((o) => o.id));
-			} else if (unit.children?.length) {
-			  repeatArr(unit.children, deleteArr);
-			}
-		   }
-		 };
-		 if (data.childs?.length) {
-		   deleteArr = data.childs.map((o) => o.id);
-		 } else if (data.children?.length) {
-		   repeatArr(data.children, deleteArr);
-		 }
-		 console.log(deleteArr);
-		 const res = await request.get("/data/option/delete", {
-		   params: { ids: deleteArr.join(",") },
-		 }); //删除当前节点
-		 if (res.code === 200) {
-		   ElMessage.success(res.msg);
-		   emits("refresh");
-		 }
-	    });
-   
-	    break;
-	}
-   };
-   
-   const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false));
-   };
-   const getCheckedKeys = () => {
-	console.log(treeRef.value!.getCheckedKeys(false));
-   };
-   const setCheckedNodes = () => {
-	treeRef.value!.setCheckedNodes(
-	  [
-	    {
-		 id: 5,
-		 label: "Level two 2-1",
-	    },
-	    {
-		 id: 9,
-		 label: "Level three 1-1-1",
-	    },
-	  ],
-	  false
-	);
-   };
-   const setCheckedKeys = () => {
-	treeRef.value!.setCheckedKeys([3], false);
-   };
-   const resetChecked = () => {
-	treeRef.value!.setCheckedKeys([], false);
-   };
-   
-   const defaultProps = {
-	children: "children",
-	label: "label",
-   };
-   </script>

src/pages/dataFilter/process/index.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup name="prepare">
 import searchCop from './components/search.vue'
-import excelCop from './components/excel.vue'
-import treeCop from './components/tree.vue'
+import excelCop from '@/components/excel.vue'
+import treeCop from '@/components/tree.vue'
 import tableCop from './components/table.vue'
 import { ref } from 'vue'
 import request from '@/api/axios.js'
 import config from '@/api/config.js'
 import { ElMessage } from 'element-plus'
 /**配置参数 */
-const treeHeight = 350 //tree高度
-const excelHeight = 710 //excel高度
-const tableHeight = 710
+const treeHeight = '37.3vh' //tree高度
+const excelHeight = '75.6vh' //excel高度
+const tableHeight = '75.6vh'
 /**excel 开始 */
 const excelCheckboxShow = ref(false)
 const excelCheckIds = ref<string[]>([])
@@ -21,9 +21,9 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 	let res = null
 	tableLoading.value = true
 	if (obj.type === 'prepare') {
-		res = await request.get('/power/prepare/show', {params: { id: obj.id }})
-	}else if(obj.type === 'process'){
-		res = await request.get('/power/process/show', {params: { id: obj.id }})
+		res = await request.get('/power/prepare/show', { params: { id: obj.id } })
+	} else if (obj.type === 'process') {
+		res = await request.get('/power/process/show', { params: { id: obj.id } })
 	}
 	tableColumn.value = res.data.title.map(o => {
 		return {
@@ -71,7 +71,7 @@ const funCurrentChange = ({ current, currentNode }) => {
 				time: o.time,
 				type: o.type,
 				windturbine: o.windturbine,
-				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station+'_').length)
+				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
 			}
 		})
 	} else {
@@ -112,7 +112,7 @@ const funProcessCurrentChange = ({ current, currentNode }) => {
 				time: o.time,
 				type: o.type,
 				windturbine: o.windturbine,
-				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station+'_').length)
+				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
 			}
 		})
 	} else {
@@ -129,7 +129,7 @@ const tableData = ref([])
 const funExport = async () => {
 	const a = document.createElement('a')
 	a.href = config.baseURL + '/power/process/download?id=' + tableShowId.value
-	a.download=''
+	a.download = ''
 	a.click()
 }
 /**table 结束 */
@@ -143,7 +143,7 @@ const funSubmit = async (query) => {
 		...query,
 		ids: excelCheckIds.value.join(',')
 	}
-	const res = await request.get('/power/process/data', {params: params})
+	const res = await request.get('/power/process/data', { params: params })
 	if (res.code === 200) {
 		ElMessage.success(res.msg)
 		funGetProcessTree()
@@ -154,7 +154,7 @@ funGetTree()
 funGetProcessTree()
 </script>
 <template>
-	<div class="bg-white">
+	<div class="bg-white pb-[10px]">
 		<search-cop @submit="funSubmit"></search-cop>
 		<el-row :gutter="20">
 			<el-col :span="5">

src/pages/routerViewss.vue

@@ -2,7 +2,7 @@
   <div class="content">
     <!-- <router-view /> -->
     <router-view v-slot="{ Component }">
-      <keep-alive :include="tagsList">
+      <keep-alive :includes="tagsList">
         <component :is="Component" />
       </keep-alive>
     </router-view>

yarn.lock

@@ -37,6 +37,11 @@
     "@babel/helper-validator-identifier" "^7.14.0"
     "to-fast-properties" "^2.0.0"
 
+"@element-plus/icons-vue@^2.0.10":
+  "integrity" "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ=="
+  "resolved" "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz"
+  "version" "2.0.10"
+
 "@element-plus/icons@^0.0.11":
   "integrity" "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
   "resolved" "https://registry.npmjs.org/@element-plus/icons/-/icons-0.0.11.tgz"
@@ -3462,7 +3467,7 @@
   dependencies:
     "vscode-vue-languageservice" "^0.27.0"
 
-"vue@^3.0.0", "vue@^3.0.2", "vue@^3.2.6", "vue@>=3.0.0", "vue@2 || 3", "vue@3.1.x", "vue@3.2.39":
+"vue@^3.0.0", "vue@^3.0.2", "vue@^3.2.0", "vue@^3.2.6", "vue@>=3.0.0", "vue@2 || 3", "vue@3.1.x", "vue@3.2.39":
   "integrity" "sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g=="
   "resolved" "https://registry.npmjs.org/vue/-/vue-3.2.39.tgz"
   "version" "3.2.39"