<template>
	<div class="wrap" :style="{ backgroundImage: 'url(' +$imghost+ bodyBg + ')' }">
		<div
			class="header"
			:style="{ backgroundImage: 'url(' +$imghost+ headerBg + ')' }"
		></div>
		<div class="content" style="cursor: default">
			<div class="left">
				<div class="lOne">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						基地信息
					</div>
					<div class="con">
						<ul>
							<li :style="{ backgroundImage: 'url(' + icon.name + ')' }">
								<span>基地名称 :</span>
								<select v-model="baseInfo.id" @change="selectBase">
									<option
										v-for="(item, index) in baseList"
										:key="index"
										:value="item.id"
									>
										{{ item.farmname }}
									</option>
								</select>
							</li>
							<li :style="{ backgroundImage: 'url(' + icon.addr + ')' }">
								<span>基地地址 : {{ baseInfo.addr }}</span>
							</li>
							<li :style="{ backgroundImage: 'url(' + icon.area + ')' }">
								<span>基地面积 : {{ baseInfo.farmarea }}亩</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="lTwo">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						基地概况
					</div>
					<div class="con">
						<ul>
							<li v-for="(item, i) in nums" :key="i">
								<div
									:style="{ backgroundImage: 'url(' + circleBg + ')' }"
									:class="{
										col: true,
										col01: i == 'fieldNum',
										col02: i == 'plantsType',
										col03: i == 'farmerNum',
										col04: i == 'fieldNum2'
									}"
								>
									<img class="light" :src="light" />
									<countTo :startVal='0' :endVal='item.num' :duration='3000'></countTo>
									<!-- <span>{{ item.num }}</span> -->
									{{ item.unit }}
								</div>
								<p>{{ i | baseTit }}</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="lThree">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						追溯流程
					</div>
					<div class="con">
						<div :style="{ backgroundImage: 'url(' +$imghost+ process + ')' }"></div>
					</div>
				</div>
				<div class="lFour">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						产量对比
					</div>
					<div class="con">
						<div class="chart01" ref="chart01Ref"></div>
					</div>
				</div>
			</div>
			<div class="center">
				<div class="tit" :style="{ backgroundImage: 'url(' + titBg2 + ')' }">
					综合展示
				</div>
				<div class="chart03" ref="chart03Ref"></div>
				<div class="infoBox">
					<ul>
						<li :style="{ backgroundImage: 'url(' + btnBg + ')' }">
							产品身份认证信息
						</li>
						<li :style="{ backgroundImage: 'url(' + btnBg + ')' }">
							监测报告及认证证书
						</li>
						<li :style="{ backgroundImage: 'url(' + btnBg + ')' }">
							产品地位置信息
						</li>
						<li :style="{ backgroundImage: 'url(' + btnBg + ')' }">
							产地实时溯源直播
						</li>
						<li :style="{ backgroundImage: 'url(' + btnBg + ')' }">
							产地实时环境监测
						</li>
						<li :style="{ backgroundImage: 'url(' + btnBg + ')' }">
							种植加工全程追溯
						</li>
					</ul>
				</div>
			</div>
			<div class="right">
				<div class="rOne">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						作业次数
					</div>
					<div class="con">
						<div class="selTwo">
							<div class="selBox">
								<span>作物产品 :</span>
								<select style="cursor: pointer" class="selCode" v-model="backcode" @change="selPlant">
									<option
										v-for="item in palntList"
										:key="item.backcode"
										:value="item.backcode"
									>
										{{ item.land + '——' + item.batch }}
									</option>
								</select>
							</div>
						</div>
						<div class="chart02" ref="chart02Ref"></div>
					</div>
				</div>
				<div class="rTwo">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						溯源信息
					</div>
					<div class="con">
						<div class="swiper-container" ref="swiperRef">
							<div class="swiper-wrapper">
								<div
									class="swiper-slide"
									v-for="(item, index) in syInfo"
									:key="item.uptime"
								>
									<i :style="{ backgroundColor: dotColors[index % 4] }"></i>
									<span>{{ (item.uptime * 1000) | formatTime }}</span>
									<div class="info">
										<p>
											农事作业：
											{{ item.type | formatType }}
										</p>
										<p v-if="item.type == 1">
											产品名称：
											{{ item.plantname }}
										</p>
										<p v-if="item.type == 2">
											肥料名称：
											{{ item.itemname }}
										</p>
										<p v-if="item.type == 2">
											施肥用量：
											{{ item.manureuse }}kg
										</p>
										<p v-if="item.type == 3">
											灌溉面积：
											{{ item.area }}亩
										</p>
										<p v-if="item.type == 4">
											药品名称：
											{{ item.mediname }}
										</p>
										<p v-if="item.type == 5">
											操作事项：
											{{ item.jobname }}
										</p>
										<p v-if="item.type != 1">
											操作人：
											{{ item.user }}
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import countTo from 'vue-count-to'
import echarts from 'echarts'
import '@/plugin/flexible.js'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { option01, optionFun } from './chart'
export default {
	data() {
		return {
			bodyBg: '/images/bigdata/sy/bg.jpg',
			headerBg: '/images/bigdata/sy/1.png',
			titBg: require('@/assets/images/bigdata/sy/tit_bg.png'),
			titBg2: require('@/assets/images/bigdata/sy/tit_bg2.png'),
			circleBg: require('@/assets/images/bigdata/sy/circle_bg.png'),
			light: require('@/assets/images/bigdata/sy/circle_l.png'),
			process: '/images/bigdata/sy/process.png',
			selectBg: require('@/assets/images/bigdata/sy/sanjiao.png'),
			btnBg: require('@/assets/images/bigdata/sy/22.png'),
			baseList: [], //所有基地
			baseInfo: {
				id: '',
				addr: '',
				farmarea: ''
			},
			palntList: [],
			backcode: '',
			icon: {
				name: require('@/assets/images/bigdata/sy/2.png'),
				addr: require('@/assets/images/bigdata/sy/3.png'),
				area: require('@/assets/images/bigdata/sy/4.png')
			},
			nums: {
				fieldNum: {
					num: 10,
					unit: '个'
				},
				plantsType: {
					num: 10,
					unit: '种'
				},
				farmerNum: {
					num: 20,
					unit: '人'
				},
				fieldNum2: {
					num: 10,
					unit: '个'
				}
			},
			syInfo: [],
			dotColors: ['#47b7ff', '#26ed5f', '#b6dfff', '#d4368b'],
			myChart01: {},
			myChart02: {},
			linesData: {
				saddr: { name: '', fromCoord: [] },
				eaddr: []
			}
		}
	},
	filters: {
		baseTit: function (value) {
			switch (value) {
				case 'fieldNum':
					return '地块数量'
					break
				case 'plantsType':
					return '作物种类'
					break
				case 'farmerNum':
					return '工人数量'
					break
				case 'fieldNum2':
					return '地块数量'
					break
			}
		},
		formatType(value) {
			switch (value) {
				case '1':
					return '种植'
					break
				case '2':
					return '施肥'
					break
				case '3':
					return '灌溉'
					break
				case '4':
					return '喷药'
					break
				case '5':
					return ' 更多'
					break
			}
		}
	},
	mounted() {
		this.chartInit()
		this.getBaseList()
	},
	methods: {
		getBaseList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.base_info'
			}).then((res) => {
				if (res.data.message == '') {
					this.baseList = res.data.data.data
					this.baseInfo.id = this.baseList[0].id
					this.baseInfo.farmarea = this.baseList[0].farmarea
					this.baseInfo.addr = this.baseList[0].farmaddr
					this.selectBase()
				}
			})
		},
		//切换农场
		selectBase() {
			let obj = this.baseList.filter((item) => {
				return item.id == this.baseInfo.id
			})
			this.baseInfo.addr = obj[0].farmaddr
			this.baseInfo.farmarea = obj[0].farmarea
			this.getBaseInfo()
			this.getProducts()
			this.getMapTrans()
		},
		selPlant() {
			this.jobTimes()
			this.allJobs()
		},
		//作业次数
		jobTimes() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.contrast_job',
				data: this.qs.stringify({ backcode: this.backcode })
			}).then((res) => {
				if (res.data.message == '') {
					let { irri, job, manure, medi } = res.data.data
					let arrName = ['施肥', '喷药', '灌溉', '其他']
					let arrValue = [manure, medi, irri, job]
					let option = optionFun(arrName, arrValue)
					this.myChart02.setOption(option)
				}
			})
		},
		//溯源信息
		allJobs() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.all_ascend',
				data: this.qs.stringify({ backcode: this.backcode })
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					let arr = data.irrigate
						.concat(data.job)
						.concat(data.manura)
						.concat(data.medi)
						.concat(data.plant)
					arr.sort((a, b) => {
						return a.uptime - b.uptime
					})
					this.syInfo = arr
					this.$nextTick(() => {
						this.swiperInit()
					})
				}
			})
		},
		//产量对比
		getProducts() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.contrast_land',
				data: this.qs.stringify({ id: this.baseInfo.id })
			}).then((res) => {
				if (res.data.message == '') {
					let { pick } = res.data.data
					let xAxis = []
					let series = []
					pick.forEach((item) => {
						xAxis.push(item.land)
						series.push(item.picktotal)
					})
					option01.xAxis[0].data = xAxis
					option01.series[0].data = series
					this.myChart01.setOption(option01)
				}
			})
		},
		//作业次数和溯源信息
		getBaseInfo() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.display_land',
				data: this.qs.stringify({ id: this.baseInfo.id })
			}).then((res) => {
				if (res.data.message == '') {
					let { plant } = res.data.data
					this.palntList = plant
					plant[0] && (this.backcode = plant[0].backcode)
					this.selPlant()
				}
			})
		},
		getMapTrans() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.ascend_map',
				data: this.qs.stringify({ id: this.baseInfo.id })
			}).then((res) => {
				if (res.data.message == '') {
					let { farmname, start_addr, trans_list } = res.data.data
					this.linesData.saddr.fromCoord = start_addr.split(';')[0].split(',') //基地坐标集合的第一个坐标
					this.linesData.saddr.name = farmname
					this.linesData.eaddr = trans_list.map((item) => {
						item.name = item.province
						item.value = item.total
						item.toCoord = item.eaddr.split(',')
						return item
					})
					this.mapChart()
				}
			})
		},
		chartInit() {
			this.myChart01 = echarts.init(this.$refs.chart01Ref)
			this.myChart02 = echarts.init(this.$refs.chart02Ref)
			window.addEventListener('resize', () => {
				this.myChart01.resize()
				this.myChart02.resize()
			})
		},
		swiperInit() {
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				loop: true,
				speed: 2000,
				slidesPerView: 4,
				autoplay: true
			})
			this.$refs.swiperRef.onmouseover = function () {
				mySwiper.stopAutoplay()
			}
			this.$refs.swiperRef.onmouseout = function () {
				mySwiper.startAutoplay()
			}
		},
		mapChart() {
			this.$axios({
				method: 'GET',
				url: `${this.jsonUrl}/static/map/100000.json`
			}).then((res) => {
				let geoJson = res.data
				this.chainMap(geoJson) //显示全国地图
			})
		},
		chainMap(geoJson) {
			let myChart03 = echarts.init(this.$refs.chart03Ref)
			window.addEventListener('resize', function () {
				myChart03.resize()
			})
			echarts.registerMap('china', geoJson)
			myChart03.setOption(
				{
					grid: {
						left: '0',
						right: '0',
						top: '0%',
						bottom: '0%',
						containLabel: true,
						show: false
					},
					tooltip: {
						trigger: 'item',
						borderColor: '#FFFFCC',
						showDelay: 0,
						hideDelay: 0,
						enterable: true,
						transitionDuration: 0,
						extraCssText: 'z-index:100',
						formatter: function (params, ticket, callback) {
							if (params.seriesType == 'effectScatter') {
								return (
									'目的地：' +
									params.data.name +
									'<br/>' +
									'运输量：' +
									params.data.value[2] +
									'kg'
								)
							} else if (params.seriesType == 'lines') {
								return (
									params.data.fromName +
									'>' +
									params.data.toName +
									'<br />' +
									'运输量：' +
									params.data.value +
									'kg'
								)
							} else {
								return params.name
							}
						}
					},
					legend: {
						orient: 'vertical',
						id: 1,
						y: 'bottom',
						x: 'right',
						itemWidth: 16,
						itemHeight: 20,
						data: [
							{
								name: '在线设备',
								icon: this.onIcon
							},
							{
								name: '离线设备',
								icon: this.offIcon
							}
						],
						textStyle: {
							color: '#fff'
						}
					},
					visualMap: {
						//图例值控制
						min: 0,
						max: 500,
						calculable: true,
						show: true,
						color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
						textStyle: {
							color: '#fff'
						}
					},
					geo: {
						map: 'china', //对应registerMap注册名字
						label: {
							show: false,
							color: '#fff'
						},
						roam: true, //是否开启鼠标缩放和平移漫游,设置成 'scale' 或者 'move',设置成 true 为都开启
						zlevel: 0,
						zoom: 1, // 当前视角的缩放比例
						scaleLimit: {
							min: 0.5,
							max: 2
						},
						layoutCenter: ['50%', '50%'],
						layoutSize: '100%',
						itemStyle: {
							normal: {
								areaColor: 'rgba(43, 196, 243, 0.42)',
								borderColor: 'rgba(43, 196, 243, 1)',
								borderWidth: 1
							}
						},
						emphasis: {
							//高亮状态下的多边形和标签样式。
							label: {
								show: true, //高亮状态下字体是否显示
								color: '#AAE0FC' //高亮状态下字体颜色
							},
							itemStyle: {
								areaColor: '#2B91B7'
							}
						}
					},
					series: [
						{
							type: 'lines',
							zlevel: 2,
							symbolSize: 10,
							effect: {
								show: true,
								period: 6,
								trailLength: 0,
								symbol: 'arrow',
								symbolSize: 5
							},
							lineStyle: {
								normal: {
									width: 1, //尾迹线条宽度
									opacity: 1, //尾迹线条透明度
									curveness: 0.3 //尾迹线条曲直度
								}
							},
							data: this.convertData(this.linesData)
						},
						{
							name: 333,
							type: 'effectScatter',
							coordinateSystem: 'geo',
							zlevel: 2,
							rippleEffect: {
								brushType: 'stroke'
							},
							label: {
								normal: {
									show: true,
									position: 'right',
									formatter: '{b}'
								}
							},
							symbolSize: function (val) {
								return 8
							},
							itemStyle: {
								normal: {
									show: false,
									color: '#000'
								},
								emphasis: {
									areaColor: '#2B91B7'
								}
							},
							data: this.linesData.eaddr.map(function (dataItem) {
								return {
									name: dataItem.name,
									value: dataItem.toCoord.concat([dataItem.value])
								}
							})
						},
						//被攻击点
						{
							type: 'scatter',
							coordinateSystem: 'geo',
							zlevel: 2,
							rippleEffect: {
								//涟漪特效
								period: 4, //动画时间，值越小速度越快
								brushType: 'stroke', //波纹绘制方式 stroke, fill
								scale: 4 //波纹圆环最大限制，值越大波纹越大
							},
							label: {
								normal: {
									show: true,
									position: 'right', //显示位置
									offset: [5, 0], //偏移设置
									formatter: '{b}',
									fontSize: 14,
									textStyle: {
										color: '#ff0'
									}
								},
								emphasis: {
									show: true,
									color: '#f60'
								}
							},
							symbol: 'pin',
							symbolSize: 50,
							itemStyle: {
								color: 'rgb(128, 128, 128)'
							},
							data: [
								{
									name: this.linesData.saddr.name,
									value: this.linesData.saddr.fromCoord
								}
							]
						}
					]
				},
				true
			)
		},
		convertData(data) {
			var res = []
			let { saddr, eaddr } = data
			for (var i = 0; i < eaddr.length; i++) {
				var dataItem = eaddr[i]
				res.push({
					fromName: saddr.name,
					toName: dataItem.name,
					coords: [saddr.fromCoord, dataItem.toCoord],
					value: dataItem.value
				})
			}
			return res
		}
	},
	components: { countTo }
}
</script>

<style lang='less' scoped>
@font-face {
	font-family: electronicFont;
	src: url('/static/font/DS-DIGIT.ttf');
}
body {
	overflow: hidden;
}
.wrap {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	overflow: hidden;
	.header {
		width: 100vw;
		height: 12vh;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		position: relative;
	}
	.content {
		position: relative;
		height: 86vh;
		.tit {
			font-size: 0.2rem;
			font-weight: 700;
			letter-spacing: 0.05rem;
			padding-left: 15px;
			color: #fff;
			line-height: 4vh;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: left bottom;
		}
		> div {
			position: absolute;
		}
		.con {
			background: #111a53;
			width: 100%;
			margin-top: 0.2vh;
			height: calc(100% - 4.2vh);
		}
		.left {
			width: 23vw;
			left: 1vw;
			height: 100%;
			.lOne {
				width: 100%;
				height: 17vh;
				margin-bottom: 1vh;
				color: #fff;
				ul {
					padding: 2vh;
				}
				select {
					background: transparent;
					color: #b6dfff;
					border: none;
					outline: none;
					font-size: 0.2rem;
					font-weight: 800;
					option {
						background: #000;
						border: none;
						outline: none;
					}
				}
				ul li {
					background-repeat: no-repeat;
					background-position: left center;
					padding-left: 30px;
					line-height: 3.2vh;
					font-size: 0.2rem;
					font-weight: 800;
					span {
						color: #b6dfff;
					}
				}
			}
			.lTwo {
				width: 100%;
				height: 17vh;
				margin-bottom: 1vh;
				color: #fff;
				.con {
					ul {
						display: flex;
						justify-content: space-between;
						li {
							flex: 1;
							padding: 0.1rem 0.1rem;
							text-align: center;
							& > div {
								position: relative;
								background-repeat: no-repeat;
								height: 10vh;
								line-height: 10vh;
								width: 100%;
								background-size: 100% auto;
								background-position: center;
								font-size: 0.2rem;
								span {
									font-family: electronicFont;
									font-size: 0.4rem;
									font-weight: 800;
								}
								img.light {
									position: absolute;
									width: 89%;
									height: auto;
									left: 50%;
									top: 50%;
									animation: rotate 5s linear infinite;
								}
								@keyframes rotate {
									from {
										transform: translate(-50%, -50%) rotate(0deg);
									}
									to {
										transform: translate(-50%, -50%) rotate(360deg);
									}
								}
							}
							& > p {
								font-size: 0.18rem;
								font-weight: 800;
								color: #b6dfff;
							}
						}
						.col01 {
							color: #38abda;
						}
						.col02 {
							color: #f8c81c;
						}
						.col03 {
							color: #24ed5f;
						}
						.col04 {
							color: #d5358d;
						}
					}
				}
			}
			.lThree {
				width: 100%;
				height: 26vh;
				margin-bottom: 1vh;
				color: #fff;
				.con {
					padding: 0.2rem;
					box-sizing: border-box;
				}
				.con > div {
					height: 100%;
					background-repeat: no-repeat;
					background-size: 100% auto;
				}
			}
			.lFour {
				width: 100%;
				height: 23vh;
				color: #fff;
				.chart01 {
					width: 100%;
					height: 100%;
				}
			}
		}
		.center {
			width: 50vw;
			left: 25vw;
			height: 100%;
			.tit {
				background-size: 100% auto;
			}
			.chart03 {
				height: calc(100% - 10vh);
			}
			.infoBox {
				position: absolute;
				bottom: 0;
				ul {
					padding: 0 1.5rem;
					display: flex;
					color: #2271ce;
					font-size: 0.2rem;
					flex-wrap: wrap;
					justify-content: space-between;
					li {
						width: 30%;
						background-repeat: no-repeat;
						text-align: center;
						background-size: 100% auto;
						line-height: 0.5rem;
						margin-bottom: 10px;
					}
				}
			}
		}
		.right {
			width: 23vw;
			right: 1vw;
			height: 100%;
			.rOne {
				height: 36vh;
				.chart02 {
					height: calc(100% - 0.3rem);
				}
				.selTwo {
					display: flex;
				}
				.selBox {
					flex: 1;
					display: inline-block;
					text-align: right;
					margin-top: 10px;
					span {
						color: #b6dfff;
						font-size: 0.18rem;
						font-weight: 800;
					}
					.selCode {
						// appearance: none;
						// -moz-appearance: none;
						// -webkit-appearance: none;
						outline: none;
						border: 1px solid #46c4f6;
						color: #fff;
						padding: 2px 10px;
						background-color: transparent;
						width: 75%;
						line-height: 0.3rem;
						option {
							background: #000;
							border: none;
							outline: none;
						}
					}
				}
			}
			.rTwo {
				height: 50vh;
				.con {
					select {
						appearance: none;
						-moz-appearance: none;
						-webkit-appearance: none;
						outline: none;
						border: none;
						color: #46b8fe;
						padding: 0 10px;
						background-color: transparent;
						width: 20%;
						line-height: 0.5rem;
						height: 0.5rem;
						background-repeat: no-repeat;
						background-position: right center;
						option {
							background: #000;
							border: none;
							outline: none;
						}
					}
					.swiper-container {
						height: 100%;
						.swiper-slide {
							padding: 0 0.4rem;
							color: #b6dfff;
							display: flex;
							align-items: center;
							position: relative;
							&:before {
								content: '';
								position: absolute;
								width: 1px;
								top: 0;
								bottom: 0;
								left: 0.465rem;
								z-index: -1;
								background: #47b8fe;
							}
							i {
								width: 0.13rem;
								height: 0.13rem;
								border-radius: 50%;
							}
							span {
								margin-left: 0.2rem;
								font-size: 0.15rem;
							}
							.info {
								padding: 0 0.5rem;
								font-size: 0.16rem;
								line-height: 0.3rem;
							}
						}
					}
				}
			}
		}
	}
}
</style>