hz_crm_web/src/views/dataEntry_manage/coal/index.vue

<template>
	<div class="lzTarget-container">
		<div class="left-cont minHeight">
			<div class="left-top">
				<!-- <el-button type="primary" plain size="medium" @click="exportClick" :loading="btnload">导出Excel</el-button> -->
				<el-button 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>
			<!-- <ul class="classify-list">
				<li
					:class="[
						'classify-item',
						{ act: select_classify === item.BreedShortName },
					]"
					v-for="item in classifyList"
					:key="item.BreedShortName"
					@click="changeClassify(item.BreedShortName)"
				>
					{{ item.BreedShortName }}
				</li>
			</ul> -->
			<div>
				<el-tree
				class="filter-tree"
				:data="classifyList"
				node-key="ClassifyId"
				:current-node-key="select_node"
				:props="defaultProps"
				default-expand-all
				:default-checked-keys="[select_classify]"
				:filter-node-method="filterNode"
				ref="coalTree"
				highlight-current
				@node-click="clickClassify"
				>
				</el-tree>
			</div>
		</div>
		<div class="right-cont minHeight" 
		v-loading="dataloading"
		element-loading-text="获取数据中...">
			<div 
				class="right-box"
				v-infinite-scroll="loadNext" 
				:infinite-scroll-disabled="!haveMore"
				:infinite-scroll-immediate="false"
				v-if="rightShow"
			>
				<div class="data-header">
					<lz-table :tableOption="tableOption" tableType="header" ref="table" source="coal"/>
				</div>
				<div class="data-cont" v-if="dateArr.length">
					<lz-table
						:tableOption="tableOption"
						tableType="data"
						:dateArr="dateArr"
						source="coal"
					/>
				</div>
				<div v-else class="nodata"></div>
			</div>
			<div class="frequency-list" v-if="rightShow">
				<el-button
					type="primary"
					class="frequency-btn"
					:plain="select_frequency !== item.key"
					v-for="item in frequencyList"
					:key="item.key"
					@click="changeFrequency(item.key)"
					>{{ item.label }}</el-button
				>
			</div>
		</div>
	</div>
</template>

<script>
import lzTable from '@/components/lzTable.vue';
import { coalDataInterface } from '@/api/api.js';
export default {
	name: '',
	components: { lzTable },
	watch: {
		select_classify_name(newval) {
			console.info("watch");
			console.info(newval)
			console.info(this.isAuto)
			if(!this.isAuto) return
			this.select_frequency = '';
			this.page_no = 1;
			newval && this.getFrequency();
		},
		select_frequency(newval) {
			console.info("watch");
			console.info(newval)
			console.info(this.isAuto)
			if(!this.isAuto) return
			this.page_no = 1;
			newval && this.getDataList();
		},
	},
	data() {
		return {
			dataloading: false,
			rightShow: false,
			exportBase:process.env.API_ROOT+'/entry/export/coalList',//中国煤炭网数据导出接口
			defaultProps:{
				label: 'ClassifyName',
				children: 'Child',
			},
			classifyList: [],
			select_frequency: '',
			frequencyType: new Map([
				[1, '日度'],
				[2, '周度'],
				[3, '旬度'],
				[4, '月度'],
				[5, '季度'],
				[6, '年度'],
				[99, '无固定频率'],
			]),
			frequencyList: [],
			tableOption: [],
			dateArr: [],//最长的日期数组
			btnload: false,
			page_size: 20,
			page_no: 1,
			haveMore: false,

			leftSearchVal:'',//左侧搜索值
			leftSearchTradeCode:'', //如果是搜索选择的 则有此code
			select_quota:'',	// 选择的指标名
			select_Unit:'',	// 选择的单位
			select_UpdateTime:'',	// 更新时间
			select_classify: '',//选择的分类id
			select_classify_name: '',//选择的分类名称
			select_node:0,
			isAuto:true,	// 改变分类时是否自动获取数据
		};
	},
	methods: {
		/* 获取分类 */
		getClassify() {
			coalDataInterface.classifyList().then((res) => {
				if (res.Ret !== 200) return;
				this.classifyList = res.Data || [];
				this.select_classify =
					this.select_classify || this.classifyList[0].ClassifyId;
				this.select_classify_name=this.classifyList[0].Child[0].ClassifyName
				this.$nextTick(()=>{
					this.select_node = this.classifyList[0].Child[0].ClassifyId;
        			this.$refs.coalTree.setCurrentKey(this.select_node);
                    console.info("select_node")
					console.info(this.select_node)
				})
			});
		},
		/* 获取频度 */
		getFrequency(defaultSelect) {
			coalDataInterface
				.frequencyList({
					ClassifyId: Number(this.select_classify),
				})
				.then((res) => {
					if (res.Ret !== 200) return;
					this.frequencyList = 
						res.Data ?
						res.Data.map((item) => {
							console.info(this.frequencyType.get(item.Frequency))
							return {
								label: this.frequencyType.get(item.Frequency),
								key: item.Frequency,
							};
						}) : [];
					console.info(this.frequencyList)
					//设置当前选中的频度,若传入有默认选项则选中默认频度,否则选中列表第一个
					this.select_frequency =  defaultSelect||this.frequencyList.length ? this.frequencyList[0].key : '';
					!this.frequencyList.length && this.nodataDeal();
					//如果有默认频度,结束后恢复watcher
					this.$nextTick(()=>{
						if(defaultSelect) this.isAuto=true
					})
				});
		},
		/* 获取数据 */
		getDataList() {
			this.dataloading = true;
			coalDataInterface
				.dataList({
					PageSize: this.page_size,
					CurrentIndex: this.page_no,
					ClassifyId: Number(this.select_classify),
					GroupName:this.select_classify_name,
					Frequency: this.frequencyType.get(this.select_frequency),
				})
				.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,..._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(res.Data.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.initWidth()
					})
				});
		},
		// 获取单个指标数据
		async getTargetDataList(e) {
			this.dataloading = true;
			try{
				const res = await coalDataInterface.getTargetDataList({
					IndexCode:this.leftSearchTradeCode
				})
				this.rightShow = true;
				if(res.Ret!==200) return
				// 设置为没有更多数据
				this.haveMore = false
			    this.select_Unit=res.Data[0].Unit
				this.select_classify=res.Data[0].ClassifyId
				this.select_UpdateTime=res.Data[0].ModifyTime
				// 合并数据
				// this.tableOption = [{
				// 	DataList:res.Data.DataList,
				// 	...e
				// }];
				this.tableOption=res.Data
				// 这里是单个指标所以不用合并日期
				// const arr=res.Data.map(item=>item.DataTime)
				let arr=[]
				res.Data.forEach(item=>{
					item.DataList.forEach(_item=>{
						arr.push(_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.initWidth()
			}catch(err){
				console.log(err);
			}
		},
		loadNext() {
			this.page_no ++;
			this.getDataList();
		},

		/* 改变品种 */
		clickClassify(node,parentNode) {
			// console.info("node")
			// console.info(node)
			// console.info(parentNode)
			if(parentNode.level==1) return
			this.isAuto=true

			this.select_classify = parentNode.parent.data.ClassifyId;
			this.select_classify_name = parentNode.data.ClassifyName;
			this.leftSearchVal=''
			this.leftSearchTradeCode=''
			this.select_quota=''
			this.select_Unit=''
			this.select_UpdateTime=''
		},
		/* 改变频度 */
		changeFrequency(key) {
			this.select_frequency = key;
			this.leftSearchVal=''
		},
		initWidth() {
			$('.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;
			}
		},
		/* 钢联数据导出 */
		exportClick() {
			this.btnload = true;
			// var iframe = document.createElement("iframe")
			// iframe.style.display = "none";
			// iframe.src = this.exportLzapi;
			// document.body.appendChild(iframe);

			const link = document.createElement("a")
			link.href=this.exportCoalApi
			link.download=''
			link.click()
			console.log({
				QuotaName:this.select_quota,
				IndexCode:this.leftSearchTradeCode,
				TypeName:this.select_classify_name,
				sendBreedName: this.escapeStr(this.select_classify_name),
				Frequency:this.select_frequency,
				UnitName:this.select_Unit,
				ModifyTime:this.select_UpdateTime,
				url:this.exportGlapi
			});
			setTimeout(()=> {
				this.btnload = false;
			},5000)
		},

		//左侧搜索
    	async handleLeftSearch(query,cb){
      		cb([])
      		if(!query) return
      		const res=await coalDataInterface.getTargetListByName({
        		Keyword:query,
      		})
      		if(res.Ret===200){
        		let arr=res.Data||[]
        		if(!arr.length){
          			cb([{nodata:true}])
        		}else{
          			cb(arr)
        		}
      		}
    	},
		// 选中左侧搜索值
    	handleSelectLeftSearchval(e){
			console.info("handleSelectLeftSearchval")
			console.info(e)
      		if(!e.IndexCode) return
      		this.rightShow=false
      		this.select_frequency=e.FrequencyName
      		this.select_classify=e.BreedShortName
      		this.leftSearchTradeCode=e.IndexCode
      		this.leftSearchVal=e.IndexName
			this.select_quota=e.IndexName
			this.select_Unit=e.UnitName
			this.select_UpdateTime=e.UpdateTime
      		this.select_classify_name=''
			// 关闭watcher
			this.isAuto=false
			//this.getFrequency(e.FrequencyName)
			// 获取单独指标数据
			this.getTargetDataList(e)
      		// this.getDataList()
      		this.$nextTick(()=>{
				this.rightShow=true
        		this.handleScrollLeftWrap()
      		})
    	},
		// 左侧滚动
    	handleScrollLeftWrap(){
      		// let top=$('.act')[0].offsetTop
      		// $('.classify-list').animate({
        	// 	"scrollTop": top-200
      		// })
    	},
		// 对[# ;]转义
		escapeStr(str){
			return str.replace(/#/g,escape('#')).replace(/;/g,escape(';'))
		},
	},
	computed: {
		exportCoalApi() {
			// 钢联数据导出接口
			let urlStr=this.exportBase
			// token
			urlStr+=`?${localStorage.getItem('auth')||''}`
			// 指标名称参数
			urlStr+=`&IndexName=${this.select_quota}`
			// 指标id
			urlStr+=`&IndexCode=${this.leftSearchTradeCode}`
			// 分类id
			urlStr+=`&ClassifyId=${this.select_classify}`
			// 分类名称
			urlStr+=`&TypeName=${this.select_classify_name}`
			// 频度
			urlStr+=`&Frequency=${this.select_frequency}`
			// 单位
			urlStr+=`&UnitName=${this.select_Unit}`
			// 修改时间
			urlStr+=`&ModifyTime=${this.select_UpdateTime}`
			return this.escapeStr(urlStr)
		}
	},
	created() {},
	mounted() {
		this.getClassify();
	},
};
</script>

<style lang="scss">
.lzTarget-container{

	// .is-checked{
	// 	.is-current{
	// 		background-color: #f0f2f5;
	// 	}
	// }
.el-tree-node{
	
	.el-tree-node__children{
		.el-tree-node__content{
			white-space: normal;
			min-height: 26px;
			height: auto;
			margin-bottom: 5px;
		}
	}
}
.el-tree-node__content{
	// min-height: 26px;
	// white-space: normal;
}
}

</style>
<style lang="scss" scoped>
.lzTarget-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: 250px;
		margin-right: 20px;
		padding: 30px 0;
		// overflow: hidden;
		.left-top {
			padding: 0 20px;
		}
		.filter-tree {
			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: 80%;
		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;
			}
		}
	}
}
</style>