eta_front/src/views/dataEntry_manage/thirdBase/FwmtData.vue

<template>
  <div class="smmTarget-container target-container" id="box">
    <span
        v-show="!isLeftWrapShow"
        class="slide-btn-icon slide-right"
        @click="isLeftWrapShow = !isLeftWrapShow"
    >
        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
    </span>
    <div class="left-cont minHeight" id="left" v-show="isLeftWrapShow">
        <span
            v-show="isLeftWrapShow"
            class="slide-btn-icon slide-left"
            @click="isLeftWrapShow = !isLeftWrapShow"
        >
            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
        </span>
      <div class="left-top">
        <el-button style="margin-left: 0;margin-bottom: 10px;" v-permission="permissionBtn.dataSourcePermission.mysteelData_batchAddEdb"
          type="primary" size="medium" @click="isBatchAddIndicsDiaShow = true"
            ><!-- 批量加入指标库 -->{{$t('SteelChemicalPage.batch_add_edb_btn')}}</el-button
          >
        <el-button
          v-permission="permissionBtn.dataSourcePermission.yyzxData_export"
          type="primary"
          plain
          size="medium"
          @click="exportClick"
          :loading="btnload"
          ><!-- 导出Excel -->{{$t('Common.exp_excel')}}</el-button
        >
        <el-autocomplete
          style="margin: 20px 0; width: 100%"
          prefix-icon="el-icon-search"
          v-model="leftSearchVal"
          :fetch-suggestions="handleLeftSearch"
          :trigger-on-focus="false"
          :placeholder="$t('Edb.InputHolderAll.input_name_orid')"
          @select="handleSelectLeftSearchval"
          popper-class="el-autocomplete-suggestion-data-entry"
          clearable
        >
          <template slot-scope="scope">
            <div v-if="scope.item.nodata" style="text-align: center">
              <!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}
            </div>
            <div v-else>
              {{ scope.item.IndexName }}
            </div>
          </template>
        </el-autocomplete>
      </div>
      <div class="scroll-wrap">
        <el-tree
          ref="treeRef"
          class="target_tree word-wrap"
          :data="classifyList"
          node-key="ClassifyId"
          :props="{
            label: 'ClassifyName',
            children: 'Child',
          }"
          :default-expanded-keys="defaultShowNodes"
          :current-node-key="select_classify"
          :expand-on-click-node="false"
          check-strictly
          highlight-current
          empty-text="暂无分类"
          lazy
          :load="getLazyTreeData"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
          @current-change="nodeChangeHandle"
        >
          <div slot-scope="{ node, data }" class="custom-tree-node">
            <div class="text_oneLine" style="width:100%">
              <span v-if="data.IndexCode">{{data.IndexName}}</span>
              <span v-else>
                <!-- {{ currentLang==='zh' ? data.ClassifyName : data.ClassifyNameEn }} -->
                {{ data.ClassifyName }}
              </span>
            </div>
          </div>
        </el-tree>
      </div>
      <span
        class="move-btn resize"
        v-drag
        id="resize"
        @mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
      >
      </span>
    </div>
    <div
      class="right-cont minHeight"
      id="right"
      v-loading="dataloading"
      :element-loading-text="$t('Table.data_loading')"
    >
      <template v-if="rightShow">
        <div class="right-box" @scroll="scrollHandle">
          <div class="data-header">
            <lz-table
              :tableOption="tableOption"
              tableType="header"
              ref="table"
              source="yyzx"
              @addToLib="addToLib"
              @editTarget="editTargetByTable"
            />
          </div>
          <div class="data-cont" v-if="dateArr.length">
            <lz-table
              :tableOption="tableOption"
              tableType="data"
              :dateArr="dateArr"
              source="yyzx"
            />
          </div>
          <div v-else class="nodata"></div>
        </div>
        <el-button style="margin-left: 10px;margin-top: 20px;" plain
          type="primary" size="medium" @click=""
            ><!-- 批量加入指标库 -->周度</el-button
          >
      </template>
      <div v-else class="nodata-cont">
        <tableNoData :text="$t('Table.prompt_slogan')"/>
      </div>
    </div>
    <!-- 批量添加至指标库弹窗 -->
    <batchAddIndicsDia 
      :isOpenDialog="isBatchAddIndicsDiaShow"
      @close="isBatchAddIndicsDiaShow=false"
    />
    <!-- 单个添加至指标库弹窗 -->
    <addIndicsDia 
      :isOpenDialog="isAddIndicsDiaShow"
      :edbData="currentIndicData"
      @close="isAddIndicsDiaShow=false;"
      @addCallback="intoBaseBack"
    />
  </div>
</template>

<script>
import lzTable from "@/components/lzTable.vue";
import { fwmtInterface } from "@/api/api.js";
import batchAddIndicsDia from "./components/batchAddIndicsDia"
import addIndicsDia from './components/addIndicsDia.vue';
import leftMixin from "./mixins/leftMixin.js";
export default {
  name: "Fwmt",
  mixins: [leftMixin],
  components: { lzTable, batchAddIndicsDia, addIndicsDia },
  data() {
    return {
      isLeftWrapShow:true,
      exportBase:process.env.VUE_APP_API_ROOT + "/datamanage/fenwei/export", //ssm数据导出接口
      dataloading: false,
      rightShow: false,
      select_classify: 0,
      classifyList: [],
      tableOption: [],
      dateArr: [], //最长的日期数组
      btnload: false,
      page_no: 1,
      page_size: 20,
      havemore: true, //是否还有数据

      leftSearchVal: "", //左侧搜索值
      leftSearchTradeCode: "", //如果是搜索选择的 则有此code
      isShowSingleData: false, //右侧是否展示的是单个指标数据
      isBatchAddIndicsDiaShow: false, //批量添加指标弹窗
      currentIndicData:{}, //当前选中指标
      isAddIndicsDiaShow: false, //单个添加指标弹窗
      defaultShowNodes: [],
      repetition: null, // 是否重复请求
    };
  },
  methods: {
    /* 获取分类 */
    getClassify() {
      fwmtInterface.classifyList().then((res) => {
        if (res.Ret !== 200) return;
        this.classifyList = res.Data || [];
      });
    },
    /* 获取数据 */
    getDataList: _.throttle(function () {
      this.isShowSingleData = false;
      this.dataloading = true;
      fwmtInterface
        .dataList({
          ClassifyId: this.select_classify,
          PageSize: this.page_size,
          CurrentIndex: this.page_no,
        })
        .then((res) => {
          this.rightShow = true;
          if (res.Ret !== 200) return;

          // 找出最多的页码 判断是否还有数据
          let page_arrs = res.Data.map((item) => item.Paging.Pages);
          let totalPage = Math.max.apply(Math, page_arrs);
          this.havemore = this.page_no < totalPage ? true : false;

          // 合并数据
          if (this.page_no === 1) {
            this.tableOption = res.Data;
          } else {
            this.tableOption.forEach((item) => {
              res.Data.forEach((_item) => {
                if (item.IndexCode === _item.IndexCode) {
                  item.DataList = item.DataList.concat(_item.DataList);
                }
              });
            });
          }

          // 合并所有指标中的日期 作为日期数组
          let arr = res.Data.map((item) => {
            return item.DataList;
          });

          let obj = [];
          for (let i of arr) {
            for (let j of i) {
              obj.push(j.DataTime);
            }
          }
          let arr2 = [...new Set(obj)].sort().reverse();
          let concatArr = [...new Set([...this.dateArr, ...arr2])]
            .sort()
            .reverse();
          this.dateArr = this.page_no === 1 ? arr2 : concatArr;

          /* 不满6个追加6个空的显示一排 别问 问就是为了美观  */
          if (this.tableOption.length < 7)
            for (let i = 0; i < 7; i++) {
              this.tableOption.push({
                DataList: [],
              });
              if (this.tableOption.length >= 7) break;
            }

          //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
          if (this.dateArr.length < 12)
            for (let i = 0; i < 12; i++) {
              this.dateArr.push("");
              if (this.dateArr.length >= 12) break;
            }

          this.dataloading = false;
          this.page_no === 1 &&
            this.$nextTick(() => {
              this.rightShow && this.initWidth();
            });
        });
    }, 200),
    // 获取单个指标数据
    async getTargetDataList(code) {
      this.isShowSingleData = true;
      this.dataloading = true;
      try {
        const res = await fwmtInterface.getTargetDataList({
          IndexCode: code,
        });
        this.rightShow = true;
        if (res.Ret !== 200) return;
        const DataList = res.Data.Data || [];
        // 设置为没有更多数据
        this.haveMore = false;
        // 合并数据
        this.tableOption = [
          {
            DataList: DataList,
            ...res.Data,
          },
        ];
        // 这里是单个指标所以不用合并日期
        const arr = DataList.map((item) => item.DataTime);
        this.dateArr = [...new Set(arr)].sort().reverse();
        /* 不满6个追加6个空的显示一排 别问 问就是为了美观  */
        for (let i = 0; i < 7; i++) {
          this.tableOption.push({
            DataList: [],
          });
          if (this.tableOption.length >= 7) break;
        }
        //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
        if (this.dateArr.length < 12)
          for (let i = 0; i < 12; i++) {
            this.dateArr.push("");
            if (this.dateArr.length >= 12) break;
          }
        this.select_quota = res.Data.IndexName;
        this.select_Unit = res.Data.Unit;
        this.select_frequency = res.Data.Frequency;
        this.select_ModifyTime = res.Data.ModifyTime || "";
        this.dataloading = false;
        this.rightShow && this.initWidth();
      } catch (err) {
        console.log(err);
      }
    },
    initWidth() {
      this.$nextTick(() => {
        $(".right-box")[0].style.width =
          this.$refs.table.$el.clientWidth + 5 + "px";
        $(".right-box")[0].scrollTop = 0;
        $(".right-box")[0].scrollLeft = 0;
      });
    },

    //指标懒加载
    async getLazyTreeData(node,resolve){
      let arr=[]
      if(node.level===2||node.data.ClassifyId === 0){
        const res=await fwmtInterface.dataList({
          ClassifyId: node.data.ClassifyId
        })
        if(res.Ret===200){
          const temarr=res.Data||[]
          arr=temarr.map(item=>{
            delete item.ClassifyId
            return {
              ...item,
              isLeaf:true
            }
          })
        }
      }else{
        arr=node.data.Child||[]
      }     
      resolve(arr)
    },
    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);

      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.UniqueCode);
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, index) => {
        if (item === data.UniqueCode) {
          // 删除关闭节点
          this.defaultShowNodes.length = index;
        }
      });
    },

    // 获取选中指标数据
    addToLib(data){
        //添加前校验 ID是否已存在指标库中
        //打开弹窗
        this.currentIndicData = data
        this.isAddIndicsDiaShow = true
    },
    //添加指标到库
    intoBaseBack() {
      this.isAddIndicsDiaShow = false
      if(this.selectedEdb){
        this.$refs.edbDetailRef.getEdbDetail()
      }else {
        this.getDataList()
      }
    },
    /* 无频度的异常显示处理 7*12*/
    nodataDeal() {
      this.tableOption = [];
      this.dateArr = [];
      for (let i = 0; i < 7; i++) {
        this.tableOption.push({
          DataList: [],
        });
        if (this.tableOption.length >= 7) break;
      }
      for (let i = 0; i < 12; i++) {
        this.dateArr.push("");
        if (this.dateArr.length >= 12) break;
      }
    },
    /* 滚动加载 */
    scrollHandle(e) {
      if (this.isShowSingleData) return;
      const dom = e.target;
      let total = dom.scrollTop + dom.clientHeight;
      if (total >= dom.scrollHeight && this.havemore) {
        this.page_no++;
        console.log("load下一页");
        this.getDataList();
      }
    },
    /* 数据导出 */
    exportClick() {
      this.btnload = true;
      const link = document.createElement("a");
      link.href = this.exportDataUrl;
      link.download = "";
      link.click();
      setTimeout(() => {
        this.btnload = false;
      }, 5000);
    },
    //左侧搜索
    async handleLeftSearch(query, cb) {
      cb([]);
      if (!query) return;
      const res = await fwmtInterface.getTargetListByName({
        Keyword: query,
      });
      if (res.Ret === 200) {
        let arr = res.Data || [];
        if (!arr.length) {
          cb([{ nodata: true }]);
        } else {
          cb(arr);
        }
      }
    },
    // 选中左侧搜索值
    handleSelectLeftSearchval(e) {
      if (!e.IndexCode) return;
      this.leftSearchTradeCode = e.IndexCode;
      this.leftSearchVal = e.IndexName;

      // 获取单独指标数据
      this.getTargetDataList(e.IndexCode);
    },

    /* 添加指标 */
    addTargetBatch() {
      this.batchAddDiaShow = true;
    },
    /* 添加后回调 */
    addSuccessCallback({ code, id,selectClassifyNodes,indexCode }) {
      indexCode && (this.index_code = indexCode)
      this.getClassify({ code, id,selectClassifyNodes });
    },

    getTargetData(code, arr) {
      for (const item of arr) {
        if (item.BaseFromBaiinfoIndexCode === code) return item;
        if (item.Children && item.Children.length) {
          const _item = this.getTargetData(code, item.Children);
          if (_item) return _item;
        }
      }
    },
    // 对[#,;]转义
    escapeStr(str) {
      return str.replace(/#/g, escape("#")).replace(/;/g, escape(";")); 
    },
  
    //改变选中节点
    nodeChangeHandle(data, node) {
      if (data.ClassifyId === this.repetition || data.IndexCode === this.repetition) return;
      this.select_classify = data.ClassifyId;
      this.repetition = data.ClassifyId || data.IndexCode
      this.leftSearchVal=''
      this.page_no = 1;
      this.page_size = 20;
      if (!data.IndexCode)this.getDataList()
      // 获取单独指标数据
      else this.getTargetDataList(data.IndexCode);
    },
   
  },
  computed: {
    exportDataUrl() {
      // 数据导出接口
      let urlStr = this.exportBase;
      // token
      urlStr += `?${localStorage.getItem("auth") || ""}`;
      if (this.isShowSingleData) {
        // 指标id
        urlStr += `&IndexCode=${
          this.isShowSingleData ? this.leftSearchTradeCode : ""
        }`;
      } else {
        // 目录id
        urlStr += `&ClassifyId=${
          this.isShowSingleData ? "" : this.select_classify
        }`;
      }
      return this.escapeStr(urlStr);
    },
  },
  created() {},
  mounted() {
    this.getClassify();
  },
};
</script>
<style lang="scss">
@import "../css/customtree.scss";
@import "../css/baseTargetPage.scss";
.smmTarget-dialog-cont {
  .el-cascader {
    .el-input {
      width: 100% !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.smmTarget-container {
  display: flex;
  * {
    box-sizing: border-box;
  }
  .minHeight {
    height: calc(100vh - 120px);
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
/*   div::-webkit-scrollbar {
    width: 5px !important;
  } */
  .left-cont {
    min-width: 300px;
    width: 300px;
    margin-right: 20px;
    padding: 30px 0;
    overflow: hidden;
    position: relative;
    .left-top {
      padding: 0 20px;
    }
    .scroll-wrap {
      padding: 0 20px;
      height: calc(100vh - 280px);
      overflow-y: auto;
      margin-right: 20px;
      .target_tree {
        color: #333;
        .label-input .el-input__inner {
          height: 25px;
          line-height: 25px;
        }
        .custom-tree-node {
          display: flex !important;
          justify-content: space-between;
          align-items: center;
          display: block;
          flex: 1;
          .node_label {
            margin-right: 2px;
          }
          .el-icon-view {
            color: #409eff;
            font-size: 18px;
            margin-left: 5px;
          }
        }
      }
      .add-cont {
        margin: 50px 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #409eff;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .move-btn {
      height: 100%;
      width: 4px;
      position: absolute;
      right: 0px;
      top: 0;
      &:hover {
        cursor: col-resize;
      }
    }
    .classify-list {
      padding: 0 20px;
      /* margin-top: 20px; */
      height: calc(100vh - 280px);
      overflow-y: auto;
      .classify-item {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
        &:hover {
          cursor: pointer;
          color: #409eff;
        }
        &.act {
          color: #409eff;
        }
      }
    }
  }
  .right-cont {
    width: 82%;
    padding: 30px;
    .right-box {
      max-width: 100%;
      max-height: calc(100vh - 230px);
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      overflow: auto;
      .data-header {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 2;
      }
      .data-cont {
        height: calc(100vh - 444px);
      }
      .nodata {
        height: calc(100vh - 460px);
        border: 1px solid #dcdfe6;
        font-size: 16px;
        color: #999;
      }
    }
    .frequency-list {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .frequency-btn {
        width: 112px;
        margin: 0 30px 10px 0;
      }
    }
    .nodata-cont {
      width: 150px !important;
      text-align: center;
      color: #666;
      font-size: 16px;
      margin: 0 auto;
    }
  }
}
.dialog-cont {
  padding-left: 50px;
}
.dia-bot {
  display: flex;
  justify-content: center;
}
</style>
<style lang="scss">
.smmTarget-container {
  .el-tree__drop-indicator {
    height: 3px;
    background-color: #409eff;
  }
  .el-tree-node__content {
    margin-bottom: 14px !important;
  }
  .el-tree-node__children {
    .el-tree-node {
      margin-bottom: 0px !important;
      padding-left: 18px;
    }
    .el-tree-node__content {
      margin-bottom: 5px !important;
      padding-left: 0 !important;
    }
  }
  .expanded.el-icon-caret-right:before {
    content: url("~@/assets/img/set_m/down.png") !important;
  }
  .el-icon-caret-right:before {
    content: url("~@/assets/img/set_m/slide.png") !important;
  }
  .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
    content: "" !important;
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #f0f4ff !important;
  }
  .el-tree-node__content {
    padding-right: 10px !important;
  }
}
</style>