customly.vue

<template>
	<div class="customly">
		<div class="graph-container" v-loading="loading">
			<img :src="floorSrc" class="background-floorimg" alt="" />
			<div id="cusGraphChart" class="graph-box"></div>
		</div>
	</div>
</template>

<script>
import defaultImg from '@/assets/img/manage/defaultFloor.svg'
export default {
	props: {
		propparam: Object
	},
	data() {
		return {
			floorPlanUrl: window._vionConfig.imagesUrl + "/images/",
			floorSrc: '',
			loading: true,
			trafficFlowLoading: true,
			kpiData_head: [],
			trafficHour_head: [{
				label: '时间段',
				prop: 'periodTime'
			}],
			traffic10Min_head: [{
				label: '时间段',
				prop: 'periodTime'
			}],
			trafficFlow_head: [],
			trafficFlow_title: '', //客流报表
			kpiData_title: '', //今日数据汇总
			trafficHour_title: '', //今日小时级新增客流报表
			traffic10Min_title: '', //今日十分钟级新增客流报表
			kpiData_ops: [],
			trafficHour_ops: [],
			traffic10Min_ops: [],
			trafficFlow_ops: [],
			tableKeyToId: {},
			tableIds: '',
			emitData: [],
			radioDate: '小时级',
			rowLen: Number,
			naturalWidth: 0,
			naturalHeight: 0,
			firstFlag: true,
			orgids: '',
			starttime: '',
			endtime: '',
			imgWidth: '',
			// hourHeadData: [],
			// minHeadData: [],
		}
	},
	computed: {
	},
	components: {
	},
	watch: {
		propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
	},
	mounted() {
		// this.getTableId();
		// this.loading = true;
		// this.trafficFlowLoading = true;
	},
	methods: {
		refreshHandle(param) {
			if (param.dateType !== '/trafficeline/customly') return;
			this.loading = true;
			this.emitData = param.data;
			if (!param.data.asis_img) {
				this.floorSrc = defaultImg;
			} else {
				this.floorSrc = this.floorPlanUrl + param.data.asis_img;
			}
			this.orgids = param.data.asis_org;
			this.starttime = param.data.asis_time[0];
			this.endtime = param.data.asis_time[1];
			var image = new Image();
			image.src = this.floorSrc;
			var _this = this;
			image.onload = function() {
				_this.naturalWidth = image.width;
				_this.naturalHeight = image.height;
				// let canvasH = parseInt($('.background-floorimg').width()/(_this.naturalWidth/_this.naturalHeight))
				$('#cusGraphChart').height($('.background-floorimg').height());
				_this.getLinkData();
			}
		},
		getLinkData() {
			this.$api.customerReport.flowMovingLineReport({
				orgIds: this.orgids,
				startDate: this.starttime,
				endDate: this.endtime,
				// _t: Date.parse(new Date()) / 1000
			}).then(res => {
				if(typeof res.data.data.node === 'undefined' || typeof res.data.data.line === 'undefined') {
					this.loading = false;
					return;
				}
				let data = [];
				let categories = [];
				let symbolMinnum = 999999999;
				let symbolMaxnum = 0;
				let emptyInnum = false;
				res.data.data.node.forEach((item, index) => {
					// var val=1;
					if(!item.innum){
						emptyInnum = true;
					}
					if (item.innum != 0 && item.innum < symbolMinnum) {
						symbolMinnum = item.innum;
					}
					if (item.innum != 0 && item.innum > symbolMaxnum) {
						symbolMaxnum = item.innum;
					}
				})
				res.data.data.node.forEach((item, index) => {
					let SymbolSize = symbolMaxnum == symbolMinnum ? 10 : parseInt((10 + (item.innum - symbolMinnum) / (symbolMaxnum - symbolMinnum) * 90));
					let nodeX = (item.x / this.normalWidth * $('.background-floorimg').width()).toFixed(2);
					let nodeY = (item.y / this.normalHeight * $('.background-floorimg').height()).toFixed(2);
					let dataObj = {
						id: String(item.zondId),
						name: item.zoneName,
						value: item.innum,
						x: nodeX > $('.background-floorimg').width() ? 0 : nodeX,
						y: nodeY > $('.background-floorimg').height() ? 0 : nodeY,
						// fixed: true,
						symbolSize: emptyInnum ? 0 : SymbolSize,
						category: index
					}
					// console.log('dataObj', dataObj, this.naturalWidth, this.naturalHeight)
					data.push(dataObj)
					categories.push({
						name: item.zoneName
					})
				});
				// 设置起始原点, 防止点位不准确
				data.push({
					id:-1,
					name:'22',
					value:-1,
					x:0,
					y:0,
					symbolSize: 0,
					label: {
						show: false,
					}
				},{
					id:-2,
					name:'11',
					value:-1,
					x: $('.background-floorimg').width(),
					y: $('.background-floorimg').height(),
					symbolSize: 0,
					label: {
						show: false,
					}
				})
				let links = [];
				let minNum = 999999999999;
				let maxNum = 0;
				let lineW = null;
				res.data.data.line.forEach(item => {
					links.push({
						target: String(item.target),
						source: String(item.source),
						value: item.value
					})
					if (item.value != 0 && item.value < minNum) {
						minNum = item.value
					}
					if (item.value != 0 && item.value > maxNum) {
						maxNum = item.value
					}
				})
				links.forEach((item, index) => {
					lineW = (1 + (item.value - minNum) / (maxNum - minNum) * 14);
					lineW = lineW < 0 ? 0 : lineW;
					item.lineStyle = {
						normal: {
							// width: item.value / minNum
							width: emptyInnum ? 0 : lineW,
						}
					}
					item.symbolSize = emptyInnum ? 0 : lineW * 2;
				})
				let myChart = {};
				let chartDom = document.getElementById('cusGraphChart');
					chartDom.style.width=$('.background-floorimg').width()+'px';
				if(this.$echarts.getInstanceByDom(chartDom)) {
					this.$echarts.init(chartDom).dispose();
					myChart = this.$echarts.init(chartDom);
				} else {
					myChart = this.$echarts.init(chartDom);
				}
				var option = {
					tooltip: {},
					legend: {
						type: 'plain',
						icon: 'circle',
						top: 0,
						data: categories.map((a) => {
							return a.name;
						})
					},
					series: [{
						top:0,
						left:0,
						right:0,
						bottom:1,
						edgeSymbol: ['none', 'arrow'],
						categories: categories,
						type: 'graph',
						layout: 'none',
						data: data,
						links: links,
						edgeSymbolSize: 0,
						// fixed:true,
						// roam: true,
						label: {
							normal: {
								show: emptyInnum ? false : true,
								position: 'right',
								formatter: '{b}:{c}'
							}
						},
						lineStyle: {
							normal: {
								color: 'source',
								curveness: 0.3
							}
						}
					}],
				};
				if (!this.firstFlag) {
					myChart.clear();
				}
				this.firstFlag = false;
				myChart.clear();
				myChart.setOption(option);
				setTimeout(() => {
					this.loading = false;
				}, 1000)
			})
			.catch(err => {
				this.catchErrorHandle(err)
			})
		}
	}
}
</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: 10px;
    box-sizing: border-box;
    text-align: center;
}

.graph-rel {
	position: relative;
}

.graph-box {
	margin: 0 auto;
}


/* .graph-box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	} */
</style>