<template>
<div class="container">
	<div class="title fc-w">园区态势概况</div>
	<div class="bg-b boxcontainer">
		<div class="flex jc-sb">
			<div class="fz-3 fc-w">今日人流量</div>
			<div class="fz-2 fc-w">环比{{renliulianghunbi}}%</div>
		</div>
		<div class="flex">
			<span class="mathNum fc-w">{{ jinrirenliuliang }}</span>
			<span class="fz-3 fc-w unit ml-2">人次</span>
		</div>
		<img class="maxWidth" src="@/assets/images/trans.png" />
	</div>
	<div class="bg-b boxcontainer money mt-2">
		<div class="flex jc-sb">
			<div class="fz-3 fc-w">今日合同总额</div>
			<div class="fz-2 fc-w">环比{{jinrihetongzongehuanbi}}%</div>
		</div>
		<div class="flex">
			<span class="mathNum fc-w">{{ jinrihetongzonge }}</span>
			<span class="fz-3 fc-w unit ml-2">元</span>
		</div>
		<div class="pos-r">
			<img class="pos-a maxWidth" src="@/assets/images/u238.svg" />
			<img class="pos-a maxWidth" src="@/assets/images/u239.svg" />
		</div>
	</div>
	<div class="bg-b mt-2 trafficcontainer">
		<div class="traffictitle fz-3 fc-w">园区交通态势</div>
		<div class="ul-scoll">
			<vue-seamless-scroll :data="trafficData" :class-option="defaultOption" >
				<ul>
					<li v-for="(item, index) in trafficData" :key='index' :class="isBgActive?'active':'li'">
						<div class="flex ai-c maxHeight">
							<div class="fz-2 fc-w-1" style="width:40%;padding-left:10px">{{item.address}}</div>
							<div class="fz-2 fc-w-1" style="width:30%;padding-left:10px">{{item.congestion_type}}</div>
							<div style="width:30%;" class="flex jc-c ai-c">
								<div class="normal ta-c fz-1" v-if="item.traffic_type_id==1">正常</div>
								<div class="yongdu ta-c fz-1" v-if="item.traffic_type_id==0">拥堵</div>
							</div>
						</div>
					</li>
				</ul>
			</vue-seamless-scroll>
		</div>
	</div>
	<div class="trendContainer">
		<div class="traffictitle fz-3 fc-w">人流量趋势</div>
		<div class="trendChatrsContainer">
			<div id="surveyCharts" class="maxHeight maxWidth"></div>
		</div>
	</div>
</div>
	
</template>

<script>
	//npm install vue-seamless-scroll --save
import vueSeamlessScroll from 'vue-seamless-scroll'	
import {getMethodCommon,postMethodCommon } from '@/api/common'
export default {
	name: 'survey',
	components: {
		vueSeamlessScroll
	},
	computed: {
		defaultOption () {
			return {
				step: 1, // 数值越大速度滚动越快
				limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			}
		}
	},
	data () {
		return {
			jinrirenliuliang: 10,
			renliulianghunbi: 0,
			jinrihetongzonge: 0,
			jinrihetongzongehuanbi: 0,
			isBgActive:false,
			trafficData:[
				// { name:'盐湖大道', label: '占道维护', status:'拥堵', value: 0},
				// { name:'汉中路', label: '暂无异常', status:'正常', value: 1},
				// { name:'滨江路', label: '交通事故', status:'拥堵', value: 0},
				// { name:'内部酒店', label: '占道维护', status:'拥堵', value: 0},
				// { name:'沿江大道', label: '暂无异常', status:'正常', value: 1},
				// { name:'学术交流中心', label: '暂无异常', status:'正常', value: 1},
				// { name:'内部酒店', label: '占道维护', status:'拥堵', value: 0},
				// { name:'餐厅路', label: '暂无异常', status:'正常', value: 1},
				// { name:'蒙山路', label: '交通事故', status:'拥堵', value: 0},
			]
		}
	},
	created() {
		
	},
	mounted() {
		this.getJRRLL() //获取园区信息详情
		this.getTrafficData() //查询园区交通态势
		this.getPeopleTrend() //获取人流量趋势
	},
	methods:{
		getJRRLL(){
			getMethodCommon('/ParkInfo/getParkInfo',{id:'afde1d33-bbc9-4b3a-a9d2-4c98c8909b9c'}).then(res =>{
				this.jinrirenliuliang = res.data.data.today_people_traffic
				this.renliulianghunbi = parseFloat((res.data.data.today_people_traffic/res.data.data.yesterday_people_traffic-1)*100).toFixed(2)
				this.jinrihetongzonge = res.data.data.today_contract_sum
				this.jinrihetongzongehuanbi = parseFloat((res.data.data.today_contract_sum/res.data.data.yesterday_contract_sum-1)*100).toFixed(2)
				if(this.renliulianghunbi>0){
					this.renliulianghunbi = '+' + this.renliulianghunbi
				}
				if(this.jinrihetongzongehuanbi>0){
					this.jinrihetongzongehuanbi = '+' + this.jinrihetongzongehuanbi
				}
			})
			
		},
		getTrafficData(){
			getMethodCommon('/ParkInfo/LoadParkTrafficSituational').then(res =>{
				let num = res.data.total%2
				if(num==1){
					this.isBgActive = true
				}else{
					this.isBgActive = false
				}
				this.trafficData = res.data.data
			})
			
		},
		getPeopleTrend(){
			let xAxisData = []
			let seriesData = []
			getMethodCommon('/ParkInfo/LoadParkMonthPeopelWas').then(res =>{
				let data = res.data.data
				data.forEach(item =>{
					xAxisData.push(item.month_day)
					seriesData.push(item.bus_was)
				})
				let lineCharts = this.$echarts.init(document.getElementById('surveyCharts'))
				lineCharts.setOption({
					grid: {
						top: '5%',
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
						}
					},
					legend: {
						show: false
					},
					xAxis: {
						type: 'category',
						axisTick: {
							show: false,
						},
						interval: 1,
						axisLabel: {
							color: '#fff',
							fontSize: "12px"
						},
						axisLine: {
							show: false
						},
						boundaryGap: false,
						data: xAxisData,
					},
					yAxis: [
						{
							type: '',
							name: '',
							axisLabel: {
								formatter: '{value} '
							},
							axisLine: {
								lineStyle: {
									type: 'dashed', //solid实线;dashed虚线
									color: 'rgba(255, 255, 255, 0)'
								}
							},
							axisLabel: {
								textStyle: {
									//坐标轴颜色
									color: '#fff',
									fontSize: "12px"
								},
							},
							//坐标轴线样式
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed', //solid实线;dashed虚线
									color: 'rgba(255, 255, 255, 0.3)'
								}
							},
						}
					],
					series: [
						{
							name: "人流量趋势",
							data: seriesData,
							type: 'line',
							smooth: true, //true曲线; false折线
							showSymbol: false,
							itemStyle: {
								normal: {
									color: 'rgba(135,247,199, 1)', //改变折线点的颜色
									lineStyle: {
										type: 'solid', //solid实线;dashed虚线
										color: 'rgba(135,247,199, 1)', //改变折线颜色
									}
								}
							},
							areaStyle: {
								//折线图颜色半透明
								normal:{
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(135,247,199, 0.8)' // 0% 处的颜色
										}, {
											offset: 1, color: 'rgba(135,247,199, 0.2)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								}
								
							}
						}
					]
				})
			})
		},
	}
}
</script>

<style scoped>
.container{
	width: 380px;
	padding-left: 15px;
	animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
}
@keyframes myfirst
{
    from {margin-left: -380px;}
    to {margin-left: 0;}
}
.bg-b{
	background-color: rgba(0, 0, 0, 0.4);
}
.container .title{
	font-size: 20px;
	line-height: 50px;
}
.boxcontainer{
	height: 110px;
	padding: 15px;
	border-left: 4px solid rgba(135, 247, 199, 1);
}
.boxcontainer .mathNum{
	font-size: 48px;
	font-weight: 700;
	font-family: monospace;
}
.boxcontainer .unit{
	padding-top: 20px;
}
.boxcontainer.money{
	border-left: 4px solid rgba(255, 184, 34, 1);
}
.trafficcontainer{
	height: 436px;
	padding: 5px 20px;
	overflow: hidden;
}
.trafficcontainer .traffictitle,.trendContainer .traffictitle{
	line-height: 40px;
}
.trafficcontainer .normal{
	width: 40px;
	height: 20px;
	line-height: 20px;
	border-radius: 2px;
	color: #0E1C3F;
	background-color: rgba(102, 186, 248, 1);
}
.trafficcontainer .yongdu{
	width: 40px;
	height: 20px;
	line-height: 20px;
	border-radius: 2px;
	color: #0E1C3F;
	background-color: rgba(237, 165, 78, 1);
}
.ul-scoll{
    height: 390px;
	overflow: hidden;
}
.ul-scoll li{
	height: 40px;
	background-color: none;
}
.ul-scoll li.li:nth-child(2n-1){
	background-color: rgba(255,255,255,0.1)
}
.ul-scoll li.active:nth-child(2n){
	background-color: rgba(255,255,255,0.1)
}
.trendContainer{
	height: 175px;
}
.trendChatrsContainer{
	height: 140px;
}
</style>
