对标管理页面自适应，同步安全监视代码

src/api/curveAnalyse.js

@@ -170,3 +170,19 @@ export function lyxsList(data) {
       method: "get",
     });
 }
+//专题分析-缺陷处理及时率
+export function qxcljslList(data) {
+    return request({
+      baseURL: process.env.VUE_APP_Economy,
+      url: `/economy/timeliness?companys=${data.companys}&type=${data.type}&wpids=${data.wpids}&starttime=${data.starttime}&endtime=${data.endtime}`,
+      method: "get",
+    });
+}
+//专题分析-清洗提升率
+export function qxtslList(data) {
+    return request({
+      baseURL: process.env.VUE_APP_Economy,
+      url: `/economy/cleaningrate?companys=${data.companys}&type=${data.type}&wpids=${data.wpids}&starttime=${data.starttime}&endtime=${data.endtime}`,
+      method: "get",
+    });
+}

src/assets/css/common.css

@@ -24,17 +24,17 @@
 
 .home_card {
   /* width: 412px;
-    height: 240px; */
+      height: 240px; */
   /* position: absolute; */
   /* top: 80px;
-    right: 40px; */
+      right: 40px; */
   /* color: #fff;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 8px;
-    padding: 20px 10px;
-    backdrop-filter: blur(5px);
-    z-index: 110;
-    font-size: 16px; */
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      padding: 20px 10px;
+      backdrop-filter: blur(5px);
+      z-index: 110;
+      font-size: 16px; */
   /* border: 1px solid #145387; */
 }
 
@@ -153,6 +153,30 @@
   border: 1px solid #094493 !important;
   background: #090e19 !important;
 }
+.elDatePickers .el-picker-panel {
+  border: 1px solid #094493;
+  border-image: linear-gradient(
+      0deg,
+      rgba(28, 156, 255, 0),
+      rgba(28, 156, 255, 0.6),
+      rgba(28, 156, 255, 0.8)
+    )
+    1 1;
+  background: rgba(29, 34, 43, 0.9) !important;
+  box-shadow: 0 0 22px rgba(0, 70, 199, 0.2) inset !important;
+}
+
+.elDatePickers .el-date-table .disabled div {
+  background: rgba(29, 34, 43, 0.9) !important;
+  box-shadow: 0 0 22px rgba(0, 70, 199, 0.2) inset !important;
+}
+.elDatePickers .el-picker__popper {
+  background: transparent !important;
+}
+.elDatePickers .el-picker-panel__footer {
+  border-color: transparent;
+  background: transparent !important;
+}
 
 .elDatePicker .el-date-table th {
   border-bottom: 1px solid #2a374f;
@@ -363,7 +387,7 @@ background-color: rgba(30,90,163, .5);
 } */
 .el-select .el-input__inner {
   /* width: 190px;
-    max-width: 190px; */
+      max-width: 190px; */
   height: 25px;
   background: rgba(67, 81, 107, 0.2);
   border: 1px solid #2a374f;

src/components/einput/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-input class="einput" v-model="value" :placeholder="placeholder" :clearable="clearable" :size="size"
+    @blur="blur" @keyup="e => emit('blur', e)" :suffix-icon="(value == '' || !isFocus) ? suffixIcon : ''" @focus="focus"
+    :class="{'is-efocus': isFocus}"
+    />
+</template>
+<script setup>
+import { defineEmits, defineProps, ref, watch,  } from 'vue'
+
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  clearable: {},
+  size: {},
+  suffixIcon: {}
+})
+const emit = defineEmits(['blur', 'update:modelValue', 'keyup', 'focus'])
+
+const value = ref(props.modelValue)
+
+// 内部修改 提交事件给父
+watch(value, (v) => {
+  emit('update:modelValue', v)
+})
+// 外部修改 同步给当前
+watch(() => props.modelValue, v => {
+  value.value = v
+})
+const isFocus = ref(false)
+
+function focus(e){
+  isFocus.value = true
+  emit('focus', e)
+}
+
+function blur(e) {
+  isFocus.value = false
+  emit('blur', e)
+}
+
+</script>
+<style lang="less">
+.einput {
+  &.el-input {
+    &.is-efocus::after{
+      background: linear-gradient(to right, #1C6CFF33, #1C6CFFb2);
+    }
+    &::after {
+      width: 28px;
+      height: 26px;
+      content: '';
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      border-radius: 0 3px 3px 0;
+      background: linear-gradient(to right, #40485833, #404858b2);
+    }
+
+    input.el-input__inner {
+      height: 26px !important;
+      border-radius: 3px !important;
+      font-size: 12px;
+      line-height: 26px;
+      border: 1px solid #455165 !important;
+      background-color: #191F2799 !important;
+      color: #fff;
+      padding-left: 12px;
+      
+
+      &::input-placeholder,
+      &::-webkit-input-placeholder {
+        color: #8F97A3 !important;
+      }
+
+      &:focus {
+        border: 1px solid #1B71E9 !important;
+      }
+
+    }
+
+    .el-input__suffix {
+      right: 2px;
+      z-index: 2;
+      display: inline-block;
+      width: 24px;
+      overflow: hidden;
+
+      i {
+        color: #fff;
+      }
+    }
+  }
+
+
+}</style>

src/components/eselect/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-select class="eselect" v-model="value" :placeholder="placeholder" @change="change"
+    popper-class="eselectdrop" :clearable="clearable">
+    <el-option v-for="(item, index) in data" :key="item[labelKey]" :label="item[labelKey]" :value="item[valueKey]">
+      <template v-if="item.icon">
+        <img :src="icons[String(item.icon)]" style="width: 23px;margin: 4px 9px 4px -5px; float: left;" />
+        <span>
+          {{ item[labelKey] }}
+        </span>
+      </template>
+    </el-option>
+    <!-- 每个选项带icon -->
+    <template #prefix v-if="data?.[0]?.icon">
+      <img :src="icons[String(choosed?.icon)]" style="width: 23px;margin-top: 0px; margin-left: 2px; " />
+    </template>
+    <!-- 外面传的icon -->
+    <template #prefix v-if="$slots.prefix">
+      <slot name="prefix" />
+    </template>
+  </el-select>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref, watch, nextTick, computed, } from 'vue'
+
+const props = defineProps({
+  data: Array,
+  modelValue: String,
+  placeholder: String,
+  clearable: {},
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  }
+})
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const choosed = computed(() => {
+  return props.data.find(item => item[props.valueKey] === value.value)
+})
+
+function change(e) {
+  nextTick(() => {
+    emit('change', e)
+  })
+}
+
+const value = ref(props.modelValue)
+
+// 内部修改 提交事件给父
+watch(value, (v) => {
+  emit('update:modelValue', v)
+})
+// 外部修改 同步给当前
+watch(() => props.modelValue, v => {
+  value.value = v
+})
+
+// 类型图标
+const icons = {
+  '-1': require('./icons/i-1.png'),
+  '-2': require('./icons/i-2.png'),
+  '-3': require('./icons/i-3.png'),
+  '-5': require('./icons/i-5.png'),
+}
+
+</script>
+
+<style lang="less">
+.eselect {
+  height: 26px !important;
+  box-sizing: border-box;
+
+  .el-input {
+    &::after {
+      width: 28px;
+      height: 26px;
+      content: '';
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      border-radius: 0 3px 3px 0;
+      background: linear-gradient(to right, #40485833, #404858b2);
+    }
+
+    &.is-focus::after{
+      background: linear-gradient(to right, #1C6CFF33, #1C6CFFb2);
+    }
+
+    &.el-input--prefix input.el-input__inner {
+      padding-left: 34px;
+    }
+
+    input.el-input__inner {
+      background-color: #191F2799 !important;
+      border: 1px solid #455165 !important;
+      color: #fff !important;
+      font-size: 12px !important;
+      padding-left: 12px;
+      border-radius: 3px !important;
+      height: 26px !important;
+
+      &::input-placeholder, &::-webkit-input-placeholder{
+        color: #8F97A3 !important;
+      }
+    }
+
+    &.is-focus .el-input__inner {
+      border: 1px solid #1B71E9 !important;
+    }
+
+    .el-input__suffix{
+      right: 2px;
+      z-index: 2;
+      i{
+        color: #fff;
+      }
+    }
+  }
+}
+
+.eselectdrop {
+  border: 1px solid transparent;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(to bottom, #1D212B, #1D212B), linear-gradient(to bottom, #1c78f9, #1D212B);
+
+  &.el-select__popper.is-light {
+    --el-popper-border-radius: 5px !important;
+    border-radius: 5px !important;
+    overflow: hidden;
+  }
+
+  .el-select-dropdown {
+    border-radius: 3px !important;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 3px;
+      background: linear-gradient(135deg, #1C99FF, #1D212B);
+      border-top-left-radius: 2px;
+      overflow: hidden;
+    }
+  }
+
+  .el-scrollbar__bar.is-vertical{
+    width: 4px !important;
+    opacity: .5;
+  }
+  
+
+  .el-select-dropdown__list {
+    margin: 9px 0 !important;
+    padding: 0 6px !important;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 12px !important;
+    color: #fff !important;
+    height: 32px !important;
+    line-height: 30px !important;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    font-family: MicrosoftYaHeiLight;
+    padding-left: 10px !important;
+
+    &.selected,
+    &.hover,
+    &:hover {
+      background-color: transparent !important;
+      border-radius: 3px;
+      background-clip: padding-box, border-box;
+      background-origin: padding-box, border-box;
+      background-image: linear-gradient(135deg, #0043BF66, #1D212B, #1D212B), linear-gradient(to right, #1c78f9b2, #1D212B, #1D212B);
+    }
+  }
+}
+</style>

src/router/index.js

@@ -1019,6 +1019,18 @@ export const asyncRoutes = [
             },
           },
           {
+            path: "doubleRate",
+            component: () =>
+              import(
+                "@/views/layout/economicsOperation/thematicAnalysis/doubleRate"
+              ),
+            name: "doubleRate",
+            meta: {
+              title: "双率分析",
+              icon: "",
+            },
+          },
+          {
             path: "reset",
             component: () =>
               import(

src/utils/common.js

@@ -0,0 +1,25 @@
+//防抖
+export const Debounce = function (fn, t) {
+    let delay = t || 200;
+    let timer = null;
+    return function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        fn.apply(this, arguments);
+      }, delay);
+    }
+  }
+//节流
+  export const Throttle = function (fn, delay = 200) {
+    let canRun = true; // 通过闭包保存一个标记
+    return function () {
+      if (!canRun) return;//在delay时间内，直接返回，不执行fn
+      canRun = false;
+      setTimeout(() => {
+        fn.apply(this, arguments);
+        canRun = true;//直到执行完fn,也就是delay时间后，打开开关，可以执行下一个fn
+      }, delay);
+    };
+  }

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

@@ -1,8 +1,8 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <div class="brand-form">
-        <div class="brand-select">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
           <el-select
             size="mini"
             :disabled="displayDetail"
@@ -70,31 +70,31 @@
             </el-option>
           </el-select>
         </div>
-        <div class="brand-date">
-          <div class="station">
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
             开始日期
-            <div class="search-input">
+            <div class="date-item-date">
               <el-date-picker
                 v-model="starTime"
                 :disabled="displayDetail"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
-                popper-class="date-select"
+                size="mini"
               >
               </el-date-picker>
             </div>
           </div>
-          <div class="station">
+          <div class="date-item-wrapper">
             结束日期
-            <div class="search-input">
+            <div class="date-item-date">
               <el-date-picker
                 v-model="endTime"
                 :disabled="displayDetail"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
-                popper-class="date-select"
+                size="mini"
               >
               </el-date-picker>
             </div>
@@ -136,12 +136,12 @@
         <div class="leftContent"><span>品牌对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div class="economicTable" :style="{ height: echartsHeight }">
+      <div class="economicTable">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '4px' }"
           :row-style="{ height: '0' }"
           stripe
@@ -371,7 +371,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -383,21 +383,22 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-
     <el-dialog
       class="dialogs"
       width="90%"
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -817,117 +818,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
-  ::v-deep .brand-form {
+  height: 100%;
+}
+
+.title ::v-deep {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  .form-wrapper {
     display: flex;
-    .brand-select {
+    align-items: center;
+    .select-wrapper {
       display: flex;
       align-items: center;
       .el-select {
         width: 155px;
+        margin-right: 10px;
         .el-input .el-input__inner {
           width: 150px;
         }
       }
     }
-    .brand-date {
+    .date-wrapper {
       display: flex;
       align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
     }
   }
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-  }
-
-  .search-input {
-    margin-left: 10px;
-  }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -936,6 +891,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -974,11 +930,12 @@ export default {
 
 .economicTable {
   width: 100%;
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,64 +1,70 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="company"
-        multiple
-        collapse-tags
-        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="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="starTime"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="endTime"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="company"
+            multiple
+            collapse-tags
+            placeholder="江苏区域"
+            @change="handleCompanyChange(company)"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                :disabled="displayDetail"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="endTime"
+                :disabled="displayDetail"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -96,16 +102,12 @@
         <div class="leftContent"><span>公司对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div
-        class="economicTable"
-        v-if="!displayDetail"
-        :style="{ height: echartsHeight }"
-      >
+      <div class="economicTable" v-if="!displayDetail">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '6px' }"
           :header-cell-style="{ 'text-align': 'center' }"
           :row-style="{ height: '0' }"
@@ -345,7 +347,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -357,20 +359,21 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail" class="economicTable details">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="78vh"
+        height="100%"
         :cell-style="{ padding: '6px' }"
         :row-style="{ height: '4' }"
         stripe
@@ -504,6 +507,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -926,103 +930,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
+  height: 100%;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
-  white-space: nowrap;
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
 
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    // margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1031,6 +1003,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1070,17 +1043,12 @@ export default {
 
 .economicTable {
   width: 100%;
-  &.details {
-    height: 79vh;
-    padding: 5px;
-    background-color: rgba(0, 0, 0, 0.45);
-    border-radius: 5px;
-  }
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -5,65 +5,81 @@
         <div class="header">
           <div class="point left top"></div>
           <div class="point right top"></div>
-          <span class="herder-info">
-						对标排名分析
-					</span>
+          <span class="herder-info"> 对标排名分析 </span>
         </div>
         <div class="chart-body">
-          <normal-radar-chart :height="'420px'" :value="radarValue" :title="[windNum, windNum2, windNum3, windNum4, windNum5]" />
+          <normal-radar-chart
+            :height="'420px'"
+            :value="radarValue"
+            :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
+          />
         </div>
       </div>
       <div class="left">
         <div class="header">
           <div class="point left top"></div>
           <div class="point right top"></div>
-          <span class="herder-info">
-						基础指标
-					</span>
+          <span class="herder-info"> 基础指标 </span>
         </div>
-        <!-- <table class="table-form">
-          <tr>
-            <td class="white">指标</td>
-            <td class="white">{{windNum}}</td>
-            <td class="white">{{windNum2}}</td>
-          </tr>
-          <tr v-for="(item, index) in tabs" :key="index" >
-            <td class="white">{{item.name}}</td>
-            <td class="white">{{item.windData1}}</td>
-            <td class="white">{{item.windData2}}</td>
-          </tr>
-        </table> -->
-        <el-table :data="tabs" style="width:43vw" :cell-style="{ padding: '6px' }" :row-style="{ height: '4' }"
-                  stripe @selection-change="handleCurrentChange">
+        <el-table
+          :data="tabs"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '4' }"
+          width="100%"
+          stripe
+          @selection-change="handleCurrentChange"
+        >
           <el-table-column align="center" prop="name" label="场站" width="200">
           </el-table-column>
           <el-table-column align="center" prop="windData1" :label="windNum">
           </el-table-column>
-          <el-table-column v-if="windNum2" align="center" prop="windData2" :label="windNum2">
+          <el-table-column
+            v-if="windNum2"
+            align="center"
+            prop="windData2"
+            :label="windNum2"
+          >
           </el-table-column>
-          <el-table-column v-if="windNum3" align="center" prop="windData3" :label="windNum3">
+          <el-table-column
+            v-if="windNum3"
+            align="center"
+            prop="windData3"
+            :label="windNum3"
+          >
           </el-table-column>
-          <el-table-column v-if="windNum4" align="center" prop="windData4" :label="windNum4">
+          <el-table-column
+            v-if="windNum4"
+            align="center"
+            prop="windData4"
+            :label="windNum4"
+          >
           </el-table-column>
-          <el-table-column v-if="windNum5" align="center" prop="windData5" :label="windNum5">
+          <el-table-column
+            v-if="windNum5"
+            align="center"
+            prop="windData5"
+            :label="windNum5"
+          >
           </el-table-column>
-
         </el-table>
       </div>
-
     </div>
     <div class="body">
-      <div style="width: 100%;">
+      <div style="width: 100%">
         <div class="header">
           <div class="point left top"></div>
           <div class="point right top"></div>
-          <span class="herder-info">
-						损失电量分析
-					</span>
+          <span class="herder-info"> 损失电量分析 </span>
         </div>
         <div class="chart-body">
-          <multiple-bar-chart height="240px" :list="analyisDialog" :customerTooltip="true" @tooltip="tooltip"
-                              :units='["(万KWh)"]' />
+          <multiple-bar-chart
+            height="240px"
+            width="100%"
+            :list="analyisDialog"
+            :customerTooltip="true"
+            @tooltip="tooltip"
+            :units="['(万KWh)']"
+          />
         </div>
       </div>
     </div>
@@ -76,121 +92,158 @@ import MultipleBarChart from "../../homePage/components/multiple-bar-chart.vue";
 export default {
   components: {
     NormalRadarChart,
-    MultipleBarChart
+    MultipleBarChart,
   },
   props: {
     windNum: {
       type: String,
-      default: '',
+      default: "",
     },
     windNum2: {
       type: String,
-      default: '',
+      default: "",
     },
     windNum3: {
       type: String,
-      default: '',
+      default: "",
     },
     windNum4: {
       type: String,
-      default: '',
+      default: "",
     },
     windNum5: {
       type: String,
-      default: '',
+      default: "",
     },
     radarValue: {
       type: Array,
-      default: () => [{
-        indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率", "状态转换率"],
-        data: [{
-          value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000]
-        }],
-      }],
+      default: () => [
+        {
+          indicator: [
+            "风能利用率",
+            "故障损失率",
+            "检修损失率",
+            "弃风率",
+            "性能损失率",
+            "受累损失率",
+            "复位及时率",
+            "消缺及时率",
+            "状态转换率",
+          ],
+          data: [
+            {
+              value: [
+                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
+              ],
+            },
+          ],
+        },
+      ],
     },
     tabs: {
       type: Array,
-      default: () => [{
-        name: "发电量",
-        windData1: 1,
-        windData2: 14
-      }, {
-        name: "故障损失电量",
-        windData1: 2,
-        windData2: 13
-      }, {
-        name: "检修损失电量",
-        windData1: 3,
-        windData2: 12
-      }, {
-        name: "性能未达标损失电量",
-        windData1: 4,
-        windData2: 11
-      }, {
-        name: "受累损失电量",
-        windData1: 5,
-        windData2: 10
-      }, {
-        name: "风能利用率",
-        windData1: 6,
-        windData2: 9
-      }, {
-        name: "故障损失率",
-        windData1: 7,
-        windData2: 8
-      }, {
-        name: "检修损失率",
-        windData1: 8,
-        windData2: 7
-      }, {
-        name: "弃风率",
-        windData1: 9,
-        windData2: 6
-      }, {
-        name: "性能损失率",
-        windData1: 10,
-        windData2: 5
-      }, {
-        name: "受累损失率",
-        windData1: 11,
-        windData2: 4
-      }, {
-        name: "复位及时率",
-        windData1: 12,
-        windData2: 3
-      }, {
-        name: "消缺及时率",
-        windData1: 13,
-        windData2: 2
-      }, {
-        name: "状态转换率",
-        windData1: 14,
-        windData2: 1
-      }],
+      default: () => [
+        {
+          name: "发电量",
+          windData1: 1,
+          windData2: 14,
+        },
+        {
+          name: "故障损失电量",
+          windData1: 2,
+          windData2: 13,
+        },
+        {
+          name: "检修损失电量",
+          windData1: 3,
+          windData2: 12,
+        },
+        {
+          name: "性能未达标损失电量",
+          windData1: 4,
+          windData2: 11,
+        },
+        {
+          name: "受累损失电量",
+          windData1: 5,
+          windData2: 10,
+        },
+        {
+          name: "风能利用率",
+          windData1: 6,
+          windData2: 9,
+        },
+        {
+          name: "故障损失率",
+          windData1: 7,
+          windData2: 8,
+        },
+        {
+          name: "检修损失率",
+          windData1: 8,
+          windData2: 7,
+        },
+        {
+          name: "弃风率",
+          windData1: 9,
+          windData2: 6,
+        },
+        {
+          name: "性能损失率",
+          windData1: 10,
+          windData2: 5,
+        },
+        {
+          name: "受累损失率",
+          windData1: 11,
+          windData2: 4,
+        },
+        {
+          name: "复位及时率",
+          windData1: 12,
+          windData2: 3,
+        },
+        {
+          name: "消缺及时率",
+          windData1: 13,
+          windData2: 2,
+        },
+        {
+          name: "状态转换率",
+          windData1: 14,
+          windData2: 1,
+        },
+      ],
     },
     analyisDialog: {
       type: Array,
-      default: () => [{
-        title: "故障损失电量",
-        yAxisIndex: 0,
-        value: [11, 22]
-      }, {
-        title: "检修损失电量",
-        yAxisIndex: 0,
-        value: [11, 22]
-      }, {
-        title: "性能损失电量",
-        yAxisIndex: 0,
-        value: [11, 22]
-      }, {
-        title: "限电损失电量",
-        yAxisIndex: 0,
-        value: [11, 22]
-      }, {
-        title: "受累损失电量",
-        yAxisIndex: 0,
-        value: [11, 22]
-      }]
+      default: () => [
+        {
+          title: "故障损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "检修损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "性能损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "限电损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "受累损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+      ],
     },
   },
   methods: {
@@ -199,14 +252,17 @@ export default {
 
       var result = param[0].axisValue;
       param.forEach((value, index) => {
-        result += "<br />" +
-            `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
-            value.seriesName + "：" + value.value;
+        result +=
+          "<br />" +
+          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
+          value.seriesName +
+          "：" +
+          value.value;
       });
       callback(result);
       return true;
     },
-  }
+  },
 };
 </script>
 
@@ -234,18 +290,17 @@ export default {
 
       display: flex;
       flex-direction: column;
-
+      .el-table {
+        width: 100%;
+      }
       .chart-body {
         flex-grow: 1;
         display: flex;
         align-items: center;
         height: 43vh;
+        width: 100%;
       }
     }
-
-    .right {
-      flex: 0 0 50%;
-    }
   }
 }
 

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

@@ -1,80 +1,86 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <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 class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="starTime"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="endTime"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <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>
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="stationObj"
+            multiple
+            collapse-tags
+            placeholder="请选择"
+            @change="handleStationChange(stationObj)"
+            clearable
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in stationList"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                :disabled="displayDetail"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                :disabled="displayDetail"
+                v-model="endTime"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -112,19 +118,15 @@
         <div class="leftContent"><span>场际对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div
-        class="economicTable"
-        v-if="!displayDetail"
-        :style="{ height: echartsHeight }"
-      >
+      <div class="economicTable" v-if="!displayDetail">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '6px' }"
           :row-style="{ height: '0' }"
-           :header-cell-style="{ 'text-align': 'center' }"
+          :header-cell-style="{ 'text-align': 'center' }"
           stripe
           @selection-change="handleCurrentChange"
         >
@@ -339,7 +341,7 @@
             width="67"
           >
           </el-table-column>
-          <el-table-column align="center" prop="" label="操作" width="70">
+          <el-table-column align="center" prop="" label="操作" width="63">
             <template v-slot="scope">
               <span
                 @click="goDetail(scope.row)"
@@ -361,7 +363,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -373,15 +375,20 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail" class="economicTable details">
+    <div
+      v-if="displayDetail"
+      style="height: calc(100% - 80px)"
+      class="economicTable details"
+    >
       <el-table
         :data="detailTable"
         ref="multipleTable"
@@ -520,6 +527,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -953,103 +961,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
+  height: 100%;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
 
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1058,6 +1034,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1097,17 +1074,17 @@ export default {
 
 .economicTable {
   width: 100%;
-  &.details {
-    height: 79vh;
-    padding: 5px;
-    background-color: rgba(0, 0, 0, 0.45);
-    border-radius: 5px;
-  }
+  height: calc(100% - 46px);
+  //   &.details {
+  //     padding: 5px;
+  //     background-color: rgba(0, 0, 0, 0.45);
+  //     border-radius: 5px;
+  //   }
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,114 +1,120 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <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>
-      <el-select
-        size="mini"
-        v-model="projectObj"
-        placeholder="请选择"
-        multiple
-        collapse-tags
-        @change="handleProjectChange(projectObj)"
-        clearable
-      >
-        <el-option
-          v-for="item in projectList"
-          :key="item.id"
-          :label="item.aname"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <el-select
-        size="mini"
-        v-model="lineObj"
-        placeholder="请选择"
-        multiple
-        collapse-tags
-        @change="handleLineChange(lineObj)"
-        clearable
-      >
-        <el-option
-          v-for="item in lineList"
-          :key="item.id"
-          :label="item.nemName"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <div class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="starTime"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <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>
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            v-model="endTime"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            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>
+          <el-select
+            size="mini"
+            v-model="projectObj"
+            placeholder="请选择"
+            multiple
+            collapse-tags
+            @change="handleProjectChange(projectObj)"
+            clearable
+          >
+            <el-option
+              v-for="item in projectList"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="lineObj"
+            placeholder="请选择"
+            multiple
+            collapse-tags
+            @change="handleLineChange(lineObj)"
+            clearable
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in lineList"
+              :key="item.id"
+              :label="item.nemName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                :disabled="displayDetail"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                :disabled="displayDetail"
+                v-model="endTime"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -146,15 +152,15 @@
         <div class="leftContent"><span>五项损失率</span></div>
         <div class="rightContent"></div>
       </div>
-      <div class="economicTable" :style="{ height: echartsHeight }">
+      <div class="economicTable">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '4px' }"
           :row-style="{ height: '0' }"
-           :header-cell-style="{ 'text-align': 'center' }"
+          :header-cell-style="{ 'text-align': 'center' }"
           stripe
           @selection-change="handleCurrentChange"
         >
@@ -391,7 +397,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -403,20 +409,21 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="88vh"
+        height="100%"
         :cell-style="{ padding: '0px' }"
         :row-style="{ height: '0' }"
         stripe
@@ -544,30 +551,13 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- <el-dialog
-      title="对标排名分析"
-      v-model="dialogVisible"
-      width="70%"
-      top="10vh"
-      custom-class="modal"
-      :close-on-click-modal="false"
-    >
-      <dayinfo
-        :radarValue="radarValue"
-        :title="[windNum, windNum2]"
-        :windNum="windNum"
-        :windNum2="windNum2"
-        :tabs="tabs"
-        :analyisDialog="analyisDialog"
-      />
-    </el-dialog> -->
     <el-dialog
       class="dialogs"
       width="90%"
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -598,26 +588,18 @@
 
 <script>
 import dayjs from "dayjs";
-import { companys } from "@/api/curveAnalyse";
 import {
   GetOrganization,
   GetStationByCompany,
   GetProjectList,
   GetLineList,
-  GetSquareList,
 } from "@/api/headerNav.js";
-import {
-  getStation,
-  getProject,
-  getLine,
-  wxssl,
-  details,
-} from "@/api/performance";
+import { wxssl, details } from "@/api/performance";
 import PieChart from "../../homePage/components/pieChart.vue";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import dayinfo from "../compontent/dayinfo.vue";
 export default {
-  name: "intervalBenchmarking", //场际对标
+  name: "loseRate", //五项损失率
   components: {
     PieChart,
     BarCharts,
@@ -699,9 +681,9 @@ export default {
     initialization() {
       GetOrganization({ type: this.tabIndex }).then((res) => {
         if (res.data) {
-          this.company = res.data[0].id;
+          this.company = res.data[1].id;
           this.companyOptions = res.data;
-          this.getStation(res.data[0].id);
+          this.getStation(res.data[1].id);
         }
       });
     },
@@ -1046,103 +1028,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
+  height: 100%;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
 
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1152,6 +1102,7 @@ export default {
 
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1192,11 +1143,12 @@ export default {
 
 .economicTable {
   width: 100%;
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,8 +1,8 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <div class="machine-form">
-        <div class="machine-select">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
           <el-select
             size="mini"
             :disabled="displayDetail"
@@ -124,31 +124,31 @@
             </el-option>
           </el-select>
         </div>
-        <div class="machine-date">
-          <div class="station">
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
             开始日期
-            <div class="search-input">
+            <div class="date-item-date">
               <el-date-picker
                 v-model="starTime"
                 :disabled="displayDetail"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
-                popper-class="date-select"
+                size="mini"
               >
               </el-date-picker>
             </div>
           </div>
-          <div class="station">
+          <div class="date-item-wrapper">
             结束日期
-            <div class="search-input">
+            <div class="date-item-date">
               <el-date-picker
                 v-model="endTime"
                 :disabled="displayDetail"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
-                popper-class="date-select"
+                size="mini"
               >
               </el-date-picker>
             </div>
@@ -189,16 +189,12 @@
         <div class="leftContent"><span>设备对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div
-        class="economicTable"
-        v-if="!displayDetail"
-        :style="{ height: echartsHeight }"
-      >
+      <div class="economicTable" v-if="!displayDetail">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '6px' }"
           :row-style="{ height: '0' }"
           :header-cell-style="{ 'text-align': 'center' }"
@@ -438,7 +434,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -450,20 +446,21 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail" class="economicTable details">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="78vh"
+        height="100%"
         :cell-style="{ padding: '6px' }"
         :row-style="{ height: '4' }"
         stripe
@@ -597,6 +594,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -1127,121 +1125,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
-  ::v-deep .machine-form {
+  height: 100%;
+}
+
+.title ::v-deep {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  .form-wrapper {
     display: flex;
-    .machine-select {
+    align-items: center;
+    .select-wrapper {
       display: flex;
       align-items: center;
-      margin-right: 20px;
       .el-select {
         width: 155px;
+        margin-right: 5px;
         .el-input .el-input__inner {
           width: 150px;
         }
       }
     }
-    .machine-date {
+    .date-wrapper {
       display: flex;
       align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 5px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
     }
   }
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  white-space: nowrap;
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
-  }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    // margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1250,6 +1198,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1289,17 +1238,12 @@ export default {
 
 .economicTable {
   width: 100%;
-  &.details {
-    height: 79vh;
-    padding: 5px;
-    background-color: rgba(0, 0, 0, 0.45);
-    border-radius: 5px;
-  }
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,107 +1,114 @@
 <template>
-  <div class="home-body" style="height: 93vh">
+  <div class="parcel-box" style="height: 100%">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        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>
-      <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>
-      <el-select
-        size="mini"
-        v-model="lineObj"
-        placeholder="请选择"
-        @change="handleLineChange(lineObj)"
-        clearable
-      >
-        <el-option
-          v-for="item in lineList"
-          :key="item.id"
-          :label="item.nemName"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-
-      <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"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </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"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            v-model="company"
+            placeholder="请选择"
+            @change="handleCompanyChange(company)"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            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>
+          <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>
+          <el-select
+            size="mini"
+            v-model="lineObj"
+            placeholder="请选择"
+            @change="handleLineChange(lineObj)"
+            clearable
+          >
+            <el-option
+              v-for="item in lineList"
+              :key="item.id"
+              :label="item.nemName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+                @change="typeClick('1')"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="endTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+                @change="typeClick('1')"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -127,8 +134,8 @@
         }}</span>
       </div>
     </div>
-    <div class="performance" style="height: 90vh">
-      <div class="economicTable" style="height: 86vh">
+    <div class="performance">
+      <div class="economicTable" style="height: 100%">
         <el-table
           :data="tableData"
           size="mini"
@@ -603,114 +610,74 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home-body {
+.parcel-box {
   display: flex;
   flex-direction: column;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 10px;
   padding-left: 20px;
-
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-  .dates {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
-    &:hover,
-    &.active {
+    margin-right: 10px;
+    &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
     }
@@ -718,6 +685,7 @@ export default {
 }
 
 .performance {
+  flex: 1;
   display: flex;
   flex-direction: row;
   width: 98.5%;

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

@@ -1,109 +1,114 @@
 <template>
-  <div class="home-body" style="height: 93vh">
+  <div class="parcel-box" style="height: 100%">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        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>
-      <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>
-      <el-select
-        size="mini"
-        v-model="lineObj"
-        placeholder="请选择"
-        @change="handleLineChange(lineObj)"
-        clearable
-      >
-        <el-option
-          v-for="item in lineList"
-          :key="item.id"
-          :label="item.nemName"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-
-      <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')"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </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-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <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>
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            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>
+          <el-select
+            size="mini"
+            v-model="projectObj"
+            placeholder="请选择"
+            @change="handleProjectChange(projectObj)"
+            clearable
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in projectList"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="lineObj"
+            placeholder="请选择"
+            @change="handleLineChange(lineObj)"
+            clearable
+          >
+            <el-option
+              v-for="item in lineList"
+              :key="item.id"
+              :label="item.nemName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+                @change="typeClick('1')"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="endTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+                @change="typeClick('1')"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -133,8 +138,8 @@
         }}</span>
       </div>
     </div>
-    <div class="performance" style="height: 90vh">
-      <div class="economicTable" style="height: 86vh">
+    <div class="performance">
+      <div class="economicTable" style="height: 100%">
         <el-table
           :data="tableData"
           size="mini"
@@ -528,94 +533,81 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home-body {
+.parcel-box {
   display: flex;
   flex-direction: column;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 10px;
   padding-left: 20px;
-
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .dates {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
-    &:hover,
-    &.active {
+    margin-right: 10px;
+    &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
     }
   }
 }
-
 .performance {
+  flex: 1;
   display: flex;
   flex-direction: row;
   width: 98.5%;

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

@@ -1,98 +1,104 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <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>
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="projectObj"
-        placeholder="请选择"
-        multiple
-        collapse-tags
-        @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 class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="starTime"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="endTime"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <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>
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="stationObj"
+            multiple
+            collapse-tags
+            placeholder="请选择"
+            @change="handleStationChange(stationObj)"
+            clearable
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in stationList"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            v-model="projectObj"
+            placeholder="请选择"
+            multiple
+            collapse-tags
+            @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="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                :disabled="displayDetail"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="endTime"
+                :disabled="displayDetail"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -130,12 +136,12 @@
         <div class="leftContent"><span>项目对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div class="economicTable" :style="{ height: echartsHeight }">
+      <div class="economicTable">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '4px' }"
           :row-style="{ height: '0' }"
           stripe
@@ -373,7 +379,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -385,20 +391,21 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="88vh"
+        height="100%"
         :cell-style="{ padding: '0px' }"
         :row-style="{ height: '0' }"
         stripe
@@ -533,6 +540,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -576,7 +584,7 @@ import PieChart from "../../homePage/components/pieChart.vue";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import dayinfo from "../compontent/dayinfo.vue";
 export default {
-  name: "intervalBenchmarking", //场际对标
+  name: "projectBenchmarking", //项目对标
   components: {
     PieChart,
     BarCharts,
@@ -970,102 +978,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
+  height: 100%;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
 
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1074,6 +1051,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1112,11 +1090,12 @@ export default {
 
 .economicTable {
   width: 100%;
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,8 +1,8 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <div class="quarter-form">
-        <div class="quarter-select">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
           <el-select
             size="mini"
             :disabled="displayDetail"
@@ -106,31 +106,31 @@
             </el-option>
           </el-select>
         </div>
-        <div class="quarter-date">
-          <div class="station">
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
             开始日期
-            <div class="search-input">
+            <div class="date-item-date">
               <el-date-picker
                 v-model="starTime"
                 :disabled="displayDetail"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
-                popper-class="date-select"
+                size="mini"
               >
               </el-date-picker>
             </div>
           </div>
-          <div class="station">
+          <div class="date-item-wrapper">
             结束日期
-            <div class="search-input">
+            <div class="date-item-date">
               <el-date-picker
                 v-model="endTime"
                 :disabled="displayDetail"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
-                popper-class="date-select"
+                size="mini"
               >
               </el-date-picker>
             </div>
@@ -172,16 +172,12 @@
         <div class="leftContent"><span>阵区对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div
-        class="economicTable"
-        v-if="!displayDetail"
-        :style="{ height: echartsHeight }"
-      >
+      <div class="economicTable" v-if="!displayDetail">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '6px' }"
           :row-style="{ height: '0' }"
           :header-cell-style="{ 'text-align': 'center' }"
@@ -421,7 +417,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -433,20 +429,21 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail" class="economicTable details">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="78vh"
+        height="100%"
         :cell-style="{ padding: '6px' }"
         :row-style="{ height: '4' }"
         stripe
@@ -580,6 +577,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -610,7 +608,6 @@
 
 <script>
 import dayjs from "dayjs";
-import { companys } from "@/api/curveAnalyse";
 import {
   GetOrganization,
   GetStationByCompany,
@@ -618,7 +615,7 @@ import {
   GetLineList,
   GetSquareList,
 } from "@/api/headerNav.js";
-import { getStation, zqdb, details } from "@/api/performance";
+import { zqdb, details } from "@/api/performance";
 import PieChart from "../../homePage/components/pieChart.vue";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import dayinfo from "../compontent/dayinfo.vue";
@@ -1081,121 +1078,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
-  ::v-deep .quarter-form {
+  height: 100%;
+}
+
+.title ::v-deep {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  .form-wrapper {
     display: flex;
-    .quarter-select {
+    align-items: center;
+    .select-wrapper {
       display: flex;
       align-items: center;
-      margin-right: 20px;
       .el-select {
         width: 155px;
+        margin-right: 10px;
         .el-input .el-input__inner {
           width: 150px;
         }
       }
     }
-    .quarter-date {
+    .date-wrapper {
       display: flex;
       align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
     }
   }
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  white-space: nowrap;
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
-  }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    // margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1204,6 +1151,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1243,17 +1191,12 @@ export default {
 
 .economicTable {
   width: 100%;
-  &.details {
-    height: 79vh;
-    padding: 5px;
-    background-color: rgba(0, 0, 0, 0.45);
-    border-radius: 5px;
-  }
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,79 +1,85 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        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 class="station" v-show="!displayDetail">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            v-model="starTime"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station" v-show="!displayDetail">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            v-model="endTime"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="company"
+            placeholder="请选择"
+            @change="handleCompanyChange(company)"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            :disabled="displayDetail"
+            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>
+
+        <div class="date-wrapper">
+          <div class="date-item-wrapper" v-show="!displayDetail">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                :disabled="displayDetail"
+                v-model="starTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper" v-show="!displayDetail">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                :disabled="displayDetail"
+                v-model="endTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -96,6 +102,10 @@
           "
           >对标分析</el-button
         >
+
+        <el-button round size="mini" class="buttons" @click="funthb"
+          >同环比</el-button
+        >
         <el-button
           round
           size="mini"
@@ -104,10 +114,6 @@
           v-if="displayDetail"
           >返回</el-button
         >
-        <el-button round size="mini" class="buttons" @click="funthb"
-          >同环比</el-button
-        >
-        <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
       </div>
     </div>
     <div class="bodys" v-if="!displayDetail">
@@ -115,12 +121,12 @@
         <div class="leftContent"><span>场内对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div class="economicTable" :style="{ height: echartsHeight }">
+      <div class="economicTable">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="calc(100% - 49px)"
           :cell-style="{ padding: '4px' }"
           :row-style="{ height: '0' }"
           stripe
@@ -358,7 +364,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -370,20 +376,21 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="29vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
         ></BarCharts>
       </div>
     </div>
-    <div v-if="displayDetail">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="88vh"
+        height="100%"
         :cell-style="{ padding: '0px' }"
         :row-style="{ height: '0' }"
         stripe
@@ -517,6 +524,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -545,7 +553,7 @@
     <el-dialog
       class="dialogs"
       width="94%"
-      top="40px"
+      top="160px"
       v-model="thbVisible"
       :show-close="true"
     >
@@ -560,12 +568,12 @@
       </template>
       <div class="dialog-body">
         <img class="dialog-img" src="@assets/img/images/dialog.png" />
-        <div class="economicTable" :style="{ height: echartsHeight }">
+        <div class="economicTable">
           <el-table
             :data="thbData"
             ref="multipleTable1"
             size="mini"
-            :height="echartsHeight"
+            height="480px"
             :cell-style="{ padding: '4px' }"
             :row-style="{ height: '0' }"
             stripe
@@ -813,15 +821,8 @@
 
 <script>
 import dayjs from "dayjs";
-import { companys } from "@/api/curveAnalyse";
-import {
-  GetOrganization,
-  GetStationByCompany,
-  GetProjectList,
-  GetLineList,
-  GetSquareList,
-} from "@/api/headerNav.js";
-import { getStation, cndb, thb, details } from "@/api/performance";
+import { GetOrganization, GetStationByCompany } from "@/api/headerNav.js";
+import { cndb, thb, details } from "@/api/performance";
 import PieChart from "../../homePage/components/pieChart.vue";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import dayinfo from "../compontent/dayinfo.vue";
@@ -860,44 +861,20 @@ export default {
       windNum5: "",
       tabs: [],
       analyisDialog: [],
-      screenHeight: window.innerHeight,
-      echartsHeight: "55vh",
+
       //同环比
       thbVisible: false,
       thbData: [],
     };
   },
   created() {
-    // let date = new Date();
-    // date.setDate(1);
-    // let month = parseInt(date.getMonth() + 1);
-    // let day = date.getDate();
-    // if (month < 10) {
-    //   month = '0' + month;
-    // }
-    // if (day < 10) {
-    //   day = '0' + day;
-    // }
-    // this.starTime = date.getFullYear() + '-' + month + '-' + day;
     this.starTime = dayjs(new Date().getTime() - 60000 * 60 * 24 * 7).format(
       "YYYY-MM-DD"
     );
     this.endTime = dayjs(new Date().getTime()).format("YYYY-MM-DD");
     this.initialization();
   },
-  mounted() {
-    if (this.screenHeight > 1100) {
-      this.echartsHeight = "58vh";
-    } else {
-      this.echartsHeight = "55vh";
-    }
-    window.onresize = () => {
-      return (() => {
-        window.screenHeight = window.innerHeight;
-        this.screenHeight = window.screenHeight;
-      })();
-    };
-  },
+  mounted() {},
   methods: {
     funthb() {
       thb({
@@ -1223,122 +1200,81 @@ export default {
     },
   },
 
-  watch: {
-    screenHeight(val) {
-      console.log(val);
-      this.screenHeight = val;
-      if (val > 1100) {
-        this.echartsHeight = "58vh";
-      } else {
-        this.echartsHeight = "55vh";
-      }
-    },
-  },
+  watch: {},
 };
 </script>
 
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
+  height: 100%;
 }
 /deep/ .s-tb-th {
   height: 50px;
 }
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
-
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  padding-left: 5px;
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
 
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1348,12 +1284,14 @@ export default {
 
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
   border-radius: 5px;
 }
-
+.dialogs {
+}
 .line {
   display: flex;
   flex-direction: row;
@@ -1387,11 +1325,12 @@ export default {
 
 .economicTable {
   width: 100%;
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

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

@@ -1,13 +0,0 @@
-<template>
-  <div>单机对标</div>
-</template>
-
-<script>
-export default {
-  name:'standAloneBenchmarking',//单机对标
-}
-</script>
-
-<style>
-
-</style>

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

@@ -1,36 +1,39 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <div class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="starTime"
-            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"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
-          >
-          </el-date-picker>
+      <div class="form-wrapper">
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="endTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <el-button round size="mini" class="searchColor" @click="getTableData"
         >搜索</el-button
       >
-      <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
       <div class="line clearfix">
@@ -38,19 +41,12 @@
         <div class="rightContent right"></div>
       </div>
       <div class="economicTable">
-        <!-- theoreticalgeneratity 理论发电量
-				generatity  发电量
-				faultLoss 故障损失率
-				mainLoss 维护损失率
-				performanceLoss 性能损失
-				rationingLoss 限电损失
-				involvesloss 受累损失 -->
         <el-table
           :data="tableData"
           style="width: 100%"
           size="mini"
           stripe
-          height="85vh"
+          height="100%"
         >
           <el-table-column
             align="center"
@@ -152,41 +148,57 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
-  padding-left: 20px;
-
-  .station {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-left: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -200,13 +212,16 @@ export default {
   background-color: rgba(0, 0, 0, 0.45);
   border-radius: 5px;
   padding: 5px;
+  height: calc(100% - 60px);
 }
 
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
+  height: 100%;
   .economicTable {
+    width: 100%;
+    height: calc(100% - 46px);
   }
 
   .line {

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

@@ -1,114 +1,120 @@
 <template>
   <div class="parcel-box">
     <div class="title">
-      <el-select
-        size="mini"
-        :disabled="displayDetail"
-        v-model="tabIndex"
-        placeholder="请选择"
-        @change="tabClick"
-      >
-        <el-option
-          v-for="item in tabOptions"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <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>
-      <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>
-      <el-select
-        size="mini"
-        v-model="projectObj"
-        placeholder="请选择"
-        multiple
-        collapse-tags
-        @change="handleProjectChange(projectObj)"
-        clearable
-      >
-        <el-option
-          v-for="item in projectList"
-          :key="item.id"
-          :label="item.aname"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <el-select
-        size="mini"
-        v-model="lineObj"
-        placeholder="请选择"
-        multiple
-        collapse-tags
-        @change="handleLineChange(lineObj)"
-        clearable
-      >
-        <el-option
-          v-for="item in lineList"
-          :key="item.id"
-          :label="item.nemName"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
-      <div class="station">
-        开始日期
-        <div class="search-input">
-          <el-date-picker
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            v-model="starTime"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-date-picker>
-        </div>
-      </div>
-      <div class="station">
-        结束日期
-        <div class="search-input">
-          <el-date-picker
-            v-model="endTime"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
             :disabled="displayDetail"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="company"
+            placeholder="请选择"
+            @change="handleCompanyChange(company)"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <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>
+          <el-select
+            size="mini"
+            v-model="projectObj"
+            placeholder="请选择"
+            multiple
+            collapse-tags
+            @change="handleProjectChange(projectObj)"
+            clearable
+          >
+            <el-option
+              v-for="item in projectList"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="lineObj"
+            placeholder="请选择"
+            multiple
+            collapse-tags
+            @change="handleLineChange(lineObj)"
+            clearable
+          >
+            <el-option
+              v-for="item in lineList"
+              :key="item.id"
+              :label="item.nemName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="starTime"
+                :disabled="displayDetail"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束日期
+            <div class="date-item-date">
+              <el-date-picker
+                :disabled="displayDetail"
+                v-model="endTime"
+                type="date"
+                size="mini"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
       <div class="but">
@@ -146,12 +152,12 @@
         <div class="leftContent"><span>线路对标</span></div>
         <div class="rightContent"></div>
       </div>
-      <div class="economicTable" :style="{ height: echartsHeight }">
+      <div class="economicTable">
         <el-table
           :data="tableData"
           ref="multipleTable"
           size="mini"
-          :height="echartsHeight"
+          height="100%"
           :cell-style="{ padding: '4px' }"
           :row-style="{ height: '0' }"
           :header-cell-style="{ 'text-align': 'center' }"
@@ -390,7 +396,7 @@
         <PieChart
           :lossPower="lossPower"
           width="100%"
-          height="20vh"
+          height="calc(100% - 49px)"
           :showLable="false"
         ></PieChart>
       </div>
@@ -402,8 +408,9 @@
         </div>
         <BarCharts
           :list="barList"
+          :top="25"
           width="100%"
-          height="30vh"
+          height="calc(100% - 49px)"
           :showLegend="true"
           :xdate="false"
           :colorIndex="true"
@@ -411,12 +418,12 @@
       </div>
     </div>
 
-    <div v-if="displayDetail">
+    <div v-if="displayDetail" style="height: calc(100% - 80px)">
       <el-table
         :data="detailTable"
         ref="multipleTable"
         size="mini"
-        height="88vh"
+        height="100%"
         :cell-style="{ padding: '0px' }"
         :row-style="{ height: '0' }"
         stripe
@@ -551,6 +558,7 @@
       top="40px"
       v-model="dialogVisible"
       :show-close="true"
+      destroy-on-close
     >
       <template #title>
         <div class="dialog-title">
@@ -1037,102 +1045,71 @@ export default {
 <style lang="less" scoped>
 .parcel-box {
   padding: 0 15px;
+  height: 100%;
 }
 
-.title {
+.title ::v-deep {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
 
-  .tabCut {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(2) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-    .disabled {
-      pointer-events: none;
-    }
-  }
-
-  .tabCut1 {
-    display: inline-block;
-    margin: 0 10px;
-
-    div {
-      display: inline-block;
-      width: 60px;
-      height: 27px;
-      border: 1px solid #354460;
-      text-align: center;
-      line-height: 25px;
-      cursor: pointer;
-    }
-
-    div:nth-child(1) {
-      border-radius: 13px 0px 0px 13px;
-    }
-
-    div:nth-child(3) {
-      border-radius: 0px 13px 13px 0px;
-    }
-
-    .active {
-      background-color: #0c3378;
-      color: #fff;
-    }
-  }
-
-  .station {
+  .form-wrapper {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    font-size: 14px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #b3b3b3;
-    margin-right: 10px;
-  }
-
-  .search-input {
-    margin-left: 10px;
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      .el-select {
+        width: 155px;
+        margin-right: 10px;
+        .el-input .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      .date-item-wrapper {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+        .date-item-date {
+          margin-left: 10px;
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
+            font-size: 13px;
+            color: #b3b3b3;
+          }
+          .el-input .el-input__suffix {
+            right: 70px;
+          }
+        }
+      }
+    }
   }
-
   .but {
     display: flex;
     flex-direction: row;
     align-content: center;
-    margin-left: 20px;
   }
-
+  .el-button + .el-button {
+    margin-left: 0;
+  }
   .buttons {
     background-color: rgba(0, 70, 199, 0.2);
     border: 1px solid #3b4c6c;
     color: #b3b3b3;
     font-size: 14px;
-
+    margin-right: 10px;
     &:hover {
       background-color: rgba(0, 70, 199, 0.5);
       color: #ffffff;
@@ -1141,6 +1118,7 @@ export default {
 }
 .bodys {
   width: 100%;
+  height: calc(100% - 260px - 50px - 30px);
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   margin-bottom: 19px;
@@ -1179,11 +1157,12 @@ export default {
 
 .economicTable {
   width: 100%;
+  height: calc(100% - 46px);
 }
 
 .echarts {
   width: 100%;
-  height: 26vh;
+  height: 260px;
   display: flex;
   flex-direction: row;
   align-items: center;

src/views/layout/economicsOperation/homePage/components/card.vue

@@ -368,7 +368,6 @@ export default {
 .photovoltaicCard {
   display: flex;
   flex-wrap: wrap;
-  height: calc(100vh - 414px);
   overflow: auto;
   padding-bottom: 50px;
 

src/views/layout/economicsOperation/index.vue

@@ -239,6 +239,11 @@ export default {
               icon: "",
               path: "/economicsOperation/thematicAnalysis/utillHours",
             },
+            {
+              titleName: "双率分析",
+              icon: "",
+              path: "/economicsOperation/thematicAnalysis/doubleRate",
+            },
             // {
             //   titleName: "维护损失率",
             //   icon: '',
@@ -358,4 +363,11 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped lang="less">
+.transition-all {
+  height: 100%;
+  > div {
+    height: 100%;
+  }
+}
+</style>

src/views/layout/economicsOperation/thematicAnalysis/doubleRate/index.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="parcel-box">
+    <div class="search">
+      <div class="left">
+        <div class="doubleRate-form">
+          <div class="doubleRate-select">
+            <el-select
+              size="mini"
+              v-model="tabIndex"
+              placeholder="请选择"
+              @change="tabClick"
+            >
+              <el-option
+                v-for="item in tabOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              v-model="company"
+              placeholder="请选择"
+              @change="changeCompan(company)"
+            >
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.id"
+                :label="item.aname"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              v-model="station"
+              placeholder="请选择"
+              clearable
+              @change="changeStation"
+            >
+              <el-option
+                v-for="item in stationOptions"
+                :key="item.id"
+                :label="item.aname"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="date-wrapper">
+            <div class="date-item-wrapper">
+              开始日期
+              <div class="date-item-date">
+                <el-date-picker
+                  v-model="startTime"
+                  type="datetime"
+                  size="mini"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="选择时间"
+                >
+                </el-date-picker>
+              </div>
+            </div>
+            <div class="date-item-wrapper">
+              结束日期
+              <div class="date-item-date">
+                <el-date-picker
+                  v-model="endTime"
+                  type="datetime"
+                  size="mini"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="选择时间"
+                >
+                </el-date-picker>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="but">
+          <el-button round size="mini" class="buttons" @click="search"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+      <div class="right">
+        <img class="select-back" src="@assets/img/images/select-back.png" />
+        <div class="title-select">
+          <el-select
+            v-model="selectValue"
+            placeholder="请选择"
+            @change="search"
+            clearable
+          >
+            <el-option
+              v-for="item in selectList"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <!-- <el-button round size="mini">导出</el-button> -->
+    </div>
+    <div class="data-bodys">
+      <div class="line clearfix">
+        <div class="leftContent left">
+          <span>{{ selectValue }}</span>
+        </div>
+        <div class="rightContent right"></div>
+      </div>
+      <div class="economicTable">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          size="mini"
+          stripe
+          height="100%"
+        >
+          <el-table-column
+            align="center"
+            v-for="(item, index) in tableHeader"
+            :key="index"
+            :prop="item.code"
+            :label="selectValue == '清洗提升率' ? item.title1 : item.title"
+            sortable
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { qxcljslList, qxtslList } from "@/api/curveAnalyse";
+import { GetOrganization, GetStationByCompany } from "@/api/headerNav.js";
+import dayjs from "dayjs";
+export default {
+  name: "doubleRate",
+  components: {},
+  data() {
+    return {
+      pillarName: "",
+
+      list: [],
+
+      tabIndex: -2,
+      tabOptions: [{ id: -2, name: "光伏" }],
+
+      barList: [],
+      tableData: [],
+      tableHeader: [
+        { title: "设备", title1: "设备", code: "wtname" },
+        { title: "及时处理次数", title1: "清洗前平均功率", code: "frequency" },
+        { title: "总处理次数", title1: "清洗后平均功率", code: "zfrequency" },
+        { title: "及时率", title1: "提升率", code: "jsl" },
+      ],
+      company: "",
+      companyOptions: [],
+      station: "",
+      stationOptions: [],
+      startTime: "",
+      endTime: "",
+      selectList: [
+        {
+          name: "缺陷处理及时率",
+        },
+        {
+          name: "清洗提升率",
+        },
+      ],
+      selectValue: "缺陷处理及时率",
+    };
+  },
+  filters: {},
+  computed: {},
+  created() {
+    this.startTime = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
+    this.endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    this.initialization();
+  },
+  methods: {
+    initialization() {
+      GetOrganization({ type: this.tabIndex }).then((res) => {
+        if (res.data) {
+          this.companyOptions = res.data;
+          this.company = res.data[0].id;
+          this.getStationData();
+        }
+      });
+    },
+    // 获取场站列表
+    async getStationData() {
+      this.stationOptions = [];
+      let params = {
+        type: this.tabEvent,
+        companyids: this.company,
+      };
+      const datas = await GetStationByCompany(params);
+      this.stationOptions = datas.data;
+      this.station = datas.data[0].id;
+      this.search();
+    },
+    search() {
+      switch (this.selectValue) {
+        case "缺陷处理及时率":
+          qxcljslList({
+            companys: this.company,
+            wpids: this.station,
+            type: this.tabIndex,
+            starttime: this.startTime,
+            endtime: this.endTime,
+          }).then((res) => {
+            if (res.data) {
+              this.tableData = res.data;
+            }
+          });
+          break;
+        case "清洗提升率":
+          qxtslList({
+            companys: this.company,
+            wpids: this.station,
+            type: this.tabIndex,
+            starttime: this.startTime,
+            endtime: this.endTime,
+          }).then((res) => {
+            if (res.data) {
+              this.tableData = res.data;
+            }
+          });
+          break;
+      }
+    },
+    //切换公司
+    changeCompan(val) {
+      this.companyVal = val;
+      this.getStationData();
+    },
+    //切换场站
+    changeStation(val) {
+      this.stationVal = val;
+      this.getTableData();
+    },
+    monthChange(data) {
+      let year = new Date(data).getFullYear().toString();
+      return year;
+    },
+    getmonthValue() {
+      let year = new Date().getFullYear().toString();
+      return year;
+    },
+
+    tabClick(data) {
+      this.tabIndex = data;
+      // this.search();
+    },
+  },
+  mounted() {},
+  beforeUnmount() {},
+};
+</script>
+
+<style lang="less" scoped>
+.parcel-box {
+  padding: 0 20px;
+  box-sizing: border-box;
+  height: 100%;
+
+  .line {
+    padding-bottom: 5px;
+
+    .leftContent {
+      width: 242px;
+      height: 41px;
+      line-height: 41px;
+      background: url("../../../../../assets/imgs/title_left_bg.png");
+
+      span {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #ffffff;
+        margin-left: 25px;
+      }
+    }
+
+    .rightContent {
+      width: 212px;
+      height: 28px;
+      margin-top: 13px;
+      background: url("../../../../../assets/imgs/title_right_bg.png");
+    }
+  }
+
+  .search {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0;
+    align-items: center;
+    justify-content: space-between;
+    .station {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+    }
+    .search-input {
+      margin-left: 10px;
+    }
+    .left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      ::v-deep .doubleRate-form {
+        display: flex;
+        .doubleRate-select {
+          display: flex;
+          align-items: center;
+          .el-select {
+            width: 155px;
+            .el-input .el-input__inner {
+              width: 150px;
+            }
+          }
+        }
+        .date-wrapper {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #b3b3b3;
+          margin-left: 10px;
+          .date-item-wrapper {
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .date-item-date {
+              margin-left: 10px;
+              .el-input .el-input__inner {
+                font-size: 13px;
+                color: #b3b3b3;
+              }
+            }
+          }
+        }
+      }
+      .buttons {
+        background-color: rgba(0, 70, 199, 0.2);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+        font-size: 14px;
+
+        &:hover {
+          background-color: rgba(0, 70, 199, 0.5);
+          color: #ffffff;
+        }
+      }
+    }
+
+    .right {
+      position: relative;
+
+      .select-back {
+        position: absolute;
+        right: 0;
+        top: -3px;
+        z-index: 0;
+        width: 100%;
+      }
+
+      .title-select ::v-deep {
+        z-index: 2;
+        .el-select .el-input__inner {
+          width: 148px;
+        }
+      }
+    }
+  }
+  .data-bodys {
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    height: calc(100% - 70px);
+    .economicTable {
+      height: calc(100% - 56px);
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  height: 0;
+  line-height: 0;
+  visibility: hidden;
+  display: block;
+}
+
+.clearfix {
+  zoom: 1;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.el-table::before {
+  height: 0;
+}
+
+.chart-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid rgba(106, 106, 106, 0.5);
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #ffffff;
+}
+
+.point {
+  width: 6px;
+  height: 1px;
+  background-color: #ffffff;
+  position: absolute;
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.top {
+    top: -1px;
+  }
+
+  &.bottom {
+    bottom: -1px;
+  }
+}
+</style>

src/views/layout/stateMonitor/AGCMonitor/components/AGCFan.vue

@@ -379,6 +379,7 @@
     display: grid;
     justify-content: space-between;
     grid-template-columns: repeat(auto-fill, 442px);
+    align-content: flex-start;
     height: calc(100vh - 117px);
     overflow-y: auto;
     overflow-x: hidden;

src/views/layout/stateMonitor/AGCMonitor/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <div style="padding:0 20px">
+    <div style="padding:0 20px" >
         <headerNav @firstRender="firstRender" />
-       <a-g-c-fan v-if="headerIndex==-1" ref="agc"  :nodeCode="nodeCode" :activeNode="activeNode"/>
+         <a-g-c-fan v-if="headerIndex==-1" ref="agc"  :nodeCode="nodeCode" :activeNode="activeNode"/>
         <a-g-c-sun v-if="headerIndex==-2" ref="agc"  :nodeCode="nodeCode" :activeNode="activeNode"/>
     </div>
 </template>
@@ -22,8 +22,8 @@
         components: {
             headerNav,
             AGCFan,
-            AGCSun
-
+            AGCSun,
+            
         },
         data() {
             return {
@@ -39,7 +39,16 @@
 
 
         methods: {
-
+            getScale () {
+                    const w = window.innerWidth / this.style.width
+                    const h = window.innerHeight / this.style.height
+                    return { x: w, y: h }
+            },
+            setScale () {
+                    const scale = this.getScale()
+                    this.style.transform =
+                    'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
+            },
 
             firstRender(headerIndex, nodeCode, activeNode, a, b) {
                 this.headerIndex = headerIndex;

src/views/layout/stateMonitor/factoryMonitor/components/dialogCheck.vue

@@ -1,23 +1,26 @@
 <template>
     <div>
-        <div v-if="visible==true && tagCode != tag1 && tagCode != tag2" class="contrasten"
-             :class="{'changeSer':changeSer==true,'changeWid':changeWid==true,'changeAll':changeAll==true}"
-             :style="{ left: xs + 'px', top: ys + 'px' }">
-            <div slot="content" @click="showDelogOnly(tagCode,indexes,tagName)">
-                <i class="icon-curve" style="margin-right: 3px"></i>
-                趋势曲线
-                <el-icon style="position: relative;top:3px;left: 35px">
-                    <ArrowRight/>
-                </el-icon>
-            </div>
-            <div slot="content" @click="showDelog(tagCode,indexes,tagName)" :plain="true">
-                <i class="icon-contrast" style="margin-right: 3px"></i>
-                趋势对比
-                <el-icon style="position: relative;top:3px;left: 35px">
-                    <ArrowRight/>
-                </el-icon>
-            </div>
-        </div>
+       <div  @mouseenter="leaveList(true)" @mouseleave="leaveList(false)" v-if="visible==true && tagCode != tag1 && tagCode != tag2" style="width: 192px;min-height: 120px; position: fixed;"
+             :style="{ left: (xs-20 )+ 'px', top: (ys-15 )+ 'px' }">
+           <div  class="contrasten" :style="{ left: xs + 'px', top: ys + 'px' }"
+                :class="{'changeSer':changeSer==true,'changeWid':changeWid==true,'changeAll':changeAll==true}"
+                >
+               <div style="text-align: left" slot="content" @click="showDelogOnly(tagCode,indexes,tagName)">
+                   <i class="icon-curve" style="margin-right: 3px"></i>
+                   趋势曲线
+                   <el-icon style="position: relative;top:3px;left: 35px">
+                       <ArrowRight/>
+                   </el-icon>
+               </div>
+               <div style="text-align: left" slot="content" @click="showDelog(tagCode,indexes,tagName)" :plain="true">
+                   <i class="icon-contrast" style="margin-right: 3px"></i>
+                   趋势对比
+                   <el-icon style="position: relative;top:3px;left: 35px">
+                       <ArrowRight/>
+                   </el-icon>
+               </div>
+           </div>
+       </div>
         <div style="position:fixed;top:400px;z-index:999;height: 26%;width: 36%;background: #0C0F15 "
              class="window" v-if="dialogVisibles==true" :style="{ left: x + 'px', top: y + 'px' }">
             <p class="ststTit header" @mousedown="startDrag">
@@ -50,11 +53,13 @@
         </div>
 
         <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
+        <qushi-dialog1 ref="child1" :chartName="chartName"></qushi-dialog1>
 
     </div>
 </template>
 <script>
-    import qushiDialog from "./qushiDialog";
+    import qushiDialog from "./qushiDialogCopy";//单曲线对比
+    import qushiDialog1 from "./qushiDialog";//多曲线对比组件
     import {ExportTagCurveDatas, Format, getDateOfCounthour, GetTagCurveValues,} from "@api/home";
     import dayjs from "dayjs";
     import windChartCom from "../windPowerPlant/components/lineCharts.vue";
@@ -65,7 +70,8 @@
         components: {
             QuestionFilled,
             windChartCom,
-            qushiDialog
+            qushiDialog,
+            qushiDialog1
         },
         props: {
             tagCode: {
@@ -73,8 +79,8 @@
                 required: true,
             },
             indexes: {
-                type: Number,
-                required: true,
+                type: String,
+
             },
             tagName: {
                 type: String,
@@ -86,7 +92,7 @@
             },
             xs: {
                 type: Number,
-                required: true,
+
             },
             changeSer: {
                 type: Boolean,
@@ -101,7 +107,7 @@
 
             ys: {
                 type: Number,
-                required: true,
+
             },
             tableData: {
                 type: Object,
@@ -169,15 +175,39 @@
 
             let dete = JSON.parse(localStorage.getItem('tmpData'))
             if (dete != null) {
-                setTimeout(() => {
-                    if (dete.length > 0 && this.tableData != '' && this.tableData != null) {
+            //
+            //     setTimeout(() => {
+            //         if (dete.length > 0 ) {
+            //
+                this.tmpData = dete
                         this.dialogVisibles = true
-                        this.tmpData = dete
-                    }
-                }, 1000)
+            //
+            //         }
+            //     }, 1000)
             }
+
+        },
+        watch:{
+          // ys(newval,oldVal){
+          //   console.log('tagCode',this.tagCode)
+          //  console.log('indexes',this.indexes)
+          //  console.log('tagName',this.tagName)
+          //  console.log('visible',this.visible)
+          //  console.log('xs',this.xs)
+          //  console.log('ys',this.ys)
+          //  console.log('changeSer',this.changeSer)
+          //  console.log('changeWid',this.changeWid)
+          //  console.log('changeAll',this.changeAll)
+          //  console.log('tag2',this.tag2)
+          //  console.log('tag1',this.tag1)
+          //  console.log('NameCode',this.NameCode)
+          // }
         },
         methods: {
+            leaveList(val){
+                this.$emit("tag", val)
+            },
+
             exportDatas() {
                 if (this.starttime == '' || this.endtime == '') {
                     this.$message({
@@ -210,8 +240,9 @@
             c() {
                 this.dialogFull ? this.dialogFull = false : this.dialogFull = true
             },
+            //打开多曲线对比组件
             openCurvDatased() {
-                this.$refs.child.openCurvDatas(this.tmpData, 2)
+                this.$refs.child1.openCurvDatas(this.tmpData, 2)
             },
 
             handleClose() {
@@ -426,8 +457,8 @@
 
                 this.tmpDatas.push({
                     "statiomName": title,
-                    "stse": this.tableData[this.leng][this.NameCode],
-                    "sts": this.tableData[this.leng][this.stationTit]
+                    "stse": this.NameCode,
+                    "sts": this.indexes
 
                 });
 
@@ -450,22 +481,22 @@
                 this.stationTit = data
                 this.leng = index
                 let b = false;
-                let s = this.tableData[this.leng][this.stationTit]
-                let d = this.tableData[this.leng][this.NameCode]
+                let s = this.indexes
+                let d = this.NameCode
                 if (JSON.parse(localStorage.getItem('tmpData'))) {
                     this.tmp = JSON.parse(localStorage.getItem('tmpData'))
                 }
                 const code = process.env.VUE_APP_DIALOG_NUM;
                 this.tmp.forEach(d => {
-                    if (d.sts === this.tableData[this.leng][this.stationTit] && d.stse === this.tableData[this.leng][this.NameCode] && d.statiomName === title) {
+                    if (d.sts === this.indexes && d.stse === this.NameCode && d.statiomName === title) {
                         b = true;
                     }
                 })
                 if (!b && this.tmp.length < code && s != "" && d != "") {
                     this.tmp.unshift({
                         "statiomName": title,
-                        "stse": this.tableData[this.leng][this.NameCode],
-                        "sts": this.tableData[this.leng][this.stationTit]
+                        "stse": this.NameCode,
+                        "sts": this.indexes
                     });
                 } else if (this.tmp.length >= code) {
                     this.tip('趋势对比最多只能添加' + code + '个指标')
@@ -540,6 +571,7 @@
     }
 </script>
 <style lang="less" scoped>
+
   .ficCon {
     position: fixed;
   }
@@ -928,6 +960,7 @@
 
 
   .window {
+    text-align: left;
     border: 1px solid #094493;
     background: #090E19 !important;
     border-radius: 3px;
@@ -962,6 +995,7 @@
   }
 
   .ststTit {
+    text-align: left;
     width: 97%;
     height: 50px;
     color: #1C99FF;

src/views/layout/stateMonitor/factoryMonitor/components/headerButtonGf.vue

@@ -1,23 +1,32 @@
 <template>
-  <el-row class="headerButton">
-      <div class="nav_right headerRight">
-          <i class="active_icon icon-enterprise"></i>
-          <span>{{region[0]?.aname}}</span>
-      </div>
-    <el-select v-model="checkNode" placeholder="请选择" @change="dataChang">
-      <el-option
-          v-for="item in OrganizationList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-      </el-option>
-    </el-select>
-<!--    <div class="check">-->
-<!--      <span :class="{active:leftIndex==-1}" @click="windLightToggle(-1)">风场</span>-->
-<!--      <span :class="{light:leftIndex==-2}" @click="windLightToggle(-2)">光伏</span>-->
-<!--    </div>-->
-
-        <div style="margin-left: 15px">
+    <el-row class="headerButton">
+        <div class="nav_right ">
+            <el-select v-model="tagListNode" placeholder="请选择"
+                       @change="tagListChang">
+                <el-option
+                        v-for="(item,indexe) in tagList"
+                        :key="indexe"
+                        :label="item.name"
+                        :value="item.type">
+                </el-option>
+            </el-select>
+        </div>
+
+        <el-select v-model="checkNode" placeholder="请选择" @change="dataChang">
+            <el-option
+                    v-for="item in OrganizationList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+            </el-option>
+        </el-select>
+
+        <!--    <div class="check">-->
+        <!--      <span :class="{active:leftIndex==-1}" @click="windLightToggle(-1)">风场</span>-->
+        <!--      <span :class="{light:leftIndex==-2}" @click="windLightToggle(-2)">光伏</span>-->
+        <!--    </div>-->
+
+        <div style="margin-left: 15px" v-if="LengthAta==''">
             <el-select v-model="checkNodes" placeholder="请选择" @change="dataChangs">
                 <el-option
                         v-for="(item,index) in allPowerStation"
@@ -27,113 +36,184 @@
                 </el-option>
             </el-select>
         </div>
-  </el-row>
+    </el-row>
 </template>
 <script>
-import {GetPowerStation, getOrganization} from '@/api/home'
-
-export default {
-  name:'headerButton',
-  props:{
-    type:String,
-    srationId:{
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      OrganizationList: null,
-      PowerStation: [],
-      stationCode:null,
-      stationName:'',
-      checkNode: '',
-        checkNodes:'',
-      rightIndex: 0,
-      endIndex:null,
-      leftIndex:this.type,
-      stationIndex: 0,
-      allPowerStation:null,
-        region:[],
-    }
-  },
-  async created() {
-
-    //获取区域公司
-    await this.getOrganizationList();
-    //根据区域公司编码获取场站信息
-    await this.getPowerStation();
-  },
-  methods: {
-
-    handleAddClick(){
-      this.endIndex=1;
-      if(this.stationIndex < this.PowerStation.length-1){
-        this.stationIndex ++
-        // this.powerStatonCheck(0,this.PowerStation[this.stationIndex]?.children[0]?.CZBM ,this.PowerStation[this.stationIndex]?.children[0]?.CZMC)
-      }
-    },
-    handleDel(){
-      this.endIndex=0;
-      if(this.stationIndex > 0){
-        this.stationIndex --
-        // this.powerStatonCheck(0,this.PowerStation[this.stationIndex]?.children[0]?.CZBM ,this.PowerStation[this.stationIndex]?.children[0]?.CZMC)
-      }
-    },
-    //获取区域公司
-    async getOrganizationList() {
-
-      const data = await getOrganization({type:this.type});
-      var arr = [];
-      if(data && data.length>0){
-
-          this.region=data
-let data1=data.slice(1)
-     data1.forEach(item => {
-
-          var obj = {};
-          obj.value = item.code;
-          obj.label = item.aname;
-          arr.push(obj);
-        })
-          this.checkNode = data1[0].code;
-        this.OrganizationList = arr;
-      }
-    },
-    //获取场站信息
-    async getPowerStation() {
-      const data = await GetPowerStation({companyCode: this.checkNode, stationType: this.leftIndex})
-       if(data) {
-           this.checkNodes=data[0].CZBM
-           this.allPowerStation=data;
-           this.$emit('renderData',this.checkNodes,this.leftIndex,this.stationName);
-
-       }
-        // this.$emit('renderData',this.stationCode,this.leftIndex,this.stationName);
-
-    },
-    //风光切换
-   // async windLightToggle(index) {
-   //    this.leftIndex = index;
-   //    this.rightIndex=0;
-   //   await this.getPowerStation();
-   //   await this.$emit('renderData',this.stationCode,this.leftIndex);
-   //  },
-    //区域切换
-    async dataChang(val) {
-      //根据区域公司编码获取场站信息
-      this.stationIndex=0;
-      this.rightIndex=0;
-      await this.getPowerStation();
-      // await this.$emit('renderData','',this.leftIndex,this.stationName,this.checkNode);
-    },
-    //点击场站切换数据
-      dataChangs(code) {
-      this.stationCode=code;
-      this.$emit('renderData',this.stationCode,this.leftIndex,this.stationName,this.checkNode);
+    import {GetPowerStation, getOrganization, getPowerstationTypeList} from '@/api/home'
+
+    export default {
+        name: 'headerButton',
+        props: {
+            srationId: {
+                type: String,
+                default: '',
+            },
+
+        },
+        data() {
+            return {
+                LengthAta:'',
+                OrganizationList: null,
+                tagListNode: '',
+                PowerStation: [],
+                stationCode: null,
+                stationName: '',
+                checkNode: '',
+                checkNodes: '',
+                rightIndex: 0,
+                endIndex: null,
+                leftIndex: this.tagListNode,
+                stationIndex: 0,
+                allPowerStation: null,
+                region: [],
+                tagList: [],
+                conCode:'',
+                data:'',
+                data1:''
+            }
+        },
+        async created() {
+            this.conCode=this.$route.query.companyCode
+            this.data=this.$route.query.stationCode
+            this.data1=this.$route.query.nemCode
+            await this.getPowerstationTypeList();
+            //获取区域公司
+
+        },
+        methods: {
+            async getPowerstationTypeList() {
+
+                const data = await getPowerstationTypeList({code: 'classification'});
+                let arr = []
+                data.forEach(s => {
+                    if (s.flag == 0) {
+                        arr.push(s)
+                    }
+                })
+                this.tagList = arr
+
+                // let arr=[]
+                // data.forEach(i=>{
+                //     if(i.flag==0){
+                //         arr.push(+1)
+                //     }
+                // })
+                this.tagListNode = data[0].type
+                await this.getOrganizationList(data[0].type)
+
+                // this.codeNum=arr.length
+                // this.tagList = [{type: '-1', flag: '0'}, {type: '-2', flag: '0'}];
+                // localStorage.setItem("tagList", JSON.stringify(this.tagList));
+            },
+
+
+            // 切换风光水
+            async tagListChang(val) {
+                this.tagListNode = val
+                this.getOrganizationList(val)
+            },
+
+            handleAddClick() {
+                this.endIndex = 1;
+                if (this.stationIndex < this.PowerStation.length - 1) {
+                    this.stationIndex++
+                    // this.powerStatonCheck(0,this.PowerStation[this.stationIndex]?.children[0]?.CZBM ,this.PowerStation[this.stationIndex]?.children[0]?.CZMC)
+                }
+            },
+            handleDel() {
+                this.endIndex = 0;
+                if (this.stationIndex > 0) {
+                    this.stationIndex--
+                    // this.powerStatonCheck(0,this.PowerStation[this.stationIndex]?.children[0]?.CZBM ,this.PowerStation[this.stationIndex]?.children[0]?.CZMC)
+                }
+            },
+            //获取区域公司
+            async getOrganizationList() {
+                const data = await getOrganization({type: this.tagListNode});
+                var arr = [];
+
+                if (data && data.length > 0) {
+
+                    this.region = data
+                    let data1 = data.slice(1)
+                    data1.forEach(item => {
+
+                        var obj = {};
+                        obj.value = item.code;
+                        obj.label = item.aname;
+                        arr.push(obj);
+                    })
+
+                    if(this.conCode!=undefined && this.conCode!=''){
+
+                        this.checkNode=this.conCode
+
+                    }else {
+                        this.checkNode = data1[0].code;
+                    }
+                    this.OrganizationList = arr;
+                }
+                    await this.getPowerStation();
+
+            },
+            //获取场站信息
+            async getPowerStation(val) {
+
+                const data = await GetPowerStation({companyCode: this.checkNode, stationType: this.leftIndex})
+
+                if (data && JSON.stringify(data)!=="{}") {
+                    if(this.data!=undefined && this.data!='' && val==undefined){
+
+                        this.checkNodes=this.data
+                    }
+                    else {
+                        this.checkNodes = data[0].CZBM
+                    }
+
+                    this.allPowerStation = data;
+                    this.$emit('renderData', this.checkNodes, this.leftIndex, this.stationName, this.tagListNode,this.tagListNode);
+                }else {
+                    this.LengthAta='1'
+                    this.$emit('renderData', this.checkNode, this.leftIndex, this.stationName, this.tagListNode,this.tagListNode);
+                }
+                // this.$emit('renderData',this.stationCode,this.leftIndex,this.stationName);
+            },
+            //风光切换
+            // async windLightToggle(index) {
+            //    this.leftIndex = index;
+            //    this.rightIndex=0;
+            //   await this.getPowerStation();
+            //   await this.$emit('renderData',this.stationCode,this.leftIndex);
+            //  },
+            //区域切换
+            async dataChang(val) {
+              let title
+                this.region.forEach(s=>{
+                    if(s.code==val){
+                        title=s.orgType
+                    }
+                })
+
+                if(title=='STA'){
+                    this.LengthAta='1'
+                    this.$emit('renderData', val, this.leftIndex, this.stationName, this.tagListNode,this.tagListNode);
+                }else {
+                    this.LengthAta=''
+                    this.checkNode=val
+                    await this.getPowerStation(val);
+                }
+                //根据区域公司编码获取场站信息
+                this.stationIndex = 0;
+                this.rightIndex = 0;
+
+            },
+            //点击场站切换数据
+            dataChangs(code) {
+                this.stationCode = code;
+                this.$emit('renderData', this.stationCode, this.leftIndex, this.stationName, this.tagListNode,this.tagListNode);
+            }
+        },
     }
-  },
-}
 </script>
 <style lang="less" scoped>
   .headerRight {
@@ -152,7 +232,7 @@ let data1=data.slice(1)
       font-size: 14px;
       font-family: Microsoft YaHei;
       font-weight: 400;
-      color: #fff ;
+      color: #fff;
 
     }
 
@@ -165,99 +245,107 @@ let data1=data.slice(1)
     }
 
   }
-.headerButton {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 10px 0 15px 0;
-  .active {
-    background-color: rgba(0, 70, 199, 0.4) !important;
-    color: #fff !important;
-  }
 
-  .light {
-    background-color: rgba(255, 131, 0, 0.6)!important;
-    color: #fff !important;
-  }
+  .headerButton {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 10px 0 15px 0;
 
-  .check {
-    width: 100px;
-    height: 25px;
-    line-height: 23px;
-    box-sizing: border-box;
-    background-color: #2A374F;
-    border-radius: 12.5px;
-    border: 1px solid #43516B;
-    color: #B3B3B3;
-    margin-left: 5px;
-
-    > span:first-child {
-      border-top-left-radius: 12.5px;
-      border-bottom-left-radius: 12.5px;
+    .active {
+      background-color: rgba(0, 70, 199, 0.4) !important;
+      color: #fff !important;
     }
 
-    > span:last-child {
-      border-top-right-radius: 12.5px;
-      border-bottom-right-radius: 12.5px;
+    .light {
+      background-color: rgba(255, 131, 0, 0.6) !important;
+      color: #fff !important;
     }
 
-    > span {
-      display: inline-block;
-      width: 50%;
-      text-align: center;
-    }
-  }
+    .check {
+      width: 100px;
+      height: 25px;
+      line-height: 23px;
+      box-sizing: border-box;
+      background-color: #2A374F;
+      border-radius: 12.5px;
+      border: 1px solid #43516B;
+      color: #B3B3B3;
+      margin-left: 5px;
 
-  .icon {
-    font-size: 18px;
-    margin: 0 12px;
-  }
+      > span:first-child {
+        border-top-left-radius: 12.5px;
+        border-bottom-left-radius: 12.5px;
+      }
 
-  .icon .icon-wind {
-    color: #1C99FF;
-  }
+      > span:last-child {
+        border-top-right-radius: 12.5px;
+        border-bottom-right-radius: 12.5px;
+      }
 
-  .icon .icon-Photovoltaic-pv {
-    color: rgba(255, 131, 0, 1);
-  }
+      > span {
+        display: inline-block;
+        width: 50%;
+        text-align: center;
+      }
+    }
 
-  .childNode {
-    display: flex;
-    width: 85%;
-    >div {
-      padding: 0 20px;
-      height: 25px;
-      line-height: 25px;
-      border-radius: 12.5px;
-      background-color: rgba(0, 70, 199, 0.2);
-      color: #B3B3B3;
-      margin-right: 5px;
+    .icon {
+      font-size: 18px;
+      margin: 0 12px;
+    }
+
+    .icon .icon-wind {
+      color: #1C99FF;
     }
-    .station-name{
-      padding: 0 18px;
+
+    .icon .icon-Photovoltaic-pv {
+      color: rgba(255, 131, 0, 1);
     }
-  }
-  .more{
-    position: absolute;
-    top: 10px;
-    right: -60px;
-    display: flex;
-    .button{
-      width: 25px;
-      height: 25px;
-      line-height: 25px;
-      text-align: center;
-      border-radius: 50%;
-      background-color: rgba(0, 70, 199, 0.2);
-      color: rgba(179, 179, 179, 1);
+
+    .childNode {
+      display: flex;
+      width: 85%;
+
+      > div {
+        padding: 0 20px;
+        height: 25px;
+        line-height: 25px;
+        border-radius: 12.5px;
+        background-color: rgba(0, 70, 199, 0.2);
+        color: #B3B3B3;
+        margin-right: 5px;
+      }
+
+      .station-name {
+        padding: 0 18px;
+      }
     }
-    .button{
-      margin-right: 5px;
+
+    .more {
+      position: absolute;
+      top: 10px;
+      right: -60px;
+      display: flex;
+
+      .button {
+        width: 25px;
+        height: 25px;
+        line-height: 25px;
+        text-align: center;
+        border-radius: 50%;
+        background-color: rgba(0, 70, 199, 0.2);
+        color: rgba(179, 179, 179, 1);
+      }
+
+      .button {
+        margin-right: 5px;
+      }
+    }
+
+    .activeBtn {
+      background-color: rgba(0, 70, 199, 0.4) !important;
+      color: #fff !important;
     }
   }
-  .activeBtn{
-    background-color: rgba(0, 70, 199, 0.4)!important;
-    color: #fff!important;
-  }
-}
 </style>

src/views/layout/stateMonitor/factoryMonitor/components/qushiDialog.vue

@@ -7,7 +7,7 @@
                 <div class="dialog-title">
 
                     <img class="dialog-title-img" src="@assets/img/images/dialog-title.png"/>
-                    <div class="title">{{ chartName }}</div>
+                    <div class="title" style="text-align: left">{{ chartName }}</div>
                     <!--                    <i class="el-icon-full-screen"  @click="c"></i>-->
                 </div>
 
@@ -394,7 +394,6 @@ import {GetCurveValues, GetRealTimeStaValues, GetRtValuesByTagName} from "../../
                                 }
                             }
                             this.detailsValue.push(option)
-
                         })
                       this.getCurrentDateDatas();
                     }
@@ -444,6 +443,7 @@ import {GetCurveValues, GetRealTimeStaValues, GetRtValuesByTagName} from "../../
                 option = option.substring(0, option.length - 1)
                 option += "}";
                 var json = eval("(" + option + ")");
+
                 this.$refs.windChartCom.changDateVisible(json)
             },
             openCurvDatas(valse, ined) {
@@ -585,8 +585,6 @@ import {GetCurveValues, GetRealTimeStaValues, GetRtValuesByTagName} from "../../
                                 }
                             }
                             this.detailsValue.push(option)
-
-
                         })
                       this.getCurrentDateDatas();
                     }
@@ -604,12 +602,13 @@ import {GetCurveValues, GetRealTimeStaValues, GetRtValuesByTagName} from "../../
                 tagName: tagNames
               }).then(res => {
                 if (res) {
-
                   for(var i=0;i<this.detailsValue.length;i++){
-
-                    if(res[i]?.state == 0){
-                      this.detailsValue[i].dateTime=dayjs(res[i].dateTime).format("YYYY-MM-DD HH:mm:ss")
-                      this.detailsValue[i].value=Number(res[i].value).toFixed(2)
+                    for(var j=0;j<res.length;j++) {
+                      if (this.detailsValue[i].tagName == res[j].tagName) {
+                        this.detailsValue[i].dateTime = dayjs(res[j].dateTime).format("YYYY-MM-DD HH:mm:ss")
+                        this.detailsValue[i].value = Number(res[j].value).toFixed(2)
+                        break;
+                      }
                     }
                   }
                 }

src/views/layout/stateMonitor/factoryMonitor/components/saliderBar.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="sliderBar">
         <ul class="tip">
-            <li v-for="(item,index) in routerData" :key="index" :class="{active:$route.meta.title==item.name}"
-                @click="routerTarget(index,item.href)">
+            <li v-for="(item, index) in routerData" :key="index" :class="{ active: $route.meta.title == item.name }"
+                @click="routerTarget(index, item.href)">
                 <el-tooltip class="item" effect="light" :content="item.name" placement="left">
                     <i :class="item.icon"></i>
                 </el-tooltip>
@@ -11,67 +11,99 @@
     </div>
 </template>
 <script>
-    export default {
-        props: {
-            routerData: {
-                type: Array,
-                required: true,
-                default: []
-            }
+export default {
+    props: {
+        routerData: {
+            type: Array,
+            required: true,
+            default: []
         },
-        data() {
-            return {
-                saliderIndex: 0,
+
+    },
+    data() {
+        return {
+            saliderIndex: '0',
+            conCode: '',
+            data: ''
+        }
+    },
+    created() {
+
+
+    },
+    methods: {
+
+        routerTarget(index, path) {
+            const { query } = this.$route
+            if (path.endsWith('/lighthome')) {
+                // 集中式场站路由不一样
+                if (query.companyCode === query.stationCode) {
+                    path += 'Index'
+                }
+            }
+            if (this.$route.query.companyCode != undefined && this.$route.query.companyCode != undefined) {
+                this.conCode = this.$route.query.companyCode
+                this.data = this.$route.query.stationCode
+            } else {
+                this.conCode = ''
+                this.data = ''
             }
-        },
-        created() {
 
-        },
-        methods: {
+            this.saliderIndex = index;
+            if (index == 0) {
+                this.$router.push({ path, query: this.$route.query });
+            }
+            else if (this.data != '' && this.conCode != '') {
+
+                this.$router.push({
+                    path: path,
+                    query: { ...this.$route.query, companyCode: this.conCode, stationCode: this.data },
 
-            routerTarget(index, path) {
+                });
 
-                this.saliderIndex = index;
-                this.$router.push(path);
+            } else {
+                this.$router.push({ path, query: this.$route.query });
             }
-        },
-        computed: {}
-    }
+
+        }
+    },
+    computed: {}
+}
 
 </script>
 <style lang="less" scoped>
-  .sliderBar {
+.sliderBar {
     ul {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50px;
-      margin-top: 50px;
-      border-right: 1px solid #1C99FF;
-      border-radius: 25px;
-      background: linear-gradient(267deg, #002767, transparent);
-      padding: 16px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 50px;
+        margin-top: 50px;
+        border-right: 1px solid #1C99FF;
+        border-radius: 25px;
+        background: linear-gradient(267deg, #002767, transparent);
+        padding: 16px 0;
     }
 
     li {
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      background: rgba(0, 70, 199, 0.2);
-      color: #fff;
-      font-size: 17px;
-      text-align: center;
-      line-height: 36px;
-      margin-top: 16px;
-      cursor: pointer;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: rgba(0, 70, 199, 0.2);
+        color: #fff;
+        font-size: 17px;
+        text-align: center;
+        line-height: 36px;
+        margin-top: 16px;
+        cursor: pointer;
     }
 
     li:first-child {
-      margin-top: 0;
+        margin-top: 0;
     }
 
     .active {
-      background: linear-gradient(90deg, #1c99ff, #1b3ec2);
+        background: linear-gradient(90deg, #1c99ff, #1b3ec2);
     }
-  }
+}
 </style>

src/views/layout/stateMonitor/factoryMonitor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="towerFlag?'containner1':'containner'">
+  <div :class="[towerFlag?'containner1':'containner', noPadding? 'nopadding': '']">
     <!--  厂站监视-->
     <router-view class="content" />
   </div>
@@ -12,17 +12,30 @@ export default {
   data() {
     return {
       towerFlag: false,
+      noPadding: false
     }
   },
-  watch: {
-    $route(res) {
+  methods: {
+    change() {
+      const res = this.$route
       if(res.meta.title == "测风塔"){
         this.towerFlag = true
+      } else if (res.meta.title === '区域首页') {
+        this.noPadding = true
       }else{
         this.towerFlag = false
+        this.noPadding = false
       }
+    }
+  }, 
+  watch: {
+    $route() {
+      this.change()
     },
   },
+  mounted() {
+    this.change()
+  }
 }
 </script>
 
@@ -42,6 +55,9 @@ export default {
   padding: 0 20px;
   background-color: rgba(0, 0, 0, .45);
 }
+.nopadding {
+  padding: 0;
+}
 .content {
     display: flex;
     flex-direction: column;

src/views/layout/stateMonitor/factoryMonitor/photovoltaic/components/navGf.vue

@@ -568,7 +568,7 @@
       border-left: 1px dashed rgba(28, 153, 255, 0.5);
 
       .text {
-        margin-left: 16px;
+        margin-left: 18px;
         border-left: 1px dashed rgba(28, 153, 255, 0.5);
         width: 95%;
         padding-left: 10px;

src/views/layout/stateMonitor/factoryMonitor/photovoltaic/components/navList.vue

@@ -179,7 +179,7 @@
                 this.itemIndex5 = '-1'
                 this.thridMenuIndexs=-1
                 let vale;
-                if (nemu.eqType == 'IN' || nemu.eqType == 'CB' || nemu.eqType == 'SCB' || nemu.eqType=='EMI' || nemu.eqType=='AM') {
+                if (nemu.eqType == 'IN' || nemu.eqType == 'CB' || nemu.eqType == 'SCB' || nemu.eqType=='EMI' || nemu.eqType=='AM' || nemu.eqType=='SBS') {
                     vale = nemu
                 } else {
                     vale = nemu.datas[0].datas[0].datas[0]
@@ -214,7 +214,7 @@
                 this.itemIndex5 = '-1'
                 this.thridMenuIndexs='-1'
                 let vale;
-                if (ined.eqType == 'IN' || ined.eqType == 'CB' || ined.eqType == 'SCB' || ined.eqType=='EMI' || ined.eqType=='AM') {
+                if (ined.eqType == 'IN' || ined.eqType == 'CB' || ined.eqType == 'SCB' || ined.eqType=='EMI' || ined.eqType=='AM' || ined.eqType=='SBS') {
                     vale = ined
                 } else {
                     vale = ined.datas[0].datas[0]
@@ -238,7 +238,7 @@
                 this.itemIndex7='-1'
                 this.itemIndex5 = '-1'
                 let vale;
-                if (ined.eqType == 'IN' || ined.eqType == 'CB' || ined.eqType == 'SCB' || ined.eqType=='EMI' || ined.eqType=='AM') {
+                if (ined.eqType == 'IN' || ined.eqType == 'CB' || ined.eqType == 'SCB' || ined.eqType=='EMI' || ined.eqType=='AM' || ined.eqType=='SBS') {
                     vale = ined
                 } else {
                     vale = ined.datas[0].datas[0]
@@ -271,12 +271,12 @@
                 this.thridMenuIndexs=ind + '-' + index
                 let code;
                 let val;
-                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM') {
+                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM' || val1.eqType=='SBS') {
                     code = val1.nemCode
                 } else {
                     code = val1.datas[0].datas
                 }
-                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM') {
+                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM' || val1.eqType=='SBS') {
                     val = val1
                 } else {
                     val = val1.datas[0]
@@ -296,12 +296,12 @@
                 this.thridMenuIndexs=ind + '-' + index
                 let code;
                 let val;
-                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM') {
+                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM' || val1.eqType=='SBS') {
                     code = val1.nemCode
                 } else {
                     code = val1.datas[0].nemCode
                 }
-                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM') {
+                if (val1.eqType == 'IN' || val1.eqType == 'CB' || val1.eqType == 'SCB' || val1.eqType=='EMI' || val1.eqType=='AM' || val1.eqType=='SBS') {
                     val = val1
                 } else {
                     val = val1.datas[0]
@@ -367,6 +367,7 @@
     }
 </script>
 <style lang="less" scoped>
+
   .icon-systrem {
     position: relative;
     left: -20px;
@@ -419,7 +420,7 @@
   }
 
   .second-menu .third-menu:last-child .wind-item {
-    border-color: transparent;
+    //border-color: transparent;
   }
 
   .box-text {
@@ -583,7 +584,7 @@
       border-left: 1px dashed rgba(28, 153, 255, 0.5);
 
       .text {
-        margin-left: 16px;
+        margin-left: 18px;
         border-left: 1px dashed rgba(28, 153, 255, 0.5);
         width: 95%;
         padding-left: 10px;