<template>
	<div class="full-body">
		<!-- 雨情 -->
		<!-- <div id="rainChart" class="full"  v-if="name=='rain'"></div> -->
		<!-- 水情 -->
		<!-- <div id="waterChart" class="full" v-if="name=='water'"></div> -->
		<!--位移信息 -->
		<div id="shiftChart"  class="full"></div>
		<!-- 渗流信息 -->
		<!-- <div id="seepageChart" ref="seepageChart" class="full full-body" v-if="name=='seepage'"></div> -->
		<!-- 渗压信息 -->
		<!-- <div id="pressureChart" class="full full-body" v-if="name=='pressure'"></div> -->
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
	export default{
		props: {
		    rscd: {
		        type: String,
		    },
			stcd: {
			    type: String,
			},
			name: {
			    type: String,
			},
		},
		data(){
			return{
				dammvLists:[]
			}
		},
		mounted() {
			this.$nextTick(()=>{
					this.getDammvList()
			})
		},
		methods:{
			//位移曲线图
			getDammvList() {
				let param = {
					appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: "",
					startTime: "",
					stcd: "",
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: ""
				}
				gisMap.dammvList(param, res => {
					if (res.state) {
						this.dammvLists = res.value
						this.$nextTick(() => {
							this.initShiftChart()
						})
					}
				})
			}, 
			//渗流曲线图
			getDamspgList() {
				console.log(123);
				let param = {
					appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: this.rscd,
					startTime: "",
					stcd: this.stcd,
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: ""
				}
				gisMap.damspgList(param, res => {
					if (res.state) {
						this.damspgLists=res.value
						this.$nextTick(()=>{
							this.initSeepageChart()
						})
					}
				})
			},
			//渗流
			initSeepageChart() {
			    let times = []
			    let spqnList = []
			    
			    this.damspgLists.forEach(e => {
			    	times.push(e.mstm.split(' ')[1])
			    	spqnList.push(e.spqn)
			    })
			    const seepageChartDom = this.$refs.seepageChart
			    this.seepageChart = echarts.init(seepageChartDom)
			    let option = {
			    	tooltip: {
			    		trigger: 'axis',
			    		backgroundColor: 'rgba(0,0,0,0.7)',
			    		textStyle: {
			    			color: '#dddee0',
			    		},
			    		axisPointer: {
			    			type: 'cross',
			    			label: {
			    				backgroundColor: '#6a7985',
			    			},
			    		},
			    	},
			    	legend: {
			    		top: '2%',
			    		left: '4%',
			    		data: ['瞬时流量(m³/s)'],
			    		textStyle: {
			    			color: '#adb9ba',
			    			fontSize: 10,
			    		},
			    	},
			    	grid: {
			    		top: '20%',
			    		left: '4%',
			    		right: '4%',
			    		bottom: '6%',
			    		containLabel: true,
			    	},
			    	xAxis: [{
			    		type: 'category',
			    		boundaryGap: false,
			    		data:times,
			    	}, ],
			    	yAxis: [{
			    		type: 'value',
			    	}, ],
			    	series: [{
			    		name: '瞬时流量(m³/s)',
			    		type: 'line',
			    		smooth: true,
			    		areaStyle: {},
			    		emphasis: {
			    			focus: 'series',
			    		},
			    		data: spqnList,
			    		itemStyle: {
			    			color: '#0091ff',
			    		},
			    	}, ],
			    }
			    option && this.seepageChart.setOption(option)
			},
			//位移
			initShiftChart() {
			let times = []
			let xrdsList = []
			let yrdsList = []
			let zrdsList = []
			this.dammvLists.forEach(e => {
				times.push(e.tm.split(' ')[1])
				xrdsList.push(e.dx)
				yrdsList.push(e.dy)
				zrdsList.push(e.dz)
			})
            const shiftChartDom = document.getElementById('shiftChart')
            this.shiftChart = echarts.init(shiftChartDom)
            let option = {
                tooltip: {
                    appendToBody: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    bottom: 0,
                    right: 0,
                    data: ['北方向(mm)', '东方向(mm)', '垂直方向(mm)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '4%',
                    left: '4%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                    },
                ],
                series: [
                    {
                        name: '北方向(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data:xrdsList,
                        itemStyle: {
                            color: '#ff9a00',
                        },
                    },
                    {
                        name: '东方向(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: yrdsList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                    {
                        name: '垂直方向(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: zrdsList,
                        itemStyle: {
                            color: '#91cc75',
                        },
                    },
                ],
            }
            option && this.shiftChart.setOption(option)
        },
		
		}
	}
</script>

<style scoped>
	.full-body{
	    height: calc(100% - 40PX);
	}
</style>