|
|
@@ -0,0 +1,513 @@
|
|
|
+<template>
|
|
|
+ <div class="CCF-container target-container" id="box" v-if="canView">
|
|
|
+ <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
|
|
|
+ v-permission="permissionBtn.dataSourcePermission.ccfData_exportExcel"
|
|
|
+ style="width: 100%"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="medium"
|
|
|
+ @click="exportClick"
|
|
|
+ :loading="btnload"
|
|
|
+ :disabled="!select_classify&&!leftSearchTradeCode"
|
|
|
+ ><!-- 导出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
|
|
|
+ @clear="clearSearch"
|
|
|
+ >
|
|
|
+ <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',
|
|
|
+ }"
|
|
|
+ :current-node-key="select_classify"
|
|
|
+ check-strictly
|
|
|
+ highlight-current
|
|
|
+ :default-expanded-keys="defaultShowNodes"
|
|
|
+ @node-expand="handleNodeExpand"
|
|
|
+ @node-collapse="handleNodeCollapse"
|
|
|
+ :empty-text="$t('Common.no_classify_msg')"
|
|
|
+ @current-change="nodeChangeHandle"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ class="move-btn resize"
|
|
|
+ v-drag
|
|
|
+ id="resize"
|
|
|
+ >
|
|
|
+ </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="ccf"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="data-cont" v-if="dateArr.length">
|
|
|
+ <lz-table
|
|
|
+ :tableOption="tableOption"
|
|
|
+ tableType="data"
|
|
|
+ :dateArr="dateArr"
|
|
|
+ source="ccf"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="nodata-cont">
|
|
|
+ <tableNoData :text="$t('Table.prompt_slogan')"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import lzTable from "@/components/lzTable.vue";
|
|
|
+import { ccfDataInterface } from "@/api/api.js";
|
|
|
+export default {
|
|
|
+ name: "ccfData",
|
|
|
+ components: { lzTable },
|
|
|
+ directives: {
|
|
|
+ drag(el, bindings) {
|
|
|
+ el.onmousedown = function (e) {
|
|
|
+ var init = e.clientX;
|
|
|
+ // console.log(init);
|
|
|
+ var box = $('#box')[0];
|
|
|
+ // console.log(box.clientWidth)
|
|
|
+ let total_wid = box.offsetWidth;
|
|
|
+ var left = $('#left')[0];
|
|
|
+ var right = $('#right')[0];
|
|
|
+ var initWidth = left.offsetWidth;
|
|
|
+ document.onmousemove = function (e) {
|
|
|
+ var end = e.clientX;
|
|
|
+ var newWidth = end - init + initWidth;
|
|
|
+ left.style.width = newWidth + 'px';
|
|
|
+ right.style.width = newWidth > 320 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
|
|
|
+ };
|
|
|
+ document.onmouseup = function () {
|
|
|
+ document.onmousemove = document.onmouseup = null;
|
|
|
+ e.releaseCapture && e.releaseCapture();
|
|
|
+ };
|
|
|
+ e.setCapture && e.setCapture();
|
|
|
+ return false;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLeftWrapShow:true,
|
|
|
+ exportBase:process.env.VUE_APP_API_ROOT + "/datamanage/ccf/export", //CCF数据导出接口
|
|
|
+ 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, //右侧是否展示的是单个指标数据
|
|
|
+ defaultShowNodes: [], //展开的节点
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 获取分类 */
|
|
|
+ getClassify() {
|
|
|
+ ccfDataInterface.classifyList().then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.classifyList = res.Data || [];
|
|
|
+ this.select_classify = this.classifyList[0].Child[0].ClassifyId
|
|
|
+ this.getDataList();
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.orientationNode(this.select_classify)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 获取数据 */
|
|
|
+ getDataList: _.throttle(function () {
|
|
|
+ this.isShowSingleData = false;
|
|
|
+ this.dataloading = true;
|
|
|
+ ccfDataInterface
|
|
|
+ .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 ccfDataInterface.getTargetDataList({
|
|
|
+ IndexCode: code,
|
|
|
+ });
|
|
|
+ this.rightShow = true;
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ const DataList = res.Data.Data || [];
|
|
|
+ // 合并数据
|
|
|
+ this.tableOption = [
|
|
|
+ {
|
|
|
+ DataList: DataList,
|
|
|
+ ...res.Data,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.orientationNode(res.Data ? res.Data.ClassifyId:-1)
|
|
|
+ // 这里是单个指标所以不用合并日期
|
|
|
+ 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.dataloading = false;
|
|
|
+ this.rightShow && this.initWidth();
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 左侧目录定位
|
|
|
+ orientationNode(Id){
|
|
|
+ this.select_classify = Id;
|
|
|
+ this.defaultShowNodes.push(Id)
|
|
|
+ this.$refs.treeRef.setCurrentKey(Id);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(()=>{
|
|
|
+ let parent = document.getElementsByClassName('scroll-wrap')[0]
|
|
|
+ let node = parent.querySelector('.is-current')
|
|
|
+ parent.scrollTo({
|
|
|
+ top: node.offsetTop-200
|
|
|
+ })
|
|
|
+ },300)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 树节点展开
|
|
|
+ handleNodeExpand(data) {
|
|
|
+ // 保存当前展开的节点
|
|
|
+ let flag = this.defaultShowNodes.some((item) => item === data.ClassifyId);
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ // 不存在则存到数组里
|
|
|
+ this.defaultShowNodes.push(data.ClassifyId);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 树节点关闭
|
|
|
+ handleNodeCollapse(data) {
|
|
|
+ let shouldCollapseIds=data.Child ? [...data.Child.map(it => it.ClassifyId),data.ClassifyId] : [data.ClassifyId]
|
|
|
+
|
|
|
+ this.defaultShowNodes = this.defaultShowNodes.filter(it =>{
|
|
|
+ return !shouldCollapseIds.includes(it)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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.exportDataUrl;
|
|
|
+ link.download = "";
|
|
|
+ link.click();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.btnload = false;
|
|
|
+ }, 5000);
|
|
|
+ },
|
|
|
+ //左侧搜索
|
|
|
+ async handleLeftSearch(query, cb) {
|
|
|
+ cb([]);
|
|
|
+ if (!query) return;
|
|
|
+ const res = await ccfDataInterface.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);
|
|
|
+ },
|
|
|
+ // 对[#,;]转义
|
|
|
+ escapeStr(str) {
|
|
|
+ return str.replace(/#/g, escape("#")).replace(/;/g, escape(";"));
|
|
|
+ },
|
|
|
+
|
|
|
+ //改变选中节点
|
|
|
+ nodeChangeHandle(data, node) {
|
|
|
+ if (data.Level==1) return;
|
|
|
+ this.select_classify = data.ClassifyId;
|
|
|
+ this.leftSearchVal=''
|
|
|
+ this.page_no = 1;
|
|
|
+ this.page_size = 20;
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ clearSearch(){
|
|
|
+ this.page_no=1
|
|
|
+ this.leftSearchTradeCode=''
|
|
|
+ this.getDataList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ canView(){
|
|
|
+ return this.permissionBtn.isShowBtn('dataSourcePermission','ccfData_view')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.canView && this.getClassify();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "../css/customtree.scss";
|
|
|
+@import "../css/baseTargetPage.scss";
|
|
|
+.CCF-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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .move-btn {
|
|
|
+ height: 100%;
|
|
|
+ width: 4px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 0;
|
|
|
+ &:hover {
|
|
|
+ cursor: col-resize;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-cont {
|
|
|
+ width: 82%;
|
|
|
+ padding: 30px;
|
|
|
+ .right-box {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: calc(100vh - 180px);
|
|
|
+ border-left: 1px solid #dcdfe6;
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ overflow: auto;
|
|
|
+ .data-header {
|
|
|
+ width: 100%;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nodata-cont {
|
|
|
+ width: 200px !important;
|
|
|
+ text-align: center;
|
|
|
+ color: #666;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
hbchen