fd_dwgz_zhyw_nx/src/components/zbDialog/index.vue

<template>
  <el-dialog v-model="dialogVisible" width="80%" top="80px">
    <template #title>
      <div class="dialog-title">
        <div class="title">
          {{ showname }}(<span class="count"> {{ checkList.length }} </span>)
        </div>
      </div>
    </template>
    <div
      class="dialog-body"
      :style="text == 'single' ? 'height: 700px' : 'height: 800px'"
    >
      <img class="dialog-img" src="@/assets/imgs/dialog.png" />
      <div class="dialog-form">
        <el-checkbox
          class="checkall"
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-select
          v-model="selectValue"
          placeholder="请输入..."
          size="mini"
          filterable
          @change="handleSelectedChange"
          @visible-change="handleClearSelected"
        >
          <el-option
            v-for="item in allMoreTargetData.length
              ? allMoreTargetData
              : moreTargetData"
            :key="item.name"
            :label="item.name"
            :value="item.uniformCode"
          />
        </el-select>
      </div>
      <div
        v-if="text == 'single' && type == -1"
        style="height: calc(100% - 72px)"
      >
        <div class="targetNav">
          <ul>
            <li
              :class="{ active: headerIndex == -1, 'li-left': true }"
              @click="getMoreUniformCodesList(-1, -1, '')"
            >
              全部
            </li>
            <li
              v-for="(item, index) in partList"
              :key="index"
              :class="{
                active: headerIndex == index,
                'li-right': index == partList.length - 1,
              }"
              @click="getMoreUniformCodesList(-1, index, item.code)"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
        <div class="box">
          <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
            <el-checkbox
              v-for="(item, index) in moreTargetData"
              :key="index"
              :label="item.name"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <el-checkbox-group
        v-model="checkList"
        style="height: calc(100% - 72px)"
        v-else
      >
        <el-checkbox
          v-for="(item, index) in moreTargetData"
          :key="index"
          :label="item.name"
        ></el-checkbox>
      </el-checkbox-group>
      <el-row class="footerButton">
        <el-button round @click="cancel">取消</el-button>
        <el-button round @click="tableRefresh">确认</el-button>
      </el-row>
    </div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" round @click="cancel">取消</el-button>
        <el-button size="mini" type="primary" round @click="tableRefresh"
          >确认</el-button
        >
      </span>
    </template> -->
  </el-dialog>
</template>
<script>
import { GetWtTargets } from "@/api/factoryMonitor/index.js";
import { getComprehensiveTargets } from "@/api/monitor/index.js";
export default {
  name: "zbDialog", //指标弹窗
  components: {},
  props: {
    uniformName: {
      type: String,
      required: true,
    },
    uniformCode: {
      type: String,
      required: true,
    },
    showname: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      text: "",
      type: -1,
      checkAll: false,
      isIndeterminate: true,
      selectValue: "",
      checkList: [],
      moreTargetData: [],
      allMoreTargetData: [],
      headerIndex: -1,
      partList: [
        { label: "发电机", code: "fdj" },
        { label: "齿轮箱", code: "clx" },
        { label: "变桨", code: "bj" },
        { label: "偏航", code: "ph" },
        { label: "液压", code: "yy" },
        { label: "机舱", code: "jc" },
        { label: "其他", code: "qt" },
      ],
      showIt: true,
    };
  },
  created() {},
  methods: {
    // 初始化弹窗数据
    openDialog(type, text, station) {
      this.dialogVisible = true;
      this.text = text;
      this.type = type;

      if (station && station == "SXJ_KGDL_BHB3_FDC_STA") {
        this.partList = [
          { label: "发电机", code: "fdj" },
          { label: "变桨", code: "bj" },
          { label: "偏航", code: "ph" },
          { label: "液压", code: "yy" },
          { label: "机舱", code: "jc" },
          { label: "其他", code: "qt" },
        ];
      } else {
        this.partList = [
          { label: "发电机", code: "fdj" },
          { label: "齿轮箱", code: "clx" },
          { label: "变桨", code: "bj" },
          { label: "偏航", code: "ph" },
          { label: "液压", code: "yy" },
          { label: "机舱", code: "jc" },
          { label: "其他", code: "qt" },
        ];
      }
      this.checkList = this.uniformName;
      //   判断从哪个页面打开   single----数据指标
      if (text == "single") {
        this.getMoreUniformCodesList(type, this.headerIndex, "", true);
      } else {
        this.getComprehensiveTargets(type);
      }
    },
    // 获取综合指标
    getComprehensiveTargets(type) {
      getComprehensiveTargets({
        type,
      }).then((res) => {
        this.getCheckList(res.data.data);
      });
    },
    //获取风机或者光伏的全部指标
    getMoreUniformCodesList(type, index, part = "", flag) {
      if (type == -1) {
        this.headerIndex = index;
      }
      GetWtTargets({ type, part }).then(({ data }) => {
        if (!part.length) {
          this.allMoreTargetData = data.data;
        }
        if (flag) {
          this.getCheckList(data.data);
        } else {
          this.moreTargetData = data.data;
        }
      });
    },
    // 选中指标去重并回填
    getCheckList(data) {
      this.moreTargetData = data;
      //   数据回填处理
      const codeArr = this.uniformCode.split(",");
      var newArr = [...new Set(codeArr)];
      let result = {};
      if (newArr.length > 0) {
        newArr.forEach((str) => {
          result = this.moreTargetData.find((obj) => str == obj.uniformCode);
          if (result) {
            this.checkList.push(result.name);
          }
        });
      }
      this.checkList = [...new Set(this.checkList)];
    },
    // 取消操作
    cancel() {
      this.dialogVisible = false;
      this.allMoreTargetData = [];
      this.moreTargetData = [];
      this.checkList = [];
    },
    // 确定并刷新列表
    tableRefresh() {
      this.dialogVisible = false;
      this.headerIndex = -1;
      this.$emit(
        "tableRefresh",
        this.checkList,
        this.allMoreTargetData.length
          ? this.allMoreTargetData
          : this.moreTargetData
      );
    },
    // 全选按钮变化
    handleCheckAllChange(val) {
      this.checkList = val
        ? this.allMoreTargetData.length
          ? this.allMoreTargetData.map((item) => item.name)
          : this.moreTargetData.map((item) => item.name)
        : [];
      this.isIndeterminate = false;
    },
    //各标签按钮变化
    handleCheckedChange(checked) {
      const checkedCount = checked.length;
      this.checkAll =
        checkedCount ===
        (this.allMoreTargetData.length
          ? this.allMoreTargetData.length
          : this.moreTargetData.length);
      this.isIndeterminate =
        checkedCount > 0 &&
        checkedCount <
          (this.allMoreTargetData.length
            ? this.allMoreTargetData.length
            : this.moreTargetData.length);
    },
    handleSelectedChange(val) {
      let select = this.allMoreTargetData.length
        ? this.allMoreTargetData.find((obj) => val == obj.uniformCode)
        : this.moreTargetData.find((obj) => val == obj.uniformCode);
      if (Object.keys(select).length) {
        this.checkList.push(select.name);
      }
      this.checkList = [...new Set(this.checkList)];
    },
  },
  mounted() {},
  computed: {},
};
</script>
<style lang="less" scoped>
.dialog-form {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .checkall {
    margin-right: 10px;
    width: 80px;
  }
}

.el-checkbox {
  width: 180px;
}
.targetNav {
  margin-bottom: 16px;

  ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    li {
      width: 140px;
      height: 100%;
      text-align: center;
      color: #b3bdc0;
      // background: rgba(67, 81, 107, 0.2);
      background: rgba(96, 103, 105, 0.2);
      border-left: 1px solid #3b6c53;
      border-top: 1px solid #3b6c53;
      border-bottom: 1px solid #3b6c53;

      &.li-left {
        border-radius: 15px 0px 0px 15px;
      }

      &.li-right {
        border-right: 1px solid #3b6c53;
        border-radius: 0px 15px 15px 0px;
      }

      &.active {
        background-color: rgba(0, 199, 19, 0.4);
        color: #ffffff;
      }
    }
  }
}
</style>