<!-- 大屏 -->
<template>
	<div class="daping">
		<div class="content">
			<!-- 头部标题 -->
			<div class="header">
				长兴县芦笋产业农合联数字驾驶仓
				<i class="el-icon-s-home" @click="changes"></i>
			</div>
			<!-- 内容区 -->
			<div class="mien">
				<div class="top">
					<div class="t-left" style="width: 25vw">
						<div class="title">
							<Title>
								<div slot="title">今日交易量</div>
							</Title>
						</div>
						<div
							style="
								display: flex;
								alin-item: center;
								padding: 0rem 1rem 1rem 0;
							"
						>
							<div class="sunshou">
								<div style="color: rgba(103, 210, 103, 1)">
									{{
										todayChData.inWeightAll == null
											? 0
											: parseInt(todayChData.inWeightAll)
									}}斤
								</div>
								<div>
									<img src="../../assets/img/shop.png" /><span
										style="line-height: 3rem; font-size: 1.3rem"
										>收 购</span
									>
								</div>
							</div>
							<div style="border-left: 1px solid #0d3c7c"></div>
							<div class="sunshou">
								<div style="color: #ffdc4c">
									{{
										todayChData.outWeightAll == null
											? 0
											: parseInt(todayChData.outWeightAll)
									}}斤
								</div>
								<div>
									<img src="../../assets/img/xiaoshou.png" />
									<div style="line-height: 2.8rem; font-size: 1.3rem">
										销 售
									</div>
								</div>
							</div>
							<div style="border-left: 1px solid #0d3c7c"></div>
							<div class="sunshou">
								<div style="color: #f37065">
									{{
										todayChData.lossNumAll == null
											? 0
											: parseInt(todayChData.lossNumAll)
									}}斤
								</div>
								<div>
									<img src="../../assets/img/sunhao.png" /><span
										style="line-height: 3rem; font-size: 1.3rem"
										>损 耗</span
									>
								</div>
							</div>
						</div>
						<!-- 标题 -->
						<div class="title">
							<Title />
						</div>
						<!-- 轮播表格 -->
						<div class="left-list">
							<dv-scroll-board :config="config" :key="key1" />
						</div>
					</div>
					<div class="t-center" style="flex: 1">
						<div
							style="
								display: flex;
								justify-content: space-around;
								alin-item: center;
							"
						>
							<div style="color: #fff">
								<div style="font-size: 3rem; font-weight: bold">大 笋</div>
								<div style="display: flex">
									<div>
										<div
											style="
												color: rgb(241, 74, 8);
												font-size: 3rem;
												font-weight: bold;
											"
										>
											{{
												priceCompare.bigAsparagus == null
													? "-"
													: priceCompare.bigAsparagus
											}}元/斤
										</div>
										<div class="bg"></div>
									</div>
									<!-- <div style="display:flex;flex-direction: column;justify-content: space-around;">
                    <div style="-webkit-transform:scale(0.8);font-weight:bold;">去年同期价格:{{priceCompare.lastYearBigAsparagus  ==null ? '-' :priceCompare.lastYearBigAsparagus}}元</div>
                    <div style="-webkit-transform:scale(0.8);font-weight:bold;">去年同期增长:{{priceCompare.bigExtraMoney  ==null ? '-' :priceCompare.bigExtraMoney}}%</div>
                  </div> -->
								</div>
							</div>
							<div style="color: #fff">
								<div style="font-size: 3rem; font-weight: bold">中 笋</div>
								<div style="display: flex">
									<div>
										<div
											style="
												color: rgb(241, 74, 8);
												font-size: 3rem;
												font-weight: bold;
											"
										>
											{{
												priceCompare.middleAsparagus == null
													? "-"
													: priceCompare.middleAsparagus
											}}元/斤
										</div>
										<div class="bg"></div>
									</div>
									<!-- <div style="display:flex;flex-direction: column;justify-content: space-around;">
                    <div style="-webkit-transform:scale(0.8);font-weight:bold;">去年同期价格:{{priceCompare.lastYearMiddleAsparagus  ==null ? '-' :priceCompare.lastYearMiddleAsparagus}}元</div>
                    <div style="-webkit-transform:scale(0.8);font-weight:bold;">去年同期增长:{{priceCompare.middleExtraMoney   ==null ? '-' :priceCompare.middleExtraMoney}}%</div>
                  </div> -->
								</div>
							</div>
							<div style="color: #fff">
								<div style="font-size: 3rem; font-weight: bold">小 笋</div>
								<div style="display: flex">
									<div>
										<div
											style="
												color: rgb(241, 74, 8);
												font-size: 3rem;
												font-weight: bold;
											"
										>
											{{
												priceCompare.smallAsparagus == null
													? "-"
													: priceCompare.smallAsparagus
											}}元/斤
										</div>
										<div class="bg"></div>
									</div>
									<!-- <div style="display:flex;flex-direction: column;justify-content: space-around;">
                    <div style="-webkit-transform:scale(0.8);font-weight:bold;">去年同期价格:{{priceCompare.lastYearSmallAsparagus==null ? '-' :priceCompare.lastYearSmallAsparagus}}元</div>
                    <div style="-webkit-transform:scale(0.8);font-weight:bold;">去年同期增长:{{priceCompare.smallExtraMoney==null ? '-' :priceCompare.smallExtraMoney}}%</div>
                  </div> -->
								</div>
							</div>
						</div>
						<div class="center-top">
							<!-- 1111111111 -->
							<Map :mapData="mapData"></Map>
						</div>
					</div>
					<div class="t-right" style="width: 25vw">
						<div class="title">
							<Title>
								<div slot="title">昨日交易量</div>
							</Title>
						</div>
						<div
							style="
								display: flex;
								alin-item: center;
								padding: 0rem 1rem 1rem 0;
							"
						>
							<div class="sunshou">
								<div style="color: rgba(103, 210, 103, 1)">
									{{
										todayChData.yesterdayInWeightAll == null
											? 0
											: parseInt(todayChData.yesterdayInWeightAll)
									}}斤
								</div>
								<div>
									<img src="../../assets/img/shop.png" /><span
										style="line-height: 3rem; font-size: 1.3rem"
										>收 购</span
									>
								</div>
							</div>
							<div style="border-left: 1px solid #0d3c7c"></div>
							<div class="sunshou">
								<div style="color: #ffdc4c">
									{{
										todayChData.yesterdayOutWeightAll == null
											? 0
											: parseInt(todayChData.yesterdayOutWeightAll)
									}}斤
								</div>
								<div>
									<img src="../../assets/img/xiaoshou.png" />
									<div style="line-height: 2.8rem; font-size: 1.3rem">
										销 售
									</div>
								</div>
							</div>
							<div style="border-left: 1px solid #0d3c7c"></div>
							<div class="sunshou">
								<div style="color: #f37065">
									{{
										todayChData.yesterdayLossNumAll == null
											? 0
											: parseInt(todayChData.yesterdayLossNumAll)
									}}斤
								</div>
								<div>
									<img src="../../assets/img/sunhao.png" /><span
										style="line-height: 3rem; font-size: 1.3rem"
										>损 耗</span
									>
								</div>
							</div>
						</div>
						<div class="title">
							<Title>
								<div slot="title">昨日农户交易实时</div>
							</Title>
						</div>
						<div class="right-list">
							<dv-scroll-board :config="config1" :key="key2" />
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="b-left" style="width: 25vw">
						<!-- 标题 -->
						<div class="title">
							<Title>
								<div slot="title">产业农合联</div>
							</Title>
						</div>
						<!-- 内容 -->
						<div
							style="
								display: flex;
								justify-content: space-around;
								flex-wrap: wrap;
							"
						>
							<div class="main-num">
								<div class="title">{{ title[0] }}</div>
								<div class="bg">
									<div class="number">
										{{ number.memberNumber }}
									</div>
								</div>
							</div>
							<div class="main-num">
								<div class="title">{{ title[1] }}</div>
								<div class="bg">
									<div class="number">
										{{ number.AllValue }}
									</div>
								</div>
							</div>
							<div class="main-num">
								<div class="title">{{ title[2] }}</div>
								<div class="bg">
									<div class="number">
										{{ number.AreaNum }}
									</div>
								</div>
							</div>
							<div class="main-num">
								<div class="title">{{ title[3] }}</div>
								<div class="bg">
									<div class="number">
										{{ number.YearNum }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="b-center" style="flex: 1; margin: 0 20px">
						<Title class="title-bg">
							<div slot="title">七日价格走势图</div>
						</Title>
						<div style="height: 60%">
							<zhe
								:date="date"
								:bigData="bigData"
								:middleData="middleData"
								:sData="sData"
							/>
						</div>
					</div>
					<div class="b-right" style="width: 25vw">
						<div class="title">
							<Title>
								<div slot="title">近日天气变化</div>
							</Title>
						</div>
						<div id="dom">{{ time }}</div>

						<div style="height: 60%">
							<iframe
								width="100%"
								height="100%"
								frameborder="0"
								scrolling="no"
								hspace="0"
								src="https://i.tianqi.com/?c=code&a=getcode&id=9&py=changxing&icon=1&color=%23FFFFFF"
							></iframe>

							<!-- <iframe width="150%" height="100%" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&color=%23FFFFFF&id=32&py=changxing&icon=1"></iframe> -->
							<!-- <iframe width="480" height="140" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=20&py=chongqing&icon=1"></iframe> -->
							<!-- <iframe width="100%"
                      scrolling="no"
                      height="200"
                      frameborder="0"
                      allowtransparency="true"
                      src="https://i.tianqi.com?c=code&id=95&py=changxing&color=%23FFFFFF&icon=1&site=18"></iframe> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Yuan from "./echart/yuan.vue";
import Zhe from "./echart/zhe.vue";
import Map from "./map/map.vue";
import Title from "./map/title/index.vue";
import {
	todayCh,
	searchDateCh,
	sevenPrice,
	todayPerCh,
	yesPreCh,
	getScreenNum,
	selectFormerList,
} from "../../apis/modules/bigScreen.js";
import { login } from "../../apis/modules/asparagus.js";

export default {
	props: {
		flag: {
			typeof: Boolean,
			default: false,
		},
	},
	name: "asparagus_big_screen",
	components: { Map, Title, Yuan, Zhe },
	data() {
		return {
			key1: 1,
			key2: 1,
			// 定时刷新
			timer: null,
			timers: null,
			time: "",
			title: ["会员数", "总产值", "种植面积", "产业农合联年产值"],
			number: {
				memberNumber: "-",
				AllValue: "-",
				AreaNum: "-",
				YearNum: "-",
			},
			mapData: [],
			height: "400px",
			todayChData: {
				inWeightAll: 0,
				lossNumAll: 0,
				outWeightAll: 0,
			},
			priceCompare: {
				bigAsparagus: undefined,
				bigExtraMoney: undefined,
				lastYearBigAsparagus: undefined,
				lastYearMiddleAsparagus: undefined,
				lastYearSmallAsparagus: undefined,
				middleAsparagus: undefined,
				middleExtraMoney: undefined,
				smallAsparagus: undefined,
				smallExtraMoney: undefined,
			},
			config: {},
			config1: {},
			date: [],
			bigData: [],
			middleData: [],
			sData: [],
		};
	},
	created() {
		this.timers = setInterval(function () {
			var dd = new Date();
			var y = dd.getFullYear();
			var m = (dd.getMonth() + 1).toString().padStart(2, "0");
			var d = dd.getDate().toString().padStart(2, "0");
			var h = dd.getHours().toString().padStart(2, "0");
			var mi = dd.getMinutes().toString().padStart(2, "0");
			var s = dd.getSeconds().toString().padStart(2, "0");
			var str =
				y +
				"年" +
				m +
				"月" +
				d +
				"日  " +
				h +
				":" +
				mi +
				":" +
				s +
				"  星期" +
				"日一二三四五六".charAt(dd.getDay());
			// console.log(document.getElementById('dom'))
			this.time = document.getElementById("dom").innerText = str;
		}, 1000);
		// 大屏登录
		// this.loginList()
	},
	mounted() {
		this.pieOutlineFunc();
		// 查询地图数据
		this.getMapFarmer();
		this.searchTodayChFn();
		this.searchTodayPreChFn();
		this.searchSevenPriceFn();
		this.searchPriceFn();
		this.searchYesChFn();
		this.getScreenNumFn();
		this.timer = setInterval(() => {
			this.searchTodayChFn();
			this.searchTodayPreChFn();
			this.searchSevenPriceFn();
			this.searchPriceFn();
			// this.searchYesChFn()
			this.getScreenNumFn();
		}, 30000);
	},
	methods: {
		pieOutlineFunc() {
			var _this = this;
			window.addEventListener("resize", function (e) {
				_this.$nextTick(() => {
					_this.key1++;
					_this.key2++;
				});
			});
		},
		changes() {
			if (this.flag == true) {
				this.$emit("flagechange");
			} else {
				this.$router.back(-1);
			}
		},
		// 获取种植户地图
		getMapFarmer() {
			this.mapData = [];
			this.mapData.push([
				119.922334,
				30.863209,
				"长兴许长蔬菜专业合作社",
				"-",
				"长兴许长蔬菜专业合作社",
				"-",
				"-",
				"-",
				"浙江省湖州市长兴县和平镇长城村",
			]);
			selectFormerList().then((res) => {
				if (res.status == 0) {
					res.data.items.forEach((item, index) => {
						let value = [];
						for (const key in item) {
							if (key == "longitude") {
								value[0] = item[key];
							} else if (key == "latitude") {
								value[1] = item[key];
							} else if (key == "linkman") {
								value[2] = item[key];
							} else if (key == "phoneNumber") {
								value[3] = item[key];
							} else if (key == "principalName") {
								value[4] = item[key];
							} else if (key == "cultivatedArea") {
								value[5] = item[key] + "亩";
							} else if (key == "totalOutPut") {
								value[6] = item[key] + "万元";
							} else if (key == "yearOutPut") {
								value[7] = item[key] + "万元";
							} else if (key == "address") {
								value[8] = item[key];
							}
						}
						this.mapData.push(value);
					});
				}
			});
		},
		// 获取会员信息
		getScreenNumFn() {
			getScreenNum().then((res) => {
				if (res.status == 0) {
					this.number.memberNumber =
						(res.data.memberNum == 0 ? "0" : res.data.memberNum) + "人";
					this.number.AllValue =
						(res.data.totalOutPut == 0 ? "0" : res.data.totalOutPut) + "万元";
					this.number.AreaNum =
						(res.data.cultivatedArea == 0 ? "0" : res.data.cultivatedArea) +
						"亩";
					this.number.YearNum =
						(res.data.yearOutPut == 0 ? "0" : res.data.yearOutPut) + "万元";
				}
			});
		},
		//查询今日交易量
		searchTodayChFn() {
			todayCh().then((res) => {
				if (res.status == 0) {
					this.todayChData = res.data;
				}
			});
		},
		// 查询价格比较
		searchTodayPreChFn() {
			searchDateCh().then((res) => {
				if (res.status == 0) {
					this.priceCompare.bigAsparagus = res.data.bigAsparagus;
					this.priceCompare.bigExtraMoney = res.data.bigExtraMoney;
					this.priceCompare.lastYearBigAsparagus =
						res.data.lastYearBigAsparagus;

					this.priceCompare.lastYearMiddleAsparagus =
						res.data.lastYearMiddleAsparagus;
					this.priceCompare.middleAsparagus = res.data.middleAsparagus;
					this.priceCompare.middleExtraMoney = res.data.middleExtraMoney;

					this.priceCompare.lastYearSmallAsparagus =
						res.data.lastYearSmallAsparagus;
					this.priceCompare.smallAsparagus = res.data.smallAsparagus;
					this.priceCompare.smallExtraMoney = res.data.smallExtraMoney;
				}
			});
		},
		// 最近7天价格
		searchSevenPriceFn() {
			this.date = [];
			this.bigData = [];
			this.middleData = [];
			this.sData = [];
			sevenPrice().then((res) => {
				const { status, data } = res;
				if (status == 0) {
					data.forEach((obj, index) => {
						this.date.push(obj.createTime);
						this.bigData.push(obj.bigAsparagus);
						this.middleData.push(obj.middleAsparagus);
						this.sData.push(obj.smallAsparagus);
					});
				}
			});
		},
		// 查询今日农户实时交易
		searchPriceFn() {
			todayPerCh().then((res) => {
				const { status, data } = res;
				if (status == 0) {
					let dataP = [];
					data.items.forEach((item, index) => {
						let children = [];
						Object.keys(item).forEach((key) => {
							if (key == "name") {
								children[0] = item[key];
							} else if (key == "specification") {
								children[1] = item[key];
							} else if (key == "weight") {
								children[2] = item[key];
							} else {
								children[3] = item[key].toFixed(1);
							}
						});
						dataP.push(children);
					});
					this.config = {
						header: ["农户", "规格", "重量", "金额"],
						waitTime: 2000, // 轮播时间间隔(ms)
						align: ["center"],
						oddRowBGC: "rgba(16, 71, 142, 0.7)",
						evenRowBGC: "rgba(0, 13, 45, 0.3)",
						data: dataP,
						rowNum: 6, // 表行数
					};
				}
			});
		},
		// 查询昨日农户实时交易
		searchYesChFn() {
			yesPreCh().then((res) => {
				const { status, data } = res;
				if (status == 0) {
					let dataP = [];
					console.log(res);
					data.items.forEach((item, index) => {
						let children = [];
						Object.keys(item).forEach((key) => {
							if (key == "name") {
								children[0] = item[key];
							} else if (key == "specification") {
								children[1] = item[key];
							} else if (key == "weight") {
								children[2] = item[key];
							} else {
								children[3] = item[key].toFixed(1);
							}
						});
						dataP.push(children);
					});
					console.log(dataP);
					this.config1 = {
						header: ["农户", "规格", "重量", "金额"],
						waitTime: 2000, // 轮播时间间隔(ms)
						align: ["center"],
						oddRowBGC: "rgba(16, 71, 142, 0.7)",
						evenRowBGC: "rgba(0, 13, 45, 0.3)",
						data: dataP,
						rowNum: 6, // 表行数
					};
				}
			});
		},
	},
	beforeDestroy() {
		if (this.timers) {
			clearInterval(this.timers);
		}
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
};
</script>

<style lang="scss" scoped>
.daping {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background-image: radial-gradient(#006afc 10%, #082347 46%, #091933 88%);
	// color: rgb(207, 74, 22);
}
.main-num {
	margin-top: 10px;
	.title {
		display: flex;
		justify-content: center;
		color: #00b0f0;
		font-size: 1.4rem;
	}
	.bg {
		width: 150px;
		height: 50px;
		background: url("./components/assets/bg.png") no-repeat;
		background-size: 100% 100%;
		margin: 10px;
		.number {
			width: 100%;
			height: 100%;
			color: #fff;
			font-size: 1.5rem;
			font-weight: 550;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}
}
.content {
	width: 100%;
	height: 100vh;
	background: url("../../assets/img/bg.png");
	background-size: 1.04167vw 1.04167vw;
	display: flex;
	flex-direction: column;
}
.header {
	text-align: center;
	font-size: 4rem;
	line-height: 8rem;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: bold;
	color: #ffffff;
	background: url("../../assets/img/header.png");
	background-size: 200% 100%;
	background-position-x: center;
	background-position-y: center;
}
.title-bg {
	background: url("../../assets/img/title2.png");
	background-size: 100% 100%;
}
.sunshou {
	color: #fff;
	flex: 1;
	padding-left: 0.9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sunshou img {
	width: 2.4rem;
	height: 2.7rem;
}
.sunshou > div:nth-of-type(1) {
	font-size: 1.8rem;
	color: rgba(103, 210, 103, 1);
	font-weight: 600;
	line-height: 4rem;
}
.sunshou > div:nth-of-type(2) {
	display: flex;
	justify-content: space-around;
	width: 100%;
}
.mien {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.mien .top,
.mien .bottom {
	display: flex;
}
.mien .bottom {
	flex: 1;
}
.mien .top {
	height: 60vh;
	margin: 20px 15px 15px 15px;
}
.mien .bottom {
	margin: 0px 15px 0px 15px;
}
.bg {
	height: 13px;
	background: url("../../assets/img/heng.png");
	background-size: 100% 100%;
}
.t-center,
.t-left,
.t-right {
	display: flex;
	flex-direction: column;
}
.center-top,
.left-list,
.right-list {
	flex: 1;
}
.fle {
	display: flex;
	flex-direction: column;
}
::v-deep .dv-scroll-board .header {
	background-color: rgba(0, 13, 45, 0.6) !important;
	color: #5aaef3 !important;
	font-size: 1.5rem;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}
::v-deep .row-item {
	color: rgb(241, 148, 8) !important;
	font-size: 18px !important;
}
::v-deep .codebox2 {
	padding: 0 !important;
}
#dom {
	// position: absolute;
	left: 5rem;
	top: 0;
	color: #ffffff;
}
</style>
