样式修改，功能修改

src/views/IntegratedAlarm/alarmConfig/customConfig/index.vue

@@ -144,15 +144,7 @@
           v-for="item in state.tableHeader"
           :key="item.code"
           :label="item.title"
-          :align="
-            item.code == 'description' ||
-            item.code == 'expression' ||
-            item.code == 'name' ||
-            item.code == 'modelId' ||
-            item.code == 'relatedPartsName'
-              ? 'left'
-              : 'center'
-          "
+          align="center"
           :prop="item.code"
           :minWidth="item.width ? item.width : 60"
           show-overflow-tooltip

src/views/IntegratedAlarm/alarmConfig/historyConfig/index.vue

@@ -100,13 +100,7 @@
             : state.tableHeader1"
           :key="item.code"
           :label="item.title"
-          :align="
-            item.code == 'description' ||
-            item.code == 'modelId' ||
-            item.code == 'componentsName'
-              ? 'left'
-              : 'center'
-          "
+          align="center"
           :prop="item.code"
           show-overflow-tooltip
         >

src/views/IntegratedAlarm/alarmConfig/logs/index.vue

@@ -45,27 +45,27 @@
           prop="ruleName"
           label="规则名称"
           width="300"
-          align="left"
+          align="center"
         />
         <el-table-column
           prop="ruleType"
           label="规则类型"
           width="120"
-          align="left"
+          align="center"
         />
         <el-table-column
           prop="stationName"
           label="场站名称"
           width="140"
-          align="left"
+          align="center"
         />
         <el-table-column
           prop="modelId"
           label="风机型号"
           width="200"
-          align="left"
+          align="center"
         />
-        <el-table-column label="更改内容" show-overflow-tooltip align="left">
+        <el-table-column label="更改内容" show-overflow-tooltip align="center">
           <template #default="scope">
             <div v-if="scope.row.infoList.length">
               <div v-for="item in scope.row.infoList" :key="item">

src/views/IntegratedAlarm/earlyWarning/index.vue

@@ -98,7 +98,7 @@
         <el-table-column
           label="排查步骤"
           prop="troubleMethod"
-          align="left"
+          align="center"
           show-overflow-tooltip
         >
           <template #default="scope">
@@ -115,7 +115,7 @@
         <el-table-column
           label="检修方案"
           prop="processMethod"
-          align="left"
+          align="center"
           show-overflow-tooltip
         >
           <template #default="scope">
@@ -132,7 +132,7 @@
         <el-table-column
           label="所需工具"
           prop="tools"
-          align="left"
+          align="center"
           width="120px"
           show-overflow-tooltip
         >
@@ -150,7 +150,7 @@
         <el-table-column
           label="备品备件"
           prop="spareParts"
-          align="left"
+          align="center"
           width="120px"
           show-overflow-tooltip
         >

src/views/economicsOperation/benchmarkingManagement/compontent/dayinfo.vue

@@ -41,34 +41,34 @@
           stripe
           @selection-change="handleCurrentChange"
         >
-          <el-table-column align="center" prop="name" label="场站" width="200">
+          <el-table-column align="center" prop="name" label="场站" width="220">
           </el-table-column>
-          <el-table-column align="right" header-align="center" prop="windData1" :label="windNum">
+          <el-table-column align="center" header-align="center" prop="windData1" :label="windNum">
           </el-table-column>
           <el-table-column
             v-if="windNum2"
-            align="right" header-align="center"
+            align="center" header-align="center"
             prop="windData2"
             :label="windNum2"
           >
           </el-table-column>
           <el-table-column
             v-if="windNum3"
-            align="right" header-align="center"
+            align="center" header-align="center"
             prop="windData3"
             :label="windNum3"
           >
           </el-table-column>
           <el-table-column
             v-if="windNum4"
-            align="right" header-align="center"
+            align="center" header-align="center"
             prop="windData4"
             :label="windNum4"
           >
           </el-table-column>
           <el-table-column
             v-if="windNum5"
-            align="right" header-align="center"
+            align="center" header-align="center"
             prop="windData5"
             :label="windNum5"
           >

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

@@ -137,7 +137,7 @@
             :key="item.code"
             :prop="item.code"
             :label="item.name"
-            :width="item.name.length == 4 ? 50 : 80"
+            width="90"
             show-overflow-tooltip
             sortable
           >
@@ -228,10 +228,10 @@
           :key="item.code"
           :prop="item.code"
           :label="item.name"
-          :width="item.name.length == 4 ? 58 : 88"
+          width="90"
           show-overflow-tooltip
           header-align="center"
-          :align="item.align ? item.align : 'center'"
+          align="center"
           sortable
         />
       </el-table>

src/views/economicsOperation/benchmarkingManagement/projectBenchmarking/index.vue

@@ -158,7 +158,7 @@
             :key="item.code"
             :prop="item.code"
             :label="item.name"
-            :width="item.name.length == 4 ? 55 : 75"
+            width="90"
             show-overflow-tooltip
             sortable
             ><template #header="scope">
@@ -248,10 +248,10 @@
           :key="item.code"
           :prop="item.code"
           :label="item.name"
-          :width="item.name.length == 4 ? 56 : 88"
+          width="90"
           show-overflow-tooltip
           header-align="center"
-          :align="item.align ? item.align : 'center'"
+          align="center"
           sortable
         />
       </el-table>

src/views/economicsOperation/benchmarkingManagement/siteBenchmarking/index.vue

@@ -138,7 +138,7 @@
             :key="item.code"
             :prop="item.code"
             :label="item.name"
-            :width="item.name.length == 4 ? 55 : 69"
+            width="90"
             show-overflow-tooltip
             sortable
           >
@@ -233,8 +233,8 @@
           :prop="item.code"
           :label="item.name"
           header-align="center"
-          :align="item.align ? item.align : 'center'"
-          :width="item.name.length == 4 ? 57 : 88"
+          align="center"
+          width="90"
           show-overflow-tooltip
           sortable
         >

src/views/economicsOperation/benchmarkingManagement/wiringBenchmarking/index.vue

@@ -179,7 +179,7 @@
             :key="item.code"
             :prop="item.code"
             :label="item.name"
-            :width="item.name.length == 4 ? 55 : 75"
+            width="90"
             show-overflow-tooltip
             sortable
           >
@@ -274,10 +274,10 @@
           :key="item.code"
           :prop="item.code"
           :label="item.name"
-          :width="item.name.length == 4 ? 58 : 88"
+          width="90"
           show-overflow-tooltip
           header-align="center"
-          :align="item.align ? item.align : 'center'"
+          align="center"
           sortable
         />
       </el-table>

src/views/economicsOperation/thematicAnalysis/MTBF/index.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="parcel-box">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div
+          class="newspan"
+          v-for="(item, index) of optionData"
+          :key="index"
+          :class="{ active: cur == index }"
+          @click="handleOpen(item, index)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
     <div class="search">
       <div class="search-left">
         <!-- <el-select
@@ -41,7 +54,7 @@
           >搜 索</el-button
         >
       </div>
-      <div class="search-right">
+      <!-- <div class="search-right">
         <img class="select-back" src="@assets/imgs/select-back.png" />
         <div class="title-select">
           <el-select
@@ -59,7 +72,7 @@
             </el-option>
           </el-select>
         </div>
-      </div>
+      </div> -->
       <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
@@ -242,6 +255,8 @@ export default {
       company: "",
       companyOptions: [],
       searchYear: dayjs().format("YYYY"),
+      cur: 0,
+      optionData: ["MTBF", "MTTR"],
       selectList: [
         {
           name: "MTBF",
@@ -293,6 +308,12 @@ export default {
     // isNumber(val) {
     //     return typeof val === "number" && !isNaN(val);
     // },
+    // tab
+    handleOpen(val, index) {
+        this.cur = index;
+        this.selectValue = val;
+        this.search();
+    },
     search() {
       this.BASE.showLoading();
       switch (this.selectValue) {
@@ -377,6 +398,55 @@ export default {
   padding: 0 10px;
   box-sizing: border-box;
   height: 100%;
+  .newspan {
+    line-height: 30px;
+    cursor: pointer;
+    padding: 0 1vw;
+    margin: 0 2px;
+    color: #9ca5a8;
+    transition: color 0.2s ease-in-out;
+    position: relative;
+    }
+    .newspan:hover {
+    background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+    );
+    color: white;
+    position: relative;
+    }
+    .newspan:hover::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 0.463vh;
+    border: 0.093vh solid #05bb4c;
+    border-top: 0;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    }
+    .active {
+    background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+    );
+    color: white;
+    position: relative;
+    }
+    .active::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border: 1px solid #05bb4c;
+    border-top: 0;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    }
   .search {
     display: flex;
     flex-direction: row;
@@ -462,7 +532,7 @@ export default {
     border-radius: 5px;
   }
   .economicTable {
-    height: calc(100% - 32px);
+    height: calc(100% - 62px);
     .el-table__body-wrapper {
       .columnFlex {
         display: flex;
@@ -504,7 +574,7 @@ export default {
   }
 
   .echarts {
-    padding-top: 20px;
+    // padding-top: 20px;
     padding-bottom: 15px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;

src/views/economicsOperation/thematicAnalysis/failure/index.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="parcel-box">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div
+          class="newspan"
+          v-for="(item, index) of optionData"
+          :key="index"
+          :class="{ active: cur == index }"
+          @click="handleOpen(item, index)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
     <div class="search">
       <div class="search-left">
         <!-- <el-select
@@ -41,7 +54,7 @@
           >搜 索</el-button
         >
       </div>
-      <div class="search-right">
+      <!-- <div class="search-right">
         <img class="select-back" src="@assets/imgs/select-back.png" />
         <div class="title-select">
           <el-select
@@ -59,7 +72,7 @@
             </el-option>
           </el-select>
         </div>
-      </div>
+      </div> -->
       <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
@@ -251,6 +264,8 @@ export default {
       companyOptions: [],
       searchYear: dayjs().format("YYYY"),
       selectValue: "故障损失率",
+      cur: 0,
+      optionData: ["故障损失率", "检修损失率", "限电损失率", "受累损失率", "性能损失率"],
       selectList: [
         {
           name: "故障损失率",
@@ -310,6 +325,12 @@ export default {
     isNumber(val) {
       return typeof val === "number" && !isNaN(val);
     },
+    // tab
+    handleOpen(val, index) {
+        this.cur = index;
+        this.selectValue = val;
+        this.search();
+    },
     search() {
       this.BASE.showLoading();
       switch (this.selectValue) {
@@ -426,6 +447,55 @@ export default {
   padding: 0 10px;
   box-sizing: border-box;
   height: 100%;
+  .newspan {
+    line-height: 30px;
+    cursor: pointer;
+    padding: 0 1vw;
+    margin: 0 2px;
+    color: #9ca5a8;
+    transition: color 0.2s ease-in-out;
+    position: relative;
+    }
+    .newspan:hover {
+    background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+    );
+    color: white;
+    position: relative;
+    }
+    .newspan:hover::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 0.463vh;
+    border: 0.093vh solid #05bb4c;
+    border-top: 0;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    }
+    .active {
+    background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+    );
+    color: white;
+    position: relative;
+    }
+    .active::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border: 1px solid #05bb4c;
+    border-top: 0;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    }
   .search {
     display: flex;
     flex-direction: row;
@@ -511,7 +581,7 @@ export default {
     border-radius: 5px;
   }
   .economicTable {
-    height: calc(100% - 32px);
+    height: calc(100% - 62px);
     .el-table__body-wrapper {
       .columnFlex {
         display: flex;
@@ -553,7 +623,6 @@ export default {
   }
 
   .echarts {
-    margin-top: 20px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;

src/views/economicsOperation/thematicAnalysis/generation/index.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="parcel-box">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div
+          class="newspan"
+          v-for="(item, index) of optionData"
+          :key="index"
+          :class="{ active: cur == index }"
+          @click="handleOpen(item, index)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
     <div class="search">
       <div class="search-left">
         <!-- <el-select
@@ -41,7 +54,7 @@
           >搜 索</el-button
         >
       </div>
-      <div class="search-right">
+      <!-- <div class="search-right">
         <img class="select-back" src="@assets/imgs/select-back.png" />
         <div class="title-select">
           <el-select
@@ -59,7 +72,7 @@
             </el-option>
           </el-select>
         </div>
-      </div>
+      </div> -->
       <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
@@ -277,6 +290,8 @@ export default {
       company: "",
       companyOptions: [],
       searchYear: dayjs().format("YYYY"),
+      cur: 0,
+      optionData: ["发电量", "上网电量", "购网电量", "综合场用电量", "利用小时"],
       selectList: [
         {
           name: "发电量",
@@ -455,15 +470,64 @@ export default {
   padding: 0 10px;
   box-sizing: border-box;
   height: 100%;
+  .newspan {
+    line-height: 30px;
+    cursor: pointer;
+    padding: 0 1vw;
+    margin: 0 2px;
+    color: #9ca5a8;
+    transition: color 0.2s ease-in-out;
+    position: relative;
+    }
+    .newspan:hover {
+    background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+    );
+    color: white;
+    position: relative;
+    }
+    .newspan:hover::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 0.463vh;
+    border: 0.093vh solid #05bb4c;
+    border-top: 0;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    }
+    .active {
+    background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+    );
+    color: white;
+    position: relative;
+    }
+    .active::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border: 1px solid #05bb4c;
+    border-top: 0;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    }
   .data-bodys {
     display: flex;
     flex-direction: column;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
-    height: calc(100% - 58px - 350px - 20px);
+    height: calc(100% - 58px - 350px - 40px);
   }
   .economicTable {
-    height: calc(100% - 32px);
+    height: calc(100% - 62px);
     .el-table__body-wrapper {
       .columnFlex {
         display: flex;
@@ -598,7 +662,7 @@ export default {
   }
 
   .echarts {
-    margin-top: 20px;
+    // margin-top: 20px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;