<!--可视化公共模板 林业  森林防火-->
<template>
	<div class="visual-con">
		<!--头部-->
		<div class="header">
			<div class="header-left">
				<!-- 时间-->
				<div class="date">
					<div class="day m-r-10">
						<span>{{today}}</span>
						<span>{{weekE}}</span>
					</div>
					<div class="week m-r-10">{{weekC}}</div>
					<div class="line m-r-10"></div>
					<div class="time">{{time}}</div>
				</div>
			</div>
			<!--中间LOGO -->
			<router-link class="title" to="/integrated/index" exact><img
					src="@/assets/images/integrated/bigdata-header-nav-left2.png" />
				<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />态势感知监管平台 森林防火
				</h3><img src="@/assets/images/integrated/bigdata-header-nav-right2.png" />
			</router-link>
			<!--中间导航-->
			<div class="bignav">
				<img src="@/assets/images/integrated/bigdata-header-nav-left2.png" />
				<router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list" exact>
					{{navbar.name}}
				</router-link>
				<img src="@/assets/images/integrated/bigdata-header-nav-right2.png" />
			</div>
			<!-- 右侧5个中心 -->
			<VfastMenu></VfastMenu>
		</div>
		<!--主体-->
		<div class="visual-body">
			<!-- 左侧 -->
			<div class="leftbar">
				<div class="event-l-con">
					<div class="this-content">
						<div class="d-l-con no-padding">
							<div class="icon iconfont sj-icon-wcl"></div>
							<div class="icon-text">
								<h6>500</h6>
								<h5>未处理</h5>
							</div>
							<div class="icon iconfont sj-icon-clz"></div>
							<div class="icon-text">
								<h6>453</h6>
								<h5>处理中</h5>
							</div>

						</div>
					</div>
					<div class="this-content">
						<div class="icon iconfont sj-icon-szly"></div>
						<div class="text-con">
							<h3>双辽<h4>180</h4>
							</h3>
							<div class="text-con-r">
								<div class="icon-text">
									<h5>未处理</h5>
									<h6>100</h6>
								</div>
								<div class="icon-text">
									<h5>处理中</h5>
									<h6>80</h6>
								</div>
							</div>
						</div>
					</div>
					<div class="this-content">
						<div class="icon iconfont sj-icon-szly"></div>
						<div class="text-con">
							<h3>伊通 <h4>72</h4>
							</h3>
							<div class="text-con-r">
								<div class="icon-text">
									<h5>未处理</h5>
									<h6>40</h6>
								</div>
								<div class="icon-text">
									<h5>处理中</h5>
									<h6>32</h6>
								</div>
							</div>
						</div>
					</div>
					<div class="this-content">
						<div class="icon iconfont sj-icon-szly"></div>
						<div class="text-con">
							<h3>梨树<h4>130</h4>
							</h3>
							<div class="text-con-r">
								<div class="icon-text">
									<h5>未处理</h5>
									<h6>70</h6>
								</div>
								<div class="icon-text">
									<h5>处理中</h5>
									<h6>60</h6>
								</div>
							</div>
						</div>
					</div>
					<div class="this-content">
						<div class="icon iconfont sj-icon-szly"></div>
						<div class="text-con">
							<h3>铁东<h4>130</h4>
							</h3>
							<div class="text-con-r">
								<div class="icon-text">
									<h5>未处理</h5>
									<h6>70</h6>
								</div>
								<div class="icon-text">
									<h5>处理中</h5>
									<h6>60</h6>
								</div>
							</div>
						</div>
					</div>
					<div class="this-content">
						<div class="icon iconfont sj-icon-szly"></div>
						<div class="text-con">
							<h3>铁西<h4>130</h4>
							</h3>
							<div class="text-con-r">
								<div class="icon-text">
									<h5>未处理</h5>
									<h6>70</h6>
								</div>
								<div class="icon-text">
									<h5>处理中</h5>
									<h6>60</h6>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 地图 -->
			<button @click="showEventInfo"
				style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮</button>
			<supermap></supermap>
		</div>
		<!--事件弹层-->
		<div class="event-info">
			<el-dialog title="事件信息" :visible.sync="eventInfoVisible" width="80%">
				<el-tabs v-model="activeName">
					<el-tab-pane label="基础信息" name="info">
						<div class="event-info-con">
							<div class="e-left">
								<div class="forthis">
									<div class="i-list-con h-35">
										<span v-for="(information,index) in information" :key="index">
											<div class="d-l-con" @click="">
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{information.name}}：</h4>
													<h4>{{information.content}}</h4>
												</div>
											</div>
										</span>
									</div>
								</div>
								<div class="forthis d-map h-30">
									<supermap></supermap>
								</div>
							</div>
							<div class="e-center">
								<div class="forthis">
									<div class="this-title">
										<span>涉事单位</span>
									</div>
									<div class="i-list-con h-24">
										<span v-for="(company,index) in company" :key="index">
											<div class="d-l-con" @click="">
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{company.name}}</h4>
												</div>
												<div class="d-l-l-count"
													:class="[company.state==0?'state-wcl':'state-wyc']">
													{{['未处理','无异常'][company.state]}}
												</div>
											</div>
										</span>
									</div>
								</div>
								<el-image :src="url" :preview-src-list="srcList" class="img-company">
								</el-image>
								<el-image :src="url" :preview-src-list="srcList" class="img-company">
								</el-image>

							</div>
							<div class="e-right">
								<div class="forthis h-67">
									<div class="this-title">
										<span>处理过程</span>
									</div>
									<div class="i-list-con">
										<div class="this-con">
											<div class="z-begin">党校监控点位 2022-02-12 14:39 上报火情
											</div>
											<div class="z-info-list">

												<el-image :src="require('@/assets/images/visual/user-img.png')"
													style="width: 3rem; height: 3rem;margin:2px;">
												</el-image>

												<div class="z-info-list-con">
													<div class="user-and-time">
														<span>中心管理员</span><span> 2022-02-12 14:39</span>
													</div>
													<div class="z-info">
														<div class="this-con-list-info">
															请处理单位及时处理
														</div>
														<div>
															<el-image :src="url" :preview-src-list="srcList"
																style="width:7rem; height:5rem;margin: 2px;"
																v-for="(item,index) in 4">
															</el-image>
														</div>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="e-btm-btn">
							<el-form>
								<el-form-item>
									<el-radio v-model="radio" label="1">无异常</el-radio>
									<el-radio v-model="radio" label="2">确认火情</el-radio>
									<el-button type="success" @click="">确定</el-button>
								</el-form-item>

							</el-form>
						</div>
					</el-tab-pane>
					<el-tab-pane label="联动点位" name="point">暂无信息</el-tab-pane>
				</el-tabs>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	let aDate = new Date();
	let month = aDate.getMonth() < 9 ? "0" + (aDate.getMonth() + 1) : aDate.getMonth() + 1;
	let date = aDate.getDate() <= 9 ? "0" + aDate.getDate() : aDate.getDate();
	let day = aDate.getDay();
	let weekCh = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
	let weekEn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
		"Saturday");

	import VfastMenu from '../v-fastmenu.vue' //头部右侧菜单

	import chartForest from './forest-chart.vue' //左侧图表

	import supermap from './forest-map.vue' //左侧图表


	export default {
		components: {
			VfastMenu,
			chartForest,
			supermap

		},
		data() {
			return {
				eventInfoVisible: false,
				activeName: 'info',
				radio: '1',
				navbar: [{
						name: '林业云图',
						path: '/integrated/forest',
					},
					{
						name: '监控系统',
						path: '/integrated/monitor',
					},
					{
						name: '森林防火',
						path: '/integrated/fire-forest',
					},
					{
						name: '动物保护',
						path: '/',
					},
					{
						name: '病虫灾害',
						path: '/',
					},

				],
				forestFarm: [{
						name: '双辽市',
						id: '',
						child: [{
								name: '叶赫林场',
								id: ''
							},
							{
								name: '石岭子林场',
								id: ''
							}
						]

					},
					{
						name: '梨树县',
						id: ''
					},
					{
						name: '伊通县',
						id: ''
					},
					{
						name: '铁东区',
						id: ''
					},
					{
						name: '铁西区',
						id: ''
					},
				],

				//弹出层 基本信息
				information: [{
						name: '标题',
						id: '',
						content: '某某某某某发现疑似火情'

					},
					{
						name: '时间',
						id: '',
						content: '2022-02-14 14:30'
					},
					{
						name: '来源',
						id: '',
						content: '摄像头'
					},
					{
						name: '坐标',
						id: '',
						content: '125.78945646'
					},
					{
						name: '纬度',
						id: '',
						content: '43.987424'
					},
					{
						name: '上报人',
						id: '',
						content: '党校监控点位'
					},
					{
						name: '详细信息',
						id: '',
						content: '这里发生火灾，需要立刻支援'
					},
				],
				//弹出层 基本信息 涉事单位
				company: [{
						name: '沈洋镇',
						id: '',
						state: 0

					},
					{
						name: '小宽镇',
						id: '',
						state: 1
					},
					{
						name: '四棵树',
						id: '',
						state: 1

					},

				],
				url: require('@/assets/images/visual/img-sample.png'),
				srcList: [
					require('@/assets/images/visual/img-sample.png'),
					require('@/assets/images/visual/img-sample2.png'),
				],

				// 右上时钟
				today: aDate.getFullYear() + "." + month + "." + date,
				weekE: weekEn[day].toUpperCase(),
				weekC: weekCh[day],
				time: aDate.toTimeString().substring(0, 8),
				interval: '',
				websocketURL: '',
				yjCount: 0,



			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				// 右上时钟
				this.interval = setInterval(() => {
					let aDate = new Date();
					let month = aDate.getMonth() < 9 ? "0" + (aDate.getMonth() + 1) : aDate.getMonth() + 1;
					let date = aDate.getDate() <= 9 ? "0" + aDate.getDate() : aDate.getDate();
					let day = aDate.getDay();
					let weekCh = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
					let weekEn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
						"Saturday");
					this.today = aDate.getFullYear() + "." + month + "." + date;
					this.weekC = weekCh[day];
					this.weekE = weekEn[day].toUpperCase();
					this.time = aDate.toTimeString().substring(0, 8);
					// console.log(this.today, this.weekC, this.weekE ,this.time);

				}, 1000)
			},
			//弹层方法
			showEventInfo() {
				this.eventInfoVisible = true
			}
		},
		beforeDestroy() {
			// 右上时钟
			clearInterval(this.interval);
		},
	}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';


	.header {
		width: 100%;
		background: #a7ec12;
		background: url(../../../../assets/images/visual/v-header.png) repeat-x;
		height: 2.5rem;
		display: flex;
		align-items: center;
		z-index: 1000;
		position: absolute;
		top: 0;

		.title {
			display: flex;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);

			h3 {
				display: flex;
				align-items: center;
				text-align: center;
				color: $white;
				font-size: 1.8rem;
				font-family: $fontFk;
				background: url(../../../../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;

				img {
					margin-right: .5rem;
				}
			}
		}

		.bignav {
			height: 40px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 2.4rem;
			z-index: 1000;
			border-radius: 5px;
			display: flex;
			justify-content: cetner;
			align-items: center;

			.bignav-list {
				background: url(../../../../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
				float: left;
				display: flex;
				justify-content: cetner;
				align-items: center;
				color: $white;
				height: 40px;
				font-size: 12px;
				padding: 0 23px;
				cursor: pointer;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				transition: all 0.3s ease-in-out;
			}

			.router-link-active,
			.bignav-list:hover {
				filter: brightness(2.3);
				-webkit-transform: translateY(-1px);
				transform: translateY(-1px);
				color: $inBlueHover;
				border-bottom: 1px solid $inBlueHover;
				transition: all 0.3s ease-in-out;

			}
		}

		.header-left {
			height: 5vh;
			position: absolute;
			left: 10px;
			display: flex;
			font-size: 1rem;
			align-items: center;
			color: $inBlue;

			.date {
				flex: 1;
				display: flex;
				align-items: center;

				.day {
					display: flex;
					flex-direction: column;
					font-size: 14px;
				}

				.day span:nth-child(2) {
					font-size: 10px;
					text-align: right;
				}

				.week {
					font-size: 13px;
					writing-mode: tb-rl;

				}

				.time {
					font-size: 2rem;

				}

				.line {
					width: 1px;
					height: 1.5rem;
					background: $inBlue;
					margin: 0 .4rem;
				}
			}

		}
	}
</style>
