提取公共样式，完成风电数据处理页面功能及样式

.env.production

@@ -1,6 +1,6 @@
 VUE_APP_API=http://10.81.3.153:6060
 VUE_APP_TEST=http://10.81.3.155:9002
-VUE_APP_TEST='ws://10.81.3.155:9002'
+VUE_APP_WS='ws://10.81.3.155:9002'
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011
 
 

src/api/powerGenerating/index.js

@@ -22,7 +22,7 @@ export function getWtByStation(data, timeout = 5000) {
     timeout,
   });
 }
-export function getTree(data, timeout = 5000) {
+export function getPrepareTree(data, timeout = 5000) {
   return request({
     baseURL: process.env.VUE_APP_TEST,
     url: "/power/prepare/tree",
@@ -32,7 +32,27 @@ export function getTree(data, timeout = 5000) {
     timeout,
   });
 }
-export function getExcelShow(data, timeout = 5000) {
+export function getProcessTree(data, timeout = 5000) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: "/power/process/tree",
+    method: "get",
+
+    headers,
+    timeout,
+  });
+}
+export function getPrepareExcelShow(data, timeout = 5000) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: "/power/prepare/show",
+    method: "get",
+    params: data,
+    headers,
+    timeout,
+  });
+}
+export function getProcessExcelShow(data, timeout = 5000) {
   return request({
     baseURL: process.env.VUE_APP_TEST,
     url: "/power/prepare/show",
@@ -52,3 +72,43 @@ export function getPrepareData(data, timeout = 5000) {
     timeout,
   });
 }
+export function getProcessData(data, timeout = 5000) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: "/power/prepare/data",
+    method: "get",
+    params: data,
+    headers,
+    timeout,
+  });
+}
+export function fittingCurveSave(data, timeout = 5000) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: "/power/fitting/curve/save",
+    method: "get",
+    params: data,
+    headers,
+    timeout,
+  });
+}
+export function dataOptionDel(data, timeout = 5000) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: "/data/option/delete",
+    method: "get",
+    params: data,
+    headers,
+    timeout,
+  });
+}
+export function filesDel(data, timeout = 5000) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: "/data/option/delete",
+    method: "get",
+    params: data,
+    headers,
+    timeout,
+  });
+}

src/assets/styles/el-override/el-input.less

@@ -48,6 +48,22 @@ body {
       }
     }
   }
+  .el-input-number {
+    // width: 100%;
+    .el-input-number__decrease,
+    .el-input-number__increase {
+      background: rgba(67, 81, 107, 0.2) !important;
+
+      position: absolute;
+      z-index: 10;
+      border: 0;
+      // height: 33px;
+      // line-height: 33px;
+      &:hover {
+        color: #05be4c;
+      }
+    }
+  }
 
   // 日期组件
   .el-date-editor {
@@ -136,7 +152,9 @@ body {
       background: fade(@gray, 20);
       border-color: fade(@gray, 40);
     }
-
+    .el-checkbox__input {
+      display: block;
+    }
     .el-checkbox__input.is-checked + .el-checkbox__label {
       color: @green;
     }

src/assets/styles/form.less

@@ -478,6 +478,7 @@
   .el-checkbox {
     &.is-checked {
       .el-checkbox__input {
+        
         &.is-checked {
           .el-checkbox__inner {
             background-color: @green;

src/components/excel.vue

@@ -2,17 +2,10 @@
 import { ref, watch, defineEmits, withDefaults, defineProps } from "vue";
 const props = defineProps({
   data: { type: Array, default: () => [] },
-  height: { type: String, default: "400px" },
   showCheckbox: { type: Boolean, default: false },
   checkIds: { type: Array, default: () => [] },
   currentIds: { type: String, default: "" },
 });
-//   {
-//     data: () => [],
-//     height: "400px",
-//     showCheckbox: false,
-//     checkIds: () => [],
-//   }
 
 const excelCheckIds = ref([]);
 const currentId = ref("");
@@ -29,12 +22,20 @@ watch(
   },
   { immediate: true }
 );
+watch(
+  () => props.currentIds,
+  (newVal, oldVal) => {
+    //监听外部currentIds 赋值当前全选
+    currentId.value = newVal;
+  },
+  { immediate: true }
+);
 const funCheckChange = (checkArr) => {
   emits("checkChange", { checkArr, data: props.data }); //抛出当前选择checkIds,  和当前的childs数据项
 };
 </script>
 <template>
-  <div class="excel-wrapper">
+  <div class="excel-wrapper card-shadow">
     <el-empty v-if="!props.data.length" description="暂无数据" />
     <el-checkbox-group
       size="small"
@@ -43,17 +44,15 @@ const funCheckChange = (checkArr) => {
       @change="funCheckChange"
     >
       <el-checkbox
-        :class="{ '!bg-[rgb(236,245,255)]': currentId === item.id }"
+        :class="{ '': currentId === item.id }"
         size="small"
-        class="hover:bg-[rgb(245,247,250)] !mr-0 py-[3px]"
         :label="item.id"
         v-for="item in props.data"
         :key="item.name"
       >
-        <span
-          class="whitespace-nowrap cursor-pointer font-bold text-[12px] align-middle inline-flex items-center"
-          @click.stop="funExcelChange(item)"
-          ><el-icon class="color:rgb(71, 179, 71)"><Document /></el-icon
+        <span class="excel-item" @click.stop="funExcelChange(item)"
+          ><el-icon style="color: rgb(71, 179, 71); margin-right: 10px"
+            ><Document /></el-icon
           >{{ item.name }}</span
         >
       </el-checkbox>
@@ -77,25 +76,35 @@ const funCheckChange = (checkArr) => {
 .excel-wrapper {
   height: 100%;
   padding: 20px;
-  width: 20%;
+  width: 18%;
   margin-right: 20px;
-border-radius: 10px;
-  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
-    0 1px 2px -1px rgba(5, 187, 76, 1);
+  .excel-item {
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    color: #b3bdc0;
+    &.active {
+      background: rgba(97, 97, 90, 25%);
+      color: rgb(71, 179, 71);
+    }
+  }
+  .el-checkbox-group ::v-deep {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    .el-checkbox {
+      .el-checkbox__label {
+        padding-left: 0;
+      }
+    }
+  }
   .excel-list {
     height: 100%;
     width: 100%;
     padding: 10px;
     overflow: auto;
-
     .excel-item {
       padding: 10px;
-      display: flex;
-      align-items: center;
-      color: #b3bdc0;
-      &.active {
-        background: rgba(97, 97, 90, 25%);
-      }
     }
   }
 }

src/components/tree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tree-wrapper">
+  <div class="tree-wrapper card-shadow">
     <el-input
       v-model="filterText"
       placeholder="输入关键字过滤"
@@ -21,11 +21,7 @@
       :filter-node-method="funTreeFilter"
     >
       <template #default="{ node, data }">
-        <p
-          v-if="node.level === 1"
-          class="dashboard-tree-title"
-          :class="[props.showCheckbox ? 'w-[84%]' : 'w-[90%]']"
-        >
+        <p v-if="node.level === 1" class="dashboard-tree-title">
           <span>{{ node.label }}</span>
           <el-icon
             class="refresh"
@@ -42,10 +38,10 @@
           size="small"
           trigger="contextmenu"
           @command="funCommand"
-          style="margin-right: 30px;color:#B3BDC0;"
+          style="color: #b3bdc0"
         >
-          <span class="el-dropdown-link text-[12px] flex items-center">
-            <el-icon class="mr-[4px] !text-[#E6A23C]">
+          <span class="el-dropdown-link">
+            <el-icon>
               <Folder
                 v-if="!node.expanded || (node.isLeaf && !node.isCurrent)"
               />
@@ -56,13 +52,11 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item
-                class="text-[#409EFF]"
                 v-if="props.dropdownMenu.includes('save')"
                 :command="{ type: 'save', data, node }"
                 >保存</el-dropdown-item
               >
               <el-dropdown-item
-                class="text-[#409EFF]"
                 v-if="
                   data.childs &&
                   data.childs.length &&
@@ -72,7 +66,6 @@
                 >导出
               </el-dropdown-item>
               <el-dropdown-item
-                class="text-[#F56C6C]"
                 v-if="props.dropdownMenu.includes('delete')"
                 :command="{ type: 'delete', data, node }"
                 >删除</el-dropdown-item
@@ -82,42 +75,25 @@
         </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 setup name="search">
 import { ref, defineExpose, defineEmits, defineProps } from "vue";
-import request from "@/tools/request";
-// import type Node from "element-plus/es/components/tree/src/model/node";
+import {
+  fittingCurveSave,
+  dataOptionDel,
+  filesDel,
+} from "@/api/powerGenerating/index.js";
 import { ElMessage, ElMessageBox } from "element-plus";
-// import config from "../api/config";
 const baseURL = process.env.VUE_APP_TEST;
 const socketURL = process.env.WS_APP_TEST;
 const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-// interface Tree {
-//   id: string;
-//   label: string;
-//   children?: Tree[];
-// }
 const props = defineProps({
   data: {
     type: Array,
     default: () => {},
   },
-  height: {
-    type: [String, Number],
-    default: "",
-  },
   showCheckbox: {
     type: Boolean,
     default: false,
@@ -187,9 +163,7 @@ const funCommand = async ({ type, data, node }) => {
           repeatArr(data.children, saveArr);
         }
         let res = { code: 500 };
-        res = await request.get("/power/fitting/curve/save", {
-          params: { ids: saveArr.join(",") },
-        }); //删除当前节点
+        res = await fittingCurveSave({ ids: saveArr.join(",") }); //删除当前节点
 
         if (res.code === 200) {
           ElMessage.success(res.msg);
@@ -247,13 +221,9 @@ const funCommand = async ({ type, data, node }) => {
         }
         let res = { code: 500 };
         if (props.type === "wind") {
-          res = await request.get("/data/option/delete", {
-            params: { ids: deleteArr.join(",") },
-          }); //删除当前节点
+          res = await dataOptionDel({ ids: deleteArr.join(",") }); //删除当前节点
         } else {
-          res = await request.delete("/delete/files", {
-            data: { filename: deleteArr.join(",") },
-          }); //删除当前节点
+          res = await filesDel({ filename: deleteArr.join(",") }); //删除当前节点
         }
         if (res.code === 200) {
           ElMessage.success(res.msg);
@@ -303,15 +273,13 @@ defineExpose({ setCheckedKeys });
 .tree-wrapper {
   height: 100%;
   padding: 20px;
-  width: 20%;
-  margin-right: 20px;border-radius: 10px;
-  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
-    0 1px 2px -1px rgba(5, 187, 76, 1);
+
   .treeRef {
     height: calc(100% - 30px - 20px);
     margin-top: 10px;
     padding: 10px 0;
     overflow: auto;
+
     .dashboard-tree-title {
       display: flex;
       justify-content: space-between;
@@ -322,4 +290,15 @@ defineExpose({ setCheckedKeys });
     }
   }
 }
+.el-tree::v-deep {
+  .el-tree-node__content:hover,
+  .el-tree-node__content:active {
+    background: rgba(97, 97, 90, 25%);
+  }
+  &.el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background: rgba(97, 97, 90, 25%);
+  }
+}
 </style>

src/main.js

@@ -23,12 +23,11 @@ import basicTool from "@tools/basicTool";
 import animated from "animate.css";
 import { ElMessage } from "element-plus";
 const app = createApp(App);
-
+/**阻止多次重复点击指令  延时暂定5秒 示例 v-prevdbclick:arg='func' */
 const messageToast = () => {
   //作为eventListener时, 必须使用外部定义函数
   ElMessage.error("5秒内请勿重复点击");
 };
-/**阻止多次重复点击指令  延时暂定5秒 示例 v-prevdbclick:arg='func' */
 const funListener = (el, binding) => {
   let time = null;
   el.removeEventListener("click", messageToast);
@@ -47,40 +46,6 @@ const funListener = (el, binding) => {
     }
   );
 };
-app.directive("prevdbclick", {
-  mounted(el, binding) {
-    funListener(el, binding);
-  },
-});
-// const app = createApp(App);
-// /**阻止多次重复点击指令  延时暂定5秒 示例 v-prevdbclick:arg='func' */
-// const messageToast = () => {
-//   //作为eventListener时, 必须使用外部定义函数
-//   ElMessage.error("5秒内请勿重复点击");
-// };
-// const funListener = (el, binding) => {
-//   let time = null;
-//   el.removeEventListener("click", messageToast);
-//   el.addEventListener(
-//     "click",
-//     () => {
-//       binding.value();
-//       el.addEventListener("click", messageToast, false);
-//       time = setTimeout(() => {
-//         clearTimeout(time);
-//         funListener(el, binding);
-//       }, Number(binding.arg) || 5000);
-//     },
-//     {
-//       once: true,
-//     }
-//   );
-// };
-// app.directive("prevdbclick", {
-//   mounted(el, binding) {
-//     funListener(el, binding);
-//   },
-// });
 /**
  * 对 Date 的扩展，将 Date 转化为指定格式的字符串
  * @param {String} fmt 传入一个字符串，根据所传字符串的格式返回转换后特定格式的日期。
@@ -112,7 +77,11 @@ Date.prototype.formatDate = function (fmt) {
   }
   return fmt;
 };
-
+app.directive("prevdbclick", {
+  mounted(el, binding) {
+    funListener(el, binding);
+  },
+});
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }

src/router/index.js

@@ -1644,6 +1644,16 @@ export const asyncRoutes = [
               permissions: ["jn_dlbb_dmb"],
             },
           },
+          {
+            path: "process",
+            name: "process",
+            component: () => import("@/views/powerGenerating/dataFilter/process"),
+            meta: {
+              title: "风电数据处理",
+              icon: "",
+              permissions: ["jn_dlbb_dmb"],
+            },
+          },
         ],
       },
     ],

src/views/powerGenerating/dataFilter/prepare/components/table.vue

@@ -1,10 +1,7 @@
 <script setup name="table">
 import { ref, computed, defineProps, defineEmits } from "vue";
 const props = defineProps({
-  height: {
-    type: String,
-    default: "800px",
-  },
+
   data: {
     type: Array,
     default: () => [],
@@ -31,12 +28,10 @@ const funExport = () => {
   emits("export");
 };
 const tableRef = ref("");
-const tableHeight = computed(() => {
-  return tableRef.value.offsetHeight ? tableRef.value.offsetHeight - 46 : 739;
-});
+
 </script>
 <template>
-  <div ref="tableRef" class="table-wrapper">
+  <div ref="tableRef" class="table-wrapper card-shadow">
     <div class="table-wrapper-title">
       <h3>{{ props.tableName }}</h3>
       <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
@@ -46,7 +41,7 @@ const tableHeight = computed(() => {
       stripe
       size="small"
       v-loading="props.loading"
-      element-loading-background="rgba(4, 12, 11, 0.8)"
+      element-loading-background="rgba(22, 31, 30, 0.8)"
       height="calc(100% - 52px)"
       :style="{ width: '100%' }"
     >
@@ -70,9 +65,7 @@ const tableHeight = computed(() => {
   padding: 20px;
   padding-top: 0;
   width: calc(60% - 40px);
-  border-radius: 10px;
-  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
-    0 1px 2px -1px rgba(5, 187, 76, 1);
+ 
   
 }
 </style>

src/views/powerGenerating/dataFilter/prepare/components/search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="operation-wrapper">
+  <div class="operation-wrapper card-shadow wrapper">
     <div class="card-title">操作面板</div>
     <el-form class="operation-form" :inline="true" :model="queryForm">
       <el-form-item label="场站">
@@ -146,18 +146,5 @@ const funSubmit = async () => {
 funGetStation();
 </script>
 <style lang="less" scoped>
-.operation-wrapper {
-    background: #161f1e;   
-  position: relative;
-  padding: 20px;
-  padding-bottom: 12px;
-  border-radius: 10px;
-  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
-    0 1px 2px -1px rgba(5, 187, 76, 1);
-  .card-title {
-    position: absolute;
-    top: -10px;
-  }
 
-}
 </style>

src/views/powerGenerating/dataFilter/prepare/index.vue

@@ -1,31 +1,65 @@
+<template>
+  <div class="container-wrapper">
+    <search-cop @submit="funSubmit"> </search-cop>
+    <div class="power-data-wrapper card-shadow wrapper">
+      <div class="card-title">数据展示</div>
+      <div class="data-wrapper">
+        <tree-cop
+          :data="treeData"
+          @currentChange="funCurrentChange"
+          @refresh="funGetTree"
+        /><excel-cop
+          :data="excelList"
+          :currentIds="currentId"
+          @excelChange="funExcelChange"
+        />
+        <table-cop
+          class=""
+          :data="tableData"
+          :column="tableColumn"
+          :loading="tableLoading"
+          :tableId="tableShowId"
+          :tableName="tableName"
+          @export="funExport"
+        />
+      </div>
+    </div>
+
+    <el-progress
+      :percentage="progress"
+      v-if="progress"
+      class="!absolute top-0 right-0 left-0"
+      :indeterminate="false"
+      color="rgb(19,206,102)"
+      :stroke-width="4"
+      :show-text="false"
+    />
+  </div>
+</template>
 <script setup name="prepare">
 import {
-  getTree,
-  getExcelShow,
+  getPrepareTree,
+  getPrepareExcelShow,
   getPrepareData,
 } from "@/api/powerGenerating/index.js";
-
 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 tableCop from "@/views/powerGenerating/dataFilter/components/table.vue";
 import { ElMessage } from "element-plus";
 import { onMounted, ref, onActivated } from "vue";
-import request from "@/tools/request.js";
 const baseURL = process.env.VUE_APP_TEST;
 const socketURL = process.env.VUE_APP_WS;
-/**配置参数 */
-const treeHeight = ref(window.innerHeight - 102 + "px"); //tree高度
-const excelHeight = ref(window.innerHeight - 260 + "px"); //excel高度
-const tableHeight = ref(window.innerHeight - 260 + "px");
+const currentId = ref("");
 /**excel 开始 */
 const excelList = ref([]);
 const funExcelChange = async (obj) => {
   //点击excel项时
   tableShowId.value = obj.id;
+  currentId.value = obj.id;
   tableName.value = obj.name;
   tableLoading.value = true;
-  const res = await getExcelShow({ id: obj.id });
+  const res = await getPrepareExcelShow({ id: obj.id });
   if (res.code === 200) {
     tableColumn.value = res.data.title.map((o) => {
       return {
@@ -64,10 +98,8 @@ const funRepeatMap = (arr) => {
 };
 const funGetTree = async () => {
   actTreeNode.value = null;
-  const res = await getTree();
-  console.log(res);
+  const res = await getPrepareTree();
   treeData.value = funRepeatMap(res.data);
-  console.log(treeData.value, actTreeNode.value);
   excelList.value = [];
   if (actTreeNode.value) {
     funCurrentChange({ current: actTreeNode.value, currentNode: null });
@@ -155,87 +187,38 @@ const funSubmit = async (params) => {
 funGetTree();
 // funWebSocket();
 /**mounted */
-onMounted(() => {
-  tableHeight.value = window.innerHeight - 260 + "px";
-  excelHeight.value = window.innerHeight - 260 + "px";
-  treeHeight.value = window.innerHeight - 120 + "px";
-  window.addEventListener("resize", () => {
-    tableHeight.value = window.innerHeight - 260 + "px";
-    excelHeight.value = window.innerHeight - 260 + "px";
-    treeHeight.value = window.innerHeight - 120 + "px";
-  });
-});
 /**activated */
 onActivated(() => {
   funGetTree();
 });
 </script>
-<template>
-  <div class="container-wrapper">
-    <search-cop @submit="funSubmit"> </search-cop>
-    <div class="prepare-data-wrapper">
-      <div class="data-wrapper-title">数据展示</div>
-      <div class="data-wrapper">
-        <tree-cop
-          :data="treeData"
-          :height="treeHeight"
-          @currentChange="funCurrentChange"
-          @refresh="funGetTree"
-        /><excel-cop
-          :data="excelList"
-          :height="excelHeight"
-          @excelChange="funExcelChange"
-        />
-        <table-cop
-          class=""
-          :data="tableData"
-          :column="tableColumn"
-          :loading="tableLoading"
-          :height="tableHeight"
-          :tableId="tableShowId"
-          :tableName="tableName"
-          @export="funExport"
-        />
-      </div>
-    </div>
 
-    <el-progress
-      :percentage="progress"
-      v-if="progress"
-      class="!absolute top-0 right-0 left-0"
-      :indeterminate="false"
-      color="rgb(19,206,102)"
-      :stroke-width="4"
-      :show-text="false"
-    />
-  </div>
-</template>
 <style lang="less" scoped>
-.container-wrapper {
-  //   background: #161f1e;
-  height: calc(100% - 10px * 2);
-  width: calc(100% - 20px * 2);
-  margin: 0 20px;
-  padding: 10px 0;
-  .prepare-data-wrapper {
-    position: relative;
-    height: calc(100% - 58px - 20px);
-    margin-top: 20px;
-    width: 100%;
-    border-radius: 10px;
-    background: #161f1e;
-    padding: 20px;
-    padding-bottom: 12px;
-    box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
-      0 1px 2px -1px rgba(5, 187, 76, 1);
-    .data-wrapper-title {
-      position: absolute;
-      top: -10px;
-    }
-    .data-wrapper{
-        height:100%;
-        display: flex;
-    }
-  }
-}
+// .container-wrapper {
+//   //   background: #161f1e;
+//   height: calc(100% - 10px * 2);
+//   width: calc(100% - 20px * 2);
+//   margin: 0 20px;
+//   padding: 10px 0;
+//   .prepare-data-wrapper {
+//     position: relative;
+//     height: calc(100% - 58px - 20px);
+//     margin-top: 20px;
+//     width: 100%;
+//     border-radius: 10px;
+//     background: #161f1e;
+//     padding: 20px;
+//     padding-bottom: 12px;
+//     box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
+//       0 1px 2px -1px rgba(5, 187, 76, 1);
+//     .data-wrapper-title {
+//       position: absolute;
+//       top: -10px;
+//     }
+//     .data-wrapper{
+//         height:100%;
+//         display: flex;
+//     }
+//   }
+// }
 </style>

src/views/powerGenerating/dataFilter/process/components/search.vue

@@ -0,0 +1,74 @@
+<script setup name="search">
+import { reactive, ref, defineEmits } from "vue";
+import SubmitBtn from "@com/SubmitBtn.vue";
+
+const queryForm = reactive({
+  maxs: 25,
+  mins: 0,
+  maxp: 2500,
+  minp: 0,
+  isfbw: true,
+  isfhl: true,
+  isbw: true,
+  istj: true,
+  isglpc: true,
+});
+/**导出 */
+const emits = defineEmits(["submit"]);
+const funSubmit = async () => {
+  emits("submit", queryForm);
+};
+/**created */
+</script>
+<template>
+  <div class="operation-wrapper card-shadow wrapper">
+    <div class="card-title">操作面板</div>
+    <el-form class="operation-form" :inline="true" :model="queryForm">
+      <el-form-item label="最大风速">
+        <el-input-number
+          v-model="queryForm.maxs"
+          size="small"
+          :max="30"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="最小风速">
+        <el-input-number
+          v-model="queryForm.mins"
+          size="small"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="最大功率">
+        <el-input-number
+          v-model="queryForm.maxp"
+          size="small"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="最小功率">
+        <el-input-number
+          v-model="queryForm.minp"
+          size="small"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="筛选条件：">
+        <el-checkbox size="mini" v-model="queryForm.isfbw">非并网</el-checkbox>
+        <el-checkbox size="mini" v-model="queryForm.isfhl"
+          >非合理值</el-checkbox
+        >
+        <el-checkbox size="mini" v-model="queryForm.isbw"
+          >并网后10分钟</el-checkbox
+        >
+        <el-checkbox size="mini" v-model="queryForm.istj"
+          >停机前10分钟</el-checkbox
+        >
+        <el-checkbox size="mini" v-model="queryForm.isglpc"
+          >功率曲线偏差</el-checkbox
+        >
+      </el-form-item>
+      <el-form-item>
+        <submit-btn @click="funSubmit" desc="预处理"></submit-btn>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>

src/views/powerGenerating/dataFilter/process/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="container-wrapper">
+    <search-cop @submit="funSubmit" />
+    <div class="power-data-wrapper card-shadow wrapper">
+      <div class="card-title">数据展示</div>
+      <div class="data-wrapper">
+        <div class="data-left-wrapper">
+          <tree-cop
+            class="tree-height"
+            :data="treeData"
+            @checkChange="funTreeCheckChange"
+            :show-checkbox="true"
+            @currentChange="funCurrentChange"
+            @refresh="funGetTree"
+          ></tree-cop>
+          <tree-cop
+            class="tree-height"
+            :data="processTreeData"
+            @currentChange="funProcessCurrentChange"
+            @refresh="funGetProcessTree"
+          ></tree-cop>
+        </div>
+        <excel-cop
+          :checkIds="excelCheckIds"
+          :currentIds="currentId"
+          :showCheckbox="excelCheckboxShow"
+          :data="excelList"
+          @excelChange="funExcelChange"
+          @checkChange="funExcelCheckChange"
+        />
+        <table-cop
+          class=""
+          :data="tableData"
+          :loading="tableLoading"
+          :column="tableColumn"
+          :tableId="tableShowId"
+          :tableName="tableName"
+          @export="funExport"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="process">
+import searchCop from "./components/search.vue";
+import excelCop from "@/components/excel.vue";
+import treeCop from "@/components/tree.vue";
+import tableCop from "@/views/powerGenerating/dataFilter/components/table.vue";
+import { ref, onActivated, onMounted } from "vue";
+import request from "@/api/axios.js";
+import { ElMessage } from "element-plus";
+import {
+  getProcessTree,
+  getPrepareTree,
+  getPrepareExcelShow,
+  getProcessExcelShow,
+  getProcessData,
+} from "@/api/powerGenerating/index.js";
+const baseURL = process.env.VUE_APP_TEST;
+/**excel 开始 */
+const excelCheckboxShow = ref(false);
+const excelCheckIds = ref([]);
+const currentId = ref("");
+const excelList = ref([]);
+const funExcelChange = async (obj) => {
+  //点击excel项时
+  tableShowId.value = obj.id;
+  currentId.value = obj.id;
+  tableName.value = obj.name;
+  let res = null;
+  tableLoading.value = true;
+  if (obj.type === "prepare") {
+    res = await getPrepareExcelShow({ id: obj.id });
+  } else if (obj.type === "process") {
+    res = await getProcessExcelShow({ id: obj.id });
+  }
+  if (res.code === 200) {
+    tableColumn.value = res.data.title.map((o) => {
+      return {
+        prop: o.key,
+        label: o.des,
+        width: o.des === "时间" ? 100 : 80,
+      };
+    });
+    tableData.value = res.data.data;
+    tableLoading.value = false;
+  } else {
+    tableLoading.value = false;
+  }
+};
+const funExcelCheckChange = ({ checkArr, data }) => {
+  //bug
+  excelCheckIds.value = checkArr;
+};
+/**prepare tree 开始 */
+const treeData = ref([]);
+const funRepeatMap = (arr, type = "prepare") => {
+  return arr.map((o) => {
+    if (o.children) {
+      const findIndex = o.children.findIndex((p) => !!p.type);
+      if (findIndex !== -1) {
+        o.childs = o.children;
+        o.children = [];
+        if (!actTreeNode.value && type === "fitting") {
+          //判断当且仅有process获取tree时 赋值
+          actTreeNode.value = o;
+        }
+      }
+    }
+    return {
+      ...o,
+      children: o.children ? funRepeatMap(o.children, type) : [],
+    };
+  });
+};
+const funGetTree = async () => {
+  const res = await getPrepareTree();
+  treeData.value = funRepeatMap(res.data);
+  excelList.value = [];
+};
+const funCurrentChange = ({ current, currentNode }) => {
+  excelCheckboxShow.value = true;
+  if (current.childs) {
+    excelList.value = current.childs.map((o) => {
+      return {
+        id: o.id,
+        interval: o.interval,
+        path: o.path,
+        prepareid: o.prepareid,
+        station: o.station,
+        time: o.time,
+        type: o.type,
+        windturbine: o.windturbine,
+        name: o.path.substring(
+          o.path.indexOf(o.station + "_") + (o.station + "_").length
+        ),
+      };
+    });
+  } else {
+    excelList.value = [];
+  }
+};
+const funTreeCheckChange = ({
+  current,
+  checkedNodes,
+  checkedKeys,
+  halfCheckedNodes,
+  halfCheckedKeys,
+}) => {
+  //tree change  -> excel change
+  funCurrentChange({ current, currentNode: "" });
+  const checkIds = [];
+  if (checkedNodes.length) {
+    for (const node of checkedNodes) {
+      if (node.childs && node.childs.length) {
+        for (const child of node.childs) {
+          checkIds.push(child.id);
+        }
+      }
+    }
+  }
+  excelCheckIds.value = checkIds;
+};
+
+/**process tree 开始 */
+const processTreeData = ref([]);
+const actTreeNode = ref(null);
+const funGetProcessTree = async () => {
+  actTreeNode.value = null;
+  const res = await getProcessTree();
+  processTreeData.value = funRepeatMap(res.data, "fitting");
+  excelList.value = [];
+  if (actTreeNode.value) {
+    funProcessCurrentChange({ current: actTreeNode.value, currentNode: null });
+    const child = actTreeNode.value.childs[0];
+    const obj = {
+      id: child.id,
+      interval: child.interval,
+      path: child.path,
+      prepareid: child.prepareid,
+      station: child.station,
+      time: child.time,
+      type: child.type,
+      windturbine: child.windturbine,
+      name: child.path.substring(
+        child.path.indexOf(child.station + "_") + (child.station + "_").length
+      ),
+    };
+    funExcelChange(obj);
+  }
+};
+const funProcessCurrentChange = ({ current, currentNode }) => {
+  excelCheckboxShow.value = false;
+  if (current.childs) {
+    excelList.value = current.childs.map((o) => {
+      return {
+        id: o.id,
+        interval: o.interval,
+        path: o.path,
+        prepareid: o.prepareid,
+        station: o.station,
+        time: o.time,
+        type: o.type,
+        windturbine: o.windturbine,
+        name: o.path.substring(
+          o.path.indexOf(o.station + "_") + (o.station + "_").length
+        ),
+      };
+    });
+  } else {
+    excelList.value = [];
+  }
+};
+
+/**table 开始 */
+const tableShowId = ref("");
+const tableColumn = ref([]);
+const tableLoading = ref(false);
+const tableName = ref("");
+const tableData = ref([]);
+const funExport = async () => {
+  const a = document.createElement("a");
+  a.href = baseURL + "/power/process/download?id=" + tableShowId.value;
+  a.download = "";
+  a.click();
+};
+/**table 结束 */
+/**search 开始 */
+const funSubmit = async (query) => {
+  if (!excelCheckIds.value.length) {
+    ElMessage.error("请勾选要预处理的项");
+    return false;
+  }
+  const params = {
+    ...query,
+    ids: excelCheckIds.value.join(","),
+  };
+  const res = await getProcessData(params);
+  if (res.code === 200) {
+    ElMessage.success(res.msg);
+    funGetProcessTree();
+  }
+};
+/**created */
+funGetTree().then(() => {
+  funGetProcessTree();
+});
+
+/**mounted */
+
+/**activated */
+onActivated(async () => {
+  await funGetTree();
+  funGetProcessTree();
+});
+</script>

src/views/powerGenerating/index.vue

@@ -8,6 +8,70 @@ export default {
 };
 </script>
 
-<style scoped lang="less">
+<style lang="less">
+//公共边框阴影
+.card-shadow {
+  border-radius: 10px;
+  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
+    0 1px 2px -1px rgba(5, 187, 76, 1);
+}
+// 公共标题样式
+.wrapper {
+  position: relative;
+  .card-title {
+    position: absolute;
+    top: -10px;
+  }
+}
+//发电能力分析模块公共样式
+.container-wrapper {
+  height: calc(100% - 10px * 2);
+  width: calc(100% - 20px * 2);
+  margin: 0 20px;
+  padding: 10px 0;
+  .power-data-wrapper {
+    height: calc(100% - 58px - 20px);
+    margin-top: 20px;
+    width: 100%;
+    background: #161f1e;
+    padding: 20px;
+    padding-bottom: 12px;
 
+    .data-wrapper {
+      height: 100%;
+      display: flex;
+      .tree-wrapper {
+        width: 20%;
+        margin-right: 20px;
+      }
+      .data-left-wrapper {
+        display: flex;
+        width: 22%;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-right: 20px;
+        .tree-wrapper {
+          width: 100%;
+          margin-right: 0;
+        }
+        .tree-height {
+          height: calc(50% - 10px);
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+//发电能力分析search组件公共样式
+.operation-wrapper {
+  background: #161f1e;
+  padding: 20px;
+  padding-bottom: 12px;
+ 
+}
+::v-deep.operation-form .el-checkbox {
+  .el-checkbox__input {
+    display: block !important;
+  }
+}
 </style>