ftml.vue

<template>
	<div class="daily">
		<div class="graph-container">
			<div class="graph-rel" v-loading="loading">
				<ul class="legend-container" hidden>
					<li class="legend-item" v-for="(legendItem, legendIndex) in legendAside" :key="legendIndex" @click="checkLegend(legendItem.selected, legendIndex)">
						<span class="legend-circle" :style="{ backgroundColor: legendItem.selected ? legendItem.legendColor : '#e5e5e5' }"></span>
						<span class="legend-text">{{ legendItem.name }}</span>
					</li>
				</ul> 
				<el-switch
					v-model="linksType"
					:active-text="$t('dictionary.into')"
					:inactive-text="$t('dictionary.out')"
					active-value="target"
					inactive-value="source"
					@change="linksChange(linksType)"
					class="switch-links">
				</el-switch>
				<img :src="floorSrc" class="background-img" alt="" :onerror="noDataImg" :style="{ width: bgW, height: bgH }" />
				<traffic-chart class="graph-box" id="graphChart" :zoneIdList="zoneIdList" :zoneType="zoneType" :legendAside="legendAside" :linksType="linksType" :maxIndex="emitData.zone_num" :options="options" @load="load"></traffic-chart>
			</div>
		</div>
	</div>
</template>

<script>
import trafficChart from '../common/trafficdirection'
import noDataImg from '@/assets/img/manage/defaultFloor.svg'

export default {
	props: {
		propparam: {
			type: Object,
			default: () => {}
		},
	},
	data() {
		return {
			floorPlanUrl: window._vionConfig.picUrl,
			floorSrc: '',
			loading: true,
			emitData: [],
			naturalWidth: 0,
			naturalHeight: 0,
			firstFlag: true,
			legendAside: [],
			firstZoneName: '',
			myChart: {},
			colors: ['#e35241', '#d83965', '#f39c38', '#9036aa', '#6041b0', '#4054af', '#4396ec', '#4fb9d1', '#3f9488',
			 '#97c05c', '#154bee','#33e6cc','#123997','#faa200','#ffff00','#b0e0e6','#470024','#005553','#bce700','#940014'],
			bgW: '',
			bgH: '',
			noDataImg: 'this.src="' + noDataImg + '"',
			zoneIdList: [],
			linksType: 'source',
			options: {},
			zoneType: '',
			floorName: {},
			floorW: 500,
			floorH: 780,
		}
	},
	components: {
		'traffic-chart': trafficChart
	},
	watch: {
		propparam: {
			handler: 'refreshHandle',
			immediate: true
		},
	},
	mounted() {
	},
	methods: {
		load(val) {
			this.$nextTick(() => {
				this.loading = val
			})
		},
		refreshHandle(param) {
			if (param.dateType !== '/trafficdirection/ftml') return;
			this.bgW = this.bgH = '';
			this.loading = true;
			this.emitData = param.data;
			// this.zoneType = this.emitData.zone_top == 0 ? 'multiple' : '';
			this.zoneIdList = this.emitData.asis_zoneIds.split(',');
			if(this.emitData.asis_floorImg) {
			this.floorSrc = window._vionConfig.picUrl + this.emitData.asis_floorImg;
			} else {
				this.floorSrc = noDataImg;
				this.bgW = '100%';
			}
			// this.floorSrc = 'https://via.placeholder.com/1780x1705';
			// ------------动态图片------------------
			let image = new Image();
				image.src = this.floorSrc;
			let _this = this;
			image.onload = function() {
				_this.naturalWidth = image.width;
				_this.naturalHeight = image.height;
				$('#graphChart').height($('.background-img').height());
				setTimeout(() => {
					_this.getZones()
				}, 1000);
			}
			image.onerror = function () {
				_this.floorSrc = _this.noDataImg
				_this.$message({
					type: 'info',
					message: '图片加载失败!'
				})
				_this.loading = false;
			}
		},
		getZones() {
			this.legendAside = [];
			this.firstZoneName = '';
			this.$api.base.zone({
				mallId: this.emitData.asis_org,
				type_arr: "1,3,4",
				// type: 4,
				status: 1,
				floorId: this.emitData.asis_floorId,
				sortName: 'floor.name, zone.name',
			}).then(res => {
				let result = res.data;
				result.data.forEach((item, index) => {
					this.legendAside.push({
						legendColor: this.colors[index],
						selected: this.emitData.asis_zoneIds.indexOf(item.id)>-1?true:false,
						name: item.name,
						id: item.id
					})
				})
				if(result.data.length > 0) {
					let firstZoneId = result.data[0].id;
					this.firstZoneName = result.data[0].name;
					this.zoneType = this.emitData.zone_top == 0 ? 'multiple' : '';
					console.log(this.emitData.asis_zoneIds,this.zoneIdList,this.zoneType)
					this.emitData.asis_zoneIds = this.emitData.asis_zoneIds.replace(/\,$/, '');
					this.getLinkData(	this.emitData.asis_zoneIds,this.zoneIdList,this.zoneType);
					this.linksChange();
				} else {
					this.drawNoData();
				}
			}).catch(err => { })
		},
		getLinkData(zoneId,zoneId_list,zoneType) {
			let	params = {
					orgIds: this.emitData.asis_org,
					zoneIds: zoneId,
					floorId: this.emitData.asis_floorId,
					startDate: this.emitData.asis_time,
					endDate: this.emitData.asis_time,
					orgType: this.emitData.asis_level,
					ageStage: this.emitData.asis_age,
					gender: this.emitData.asis_gender,
				}
			this.$api.customerReport.moveLineSimpleFloor(params)
			.then(res => {
				let result = res.data;
				if(result.code == 200) {
					this.loading = false
					this.options = result;
				}else{
					this.$nextTick(() => {
						this.loading = false
					})
					this.$message({
						message: result.msg,
						type: 'warning',
						showClose: true,
					})
				}
				
			})
			.catch(err => {
				this.catchErrorHandle(err)
			})
		},
		drawNoData() {
			let chartDom = document.getElementById('graphChart');
				chartDom.style.width=$('.background-img').width()+'px';
			if(this.$echarts.getInstanceByDom(chartDom)) {
				this.$echarts.init(chartDom).dispose();
				this.myChart = this.$echarts.init(chartDom);
			} else {
				this.myChart = this.$echarts.init(chartDom);
			}
			let fontFamily = '"PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif'
				, option = {};
			option = {
				tooltip: {},
				graphic: {
					type: 'text',
					left: 'center',
					top: 'middle',
					z: 100,
					style: {
						fill: '#333',
						text: this.$t('echartsTitle.noData'),
						font: '14px ' + fontFamily
					}
				}
			};
			if (!this.firstFlag) {
				this.myChart.clear();
			}
			this.firstFlag = false;
			this.myChart.clear();
			this.myChart.setOption(option);
			this.loading = false;
		},
		checkLegend(isSeled, legendIndex) {
			this.zoneIdList = []
			// this.legendAside[legendIndex].selected = isSeled ? false : true;
			let seledIds = '';
			this.legendAside.forEach(item => {
				if(item.selected) {
					this.zoneIdList.push(item.id)
					seledIds += item.id + ','
				}
			})
			seledIds = seledIds.replace(/\,$/, '');
			this.zoneType = this.emitData.zone_top == 0 ? 'multiple' : '';
			console.log(seledIds,this.zoneIdList,this.zoneType)
			this.getLinkData(seledIds,this.zoneIdList,this.zoneType);
		},
		linksChange(val) {
			let seledIds = '';
			this.zoneIdList = [];
			this.legendAside.forEach(item => {
				if(item.selected) {
					this.zoneIdList.push(item.id)
					seledIds += item.id + ','
				}
			})
			seledIds = seledIds.replace(/\,$/, '');
			this.zoneType = this.emitData.zone_top == 0 ? 'multiple' : '';
		},
	}
}
</script>

<style scoped>
.asis-table-wrapper {
	position: relative;
}

.graph-container {
	/* position: relative;
	 height: 800px; 
	background-color: #fff; */
	position: relative;
	background-color: #fff;
	border: 1px solid transparent;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	padding: 15px;
	box-sizing: border-box;
	text-align: center;
}

.graph-rel {
	position: relative;
	height: 780px;
}

.graph-box {
	margin: 0 auto;
	z-index: 1;
}

.background-img {
	/* height: 100%; */
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;  
}

.legend-container {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.legend-item {
	text-align: left;
	cursor: pointer;
}

.legend-item + .legend-item {
	margin-top: 10px;
}

.legend-circle {
	display: inline-block;
	margin-right: 5px;
	border-radius: 10px;
	width: 14px;
	height: 14px;
}

.legend-text {
	position: relative;
	font-size: 14px;
	top: -2px;
}

.switch-links {
	z-index: 2;
	position: absolute;
	right: 200px;
}
@media only screen and (max-width: 1680px) {
	.graph-rel {
		height: 740px;
	}
}
@media only screen and (max-width: 1440px) {
	.graph-rel {
		height: 540px;
	}
}
@media only screen and (max-width: 1366px) {
	.graph-rel {
		height: 540px;
	}
}
@media only screen and (max-width: 1280px) {
	.graph-rel {
		height: 540px;
	}
}
</style>