<template>
<div class="body-container pos-r">
	<div>
		<weather></weather>
	</div>
	<div class="topbgimg maxWidth pos-a">
		<img class="maxWidth maxHeight" src="@/assets/images/u69.svg" />
		<div class="title-container pos-a">
			<p class="fz-4 fc-w" style="font-size: 32px">应用科学城态势感知系统</p>
			<p class="fz-2 fc-w-o">Ecological simulation display in business district</p>
		</div>
	</div>
	<div class="bottom-container pos-a">
		<img class="maxWidth maxHeight" src="@/assets/images/u6.svg" />
	</div>
	<div class="left-container pos-a">
		<img class="maxWidth maxHeight" src="@/assets/images/u70.svg" />
		<div class="left-nav-container pos-a fc-w">
			<div class="pt-1">
				<div class="left-nav-li flex column ai-c jc-c cursor" v-for="(item,index) in leftNavData" @click="navClick(index)">
					<div v-if="leftNavIndex == index">
						<img :src="item.activesrc" />
					</div>
					<div v-else>
						<img :src="item.src" />
					</div>
					<div class="fz-2" :class="leftNavIndex == index?'active':''">{{item.title}}</div>
				</div>
				<div class="open-panel-container cursor pos-a" @click="openPanel=!openPanel">
					<div v-if="openPanel" class="flex ai-c jc-c column">
						<i class="el-icon-d-arrow-left fz-3"></i>
						<div class="fz-1" style="margin-top: 5px;">收起面板</div>
					</div>
					<div v-if="!openPanel" class="flex ai-c jc-c column">
						<i class="el-icon-d-arrow-right fz-3"></i>
						<div class="fz-1" style="margin-top: 5px;">展开面板</div>
					</div>
				</div>
			</div>
		</div>
		<div class="left-body-container pos-a" v-if="openPanel">
			<div class="maxWidth maxHeight" v-if="leftNavIndex==0">
				<survey></survey>
			</div>
			<div class="maxWidth maxHeight" v-if="leftNavIndex==1">
				<equipment></equipment>
			</div>
			<div class="maxWidth maxHeight" v-if="leftNavIndex==2">
				<enterprise></enterprise>
			</div>
			<div class="maxWidth maxHeight" v-if="leftNavIndex==3">
				<security></security>
			</div>
		</div>
	</div>
	<div class="right-container pos-a">
		<img class="maxWidth maxHeight" src="@/assets/images/u0.svg" />
		<div class="right-body-container pos-a">
			<div class="flex ai-c jc-c right-body-weather border-b">
				<div>
					<img class="img" src="@/assets/images/u86.svg"/>
				</div>
				<div class="ml-3 dateConatiner">
					<div class="time">{{nowTime}}</div>
					<div class="date">{{nowDate}}</div>
				</div>
				<div class="ml-3">
					<iframe allowtransparency="true" frameborder="0" width="255" height="98" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=0&d=1&bd=0&k=000000&f=ffffff&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54938&w=255&h=98&align=center"></iframe>
				</div>
			</div>
			<div class="flex right-body-section border-b wrap">
				<div class="flex ai-c sectionli">
					<div>
						<img class="img" :src="require('@/assets/images/u10.svg')" />
					</div>
					<div class="ml-3">
						<div class="fz-2 fc-w-1">园区面积</div>
						<div>
							<span style="font-family: DINPro;" class="fz-6 fc-w">{{sectinOption.park_area}}</span>
							<span class="fc-w fz-2 ml-1">km²</span>
						</div>
					</div>
			</div>
			<div class="flex ai-c sectionli">
					<div>
						<img class="img" :src="require('@/assets/images/u13.svg')" />
					</div>
					<div class="ml-3">
						<div class="fz-2 fc-w-1">园区人数(总量)</div>
						<div>
							<span style="font-family: DINPro;" class="fz-6 fc-w">{{sectinOption.park_people_sum}}</span>
							<span class="fc-w fz-2 ml-1">万</span>
						</div>
					</div>
			</div>
			<div class="flex ai-c sectionli">
					<div>
						<img class="img" :src="require('@/assets/images/u16.svg')" />
					</div>
					<div class="ml-3">
						<div class="fz-2 fc-w-1">入驻企业</div>
						<div>
							<span style="font-family: DINPro;" class="fz-6 fc-w">{{sectinOption.in_enterprise}}</span>
							<span class="fc-w fz-2 ml-1">家</span>
						</div>
					</div>
			</div>
			<div class="flex ai-c sectionli">
					<div>
						<img class="img" :src="require('@/assets/images/u19.svg')" />
					</div>
					<div class="ml-3">
						<div class="fz-2 fc-w-1">本月融资额</div>
						<div>
							<span style="font-family: DINPro;" class="fz-6 fc-w">{{sectinOption.month_financing_sum}}</span>
							<span class="fc-w fz-2 ml-1">亿</span>
						</div>
					</div>
				</div>
			</div>

			<div class="right-body-taxranking border-b">
				<div class="mt-3">
					<p class="fz-3 fc-w-1 fw-b">纳税排名</p>
					<p class="fz-2 fc-w-1 mt-1">实时税务数据统计</p>
				</div>
				<div class="content mt-1">
					<div v-for="(item,index) in rankOption">
						<div class="title fz-2 fc-w-1 mt-1">{{ item.company_name }}</div>
						<div class="flex ai-c jc-c mt-1">
							<div class="proportion">
								<div :style="{width: item.people_sum/rankMaxNum*100 +'%'}" class="bar"></div>
							</div>
							<div class="value ta-c fc-w">{{item.people_sum}}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="right-body-peopletrend">
				<div class="mt-3">
					<p class="fz-3 fc-w-1 fw-b">人流趋势</p>
					<p class="fz-2 fc-w-1 mt-1">当日24小时交通人气趋势</p>
				</div>
				<div class="mt-2 fz-3 fc-w-1">车流量趋势图</div>
				<div class="echartsContainer mt-2">
					<div id="strendCharts" class="maxHeight maxWidth"></div>
				</div>
			</div>

		</div>
	</div>

</div>
</template>

<script>
import survey from "./widget/survey.vue"
import equipment from "./widget/equipment.vue"
import enterprise from "./widget/enterprise.vue"
import security from "./widget/security.vue"
import weather from "./widget/weather.vue"
import {getMethodCommon,postMethodCommon } from '@/api/common'
export default {
	name: 'index',
	components: {
		survey,
		equipment,
		enterprise,
		security,
		weather
	},
	data () {
		return {
			leftNavIndex: 0,
			leftNavData:[
				{
					title: '概况',
					src: require('@/assets/images/u98.svg'),
					activesrc: require('@/assets/images/u98_selected.svg')
				},
				{
					title: '设备',
					src: require('@/assets/images/u107.svg'),
					activesrc: require('@/assets/images/u107_selected.svg')
				},
				{
					title: '企业',
					src: require('@/assets/images/u101.svg'),
					activesrc: require('@/assets/images/u101_selected.svg')
				},
				{
					title: '安全',
					src: require('@/assets/images/u104.svg'),
					activesrc: require('@/assets/images/u104_selected.svg')
				}
			],
			openPanel: true,
			nowTime: '00:00:00',
			nowDate: '22/01/01',
			nowWendu: '20~28',
			nowWeather: '晴转多云',
			sectinOption:{
				park_area:null,
				park_people_sum:null,
				in_enterprise:'',
				month_financing_sum:null
			},
			rankOption:[{company_name:'',people_sum:null}
				// { title: '信息科技有限公司' , value: 1900 },
				// { title: '商贸公司' , value: 1800 },
				// { title: '检测中心' , value: 1700 },
				// { title: '科技股份' , value: 1600 },
				// { title: '信息科技有限公司' , value: 1500 },
				// { title: '信息科技有限公司' , value: 1400 },
				// { title: '信息科技有限公司' , value: 1300 },
				// { title: '信息科技有限公司' , value: 1200 },
				// { title: '信息科技有限公司' , value: 1100 }
			],
			rankMaxNum: 2000,
		}
	},
	created() {

	},
	mounted() {
		this.getParkInfoData()
		this.loadCompanyPeople()
		this.getDateTime()
		this.getPeopleTrend()
	},
	methods:{
		getParkInfoData(){
			getMethodCommon('/ParkInfo/getParkInfo',{id:'afde1d33-bbc9-4b3a-a9d2-4c98c8909b9c'}).then(res =>{
				this.sectinOption = res.data.data
			})
		},
		loadCompanyPeople(){
			getMethodCommon('/ParkInfo/LoadCompany').then(res =>{
				this.rankOption = res.data.data
				console.log('rankMaxNum',this.rankOption)
				let arr = []
				this.rankOption.forEach(item =>{
					arr.push(item.people_sum)
				})
				this.rankMaxNum = Math.max.apply(null, arr)*3/2

			})
		},
		navClick(index){
			this.leftNavIndex = index
			this.openPanel = true
			if(index==0){
				ue4("toActor", { "ActorTag": 'MainView' })
				ue4("hideActorByTag", { "ActorTag": 'Camera' })
				ue4("hideActorByTag", { "ActorTag": '5G' })
			}else if(index==1){
				ue4("toActor", { "ActorTag": 'BackView' })
				ue4("showActorByTag", { "ActorTag": '5G' })
				ue4("hideActorByTag", { "ActorTag": 'Camera' })
			}else if(index==3){
				ue4("toActor", { "ActorTag": 'HuView' })
				ue4("showActorByTag", { "ActorTag": 'Camera' })
				ue4("hideActorByTag", { "ActorTag": '5G' })
			}
		},

		getPeopleTrend(){
			getMethodCommon('/ParkInfo/LoadParkMonthBusWas').then(res =>{
				let data = res.data.data
				let xAxisData = []
				let seriesData = []
				data.forEach(item =>{
					xAxisData.push(item.month_day)
					seriesData.push(item.bus_was)
				})
				let lineCharts = this.$echarts.init(document.getElementById('strendCharts'))
				lineCharts.setOption({
					grid: {
						x: 0,y: 0,x2: 0,y2: 0,
						top: '5%',
						left: '3%',
						right: '6%',
						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(237, 165, 78, 1)', //改变折线点的颜色
									lineStyle: {
										type: 'solid', //solid实线;dashed虚线
										color: 'rgba(237, 165, 78, 1)', //改变折线颜色
									}
								}
							},
							areaStyle: {
								//折线图颜色半透明
								normal:{
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(237, 165, 78, 0.8)' // 0% 处的颜色
										}, {
											offset: 1, color: 'rgba(237, 165, 78, 0.2)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								}

							}
						}
					]
				})
			})
		},




		getDateTime(){
			let _this = this
			setInterval(function () {
			  let date = new Date();
			  let year = date.getFullYear(); //当前年份
			  let month = date.getMonth() + 1; //当前月份
			  let data = date.getDate(); //天
			  let hours = date.getHours(); //小时
			  let minute = date.getMinutes(); //分
			  let second = date.getSeconds(); //秒
			  _this.nowTime = _this.fnW(hours) + ":" + _this.fnW(minute) + ":" + _this.fnW(second)
			  _this.nowDate = year + '/' + month + '/' + data
			}, 1000)
		},
		fnW(str) {
		  var num;
		  str >= 10 ? num = str : num = "0" + str;
		  return num;
		}
	}


}


</script>

<style>
.body-container{
	width: 1920px;
	height: 1080px;
  overflow: hidden;
	-moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}
.topbgimg{
	height: 74px;
	left: 0;
	top: 0;
}
.bottom-container{
	width: 1920px;
	height: 106px;
	left: 0;
	top: 992px;
}
.title-container{
	width: 436px;
	height: 60px;
	left: 31px;
	top: 30px;
	line-height: 32px;
	z-index: 9;
}
.left-container{
	width: 498px;
	left: 0;
	top: 0;
}
.left-nav-container{
	width: 70px;
	height: 983px;
	top: 87px;
	left: 0;
	background-color: rgba(23, 116, 122, 1);
	padding-top: 10px;
	z-index: 9;
}
.left-nav-li{
	width: 70px;
	height: 74px;
}
.left-nav-li .active{
	color: rgb(135, 247, 199);
}
.open-panel-container{
	width: 70px;
	height: 52px;
	left: 0;
	bottom: 50px;
	color: rgba(204, 204, 204, 0.8);
}
.left-body-container{
	width: 400px;
	height: 983px;
	padding-top: 10px;
	left: 70px;
	top: 87px;
	animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
}
@keyframes myfirst
{
    from {left: -400px;}
    to {left: 70px;}
}


.right-container{
	width: 521px;
	height: 1080px;
	top: 0;
	right: 0;
}
.right-body-container{
	width: 450px;
	height: 1080px;
	top: 0;
	right: 35px;
}
.right-body-weather{
	height: 112px;
}
.dateConatiner{
	color: #fff;
	font-family: 'Arial Normal', 'Arial';
}
.dateConatiner .time{
	font-size: 28px;
}
.dateConatiner .date{
	font-size: 18px;
	color: rgba(255, 255, 255, 0.8);
	padding: 2px 0 0 5px;
}
.dateConatiner .weather{
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	padding: 2px 0 0 5px;
}
.right-body-weather .img, .right-body-section .sectionli .img{
	width: 36px;
	height: 36px;
}

.right-body-section{
	height: 204px;
	padding: 20px 0;
}
.right-body-section .sectionli{
	width: 50%;
	height: 50%;
}
.right-body-taxranking{
	height: 440px;
}
.right-body-taxranking .content{
	height: 350px;
	overflow: auto;
	padding: 10px;
}
.right-body-taxranking .content::-webkit-scrollbar{
	width: 10px;
	height: 10px;
}
.right-body-taxranking .content::-webkit-scrollbar-track{
	border-radius: 10px;
}
.right-body-taxranking .content::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color:rgba(135, 247, 199, 0.4);
}
.right-body-taxranking .content .title{
	line-height: 20px;
}
.right-body-taxranking .content .proportion{
	width: 85%;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.298039215686275);
}
.right-body-taxranking .content .proportion .bar{
	height: 10px;
	background-color: rgba(135, 247, 199, 1);
}
.right-body-taxranking .content .value{
	width: 15%;
}
.right-body-peopletrend .echartsContainer{
	height: 140px;
}
</style>
