ICPC消费价格指数-暂存

src/routes/modules/dataRoutes.js

@@ -80,6 +80,12 @@ export default [
         name: "天然气历史数据",
         hidden: true,
       },
+      {
+        path: "ICPCconsumption",
+        component: () => import("@/views/dataEntry_manage/thirdBase/icpcConsumption.vue"),
+        name: "ICPC消费价格指数",
+        hidden: false,
+      },
       {
         path: "zhengzhoushop",
         component: () =>

src/views/dataEntry_manage/thirdBase/icpcConsumption.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="lzTarget-container">
+    <span
+        class="slide-btn-icon"
+        :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
+        @click="isLeftWrapShow = !isLeftWrapShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
+    </span>
+    <div class="left-cont minHeight" v-show="isLeftWrapShow">
+      <div class="left-top">
+        <el-button
+          style="width: 100%;margin-bottom: 10px;"
+          type="primary"
+          plain
+          size="medium"
+          @click="exportClick"
+          :loading="btnload"
+          >导出Excel</el-button
+        >
+        <el-autocomplete
+          style="margin-top: 20px; 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.QuotaName }}
+              {{ frequencyType.get(scope.item.Frequency) }}
+            </div>
+          </template>
+        </el-autocomplete>
+      </div>
+      <ul class="classify-list">
+        <li
+          :class="['classify-item', { act: select_classify === item.BreedId }]"
+          v-for="item in classifyList"
+          :key="item.BreedId"
+          @click="changeClassify(item)"
+        >
+          {{ item.BreedName }}
+        </li>
+      </ul>
+    </div>
+    <div
+      class="right-cont minHeight"
+      v-loading="dataloading"
+      element-loading-text="获取数据中..."
+    >
+      <div class="right-box" v-if="rightShow">
+        <div class="data-header">
+          <lz-table
+            :tableOption="tableOption"
+            tableType="header"
+            ref="table"
+            source="lz"
+          />
+        </div>
+        <div class="data-cont" v-if="dateArr.length">
+          <lz-table
+            :tableOption="tableOption"
+            tableType="data"
+            :dateArr="dateArr"
+            source="lz"
+          />
+        </div>
+        <div v-else class="nodata"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import lzTable from "@/components/lzTable.vue";
+import { lzDataInterface } from "@/api/api.js";
+export default {
+  name: "icpcConsumption",
+  components: { lzTable },
+  data() {
+    return {
+      isLeftWrapShow:true,
+      dataloading: false,
+      rightShow: false,
+      select_classify: "",
+      classifyList: [],
+      frequencyType: new Map([
+        [1, "日度"],
+        [2, "周度"],
+        [3, "月度"],
+        [4, "季度"],
+        [5, "年度"],
+        [99, "无固定频率"],
+      ]),
+      tableOption: [],
+      dateArr: [], //最长的日期数组
+      btnload: false,
+
+      leftSearchVal: "", //左侧搜索值
+      leftSearchTradeCode: "", //如果是搜索选择的 则有此code
+      select_quota: "", // 选中的指标名称
+      select_Unit: "", // 选中的单位
+      select_ModifyTime: "", //选中的更新时间
+      select_breed: "", // 选中的分类名称
+    };
+  },
+  methods: {
+    /* 获取分类 */
+    getClassify() {
+      lzDataInterface.classifyList().then((res) => {
+        if (res.Ret !== 200) return;
+        this.classifyList = res.Data || [];
+        this.select_classify =
+          this.select_classify || this.classifyList[0].BreedId;
+        this.select_breed = this.classifyList[0].BreedName;
+        this.getDataList()
+      });
+    },
+
+    /* 获取数据 */
+    getDataList() {
+      this.dataloading = true;
+      lzDataInterface.dataList({BreedId: Number(this.select_classify),Frequency:1}).then((res) => {
+        this.rightShow = true;
+        if (res.Ret !== 200) return;
+        // 设置表格数据
+        this.setDataList(res.Data);
+        this.$nextTick(() => {
+          this.initWidth();
+        });
+      }).finally(()=>{
+        this.dataloading = false;
+      })
+    },
+    /* 改变品种 */
+    changeClassify(item) {
+      this.select_classify = item.BreedId;
+      this.select_breed = item.BreedName;
+      this.leftSearchVal = "";
+      (this.leftSearchTradeCode = ""),
+      (this.select_quota = ""),
+      (this.select_Unit = ""),
+      (this.select_ModifyTime = "");
+      this.getDataList()
+    },
+
+    initWidth() {
+      $(".right-box")[0].style.width =
+        this.$refs.table.$el.clientWidth + 2 + "px";
+      $(".right-box")[0].scrollTop = 0;
+      $(".right-box")[0].scrollLeft = 0;
+    },
+    /* 导出 */
+    exportClick() {
+      this.btnload = true;
+
+      // TODO: 导出接口对接
+      setTimeout(() => {
+        this.btnload = false;
+      }, 5000);
+    },
+
+    //左侧搜索
+    async handleLeftSearch(query, cb) {
+      cb([]);
+      if (!query) return;
+      const res = await lzDataInterface.getTargetListByName({
+        Keyword: query,
+      });
+      if (res.Ret === 200) {
+        let arr = res.Data || [];
+        if (!arr.length) {
+          cb([{ nodata: true }]);
+        } else {
+          cb(arr);
+        }
+      }
+    },
+    // 选中左侧搜索值
+    handleSelectLeftSearchval(e) {
+      if (!e.LzCode) return;
+      this.rightShow = false;
+      this.leftSearchTradeCode = e.LzCode;
+      this.leftSearchVal = e.QuotaName;
+      this.select_quota = e.QuotaName;
+      this.select_Unit = e.UnitName;
+      this.select_ModifyTime = e.ModifyTime;
+      this.select_classify = this.classifyList.find(
+        (item) => item.BreedName === e.BreedName
+      ).BreedId;
+      this.select_breed = "";
+
+      this.setDataList([e]);
+      this.getDataList()
+      this.$nextTick(() => {
+        this.rightShow = true;
+        this.handleScrollLeftWrap();
+      });
+    },
+    // 左侧滚动
+    handleScrollLeftWrap() {
+      let top = $(".act")[0].offsetTop;
+      $(".classify-list").animate({
+        scrollTop: top - 200,
+      });
+    },
+    // 设置表格数据
+    setDataList(tableOption) {
+      this.tableOption = tableOption;
+      /* 不满7个追加7个空的显示一排 别问 问就是为了美观  */
+      if (tableOption.length < 7)
+        for (let i = 0; i < 7; i++) {
+          this.tableOption.push({
+            DataList: [],
+          });
+          if (this.tableOption.length >= 7) break;
+        }
+      // 合并所有日期
+      let arr = tableOption.map((item) => item.DataList);
+      let obj = [];
+      arr.forEach((dataList) => {
+        obj.push(...dataList.map((item) => item.DataTime));
+      });
+      // 日期去重倒序排序
+      this.dateArr = [...new Set(obj)].sort().reverse();
+      //数据最大长度小于13个 追加数据满13个 别问 问就是为了美观
+      if (this.dateArr.length < 13)
+        for (let i = 0; i < 13; i++) {
+          this.dateArr.push("");
+          if (this.dateArr.length >= 13) break;
+        }
+    },
+  },
+  created() {
+    this.getClassify();
+  },
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.lzTarget-container {
+  display: flex;
+  position: relative;
+  .slide-btn-icon{
+        &.slide-left{
+            left:225px;
+        }
+        &.slide-right{
+            left: 0;
+        }
+    }
+  * {
+    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: 240px;
+    width:240px;
+    margin-right: 20px;
+    padding: 30px 0;
+    overflow: hidden;
+    .left-top {
+      padding: 0 20px;
+    }
+    .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 {
+    flex:1;
+    padding: 30px;
+    overflow-x: auto;
+    .right-box {
+      max-width: 100%;
+      height: 100%;
+      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;
+      }
+    }
+  }
+}
+</style>