公共搜索组件封装

src/api/headerNav.js

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
 
-//获取公司列表
+// 获取公司列表
 export function GetOrganization(data) {
   return request({
     baseURL: process.env.VUE_APP_Economy,
@@ -8,7 +8,8 @@ export function GetOrganization(data) {
     method: "get",
   });
 }
-//获取公司场站列表
+
+// 根据公司 ID 获取场站
 export function GetStationByCompany(data) {
   return request({
     baseURL: process.env.VUE_APP_Economy,
@@ -16,3 +17,30 @@ export function GetStationByCompany(data) {
     method: "get",
   });
 }
+
+// 根据场站 ID 获取风机列表
+export function GeWtList(lnids) {
+  return request({
+    baseURL: process.env.VUE_APP_Economy,
+    url: `/benchmarking/wtByLnlist?lnids=${lnids}`,
+    method: "get",
+  });
+}
+
+// 根据场站 ID 获取项目列表
+export function GetProjectList(wpids) {
+  return request({
+    baseURL: process.env.VUE_APP_Economy,
+    url: `benchmarking/pjByWplist?wpids=${wpids}`,
+    method: "get",
+  });
+}
+
+// 根据场站 ID 获取线路列表
+export function GetLineList(pjids) {
+  return request({
+    baseURL: process.env.VUE_APP_Economy,
+    url: `benchmarking/lnByPjlist?pjids=${pjids}`,
+    method: "get",
+  });
+}

src/components/heardSearch/index.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="heardSearchBox">
+    <el-form label-width="60px" inline>
+      <el-form-item label="类别:">
+        <el-select
+          v-model="tagListNode"
+          style="width: 80px"
+          placeholder="请选择"
+          @change="
+            (val) => {
+              getOrganizationLists(val, true);
+            }
+          "
+        >
+          <el-option
+            v-show="item.flag"
+            v-for="(item, indexe) in tagList"
+            :key="indexe"
+            :label="item.name"
+            :value="item.type"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="机构:">
+        <el-select
+          v-model="checkNode"
+          style="width: 140px"
+          :placeholder="parentNode?.aname"
+          clearable
+          :multiple="companyMultiple"
+          collapse-tags
+          @change="
+            (val) => {
+              this.dataChang(val);
+            }
+          "
+        >
+          <el-option
+            v-for="(item, indexe) in OrganizationLists"
+            :key="indexe"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="场站:">
+        <el-select
+          v-model="checkStation"
+          style="width: 160px"
+          placeholder="全部场站"
+          clearable
+          :multiple="stationMultiple"
+          collapse-tags
+          @change="getProjectList"
+        >
+          <el-option
+            v-for="(item, index) in stationList"
+            :key="index"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目:" v-if="!hiddenProject">
+        <el-select
+          size="mini"
+          v-model="projectObj"
+          style="width: 160px"
+          placeholder="请选择"
+          @change="GetLineList"
+          clearable
+        >
+          <el-option
+            v-for="item in projectList"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="线路:" v-if="!hiddenLine">
+        <el-select
+          size="mini"
+          v-model="lineObj"
+          style="width: 120px"
+          placeholder="请选择"
+          clearable
+          @change="getWtList"
+        >
+          <el-option
+            v-for="item in lineList"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备:">
+        <el-select
+          v-model="wtId"
+          style="width: 120px"
+          placeholder="全部设备"
+          clearable
+          collapse-tags
+          @change="emitProps"
+        >
+          <el-option
+            v-for="(item, index) in wtList"
+            :key="index"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="日期:">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 260px"
+          popper-class="heardSearchDatePlcier"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          size="small"
+          format="YYYY/MM/DD"
+          value-format="YYYY-MM-DD"
+          @change="emitProps"
+        />
+      </el-form-item>
+      <el-form-item>
+        <template v-for="(btn, btnIndex) in buttons">
+          <el-button
+            round
+            size="small"
+            class="buttons"
+            :key="btnIndex"
+            :disabled="btn.disabled"
+            @click="btn.callback"
+            v-if="!btn.hide"
+            >{{ btn.label }}
+          </el-button>
+        </template>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+
+
+<script>
+import {
+  GetOrganization,
+  GetStationByCompany,
+  GeWtList,
+  GetProjectList,
+  GetLineList,
+} from "@/api/headerNav.js";
+
+export default {
+  name: "HomeNav", //首页标题栏
+  props: {
+    type: {
+      type: Number,
+      default: -2,
+    },
+    handType: String,
+    codeRight: String,
+    codeNums: String, // 公司Code
+    stationCode: String, // 场站Code
+    shangeColor: String,
+    hiddenStation: {
+      type: Boolean,
+      default: true,
+    },
+    hiddenProject: {
+      type: Boolean,
+      default: false,
+    },
+    hiddenLine: {
+      type: Boolean,
+      default: false,
+    },
+    hiddenWtList: {
+      type: Boolean,
+      default: false,
+    },
+    hiddenSearch: {
+      type: Boolean,
+      default: false,
+    },
+    stationMultiple: {
+      type: Boolean,
+      default: false,
+    },
+    companyMultiple: {
+      type: Boolean,
+      default: false,
+    },
+    intoCheckNode: {
+      // 是否需要默认选中公司，将codeRight(公司code)传给checkNode，
+      type: Boolean,
+      default: false,
+    },
+    date: {
+      type: Array,
+      default: () => {
+        return [
+          `${new Date().formatDate("yyyy-MM")}-01`,
+          new Date().formatDate("yyyy-MM-dd"),
+        ];
+      },
+    },
+    buttons: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      OrganizationLists: [{ id: "JS_RGN", aname: "江苏区域" }], //公司列表
+      stationList: [], //场站列表
+      checkStation: "", //场站值
+      checkNode: "JS_RGN", //公司值
+      tagList: [
+        { type: -1, flag: true, id: "F", name: "风电" },
+        { type: -2, flag: true, id: "G", name: "光伏" }, //类型
+      ],
+      tagListNode: -2, //类型值
+      projectObj: "",
+      projectList: [],
+      lineObj: "",
+      lineList: [],
+      dateRange: [],
+      wtId: "",
+      wtList: [],
+    };
+  },
+  async created() {
+    this.dateRange = this.date;
+
+    await this.getOrganizationLists(this.tagListNode, true);
+
+    if (this.shangeColor != "") {
+      this.s = this.shangeColor;
+    } else {
+      this.s = "all";
+    }
+  },
+  methods: {
+    // 获取区域公司
+    async getOrganizationLists(val, flag) {
+      const { data } = await GetOrganization({ type: val });
+      this.OrganizationLists = data;
+      if (!flag) {
+        this.tagList.forEach((item) => {
+          if (item.id != val) {
+            item.flag = false;
+          }
+        });
+      }
+
+      this.checkNode = this.checkNode || data?.[0]?.id || "";
+
+      if (this.checkNode) {
+        this.getPowerStation(this.checkNode);
+      } else {
+        this.stationList = [];
+        this.emitProps("checkNode");
+      }
+    },
+    deepClone(ob) {
+      var obj = JSON.stringify(ob);
+      var objClone = JSON.parse(obj);
+      return objClone;
+    },
+
+    // 区域切换
+    dataChang(id) {
+      //根据区域公司编码获取场站信息
+      this.checkStation = "";
+      this.checkNode = id;
+      if (id && id != "JS_RGN") {
+        let comp = this.OrganizationLists.find((item) => item.id == id);
+        this.tagList.forEach((item) => {
+          if (item?.id != comp?.eleType) {
+            item.flag = false;
+          } else {
+            item.flag = true;
+          }
+        });
+        this.tagListNode = comp?.eleType == "F" ? -1 : -2;
+      } else {
+        this.tagList = [
+          { type: -1, flag: true, id: "F", name: "风电" },
+          { type: -2, flag: true, id: "G", name: "光伏" },
+        ];
+        this.tagListNode = this.tagList[0].type;
+      }
+      if (id?.length > 0) {
+        this.getPowerStation(id);
+      } else {
+        this.stationList = [];
+        this.projectList = [];
+        this.lineList = [];
+        this.emitProps("tagListNode");
+      }
+    },
+
+    // 获取场站信息
+    async getPowerStation(val) {
+      const { data } = await GetStationByCompany({
+        companyids: val,
+        type: this.tagListNode,
+      });
+      this.stationList = data;
+
+      let checkStation = null;
+      if (this.stationMultiple) {
+        if (!Array.isArray(this.checkStation) || !checkStation?.length) {
+          this.checkStation = [data?.[0]?.id || ""];
+        }
+      } else {
+        this.checkStation = this.checkStation || data?.[0]?.id;
+      }
+
+      if (this.checkStation?.length) {
+        this.getProjectList();
+      } else {
+        this.projectList = [];
+        this.lineList = [];
+        this.emitProps("checkStation");
+      }
+    },
+
+    async getProjectList() {
+      await GetProjectList(this.checkStation).then((res) => {
+        this.projectList = res.data;
+        this.projectObj = res.data?.[0]?.id;
+        if (this.projectObj) {
+          this.getLineList();
+        } else {
+          this.lineList = [];
+          this.emitProps("projectObj");
+        }
+      });
+    },
+
+    async getLineList() {
+      await GetLineList(this.projectObj).then((res) => {
+        this.lineList = res.data;
+        this.lineObj = res.data?.[0]?.id || "";
+
+        if (this.lineObj) {
+          this.getWtList();
+        } else {
+          this.wtList = [];
+          this.emitProps();
+        }
+      });
+    },
+
+    async getWtList() {
+      await GeWtList(this.lineObj).then((res) => {
+        this.wtList = res.data;
+        this.wtId = res.data?.[0]?.id || "";
+        this.emitProps();
+      });
+    },
+
+    emitProps(resetKey) {
+      let resetValue = false;
+      const rinseArray = [
+        "tagListNode",
+        "checkNode",
+        "checkStation",
+        "projectObj",
+        "lineObj",
+        "wtId",
+      ];
+      rinseArray.forEach((key) => {
+        if (resetValue) {
+          this[key] = null;
+        }
+        if (key === resetKey) {
+          resetValue = true;
+        }
+      });
+      this.$emit("firstRender", {
+        category: this.tagListNode,
+        orgId: this.checkNode,
+        station: this.checkStation,
+        wtId: this.wtId,
+        project: this.projectObj,
+        line: this.lineObj,
+        dateRange: this.dateRange,
+      });
+    },
+  },
+  watch: {
+    type: {
+      handler(val) {
+        if (val == -1) {
+          this.tagListNode = -1;
+        } else if (val == -2) {
+          this.tagListNode = -2;
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep .el-input__suffix {
+  display: inline-block;
+  right: 0 !important;
+  width: 80px !important;
+}
+
+::v-deep .el-input__suffix .el-icon-circle-close {
+  position: absolute;
+  top: -7px !important;
+  right: 18px !important;
+}
+
+::v-deep .el-input__suffix .el-icon-arrow-up {
+  display: block !important;
+
+  right: -52px !important;
+}
+
+ul {
+  user-select: none;
+  display: flex;
+
+  .headerRight {
+    padding: 0 14px;
+    height: 25px;
+    line-height: 25px;
+    background: rgba(0, 70, 199, 0.2);
+    border-radius: 16px;
+    text-align: center;
+    margin-right: 15px;
+    cursor: pointer;
+
+    span {
+      width: 29px;
+      height: 12px;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+    }
+
+    i {
+      font-size: 16px;
+      color: #b3b3b3;
+      position: relative;
+      margin-right: 9px;
+      vertical-align: -9%;
+    }
+  }
+
+  .forbidden {
+    background: #666666;
+    opacity: 0.5;
+
+    span {
+      color: #b3b3b3;
+    }
+  }
+
+  .active {
+    background: rgba(0, 70, 199, 0.4);
+
+    .active_icon {
+      color: rgba(28, 153, 255, 1);
+    }
+
+    span {
+      color: #ffffff;
+    }
+  }
+
+  .nav_right {
+    transition: 0.3s;
+  }
+
+  .nav_right:first-of-type {
+    margin-left: 30px;
+  }
+
+  p {
+    width: 60px;
+  }
+
+  .rightTitle {
+    display: flex;
+  }
+}
+
+.active.light {
+  background: rgba(255, 131, 0, 0.2);
+
+  i {
+    color: rgba(255, 131, 0, 1);
+  }
+}
+
+.active.wind {
+  background-color: rgba(0, 70, 199, 0.4);
+
+  i {
+    color: #1c99ff;
+  }
+}
+
+.active.hydraulic {
+  background-color: rgba(0, 252, 255, 0.2);
+
+  i {
+    color: #00fcff;
+  }
+}
+
+.active.energy {
+  background-color: rgba(230, 59, 13, 0.2);
+
+  i {
+    color: #e63b0d;
+  }
+}
+.station {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #b3b3b3;
+  margin-right: 10px;
+}
+
+.but {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  margin-left: 20px;
+}
+
+.buttons {
+  background-color: rgba(0, 70, 199, 0.2);
+  border: 1px solid #3b4c6c;
+  color: #b3b3b3;
+  font-size: 14px;
+
+  &:hover,
+  &.active {
+    background-color: rgba(0, 70, 199, 0.5);
+    color: #ffffff;
+  }
+}
+</style>
+<style lang="less">
+.heardSearchBox {
+  .el-range-input {
+    background: rgba(67, 81, 107, 0.2);
+    color: #b3b3b3;
+  }
+  .el-select .el-input__inner {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+.heardSearchDatePlcier {
+  .el-date-table td.in-range div {
+    background: rgba(67, 81, 107, 0.5);
+  }
+}
+</style>

src/views/layout/economicsOperation/benchmarkingManagement/intervalBenchmarking/index.vue

@@ -1,349 +1,256 @@
 <template>
   <div class="parcel-box">
-    <div class="title">
-      <el-select
-          size="mini"
-          :disabled="displayDetail"
-          v-model="company"
-          placeholder="请选择"
-          @change="handleCompanyChange(company)"
-      >
-        <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <div class="tabCut">
-        <div
-            @click="tabClick(val.id)"
-            :class="[
-            tabIndex === val.id ? 'active' : '',
-            displayDetail ? 'disabled' : '',
-          ]"
-            v-for="val in tabOptions"
-            :key="val.id"
-        >
-          <span>{{ val.name }}</span>
-        </div>
-      </div>
-      <div class="station">
-        场站：
-        <el-select
-            size="mini"
-            :disabled="displayDetail"
-            v-model="stationObj"
-            multiple
-            collapse-tags
-            placeholder="请选择"
-            @change="handleStationChange(stationObj)"
-            clearable
-        >
-          <el-option
-              v-for="item in stationList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-          >
-          </el-option>
-        </el-select>
-      </div>
-      <div class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-              v-model="starTime"
-              :disabled="displayDetail"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-          >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-              v-model="endTime"
-              :disabled="displayDetail"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-          >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="but">
-        <el-button
-            round
-            size="mini"
-            :disabled="displayDetail"
-            class="buttons"
-            @click="gerCjdb"
-        >搜索</el-button
-        >
-        <el-button
-            round
-            size="mini"
-            class="buttons"
-            @click="dbfx"
-            :disabled="
-            chooseList.length <= 5 && chooseList.length > 1 ? false : true
-          "
-        >对标分析</el-button
-        >
-        <el-button
-            round
-            size="mini"
-            class="buttons"
-            @click="goBack"
-            v-if="displayDetail"
-        >返回</el-button
-        >
-        <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
-      </div>
-    </div>
+    <HeardSearch
+      :type="-2"
+      :hiddenWtList="true"
+      @firstRender="firstRender"
+      :buttons="[
+        { label: '搜索', callback: gerCjdb, disabled: displayDetail },
+        {
+          label: '对标分析',
+          callback: dbfx,
+          disabled:
+            chooseList.length <= 5 && chooseList.length > 1 ? false : true,
+        },
+        { label: '返回', callback: goBack, hidden: displayDetail },
+      ]"
+    />
     <div class="bodys" v-if="!displayDetail">
       <div class="line">
         <div class="leftContent"><span>场际对标</span></div>
         <div class="rightContent"></div>
       </div>
       <div
-          class="economicTable"
-          v-if="!displayDetail"
-          :style="{ height: echartsHeight }"
+        class="economicTable"
+        v-if="!displayDetail"
+        :style="{ height: echartsHeight }"
       >
         <el-table
-            :data="tableData"
-            ref="multipleTable"
-            size="mini"
-            :height="echartsHeight"
-            :cell-style="{ padding: '6px' }"
-            :row-style="{ height: '0' }"
-            stripe
-            @selection-change="handleCurrentChange"
+          :data="tableData"
+          ref="multipleTable"
+          size="mini"
+          :height="echartsHeight"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '0' }"
+          stripe
+          @selection-change="handleCurrentChange"
         >
           <el-table-column type="selection" width="55" align="center">
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="name"
-              label="名称"
-              show-overflow-tooltip
-              sortable
+            align="center"
+            prop="name"
+            label="名称"
+            show-overflow-tooltip
+            sortable
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="zhpm"
-              label="综合排名"
-              width="80"
-              sortable
+            align="center"
+            prop="zhpm"
+            label="综合排名"
+            width="80"
+            sortable
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fdlpm"
-              label="发电量排名"
-              sortable
-              width="63"
+            align="center"
+            prop="fdlpm"
+            label="发电量排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fdl"
-              label="发电量"
-              sortable
-              width="63"
+            align="center"
+            prop="fdl"
+            label="发电量"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzssdlpm"
-              label="故障损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="gzssdlpm"
+            label="故障损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzssdl"
-              label="故障损失"
-              sortable
-              width="63"
+            align="center"
+            prop="gzssdl"
+            label="故障损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxssdlpm"
-              label="检修损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="jxssdlpm"
+            label="检修损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxssdl"
-              label="检修损失"
-              sortable
-              width="63"
+            align="center"
+            prop="jxssdl"
+            label="检修损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnssdlpm"
-              label="性能损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="xnssdlpm"
+            label="性能损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnssdl"
-              label="性能损失"
-              sortable
-              width="63"
+            align="center"
+            prop="xnssdl"
+            label="性能损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xdssdlpm"
-              label="限电损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="xdssdlpm"
+            label="限电损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xdssdl"
-              label="限电损失"
-              sortable
-              width="63"
+            align="center"
+            prop="xdssdl"
+            label="限电损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slssdlpm"
-              label="受累损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="slssdlpm"
+            label="受累损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slssdl"
-              label="受累损失"
-              sortable
-              width="63"
+            align="center"
+            prop="slssdl"
+            label="受累损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fnlylpm"
-              :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
-              sortable
-              width="63"
+            align="center"
+            prop="fnlylpm"
+            :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fnlyl"
-              :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
-              sortable
-              width="63"
+            align="center"
+            prop="fnlyl"
+            :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzsslpm"
-              label="故障损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="gzsslpm"
+            label="故障损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzssl"
-              label="故障损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="gzssl"
+            label="故障损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxsslpm"
-              label="检修损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="jxsslpm"
+            label="检修损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxssl"
-              label="检修损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="jxssl"
+            label="检修损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="qflpm"
-              :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
-              sortable
-              width="63"
+            align="center"
+            prop="qflpm"
+            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="qfl"
-              :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
-              sortable
-              width="63"
+            align="center"
+            prop="qfl"
+            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnsslpm"
-              label="性能损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="xnsslpm"
+            label="性能损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnssl"
-              label="性能损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="xnssl"
+            label="性能损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slsslpm"
-              label="受累损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="slsslpm"
+            label="受累损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slssl"
-              label="受累损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="slssl"
+            label="受累损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column align="center" prop="" label="操作" width="70">
             <template v-slot="scope">
               <span
-                  @click="goDetail(scope.row)"
-                  style="cursor: pointer; color: #1c99ff"
-              >详情</span
+                @click="goDetail(scope.row)"
+                style="cursor: pointer; color: #1c99ff"
+                >详情</span
               >
             </template>
           </el-table-column>
@@ -358,10 +265,10 @@
           损失电量分析
         </div>
         <PieChart
-            :lossPower="lossPower"
-            width="100%"
-            height="20vh"
-            :showLable="false"
+          :lossPower="lossPower"
+          width="100%"
+          height="20vh"
+          :showLable="false"
         ></PieChart>
       </div>
       <div class="bar-echarts">
@@ -371,34 +278,34 @@
           五项损失
         </div>
         <BarCharts
-            :list="barList"
-            width="100%"
-            height="30vh"
-            :showLegend="true"
-            :xdate="false"
-            :colorIndex="true"
+          :list="barList"
+          width="100%"
+          height="30vh"
+          :showLegend="true"
+          :xdate="false"
+          :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
     <div v-if="displayDetail" class="economicTable details">
       <el-table
-          :data="detailTable"
-          ref="multipleTable"
-          size="mini"
-          height="78vh"
-          :cell-style="{ padding: '6px' }"
-          :row-style="{ height: '4' }"
-          stripe
-          @selection-change="handleCurrentChange"
+        :data="detailTable"
+        ref="multipleTable"
+        size="mini"
+        height="78vh"
+        :cell-style="{ padding: '6px' }"
+        :row-style="{ height: '4' }"
+        stripe
+        @selection-change="handleCurrentChange"
       >
         <el-table-column type="selection" width="55" align="center">
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="name"
-            label="风机名称"
-            width="150"
-            sortable
+          align="center"
+          prop="name"
+          label="风机名称"
+          width="150"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="zhpm" label="综合排名" sortable>
@@ -406,125 +313,125 @@
         <el-table-column align="center" prop="gzssdl" label="故障损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="jxssdlpm"
-            label="检修损失排名"
-            sortable
+          align="center"
+          prop="jxssdlpm"
+          label="检修损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="jxssdl" label="检修损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xnssdlpm"
-            label="性能损失排名"
-            sortable
+          align="center"
+          prop="xnssdlpm"
+          label="性能损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="xnssdl" label="性能损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xdssdlpm"
-            label="限电损失排名"
-            sortable
+          align="center"
+          prop="xdssdlpm"
+          label="限电损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="xdssdl" label="限电损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="slssdlpm"
-            label="受累损失排名"
-            sortable
+          align="center"
+          prop="slssdlpm"
+          label="受累损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="slssdl" label="受累损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="gzsslpm"
-            label="故障损失率排名"
-            sortable
+          align="center"
+          prop="gzsslpm"
+          label="故障损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="gzssl"
-            label="故障损失率(%)"
-            sortable
+          align="center"
+          prop="gzssl"
+          label="故障损失率(%)"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="jxsslpm"
-            label="检修损失率排名"
-            sortable
+          align="center"
+          prop="jxsslpm"
+          label="检修损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="jxssl"
-            label="检修损失率(%)"
-            sortable
+          align="center"
+          prop="jxssl"
+          label="检修损失率(%)"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="qflpm"
-            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
-            sortable
+          align="center"
+          prop="qflpm"
+          :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="qfl"
-            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
-            sortable
+          align="center"
+          prop="qfl"
+          :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xnsslpm"
-            label="性能损失率排名"
-            sortable
+          align="center"
+          prop="xnsslpm"
+          label="性能损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xnssl"
-            label="性能损失率(%)"
-            sortable
+          align="center"
+          prop="xnssl"
+          label="性能损失率(%)"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="slsslpm"
-            label="受累损失率排名"
-            sortable
+          align="center"
+          prop="slsslpm"
+          label="受累损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="slssl"
-            label="受累损失率(%)"
-            sortable
+          align="center"
+          prop="slssl"
+          label="受累损失率(%)"
+          sortable
         >
         </el-table-column>
       </el-table>
     </div>
     <el-dialog
-        class="dialogs"
-        width="90%"
-        top="40px"
-        v-model="dialogVisible"
-        :show-close="true"
+      class="dialogs"
+      width="90%"
+      top="40px"
+      v-model="dialogVisible"
+      :show-close="true"
     >
       <template #title>
         <div class="dialog-title">
           <img
-              class="dialog-title-img"
-              src="@assets/img/images/dialog-title.png"
+            class="dialog-title-img"
+            src="@assets/img/images/dialog-title.png"
           />
           <div class="title">对标排名分析</div>
         </div>
@@ -532,15 +439,15 @@
       <div class="dialog-body">
         <img class="dialog-img" src="@assets/img/images/dialog.png" />
         <dayinfo
-            :radarValue="radarValue"
-            :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
-            :windNum="windNum"
-            :windNum2="windNum2"
-            :windNum3="windNum3"
-            :windNum4="windNum4"
-            :windNum5="windNum5"
-            :tabs="tabs"
-            :analyisDialog="analyisDialog"
+          :radarValue="radarValue"
+          :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
+          :windNum="windNum"
+          :windNum2="windNum2"
+          :windNum3="windNum3"
+          :windNum4="windNum4"
+          :windNum5="windNum5"
+          :tabs="tabs"
+          :analyisDialog="analyisDialog"
         />
       </div>
     </el-dialog>
@@ -548,6 +455,7 @@
 </template>
 
 <script>
+import HeardSearch from "@com/heardSearch/index.vue";
 import dayjs from "dayjs";
 import { companys } from "@/api/curveAnalyse";
 import { getStation, cjdb, details } from "@/api/performance";
@@ -557,12 +465,14 @@ import dayinfo from "../compontent/dayinfo.vue";
 export default {
   name: "intervalBenchmarking", //场际对标
   components: {
+    HeardSearch,
     PieChart,
     BarCharts,
     dayinfo,
   },
   data() {
     return {
+      isFirstLoad: true,
       company: "",
       companyOptions: [],
       stationObj: [],
@@ -874,11 +784,11 @@ export default {
       });
       this.radarValue = radarValue;
       var analyis = [],
-          gzssdl = [],
-          jxssdl = [],
-          xnssdl = [],
-          xdssdl = [],
-          slssdl = [];
+        gzssdl = [],
+        jxssdl = [],
+        xnssdl = [],
+        xdssdl = [],
+        slssdl = [];
       data.forEach((item, index) => {
         gzssdl.push({
           text: item.name,
@@ -902,34 +812,47 @@ export default {
         });
       });
       analyis.push(
-          {
-            title: "故障损失电量",
-            yAxisIndex: 0,
-            value: gzssdl,
-          },
-          {
-            title: "检修损失电量",
-            yAxisIndex: 0,
-            value: jxssdl,
-          },
-          {
-            title: "性能损失电量",
-            yAxisIndex: 0,
-            value: xnssdl,
-          },
-          {
-            title: "限电损失电量",
-            yAxisIndex: 0,
-            value: xdssdl,
-          },
-          {
-            title: "受累损失电量",
-            yAxisIndex: 0,
-            value: slssdl,
-          }
+        {
+          title: "故障损失电量",
+          yAxisIndex: 0,
+          value: gzssdl,
+        },
+        {
+          title: "检修损失电量",
+          yAxisIndex: 0,
+          value: jxssdl,
+        },
+        {
+          title: "性能损失电量",
+          yAxisIndex: 0,
+          value: xnssdl,
+        },
+        {
+          title: "限电损失电量",
+          yAxisIndex: 0,
+          value: xdssdl,
+        },
+        {
+          title: "受累损失电量",
+          yAxisIndex: 0,
+          value: slssdl,
+        }
       );
       this.analyisDialog = analyis;
     },
+    firstRender(searchOptions) {
+      this.tabIndex = searchOptions.category;
+      this.company = searchOptions.orgId;
+      this.starTime = searchOptions.dateRange?.[0] || "";
+      this.endTime = searchOptions.dateRange?.[1] || "";
+      this.stationObj = [searchOptions.station];
+      this.projectObj = [searchOptions.project];
+      this.lineObj = [searchOptions.line];
+      if (this.isFirstLoad) {
+        this.isFirstLoad = false;
+        this.gerCjdb();
+      }
+    },
   },
   watch: {
     screenHeight(val) {
@@ -982,7 +905,7 @@ export default {
       background-color: #0c3378;
       color: #fff;
     }
-      .disabled {
+    .disabled {
       pointer-events: none;
     }
   }

src/views/layout/economicsOperation/benchmarkingManagement/loseRate/index.vue

@@ -1,154 +1,19 @@
 <template>
   <div class="parcel-box">
-    <div class="title">
-      <el-select
-          size="mini"
-          :disabled="displayDetail"
-          v-model="company"
-          placeholder="请选择"
-          @change="handleCompanyChange(company)"
-      >
-        <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <div class="tabCut">
-        <div
-            @click="tabClick(val.id)"
-            :class="[
-            tabIndex === val.id ? 'active' : '',
-            displayDetail ? 'disabled' : '',
-          ]"
-            v-for="val in tabOptions"
-            :key="val.id"
-        >
-          <span>{{ val.name }}</span>
-        </div>
-      </div>
-      <div class="station">
-        场站：
-        <el-select
-            size="mini"
-            :disabled="displayDetail"
-            v-model="stationObj"
-            multiple
-            collapse-tags
-            placeholder="请选择"
-            @change="handleStationChange(stationObj)"
-            clearable
-        >
-          <el-option
-              v-for="item in stationList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-          >
-          </el-option>
-        </el-select>
-      </div>
-      <div class="station">
-        项目：
-        <el-select
-            :disabled="displayDetail"
-            size="mini"
-            v-model="projectObj"
-            multiple
-            collapse-tags
-            placeholder="请选择"
-            @change="handleProjectChange(projectObj)"
-            clearable
-        >
-          <el-option
-              v-for="item in projectList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-          >
-          </el-option>
-        </el-select>
-      </div>
-      <div class="station">
-        线路：
-        <el-select
-            size="mini"
-            :disabled="displayDetail"
-            v-model="lineObj"
-            multiple
-            collapse-tags
-            placeholder="请选择"
-            clearable
-        >
-          <el-option
-              v-for="item in lineList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-          >
-          </el-option>
-        </el-select>
-      </div>
-      <div class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-              v-model="starTime"
-              :disabled="displayDetail"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-          >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-              :disabled="displayDetail"
-              v-model="endTime"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-          >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="but">
-        <el-button
-            round
-            size="mini"
-            class="buttons"
-            :disabled="displayDetail"
-            @click="gerWxssl"
-        >搜索</el-button
-        >
-        <el-button
-            round
-            size="mini"
-            class="buttons"
-            @click="dbfx"
-            :disabled="
-            chooseList.length <= 5 && chooseList.length > 1 ? false : true
-          "
-        >对标分析</el-button
-        >
-        <el-button
-            round
-            size="mini"
-            class="buttons"
-            @click="goBack"
-            v-if="displayDetail"
-        >返回</el-button
-        >
-        <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
-      </div>
-    </div>
+    <HeardSearch
+      :type="-2"
+      :hiddenWtList="true"
+      @firstRender="firstRender"
+      :buttons="[
+        { label: '搜索', callback: gerWxssl },
+        {
+          label: '对标分析',
+          callback: dbfx,
+          disabled:
+            chooseList.length <= 5 && chooseList.length > 1 ? false : true,
+        },
+      ]"
+    />
     <div class="bodys" v-if="!displayDetail">
       <div class="line">
         <div class="leftContent"><span>五项损失率</span></div>
@@ -156,231 +21,231 @@
       </div>
       <div class="economicTable" :style="{ height: echartsHeight }">
         <el-table
-            :data="tableData"
-            ref="multipleTable"
-            size="mini"
-            :height="echartsHeight"
-            :cell-style="{ padding: '4px' }"
-            :row-style="{ height: '0' }"
-            stripe
-            @selection-change="handleCurrentChange"
+          :data="tableData"
+          ref="multipleTable"
+          size="mini"
+          :height="echartsHeight"
+          :cell-style="{ padding: '4px' }"
+          :row-style="{ height: '0' }"
+          stripe
+          @selection-change="handleCurrentChange"
         >
           <el-table-column type="selection" width="55" align="center">
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="name"
-              label="名称"
-              width="150"
-              sortable
+            align="center"
+            prop="name"
+            label="名称"
+            width="150"
+            sortable
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="zhpm"
-              label="综合排名"
-              width="80"
-              sortable
+            align="center"
+            prop="zhpm"
+            label="综合排名"
+            width="80"
+            sortable
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fdlpm"
-              label="发电量排名"
-              sortable
-              width="63"
+            align="center"
+            prop="fdlpm"
+            label="发电量排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fdl"
-              label="发电量"
-              sortable
-              width="63"
+            align="center"
+            prop="fdl"
+            label="发电量"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzssdlpm"
-              label="故障损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="gzssdlpm"
+            label="故障损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzssdl"
-              label="故障损失"
-              sortable
-              width="63"
+            align="center"
+            prop="gzssdl"
+            label="故障损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxssdlpm"
-              label="检修损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="jxssdlpm"
+            label="检修损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxssdl"
-              label="检修损失"
-              sortable
-              width="63"
+            align="center"
+            prop="jxssdl"
+            label="检修损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnssdlpm"
-              label="性能损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="xnssdlpm"
+            label="性能损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnssdl"
-              label="性能损失"
-              sortable
-              width="63"
+            align="center"
+            prop="xnssdl"
+            label="性能损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xdssdlpm"
-              label="限电损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="xdssdlpm"
+            label="限电损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xdssdl"
-              label="限电损失"
-              sortable
-              width="63"
+            align="center"
+            prop="xdssdl"
+            label="限电损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slssdlpm"
-              label="受累损失排名"
-              sortable
-              width="63"
+            align="center"
+            prop="slssdlpm"
+            label="受累损失排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slssdl"
-              label="受累损失"
-              sortable
-              width="63"
+            align="center"
+            prop="slssdl"
+            label="受累损失"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fnlylpm"
-              :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
-              sortable
-              width="63"
+            align="center"
+            prop="fnlylpm"
+            :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fnlyl"
-              :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
-              sortable
-              width="63"
+            align="center"
+            prop="fnlyl"
+            :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzsslpm"
-              label="故障损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="gzsslpm"
+            label="故障损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="gzssl"
-              label="故障损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="gzssl"
+            label="故障损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxsslpm"
-              label="检修损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="jxsslpm"
+            label="检修损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="jxssl"
-              label="检修损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="jxssl"
+            label="检修损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="qflpm"
-              :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
-              sortable
-              width="63"
+            align="center"
+            prop="qflpm"
+            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="qfl"
-              :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
-              sortable
-              width="63"
+            align="center"
+            prop="qfl"
+            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnsslpm"
-              label="性能损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="xnsslpm"
+            label="性能损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="xnssl"
-              label="性能损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="xnssl"
+            label="性能损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slsslpm"
-              label="受累损失率排名"
-              sortable
-              width="63"
+            align="center"
+            prop="slsslpm"
+            label="受累损失率排名"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="slssl"
-              label="受累损失率(%)"
-              sortable
-              width="63"
+            align="center"
+            prop="slssl"
+            label="受累损失率(%)"
+            sortable
+            width="63"
           >
           </el-table-column>
           <el-table-column align="center" prop="" label="操作">
             <template v-slot="scope">
               <span
-                  @click="goDetail(scope.row)"
-                  style="cursor: pointer; color: #1c99ff"
-              >详情</span
+                @click="goDetail(scope.row)"
+                style="cursor: pointer; color: #1c99ff"
+                >详情</span
               >
             </template>
           </el-table-column>
@@ -395,10 +260,10 @@
           损失电量分析
         </div>
         <PieChart
-            :lossPower="lossPower"
-            width="100%"
-            height="20vh"
-            :showLable="false"
+          :lossPower="lossPower"
+          width="100%"
+          height="20vh"
+          :showLable="false"
         ></PieChart>
       </div>
       <div class="bar-echarts">
@@ -408,34 +273,34 @@
           五项损失
         </div>
         <BarCharts
-            :list="barList"
-            width="100%"
-            height="30vh"
-            :showLegend="true"
-            :xdate="false"
-            :colorIndex="true"
+          :list="barList"
+          width="100%"
+          height="30vh"
+          :showLegend="true"
+          :xdate="false"
+          :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
     <div v-if="displayDetail">
       <el-table
-          :data="detailTable"
-          ref="multipleTable"
-          size="mini"
-          height="88vh"
-          :cell-style="{ padding: '0px' }"
-          :row-style="{ height: '0' }"
-          stripe
-          @selection-change="handleCurrentChange"
+        :data="detailTable"
+        ref="multipleTable"
+        size="mini"
+        height="88vh"
+        :cell-style="{ padding: '0px' }"
+        :row-style="{ height: '0' }"
+        stripe
+        @selection-change="handleCurrentChange"
       >
         <el-table-column type="selection" width="55" align="center">
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="name"
-            label="风机名称"
-            width="150"
-            sortable
+          align="center"
+          prop="name"
+          label="风机名称"
+          width="150"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="zhpm" label="综合排名" sortable>
@@ -443,109 +308,109 @@
         <el-table-column align="center" prop="gzssdl" label="故障损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="jxssdlpm"
-            label="检修损失排名"
-            sortable
+          align="center"
+          prop="jxssdlpm"
+          label="检修损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="jxssdl" label="检修损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xnssdlpm"
-            label="性能损失排名"
-            sortable
+          align="center"
+          prop="xnssdlpm"
+          label="性能损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="xnssdl" label="性能损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xdssdlpm"
-            label="限电损失排名"
-            sortable
+          align="center"
+          prop="xdssdlpm"
+          label="限电损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="xdssdl" label="限电损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="slssdlpm"
-            label="受累损失排名"
-            sortable
+          align="center"
+          prop="slssdlpm"
+          label="受累损失排名"
+          sortable
         >
         </el-table-column>
         <el-table-column align="center" prop="slssdl" label="受累损失" sortable>
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="gzsslpm"
-            label="故障损失率排名"
-            sortable
+          align="center"
+          prop="gzsslpm"
+          label="故障损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="gzssl"
-            label="故障损失率(%)"
-            sortable
+          align="center"
+          prop="gzssl"
+          label="故障损失率(%)"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="jxsslpm"
-            label="检修损失率排名"
-            sortable
+          align="center"
+          prop="jxsslpm"
+          label="检修损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="jxssl"
-            label="检修损失率(%)"
-            sortable
+          align="center"
+          prop="jxssl"
+          label="检修损失率(%)"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="qflpm"
-            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
-            sortable
+          align="center"
+          prop="qflpm"
+          :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="qfl"
-            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
-            sortable
+          align="center"
+          prop="qfl"
+          :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xnsslpm"
-            label="性能损失率排名"
-            sortable
+          align="center"
+          prop="xnsslpm"
+          label="性能损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="xnssl"
-            label="性能损失率(%)"
-            sortable
+          align="center"
+          prop="xnssl"
+          label="性能损失率(%)"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="slsslpm"
-            label="受累损失率排名"
-            sortable
+          align="center"
+          prop="slsslpm"
+          label="受累损失率排名"
+          sortable
         >
         </el-table-column>
         <el-table-column
-            align="center"
-            prop="slssl"
-            label="受累损失率(%)"
-            sortable
+          align="center"
+          prop="slssl"
+          label="受累损失率(%)"
+          sortable
         >
         </el-table-column>
       </el-table>
@@ -569,17 +434,17 @@
       />
     </el-dialog> -->
     <el-dialog
-        class="dialogs"
-        width="90%"
-        top="40px"
-        v-model="dialogVisible"
-        :show-close="true"
+      class="dialogs"
+      width="90%"
+      top="40px"
+      v-model="dialogVisible"
+      :show-close="true"
     >
       <template #title>
         <div class="dialog-title">
           <img
-              class="dialog-title-img"
-              src="@assets/img/images/dialog-title.png"
+            class="dialog-title-img"
+            src="@assets/img/images/dialog-title.png"
           />
           <div class="title">对标排名分析</div>
         </div>
@@ -587,15 +452,15 @@
       <div class="dialog-body">
         <img class="dialog-img" src="@assets/img/images/dialog.png" />
         <dayinfo
-            :radarValue="radarValue"
-            :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
-            :windNum="windNum"
-            :windNum2="windNum2"
-            :windNum3="windNum3"
-            :windNum4="windNum4"
-            :windNum5="windNum5"
-            :tabs="tabs"
-            :analyisDialog="analyisDialog"
+          :radarValue="radarValue"
+          :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
+          :windNum="windNum"
+          :windNum2="windNum2"
+          :windNum3="windNum3"
+          :windNum4="windNum4"
+          :windNum5="windNum5"
+          :tabs="tabs"
+          :analyisDialog="analyisDialog"
         />
       </div>
     </el-dialog>
@@ -603,6 +468,7 @@
 </template>
 
 <script>
+import HeardSearch from "@com/heardSearch/index.vue";
 import dayjs from "dayjs";
 import { companys } from "@/api/curveAnalyse";
 import {
@@ -618,12 +484,14 @@ import dayinfo from "../compontent/dayinfo.vue";
 export default {
   name: "intervalBenchmarking", //场际对标
   components: {
+    HeardSearch,
     PieChart,
     BarCharts,
     dayinfo,
   },
   data() {
     return {
+      isFirstLoad: true,
       company: "",
       companyOptions: [],
       stationObj: [],
@@ -970,11 +838,11 @@ export default {
       });
       this.radarValue = radarValue;
       var analyis = [],
-          gzssdl = [],
-          jxssdl = [],
-          xnssdl = [],
-          xdssdl = [],
-          slssdl = [];
+        gzssdl = [],
+        jxssdl = [],
+        xnssdl = [],
+        xdssdl = [],
+        slssdl = [];
       data.forEach((item, index) => {
         gzssdl.push({
           text: item.name,
@@ -998,38 +866,50 @@ export default {
         });
       });
       analyis.push(
-          {
-            title: "故障损失电量",
-            yAxisIndex: 0,
-            value: gzssdl,
-          },
-          {
-            title: "检修损失电量",
-            yAxisIndex: 0,
-            value: jxssdl,
-          },
-          {
-            title: "性能损失电量",
-            yAxisIndex: 0,
-            value: xnssdl,
-          },
-          {
-            title: "限电损失电量",
-            yAxisIndex: 0,
-            value: xdssdl,
-          },
-          {
-            title: "受累损失电量",
-            yAxisIndex: 0,
-            value: slssdl,
-          }
+        {
+          title: "故障损失电量",
+          yAxisIndex: 0,
+          value: gzssdl,
+        },
+        {
+          title: "检修损失电量",
+          yAxisIndex: 0,
+          value: jxssdl,
+        },
+        {
+          title: "性能损失电量",
+          yAxisIndex: 0,
+          value: xnssdl,
+        },
+        {
+          title: "限电损失电量",
+          yAxisIndex: 0,
+          value: xdssdl,
+        },
+        {
+          title: "受累损失电量",
+          yAxisIndex: 0,
+          value: slssdl,
+        }
       );
       this.analyisDialog = analyis;
     },
+    firstRender(searchOptions) {
+      this.tabIndex = searchOptions.category;
+      this.company = searchOptions.orgId;
+      this.starTime = searchOptions.dateRange?.[0] || "";
+      this.endTime = searchOptions.dateRange?.[1] || "";
+      this.stationObj = [searchOptions.station];
+      this.projectObj = [searchOptions.project];
+      this.lineObj = [searchOptions.line];
+      if (this.isFirstLoad) {
+        this.isFirstLoad = false;
+        this.gerWxssl();
+      }
+    },
   },
   watch: {
     screenHeight(val) {
-      console.log(val);
       this.screenHeight = val;
       if (val > 1100) {
         this.echartsHeight = "58vh";
@@ -1079,7 +959,7 @@ export default {
       background-color: #0c3378;
       color: #fff;
     }
-     .disabled {
+    .disabled {
       pointer-events: none;
     }
   }

src/views/layout/economicsOperation/benchmarkingManagement/performanceRankingList/decision1Mx.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="home-body" style="height: 93vh">
-    <div class="title">
+    <HeardSearch
+      :type="-2"
+      :hiddenWtList="true"
+      @firstRender="firstRender"
+      :buttons="[
+        { label: '明细', callback: mxClick },
+        { label: '搜索', callback: getPerformance },
+      ]"
+    />
+    <div class="title" v-if="false">
       <el-select
-          size="mini"
-          v-model="company"
-          placeholder="请选择"
-          @change="handleCompanyChange(company)"
+        size="mini"
+        v-model="company"
+        placeholder="请选择"
+        @change="handleCompanyChange(company)"
       >
         <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+          v-for="item in companyOptions"
+          :key="item.id"
+          :label="item.aname"
+          :value="item.id"
         >
         </el-option>
       </el-select>
       <div class="tabCut">
         <div
-            @click="tabClick(val.id)"
-            :class="tabIndex === val.id ? 'active' : ''"
-            v-for="val in tabOptions"
-            :key="val.id"
+          @click="tabClick(val.id)"
+          :class="tabIndex === val.id ? 'active' : ''"
+          v-for="val in tabOptions"
+          :key="val.id"
         >
           <span>{{ val.name }}</span>
         </div>
@@ -29,17 +38,17 @@
       <div class="station">
         场站：
         <el-select
-            size="mini"
-            v-model="stationObj"
-            placeholder="请选择"
-            @change="handleStationChange(stationObj)"
-            clearable
+          size="mini"
+          v-model="stationObj"
+          placeholder="请选择"
+          @change="handleStationChange(stationObj)"
+          clearable
         >
           <el-option
-              v-for="item in stationList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
+            v-for="item in stationList"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
           >
           </el-option>
         </el-select>
@@ -47,17 +56,17 @@
       <div class="station">
         项目：
         <el-select
-            size="mini"
-            v-model="projectObj"
-            placeholder="请选择"
-            @change="handleProjectChange(projectObj)"
-            clearable
+          size="mini"
+          v-model="projectObj"
+          placeholder="请选择"
+          @change="handleProjectChange(projectObj)"
+          clearable
         >
           <el-option
-              v-for="item in projectList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
+            v-for="item in projectList"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
           >
           </el-option>
         </el-select>
@@ -66,10 +75,10 @@
         线路：
         <el-select size="mini" v-model="lineObj" placeholder="请选择" clearable>
           <el-option
-              v-for="item in lineList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
+            v-for="item in lineList"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
           >
           </el-option>
         </el-select>
@@ -79,11 +88,11 @@
         开始日期
         <div class="search-input">
           <el-date-picker
-              v-model="starTime"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
+            v-model="starTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
           >
           </el-date-picker>
         </div>
@@ -92,36 +101,36 @@
         结束日期
         <div class="search-input">
           <el-date-picker
-              v-model="endTime"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
+            v-model="endTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
           >
           </el-date-picker>
         </div>
       </div>
       <div class="but">
         <el-button round size="mini" class="buttons" @click="mxClick"
-        >搜索</el-button
+          >搜索</el-button
         >
         <el-button
-            round
-            size="mini"
-            class="buttons active"
-            @click="getPerformance"
-        >明细</el-button
+          round
+          size="mini"
+          class="buttons active"
+          @click="getPerformance"
+          >明细</el-button
         >
         <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
       </div>
     </div>
     <div class="tabCut1">
       <div
-          class="tabCut-item"
-          @click="typeClick(val.id)"
-          :class="typeIndex === val.id ? 'active' : ''"
-          v-for="val in typeOptions"
-          :key="val.id"
+        class="tabCut-item"
+        @click="typeClick(val.id)"
+        :class="typeIndex === val.id ? 'active' : ''"
+        v-for="val in typeOptions"
+        :key="val.id"
       >
         <span>{{ val.name }}</span>
       </div>
@@ -129,42 +138,42 @@
     <div class="performance" style="height: 90vh">
       <div class="economicTable" style="height: 86vh">
         <el-table
-            :data="tableData"
-            size="mini"
-            :cell-style="{ padding: '6px' }"
-            :row-style="{ height: '0px' }"
-            stripe
-            @header-click="onHeaderClick"
+          :data="tableData"
+          size="mini"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '0px' }"
+          stripe
+          @header-click="onHeaderClick"
         >
           <el-table-column align="center" prop="" label="" width="1000">
           </el-table-column>
           <el-table-column align="center" prop="name" label="名称" width="180">
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="llfdl"
-              label="理论发电量"
-              width="100"
+            align="center"
+            prop="llfdl"
+            label="理论发电量"
+            width="100"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="sjfdl"
-              label="实际发电量"
-              width="100"
+            align="center"
+            prop="sjfdl"
+            label="实际发电量"
+            width="100"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="fnlly"
-              :label="tabIndex === -1 ? '风能利用率%' : '光能利用率%'"
-              width="100"
+            align="center"
+            prop="fnlly"
+            :label="tabIndex === -1 ? '风能利用率%' : '光能利用率%'"
+            width="100"
           >
           </el-table-column>
           <el-table-column
-              align="center"
-              prop="speed"
-              :label="tabIndex === -1 ? '风速' : '光照'"
+            align="center"
+            prop="speed"
+            :label="tabIndex === -1 ? '风速' : '光照'"
           >
           </el-table-column>
           <el-table-column align="center" prop="fjhjx1" label="故障损失">
@@ -183,7 +192,11 @@
           </el-table-column>
           <el-table-column align="center" prop="xd2" label="限电停机">
           </el-table-column>
-          <el-table-column align="center" prop="xn1"  :label="tabIndex === -1 ? '待风损失' : '待机损失'">
+          <el-table-column
+            align="center"
+            prop="xn1"
+            :label="tabIndex === -1 ? '待风损失' : '待机损失'"
+          >
           </el-table-column>
           <el-table-column align="center" prop="xn2" label="手动停机">
           </el-table-column>
@@ -195,13 +208,13 @@
       </div>
       <div class="left">
         <bar-line-chart
-            :height="height"
-            v-if="showDisplay"
-            :color="colors"
-            :bardata="bardata"
-            :lineData="lineData"
-            lineName="理论发电量"
-            :mxFlag="true"
+          :height="height"
+          v-if="showDisplay"
+          :color="colors"
+          :bardata="bardata"
+          :lineData="lineData"
+          lineName="理论发电量"
+          :mxFlag="true"
         />
         <div class="lyl" :style="{ height: tableData.length * 38 + 'px' }">
           <div class="lyl-item" v-for="(item, index) in tableData" :key="index">
@@ -216,6 +229,7 @@
 </template>
 
 <script>
+import HeardSearch from "@com/heardSearch/index.vue";
 import BarLineChart from "../compontent/bar-line-chart.vue";
 import { companys } from "@/api/curveAnalyse";
 import dayjs from "dayjs";
@@ -228,10 +242,12 @@ import {
 export default {
   name: "performanceRankingList", //风机绩效榜
   components: {
+    HeardSearch,
     BarLineChart,
   },
   data() {
     return {
+      isFirstLoad: true,
       company: "",
       companyOptions: [],
       stationObj: "",
@@ -384,12 +400,12 @@ export default {
           this.getStation(res.data[0].id);
         } else {
           (this.company = ""),
-              (this.stationObj = ""),
-              (this.stationList = []),
-              (this.projectObj = ""),
-              (this.projectList = []),
-              (this.lineObj = ""),
-              (this.lineList = []);
+            (this.stationObj = ""),
+            (this.stationList = []),
+            (this.projectObj = ""),
+            (this.projectList = []),
+            (this.lineObj = ""),
+            (this.lineList = []);
         }
       });
     },
@@ -403,11 +419,11 @@ export default {
           this.getProject(res.data[0].id);
         } else {
           (this.stationObj = ""),
-              (this.stationList = []),
-              (this.projectObj = ""),
-              (this.projectList = []),
-              (this.lineObj = ""),
-              (this.lineList = []);
+            (this.stationList = []),
+            (this.projectObj = ""),
+            (this.projectList = []),
+            (this.lineObj = ""),
+            (this.lineList = []);
         }
       });
     },
@@ -420,9 +436,9 @@ export default {
           this.getLine(res.data[0].id);
         } else {
           (this.projectObj = ""),
-              (this.projectList = []),
-              (this.lineObj = ""),
-              (this.lineList = []);
+            (this.projectList = []),
+            (this.lineObj = ""),
+            (this.lineList = []);
         }
       });
     },
@@ -453,11 +469,11 @@ export default {
     tabClick(data) {
       this.tabIndex = data;
       (this.stationObj = ""),
-          (this.stationList = []),
-          (this.projectObj = ""),
-          (this.projectList = []),
-          (this.lineObj = ""),
-          (this.lineList = []);
+        (this.stationList = []),
+        (this.projectObj = ""),
+        (this.projectList = []),
+        (this.lineObj = ""),
+        (this.lineList = []);
       this.getStation(this.company);
       this.getPerformance();
     },
@@ -480,23 +496,23 @@ export default {
       }).then((res) => {
         if (res.data) {
           var name = [],
-              data = [],
-              llfdl = [],
-              legend = [
-                "实际电量",
-                "故障损失",
-                "故障受累",
-                "检修损失",
-                "检修受累",
-                "电网受累",
-                "天气受累",
-                "限电降出",
-                "限电停机",
-                "待风损失",
-                "手动停机",
-                "正常发电",
-                "缺陷降出",
-              ];
+            data = [],
+            llfdl = [],
+            legend = [
+              "实际电量",
+              "故障损失",
+              "故障受累",
+              "检修损失",
+              "检修受累",
+              "电网受累",
+              "天气受累",
+              "限电降出",
+              "限电停机",
+              "待风损失",
+              "手动停机",
+              "正常发电",
+              "缺陷降出",
+            ];
           res.data.forEach((item, index) => {
             name.push(item.name);
             llfdl.push(item.llfdl);
@@ -551,9 +567,21 @@ export default {
     },
     mxClick() {
       this.$router.push(
-          "/economicsOperation/benchmarkingManagement/performanceRankingList"
+        "/economicsOperation/benchmarkingManagement/performanceRankingList"
       );
     },
+    firstRender(searchOptions) {
+      this.tabIndex = searchOptions.category;
+      this.getype = searchOptions.category;
+      this.companyid = searchOptions.orgId;
+      this.beginDate = searchOptions.dateRange?.[0] || "";
+      this.endDate = searchOptions.dateRange?.[1] || "";
+      this.stationObj = searchOptions.station;
+      if (this.isFirstLoad) {
+        this.isFirstLoad = false;
+        this.getPerformance();
+      }
+    },
   },
 };
 </script>
@@ -695,9 +723,9 @@ export default {
       position: absolute;
       width: 1px;
       background-image: linear-gradient(
-          #3a4043 0%,
-          #3a4043 40%,
-          transparent 50%
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
       );
       background-size: 1px 9px;
       margin-top: 45px;

src/views/layout/economicsOperation/benchmarkingManagement/performanceRankingList/index.vue

@@ -6,141 +6,36 @@
       :hiddenSearch="true"
       @firstRender="firstRender"
     />
-    <div class="title">
-      <el-select v-model="tabIndex" placeholder="请选择">
-        <el-option
-          v-show="item.id"
-          v-for="(item, index) in tabOptions"
-          :key="index"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <el-select
-        size="mini"
-        v-model="company"
-        placeholder="请选择"
-        @change="handleCompanyChange(company)"
-      >
-        <el-option
-          v-for="item in companyOptions"
-          :key="item.id"
-          :label="item.aname"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <!-- <div class="tabCut">
-        <div
-            @click="tabClick(val.id)"
-            :class="tabIndex === val.id ? 'active' : ''"
-            v-for="val in tabOptions"
-            :key="val.id"
-        >
-          <span>{{ val.name }}</span>
-        </div>
-      </div> -->
-
-      <div class="station">
-        场站：
-        <el-select
-          size="mini"
-          v-model="stationObj"
-          placeholder="请选择"
-          @change="handleStationChange(stationObj)"
-          clearable
-        >
-          <el-option
-            v-for="item in stationList"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-      </div>
-      <template v-if="tabIndex === -1">
-        <div class="station">
-          项目：
-          <el-select
-            size="mini"
-            v-model="projectObj"
-            placeholder="请选择"
-            @change="handleProjectChange(projectObj)"
-            clearable
-          >
-            <el-option
-              v-for="item in projectList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </div>
-        <div class="station">
-          线路：
-          <el-select
-            size="mini"
-            v-model="lineObj"
-            placeholder="请选择"
-            clearable
-            @change="typeClick('1')"
-          >
-            <el-option
-              v-for="item in lineList"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </div>
-      </template>
-
-      <div class="dates">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="starTime"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
-            @change="typeClick('1')"
-          >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="dates">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="endTime"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
-            @change="typeClick('1')"
-          >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="but">
-        <el-button
-          round
-          size="mini"
-          class="buttons active"
-          @click="getPerformance"
-          >搜索</el-button
-        >
-        <el-button round size="mini" class="buttons" @click="mxClick"
-          >明细</el-button
-        >
-      </div>
-    </div>
-
+    <!-- 新增搜索组件，属性描述： -->
+    <!-- type: 默认选中的类别，-1为风电, -2为光伏 -->
+    <!-- hiddenStation: 是否隐藏选择场站下拉框，默认 false -->
+    <!-- hiddenProject: 是否隐藏选择项目下拉框，默认 false -->
+    <!-- hiddenLine: 是否隐藏选择线路下拉框，默认 false -->
+    <!-- hiddenWtList: 是否隐藏选择设备下拉框，默认 false -->
+    <!--                                                -->
+    <!-- buttons: 展示在搜索组件右侧的按钮，以数组方式表示，其中数组每一项属性描述： -->
+    <!--     label: 按钮上显示的文本 -->
+    <!--     callback: 按钮调用的函数 -->
+    <!--     disabled: 按钮是否禁用 -->
+    <!--     hide: 按钮是否隐藏 -->
+    <!--                                                 -->
+    <!-- firstRender: 接受组件值变化的函数，返回的值为一个对象，对象的属性说明: -->
+    <!--     category: 当前选中的类别 -->
+    <!--     orgId: 当前选中的机构 -->
+    <!--     station: 当前选中的场站 -->
+    <!--     project: 当前选中的项目 -->
+    <!--     line: 当前选中的线路 -->
+    <!--     wtId: 当前选中的设备 -->
+    <!--     dateRange: 当前选中的日期区间 -->
+    <!--                                                 -->
+    <HeardSearch
+      :type="-2"
+      @firstRender="firstRender"
+      :buttons="[
+        { label: '搜索', callback: getPerformance },
+        { label: '明细', callback: mxClick },
+      ]"
+    />
     <div class="tabCut1" v-if="tabIndex === -1">
       <div
         class="tabCut-item"
@@ -223,6 +118,7 @@
 
 <script>
 import BarLineChart from "../compontent/bar-line-chart.vue";
+import HeardSearch from "@com/heardSearch/index.vue";
 import { companys } from "@/api/curveAnalyse";
 import dayjs from "dayjs";
 import {
@@ -235,9 +131,11 @@ export default {
   name: "performanceRankingList", //风机绩效榜
   components: {
     BarLineChart,
+    HeardSearch,
   },
   data() {
     return {
+      isFirstLoad: true,
       barColor: [
         "#1c99ff",
         "#e17e23",
@@ -507,13 +405,25 @@ export default {
             this.showDisplay = true;
           }, 10);
           this.tableData = res.data;
-          console.log(111, this.tableData);
         }
       });
     },
     mxClick() {
       this.$router.push("/benchmarkingManagement/decision1Mx");
     },
+    firstRender(searchOptions) {
+      console.log(1111, searchOptions);
+      this.tabIndex = searchOptions.category;
+      this.getype = searchOptions.category;
+      this.companyid = searchOptions.orgId;
+      this.beginDate = searchOptions.dateRange?.[0] || "";
+      this.endDate = searchOptions.dateRange?.[1] || "";
+      this.stationObj = searchOptions.station;
+      if (this.isFirstLoad) {
+        this.isFirstLoad = false;
+        this.getPerformance();
+      }
+    },
   },
 };
 </script>

src/views/layout/economicsOperation/index.vue

@@ -61,15 +61,15 @@ export default {
               path: "/economicsOperation/benchmarkingManagement/wiringBenchmarking",
             },
             {
-              titleName: "单机对标(风)",
+              titleName: "设备对标",
               icon: "",
               path: "/economicsOperation/benchmarkingManagement/singleMachineBenchmarking",
             },
-            {
-              titleName: "值际对标",
-              icon: "",
-              path: "/economicsOperation/benchmarkingManagement/valueBenchmarking",
-            },
+            // {
+            //   titleName: "值际对标",
+            //   icon: "",
+            //   path: "/economicsOperation/benchmarkingManagement/valueBenchmarking",
+            // },
             // {
             //   titleName: '性能对标',
             //   icon: '',