jn_sis_zhfx/src/views/stateMonitor/zhzb/zhzb.vue

<template>
  <HeaderNav @typeFlag="typeFlag" :isAll="true" />
  <div class="synthesizeTargetSystem">
    <div class="systemData bodys">
      <div class="line">
        <div class="leftContent"><span>数据指标</span></div>
        <div class="rightContent">
          <div class="more" @click="addTargets"><i>+</i>更多指标</div>
        </div>
      </div>

      <el-table
        ref="table"
        :data="stationData"
        :cell-style="cellStyle"
        :header-cell-style="headerStyle"
        height="81vh"
        style="width: 100%"
        fit
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-background="rgba(4, 12, 11, 0.8)"
        empty-text=" "
        v-if="tableShow"
        stripe
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          fixed
          width="52"
        >
        </el-table-column>

        <el-table-column
          v-for="(item, index) in uniformDetial"
          :key="index"
          :prop="item.uniformCode"
          sortable
          align="center"
          header-align="center"
          :resizable="true"
          :min-width="item.width"
          :fixed="index < 2"
        >
          <!-- <template v-slot="scope" v-if="cilent == 'click'">
            <el-tag @click="v(item.uniformCode, scope.$index, item.name)">
              {{ scope.row[`${item.uniformCode}`] }}
            </el-tag>
          </template> -->
          <template v-slot="scope">
            <!-- 名称 容量无曲线 -->
            <el-tag v-if="index < 2">
              {{ scope.row[`${item.uniformCode}`] }}
            </el-tag>
            <el-tag
              v-else
              @contextmenu="v(item.uniformCode, scope.$index, item.name)"
            >
              {{ scope.row[`${item.uniformCode}`] }}
            </el-tag>
          </template>

          <template #header>
            <div v-if="item.name.length > 6">
              {{ item.name }}
              <span v-if="item.valueUnit">({{ item.valueUnit }})</span>
            </div>
            <div v-else>
              <div>{{ item.name }}</div>
              <div v-if="item.valueUnit">({{ item.valueUnit }})</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <dialog-check
        :tagCode="tagCode"
        :changeWid="changeWid"
        :changeSer="changeSer"
        :changeAll="changeAll"
        :indexes="indexes"
        :tableData="newTableList"
        :tagName="tagName"
        :xs="xs"
        :ys="ys"
        :NameCode="CZMC"
        :visible="visible"
        v-on:tag="z($event)"
        :tag1="CZAMC"
        :tag2="ZJRL"
      ></dialog-check>
    </div>
    <zbDialog
      ref="zbdialog"
      :uniformName="alluniformName"
      :showname="showname"
      :uniformCode="alluniformCode"
      @tableRefresh="tableRefresh"
    />
  </div>
</template>
<script>
import dialogCheck from "@/components/qushi/dialogCheck.vue";
import zbDialog from "@/components/zbDialog/index.vue";
import { getComprehensiveList } from "@/api/monitor/index.js";
import HeaderNav from "@/components/headerNav/index.vue";
import { getNewObj, deepClone } from "@/utills/func.js";
export default {
  components: {
    HeaderNav,
    dialogCheck,
    zbDialog,
  },
  data() {
    return {
      showname: "选择指标",
      newTableList: [], //处理过的tableData
      changeAll: false,
      loading: false,
      CZMC: "CZMC",
      CZAMC: "CZAMC",
      ZJRL: "ZJRL",
      tagCode: "",
      indexes: "",
      tagName: "",
      color: [
        "#1985de",
        "#ff8300",
        "#06a746",
        "#3eede7",
        "#eb0f7c",
        "#dfdc0a",
        "#de0feb",
        "#cca4e3",
      ],
      stse: [],
      sts: [],
      statiomName: [],
      stationTit: null,
      leng: "",
      stationType: null,
      companyCode: null,
      uniformDetial: [],
      uniformDetials: [],
      codeValur: null,
      stationData: null,
      checkList: [],
      moreTargetData: [],
      tableData: [],
      timer: "",
      x: 500,
      y: 250,
      dragging: false,
      currentX: 50,
      currentY: 0,
      initialX: 0,
      initialY: 0,
      tableShow: true,
      tmpData: [],
      detailsValue: [],
      starttime: "",
      endtime: "",
      numgap: 900,
      intervalgap: 7,
      units: [],
      unitDatas: [{ flag: false, min: 0, max: 0, codex: 0 }],
      tagDatas: [],
      handleSwitch: false,
      chartsData: [],
      chartsDataAll: [],
      dialogCurveVisible: false,
      chartName: "趋势曲线",
      ysetDialogVisible: false,
      ysetName: "Y坐标设置",
      visible: false,
      xs: "",
      visibles: "",
      ys: "",
      dete: "",
      cilent: "",
      tableDatas: [],
      pageNow: 1,
      pageSize: 25,
      stationDatasd: [],
      changeSer: false,
      changeWid: false,
      activeTab: "all",
      tabIndex: 0,
      enterpriseIndex: "all",
      targets: "",
    };
  },
  created() {
    this.loading = true;
    let localAllTargets = window.localStorage.getItem("alllocalData");
    // 判断本地是否有指标
    if (localAllTargets != null && JSON.stringify(localAllTargets) != "{}") {
      localAllTargets = JSON.parse(localAllTargets);
      this.uniformDetial = localAllTargets;
    } else {
      this.uniformDetial = [
        { name: "场站名称", uniformCode: "CZMC", valueUnit: "", width: "120" },
        { name: "装机容量", uniformCode: "ZJRL", valueUnit: "kW", width: "80" },
        {
          name: "日限电停机损失电量",
          valueUnit: null,
          uniformCode: "RXDTJSSDL",
          width: "150",
        },
        {
          name: "15分钟自耗电",
          valueUnit: null,
          uniformCode: "ZHD15",
          width: "150",
        },
        {
          name: "15分钟检修损失电量",
          valueUnit: null,
          uniformCode: "JXSSDL15",
          width: "150",
        },
        {
          name: "月限电停机损失电量",
          valueUnit: null,
          uniformCode: "YXDTJSSDL",
          width: "150",
        },
      ];
      window.localStorage.setItem(
        "alllocalData",
        JSON.stringify(this.uniformDetial)
      );
    }
    // this.$nextTick(() => this.firstRender());
  },
  mounted() {
    this.timer = setInterval(() => {
      this.firstRender();
    }, 5000);
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    getNewObj,
    deepClone,
    // 头部tab选择
    typeFlag(activeTab, enterpriseIndex) {
      this.activeTab = activeTab;
      this.tabIndex = activeTab == "all" ? 0 : activeTab == "fc" ? -1 : -2;
      this.enterpriseIndex = enterpriseIndex;
      this.$nextTick(() => this.firstRender());
    },
    // 查询数据
    async firstRender() {
      //获取table数据
      const { data } = await getComprehensiveList({
        company:
          this.enterpriseIndex == "all" ? "0" : this.enterpriseIndex.toString(),
        type: this.tabIndex.toString(),
        targets: this.alluniformCode,
      });
      this.getTableDatas(data.data);
    },
    // 处理列表数据
    getTableDatas(list) {
      let tableData = this.deepClone(list);
      let newList = [];
      let newList1 = [];
      let a = this.alluniformCode.split(",");
      tableData.forEach((item) => {
        let b = [];
        let c = [];
        if (item.dataList.length) {
          item.dataList.forEach((subItem, subIndex) => {
            b.push(subItem.pointValueInDouble.toFixed(2));
            c.push(subItem.pointName);
          });
        }
        newList1.push({
          CZMC: item.wpname,
          ZJRL: item.capacity,
          ...this.getNewObj(a, c),
        });
        newList.push({
          CZMC: item.wpname,
          ZJRL: item.capacity,
          ...this.getNewObj(a, b),
        });
      });
      this.newTableList = newList1;
      this.stationData = newList;
      this.loading = false;
    },
    z(s) {
      this.visible = s;
    },
    v(tagCode, index, tagName) {
      this.cilent = process.env.VUE_APP_DIALOG_POINT;
      this.visible = true;
      this.tagCode = tagCode;
      this.indexes = index;
      this.tagName = tagName;

      if (event.clientY > window.innerHeight - 180) {
        this.ys = event.clientY - 106;
        this.changeSer = true;
        this.changeAll = false;
      } else {
        this.ys = event.clientY + 16;
        this.changeSer = false;
      }
      if (
        event.clientY > window.innerHeight - 180 &&
        event.clientX > window.innerWidth - 100
      ) {
        this.changeWid = false;
        this.changeSer = false;
        this.changeAll = true;
        this.ys = event.clientY - 106;
        this.xs = event.clientX - 171;
      } else if (event.clientX > window.innerWidth - 100) {
        this.xs = event.clientX - 171;
        this.changeAll = false;
        this.changeWid = true;
      } else {
        this.xs = event.clientX - 1;
        this.changeWid = false;
        this.changeAll = false;
      }
      event.preventDefault();
    },
    cellStyle({ columnIndex }) {
      if (columnIndex > 2) {
        return {
          "font-family": "Arial",
          padding: "7px 0",
          "font-size": "13px",
        };
      } else {
        return {
          "backdrop-filter": "blur(10px)",
          padding: "7px 0",
          "font-size": "13px",
        };
      }
    },
    headerStyle({ columnIndex }) {
      if (columnIndex < 3) {
        return { "backdrop-filter": "blur(10px)", padding: "6px 0" };
      } else {
        return { padding: "6px 0" };
      }
    },
    //添加指标
    addTargets() {
      if (this.stationData.length)
        this.$refs.zbdialog.openDialog(this.tabIndex.toString());
    },
    //更多指标--确定刷新指标，刷新数据
    tableRefresh(checkList, moreTargetData) {
      this.tableShow = false;
      setTimeout(() => {
        this.tableShow = true;
      }, 100);
      var codeDetial = [];
      //整理选中指标
      var newArr = [...new Set(checkList)];
      newArr.forEach((arr) => {
        const obj = moreTargetData.find((value) => {
          return arr == value.name;
        });
        if (newArr.length > 13) {
          obj.width = "150";
        } else {
          obj.width = "";
        }
        codeDetial.push(obj);
      });
      this.uniformDetial = [
        { name: "场站名称", uniformCode: "CZMC", valueUnit: "", width: "120" },
        {
          name: "装机容量",
          uniformCode: "ZJRL",
          valueUnit: "kW",
          width: "80",
        },
        ...codeDetial,
      ];
      window.localStorage.setItem(
        "alllocalData",
        JSON.stringify(this.uniformDetial)
      );
      //获取table数据
      this.firstRender();
    },
  },
  computed: {
    // 指标code字符串
    alluniformCode() {
      var arr = [];
      if (this.uniformDetial != null) {
        this.uniformDetial.forEach((item, index) => {
          if (index > 1) {
            arr.push(item.uniformCode);
          }
        });
      }
      const codeStr = arr.join(",");
      return codeStr;
    },
    // 指标name字符串
    alluniformName() {
      var arr = [];
      this.uniformDetial.forEach((item, index) => {
        if (index > 1) {
          arr.push(item.name);
        }
      });
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
.status {
  width: 100%;
  height: calc(100vh - 7.222vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .panel-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 54vh;
    overflow-y: auto;

    .panel-item {
      width: calc(20% - 1.185vh);
      margin-left: 1.481vh;
      margin-bottom: 1.481vh;

      &:nth-child(5n + 1) {
        margin-left: 0;
      }
    }
  }

  .table-box {
    border: 0.093vh solid @darkgray;
    position: relative;
    overflow: auto;
    flex-grow: 1;

    &::after,
    &::before {
      content: "";
      position: absolute;
      width: 0.185vh;
      height: 0.185vh;
      background-color: @write;
      top: 0.37vh;
    }

    &::after {
      left: 0.37vh;
    }

    &::before {
      right: 0.37vh;
    }
  }
  .table-box1 {
    border: 0.093vh solid @darkgray;
    position: relative;
    overflow: auto;
    flex-grow: 1;

    &::after,
    &::before {
      content: "";
      position: absolute;
      width: 0.185vh;
      height: 0.185vh;
      background-color: @write;
      top: 0.37vh;
    }

    &::after {
      left: 0.37vh;
    }

    &::before {
      right: 0.37vh;
    }
  }
}
.search-input {
  margin-left: 10px;

  /deep/ .el-input__suffix {
    position: absolute;
    height: 100%;
    right: -65px;
  }
}

.customColor {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.27)
  ) !important;
}

.searchColor {
  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;
  }
}

.el-popper.is-light {
  background: #1a7ccd;
}

.el-dropdown-item {
  background: red !important;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.synthesizeTargetSystem {
  padding: 0 20px;
}

.systemData {
  width: 100%;
  height: calc(100% - 70px);
  background-color: rgba(0, 0, 0, 0.45);
  padding: 5px;
  //overflow: hidden;
  overflow-y: auto;

  .font {
    font-family: "Arial" !important;
  }
}

.headerNav {
  margin-bottom: 15px;
}

.footerButton {
  justify-content: right;

  .el-button:first-child {
    background-color: rgba(0, 70, 199, 0.2) !important;
    color: #b3b3b3;
    border-color: transparent;
  }
}

.count {
  color: #fff;
}

.el-checkbox {
  width: 180px;
}

.line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;

  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    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 {
    position: relative;
    width: 212px;
    height: 28px;
    margin-top: 13px;
    background: url("../../../assets/imgs/title_right_bg.png");

    .more {
      float: right;
      width: 134px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      color: #b3b3b3;
      font-size: 14px;
      cursor: pointer;
      background: url("../../../assets/imgs/buttonBack.png") no-repeat;
      background-size: cover;

      i {
        font-size: 18px;
        margin-right: 5px;
        vertical-align: -1%;
      }
    }
  }
}

.el-tag {
  background: none !important;
  border: none !important;
  color: #d8d8d9;
  cursor: pointer;
}

.el-tag:hover {
  color: #1c99ff;
}

.ststTit {
  width: 96%;
  height: 50px;
  color: #1c99ff;
  font-size: 16px;
  background: rgb(12, 15, 21);
  line-height: 50px;
  border-bottom: 1px solid #323b3c;
  box-sizing: border-box;
  padding-left: 10px;
  margin: 0 10px;
}

.overHidd {
  margin-top: 12px;
  overflow: scroll;
  height: 62%;
}

.stations {
  height: 40px;
  line-height: 40px;
  width: 97%;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-left: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 4px;
}

.stations:hover {
  background: rgba(0, 70, 199, 0.2);
}

.header {
  cursor: move;
}
</style>