eta1.4.3

src/routes/modules/dataRoutes.js

@@ -201,6 +201,15 @@ export default [
           keepAlive: false,
         },
       },
+      {
+        path: "yyzx",
+        component: () => import("@/views/dataEntry_manage/thirdBase/YyzxData.vue"),
+        name: "涌益咨询",
+        hidden: false,
+        meta: {
+          keepAlive: false,
+        },
+      },
     ],
   },
 ];

src/views/dataEntry_manage/thirdBase/YyzxData.vue

@@ -0,0 +1,689 @@
+<template>
+  <div class="smmTarget-container" id="box">
+    <div class="left-cont minHeight" id="left">
+      <div class="left-top">
+        <el-button
+          v-permission="permissionBtn.dataSourcePermission.bcyfData_export"
+          style="width: 100%"
+          type="primary"
+          plain
+          size="medium"
+          @click="exportClick"
+          :loading="btnload"
+          >导出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="指标名称/指标ID"
+          @select="handleSelectLeftSearchval"
+          popper-class="el-autocomplete-suggestion-data-entry"
+          clearable
+        >
+          <template slot-scope="scope">
+            <div v-if="scope.item.nodata" style="text-align: center">
+              暂无数据
+            </div>
+            <div v-else>
+              {{ scope.item.IndexName }}
+            </div>
+          </template>
+        </el-autocomplete>
+      </div>
+      <div class="scroll-wrap">
+        <el-tree
+          ref="treeRef"
+          class="target_tree custom-tree"
+          :data="classifyList"
+          node-key="UniqueCode"
+          :props="{
+            label: 'ClassifyName',
+            children: 'Children',
+          }"
+          :current-node-key="select_node"
+          :expand-on-click-node="false"
+          check-strictly
+          empty-text="暂无分类"
+          @current-change="nodeChangeHandle"
+        >
+        </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="获取数据中..."
+    >
+      <template v-if="rightShow">
+        <div class="right-box" @scroll="scrollHandle">
+          <div class="data-header">
+            <lz-table
+              :tableOption="tableOption"
+              tableType="header"
+              ref="table"
+              source="baiinfo"
+              @editTarget="editTargetByTable"
+            />
+          </div>
+          <div class="data-cont" v-if="dateArr.length">
+            <lz-table
+              :tableOption="tableOption"
+              tableType="data"
+              :dateArr="dateArr"
+              source="baiinfo"
+            />
+          </div>
+          <div v-else class="nodata"></div>
+        </div>
+      </template>
+      <div v-else class="nodata-cont">
+        <tableNoData text="暂无数据"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import lzTable from "@/components/lzTable.vue";
+import { baiinfoInterface } from "@/api/api.js";
+export default {
+  name: "Yyzx",
+  components: { lzTable },
+  data() {
+    return {
+      exportBase:process.env.VUE_APP_API_ROOT + "/datamanage/export/baiinfoList", //ssm数据导出接口
+      dataloading: false,
+      rightShow: false,
+      select_classify: 0,
+      classifyList: [],
+      tableOption: [],
+      dateArr: [], //最长的日期数组
+      btnload: false,
+      page_no: 1,
+      page_size: 20,
+      havemore: true, //是否还有数据
+
+      leftSearchVal: "", //左侧搜索值
+      leftSearchTradeCode: "", //如果是搜索选择的 则有此code
+      select_quota: "", // 选择的指标名
+      select_Unit: "", // 选择的单位
+      select_ModifyTime: "", //选中的更新时间
+      select_breed: "", // 选中的分类名称
+      isShowSingleData: false, //右侧是否展示的是单个指标数据
+      singleDataCode: "",
+    };
+  },
+  methods: {
+    /* 获取分类 */
+    getClassify() {
+      baiinfoInterface.classifyList().then((res) => {
+        if (res.Ret !== 200) return;
+        let Data = res.Data.List || [];
+        //对分类数据做处理：
+        this.classifyList = this.formatClassifyData(Data, 1, 0);
+      });
+    },
+    formatClassifyData(arr, level, topParentNodeId) {
+      arr.forEach((item) => {
+        const { ClassifyId, BaseFromBaiinfoIndexId, BaseFromBaiinfoIndexCode } =
+          item;
+        //每条数据添加UniqueCode属性，由ClassifyId BaseFromBaiinfoIndexId BaseFromBaiinfoIndexCode拼接
+        item.UniqueCode = `${ClassifyId}_${BaseFromBaiinfoIndexId}_${BaseFromBaiinfoIndexCode}`;
+        //添加Button属性，用于控制操作栏
+        item.Button = {
+          AddButton: true,
+          OpButton: true,
+          DeleteButton: true,
+          MoveButton: true,
+          cleanButton: false,
+          targetDelButton: false,
+        };
+        //未分类禁用所有操作栏
+        if (item.ClassifyId === 0) {
+          item.Button = {
+            AddButton: false,
+            OpButton: false,
+            DeleteButton: false,
+            MoveButton: false,
+            cleanButton: false,
+            targetDelButton: false,
+          };
+        }
+        //二级分类禁用添加按钮
+        if (item.Level === 2) {
+          item.Button = {
+            AddButton: false,
+            OpButton: true,
+            DeleteButton: true,
+            MoveButton: true,
+            cleanButton: false,
+            targetDelButton: false,
+          };
+        }
+        //指标禁用删除按钮
+        if (item.BaseFromBaiinfoIndexCode) {
+          item.Button = {
+            AddButton: false,
+            OpButton: true,
+            DeleteButton: false,
+            MoveButton: true,
+            cleanButton: true,
+            targetDelButton: true,
+          };
+          //未分类下的指标，禁用清除按钮
+          if (topParentNodeId === 0) {
+            item.Button["cleanButton"] = false;
+          }
+        }
+        //非一级分类添加一级父节点id
+        if (level !== 1) {
+          item.topParentNodeId = topParentNodeId;
+        }
+        if (item.Children && item.Children.length) {
+          this.formatClassifyData(
+            item.Children,
+            level + 1,
+            level === 1 ? item.ClassifyId : item.ParentId
+          );
+        }
+      });
+      return arr;
+    },
+    /* 获取数据 */
+    getDataList: _.throttle(function () {
+      this.isShowSingleData = false;
+      this.dataloading = true;
+      baiinfoInterface
+        .dataList({
+          ClassifyId: this.select_classify,
+          Frequency: this.select_frequency,
+          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 baiinfoInterface.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;
+      });
+    },
+    /* 无频度的异常显示处理 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.exportSmmapi;
+      link.download = "";
+      link.click();
+      console.log({
+        IndexName: this.select_quota,
+        IndexCode: this.leftSearchTradeCode,
+        sendIndexCode: this.escapeStr(this.leftSearchTradeCode),
+        TypeName: this.select_breed,
+        sendTypeName: this.escapeStr(this.select_breed),
+        Frequency: this.select_frequency,
+        UnitName: this.select_Unit,
+        ModifyTime: this.select_ModifyTime,
+        sendToken: this.escapeStr(localStorage.getItem("auth") || ""),
+        url: this.exportSmmapi,
+      });
+      setTimeout(() => {
+        this.btnload = false;
+      }, 5000);
+    },
+    //左侧搜索
+    async handleLeftSearch(query, cb) {
+      cb([]);
+      if (!query) return;
+      const res = await baiinfoInterface.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.select_frequency=e.Frequency
+      //this.select_classify=e.Type2+'#'+e.Type3
+      this.leftSearchTradeCode = e.IndexCode;
+      this.leftSearchVal = e.IndexName;
+      this.select_quota = e.IndexName;
+      this.select_Unit = e.Unit;
+      this.select_ModifyTime = e.ModifyTime;
+      this.select_breed = "";
+      // 关闭watcher
+      this.isAuto = false;
+
+      // 获取单独指标数据
+      this.getTargetDataList(e.IndexCode);
+
+      this.$nextTick(() => {
+        //找到父节点并展开
+        const targetData = this.getTargetData(e.IndexCode, this.classifyList);
+        if (targetData) {
+          //一级节点
+          const { topParentNodeId, UniqueCode } = targetData;
+          this.handleNodeExpand({ UniqueCode: `${topParentNodeId}_0_` });
+          //二级节点
+          if (topParentNodeId !== 0) {
+            const secondNodeId = UniqueCode.split("_")[0];
+            this.handleNodeExpand({ UniqueCode: `${secondNodeId}_0_` });
+          }
+          //节点样式变化
+          const tree = $(".target_tree")[0];
+          let width = tree.offsetWidth;
+          let label_width =
+            width > 500 ? "auto" : width <= 500 ? 90 : 0.7 * width;
+          targetData.NodeWidth = label_width;
+          this.select_node = UniqueCode;
+          this.$refs.treeRef.setCurrentNode(targetData);
+          const node = this.$refs.treeRef.getCurrentNode();
+          this.resetNodeStyle(node);
+        }
+        //this.handleScrollLeftWrap()
+      });
+    },
+    // 左侧滚动
+    handleScrollLeftWrap() {
+      let top = $(".act")[0].offsetTop;
+      $(".classify-list").animate({
+        scrollTop: top - 200,
+      });
+    },
+    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(";")); 
+    },
+    checkNode(data, node) {
+      const { level, parent } = node;
+      const parentNodeId = parent.data.ClassifyId;
+      const Children = data.Children || [];
+      //如果是二级分类 或是一级分类的未分类
+      if (
+        (level === 2 && parentNodeId !== 0 && Children.length) ||
+        (level === 1 && data.ClassifyId === 0 && Children.length)
+      ) {
+        this.getClassifyData(data.ClassifyId);
+        //如果是指标
+      } else if (level === 3 || (level === 2 && parentNodeId === 0)) {
+        this.getBaiinfoData(data.BaseFromBaiinfoIndexCode);
+        //如果是一级分类或空的二级指标
+      } else if (level === 1 || (level === 2 && !Children.length)) {
+        this.rightShow = false;
+        this.isShowSingleData = false;
+      }
+    },
+    //改变选中节点
+    nodeChangeHandle(data, node) {
+      if (data.UniqueCode === this.select_node) return;
+      this.dynamicNode = node;
+      this.select_node = data.UniqueCode;
+      this.page_no = 1;
+      this.page_size = 20;
+      this.resetNodeStyle(node);
+      this.checkNode(data, node);
+    },
+    //获取二级分类的表格数据
+    async getClassifyData(id) {
+      this.select_classify = id;
+      this.select_frequency = "";
+      await this.getFrequency();
+      this.getDataList();
+    },
+    //获取指标数据
+    getBaiinfoData(code) {
+      this.singleDataCode = code;
+      this.getTargetDataList(code);
+    },
+   
+  },
+  computed: {
+    exportSmmapi() {
+      // smm数据导出接口
+      let urlStr = this.exportBase;
+      // token
+      urlStr += `?${localStorage.getItem("auth") || ""}`;
+      if (this.isShowSingleData) {
+        // 指标id
+        urlStr += `&IndexCode=${
+          this.isShowSingleData ? this.singleDataCode : ""
+        }`;
+        // 指标名称参数
+        urlStr += `&IndexName=${this.select_quota}`;
+        /* // 指标id
+        urlStr+=`&IndexCode=${this.leftSearchTradeCode}` */
+        // 分类名称
+        urlStr += `&TypeName=${this.select_breed}`;
+        // 频度
+        urlStr += `&Frequency=${this.select_frequency}`;
+        // 单位
+        urlStr += `&UnitName=${this.select_Unit}`;
+        // 修改时间
+        urlStr += `&ModifyTime=${this.select_ModifyTime}`;
+      } 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";
+.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 10px;
+      height: calc(100vh - 280px);
+      overflow-y: auto;
+      .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>