index.vue

<template>
	<div class="Screen cm-layout">
		<div class="a_0">
			<div id="cesiumContainer" class="cesium-ctn"></div>
			<div class="a0_">
				<header>
					<div class="b1_bg">
						<h2>宫家北饰面花岗岩矿山综合管理平台</h2>
					</div>
					<div class="a0a_" id="a0a_">
						<ul>
							<li data-id="0" :class="{'active':navActive === 0}"></li>
							<!-- <li data-id="1" :class="{'active':navActive === 1}"></li>
							<li data-id="2" :class="{'active':navActive === 2}"></li> -->
							<li data-id="4" :class="{'active':navActive === 4}"></li>
						</ul>
						<ul>
							<li data-id="3" :class="{'active':navActive === 3}"></li>
							<li data-link="goback"></li>
							<!-- <li><font class="date">02-24 12:56</font></li> -->
						</ul>
					</div>
				</header>
			</div>
		</div>
		<div class="b_0">
			<section class="b0_" id="b0_">
				<div class="b0_a" :class="{'active':navActive === 0}" id="b0_a" data-id="0" >
					<div class="side b0_left">
						<div class="a-md5" id="amd5">
							<div class="abs-full">
								<h4>设备实时状态总览</h4>
								<div class="ct-box">
									<div class="wrap shadow1">
										<ul>
											<li v-for="item in view0.realTime">
												<div class="chart" :data-num="item.count/(item.count+item.online)*100"></div>
												<dl>
													<dt>{{item.name}}</dt>
													<dd>
														<span>在线:</span>
														<font>{{item.online}}</font>
													</dd>
													<dd>
														<span>离线:</span>
														<font>{{item.count-item.online}}</font>
													</dd>
												</dl>
											</li>
										
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="a-md1">
							<div class="abs-full">
								<h4>产量总览(m³)</h4>
								<div class="ct-box">
									<div class="wrap">
										<div class="col" v-for="item in view0.production">
											<span>{{item.name}}</span>
											<font>{{item.num}}</font>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="alarm-view" id="alarm">
						<div class="fixd">
							<span class="lable">报警信息：</span>
							<div class="scroll-msg photo-frame">
								<div class="in-box" id="scrollMsg">
									<ul>
										<li v-for="item in view0.alarmList">
											<h5><i ></i>{{item.name}}</h5>
											<span>{{view0.Dict.alarmmodule[item.alarmmodule][item.type]}}</span>
											<font>{{item.time}}</font>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div> -->
					<div class="side b0_right">
						<div class="a-md2" id="amd2">
							<div class="abs-full">
								<h4>人员在线统计(周模拟数据)</h4>
								<div class="ct-box">
									<div class="wrap shadow1">
									</div>
								</div>
							</div>
						</div>
						<div class="a-md3" id="amd3">
							<div class="abs-full">
								<h4>环境监测实时数据</h4>
								<div class="item_2 shadow1">当前降雨量：<font class="num_blue1">{{view0.envir.rgdata}}</font> mm</div>
								<div class="ct-box shadow1">
									<!-- <div class="info">
										<span class="el-icon-location" style="cursor:pointer;">{{view0.envir.name}}</span>
										<font class="num_blue1">{{view0.envir.time}}</font>
									</div> -->
									<div class="ctn">
										<ul>
											<li>
												<div>
													<span>{{view0.envir.data.statusDev}}</span>
													<font></font>
												</div>
												<p>连接状态</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.ws}}</span>
													<font>s</font>
												</div>
												<p>风速</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.ta}}</span>
													<font>°C</font>
												</div>
												<p>温度</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.pa}}</span>
													<font>kpa</font>
												</div>
												<p>大气压</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.pm25}}</span>
													<font>ug/m3</font>
												</div>
												<p>PM2.5</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.noises}}</span>
													<font>db</font>
												</div>
												<p>噪音</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.pm10}}</span>
													<font>ug/m3</font>
												</div>
												<p>PM10</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.ua}}</span>
													<font>%</font>
												</div>
												<p>湿度</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.wd}}</span>
													<font>风</font>
												</div>
												<p>风向</p>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="b0_d" :class="{'active':navActive === 3}" id="b0_d" data-id="3">
					<div class="side b0_left">
						<div class="a-md20" id="amd20">
							<div class="abs-full">
								<h4>降雨量变化趋势图(日)</h4>
								<div class="ct-box shadow1">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
						<div class="a-md21" id="amd21">
							<div class="abs-full">
								<h4>表面位移变化量(周)</h4>
								<div class="item_2 shadow1">
									<span class="md-name el-icon-caret-bottom">表面位移1</span>
								</div>
								<div class="ct-box shadow1">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="side b0_right">
						<!-- <div class="a-md4 a-md22" id="amd22">
							<div class="abs-full">
								<h4>在线监测报警实时列表</h4>
								<div class="ct-box shadow1">
									<ul>
										<li>
											<span>{{view3.alarmString.alarmtotal}}</span>
											<font>报警总数</font>
										</li>
										<li>
											<span>{{view3.alarmString.jcalarmtotal}}</span>
											<font>已处理</font>
										</li>
										<li>
											<span>{{view3.alarmString.wjcalarmtotal}}</span>
											<font>未处理</font>
										</li>
									</ul>
									<div>
										<dl class="scrolling4">
											<dt>
												<span>报警设备</span>
												<span>设备类型</span>
												<span>报警时间</span>
												<span>状态</span>
											</dt>
											<dd v-for="item in view3.alassData">
												<span>{{item.name}}</span>
												<span>{{view3.alarm[item.type]}}</span>
												<span>{{item.time}}</span>
												<span v-if="item.state=== 1" class="red">报警中</span>
												<span v-if="item.state=== 2" class="blue">已解除</span>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div> -->
						<div class="a-md3 a-md23" id="amd23">
							<div class="abs-full">
								<h4>环境监测实时数据</h4>
								<div class="item_2 shadow1">当前降雨量：<font class="num_blue1">{{view0.envir.rgdata}}</font> mm</div>
								<div class="ct-box shadow1">
									<!-- <div class="info">
										<span class="el-icon-location" style="cursor:pointer;">{{view0.envir.name}}</span>
										<font class="num_blue1">{{view0.envir.time}}</font>
									</div> -->
									<div class="ctn">
										<ul>
											<li>
												<div>
													<span>{{view0.envir.data.statusDev}}</span>
													<font></font>
												</div>
												<p>连接状态</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.ws}}</span>
													<font>s</font>
												</div>
												<p>风速</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.ta}}</span>
													<font>°C</font>
												</div>
												<p>温度</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.pa}}</span>
													<font>kpa</font>
												</div>
												<p>大气压</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.pm25}}</span>
													<font>ug/m3</font>
												</div>
												<p>PM2.5</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.noises}}</span>
													<font>db</font>
												</div>
												<p>噪音</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.pm10}}</span>
													<font>ug/m3</font>
												</div>
												<p>PM10</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.ua}}</span>
													<font>%</font>
												</div>
												<p>湿度</p>
											</li>
											<li>
												<div>
													<span>{{view0.envir.data.wd}}</span>
													<font>风</font>
												</div>
												<p>风向</p>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="a-md24" id="amd24">
							<div class="abs-full">
								<h4>环境监测趋势图(日)</h4>
								<div class="item_2 shadow1">
									<select>
									</select>
								</div>
								<div class="ct-box shadow1">
									<div class="wrap">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="b0_e" :class="{'active':navActive === 4}" id="b0_e" data-id="4">
					<div class="side b0_left"></div>
					<!-- <div class="side-footer">
						<div class="area-ctrl">
							<dl>
								<dt>
									<span>区域划分</span>
									<span class="switch"></span>
								</dt>
							</dl>
						</div>
					</div> -->
					<div class="side b0_right">
						<div class="a-md10 a-md40" id="amd40">
							<div class="abs-full">
								<div class="ct-box shadow1">
									<div class="wrap">
										<dl class="scrolling4">
											<dt>
												<span>文件名</span>
												<span>预览</span>
											</dt>
											<dd v-for="item in view4.modelList" :data-name="item.filePath">
												<span>{{item.name}}</span>
												<span><a class="el-icon-view"></a></span>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
import { Tools } from '@/assets/js/common.js';
import { reqApi } from '@/assets/js/httpApi.js';
import { Highchart } from '@/assets/js/chartTemplates.js';
import { CoordTransform } from '@/assets/js/CoordTransform.js';
import { getToken, setToken, removeToken } from '@/utils/auth';
import { encrypt } from '@/utils/rsaEncrypt';
import { openAlarm, closeAlarm } from '@/api/alarmEquCtrl.js';

export default {
	data() {
		return {
			navActive:null,
			view0:{
				//产量总览
				production:[],

				//报警总览
				alarmOver:{},
				alarmList:[],
				// 环境监测
				envir:{
					data:{
					},
				},
				//设备实时状态总览
				realTime:[],
				Dict:{
					// 全局报警字典
					alarmmodule:{
						1:{
							1:'电子围栏',
							2:'求救报警',
							3:'电池欠压',
						},
						2:{
							1:'限入电子围栏报警',
							2:'限出电子围栏报警',
							3:'无故停车报警',
							4:'防碰撞预警',
						},
						3:{
							3:'表面位移',
							6:'降雨量',
						},
					},
				}
			},
			view3:{
				videoList:[],
				alarmString:{},
				alassData:[],
				alarm:{
					3:'表面位移',
					6:'降雨量',
				},
				envir:{
					data:{},
				},
				envirTypes: [
					{name:'风速', value:'ws'},
					{name:'温度', value:'ta'},
					{name:'大气压', value:'pa'},
					{name:'PM2.5', value:'pm25'},
					{name:'TSP', value:'tsp'},
					{name:'PM10', value:'pm10'},
					{name:'湿度', value:'ua'},
					{name:'风向', value:'wd'},
				],
				envirTypeDict:{
					'ws':'s',
					'ta':'°C',
					'pa':'kpa',
					'pm25':'ug/m3',
					'tsp':'ug/m3',
					'pm10':'ug/m3',
					'ua':'%',
					'wd':'风',
				},
			},
			view4:{			// 采矿管理
				modelList:[],
				areaEvent:0,
			},
			title:'',
			finishNum:706,
			monitorNum:40,
			areaSwitchFalg:false,
			personnelList:[
				{
					longitude: 121.70710830038986,
					latitude: 36.853636402927986,
					height: 100,
					name: "张三",
					status: "online", // 在线
					avatar: "/static/images/avatars/zhangsan.png", // 头像
				},
				{
					longitude: 121.70810830038986,
					latitude: 36.854636402927986,
					height: 100,
					name: "李四",
					status: "offline", // 离线
					avatar: "/static/images/avatars/lisi.png", // 头像
				},
				// 其他人员数据...
			]
		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			var views = that.$el.querySelectorAll("#b0_>div");
			var a0a_ = that.$el.querySelector("#a0a_");


			// var handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
			// handler.setInputAction(function(movement) {
			// 	var pickedObject = that.viewer.scene.pick(movement.endPosition);
			// 	if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.description) {
			// 		// 显示人员信息
			// 		var description = pickedObject.id.description;
			// 		that.showPersonInfo(description);
			// 	}
			// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


			// header 事件控制
			qf.funchain(function(start, t, f){
				var m = this;
				t.models = {}, m.setTagModel = function(id, prevId){
					m.prevModel = t.models[prevId]; m.prevModel && m.prevModel.unload && m.prevModel.unload();
					m.tagModel = t.models[id];m.tagModel.reload && m.tagModel.reload();
				};

				// LOCAL_API
				t.LOCAL_API = process.env.VUE_APP_LOCAL_API;

				m.login = function(param){
					return reqApi.common.requst('post', t.LOCAL_API + '/auth/login', param);
				};

				m.setToken = function(key){
					var tokenExpires = new Date(new Date()*1 + 43200000);		// 12小时
					//that.$route.query.key && setToken(that.$route.query.key, true, tokenExpires);
					key && setToken(key, true, tokenExpires);
				};
				m.init = function(){
					that.navActive = 0;
					//that.createCesium();
					/* m.first(); */ f(that.navActive), setTimeout(() => {m.tagModel = t.models[0];},500);
					
					// Event
					a0a_.onclick = function(e){
						var tag = e.target || e.srcElement;
						if(tag.dataset.id){
							var id = ~~tag.dataset.id;
							if(id === that.navActive){
								if(id === 4){
									that.navActive = void 0;
									t.models[id].unload()
								}else{
									views[id] && views[id].classList.add('close');
									setTimeout(() => {that.navActive = void 0;}, 350);
								};
							}else{
								var prevId = that.navActive;
								that.navActive = id;
								t.models[id] ? m.setTagModel(id, prevId) : setTimeout(() => {start(id);m.setTagModel(id, prevId);}, 300);
							};
						}else if(tag.dataset.link){
							var sysurl = 'http://' + location.hostname + ':' + process.env.VUE_APP_SYS_PORT;
							window.location.href = sysurl;
						};
					};
					
					// 计时刷新
					var timerA = new qf.Async.intervalLoop(60000, function(){
						(m.tagModel && m.tagModel.timerUpdate || function(){})()
					}, function(){
						(m.tagModel && m.tagModel.timerUpdate || function(){})()
					});

					// resize
					qf.resize(function(){
						setTimeout(() => {
							(m.tagModel && m.tagModel.resize || function(){})()
						}, 380);
					});

					// map Evnet
					var mEvent = fg3d.Event.leftClick(function(e){
						var pick = that.viewer.scene.pick(e.position);
						if(pick && pick.id){
							m.tagModel.mapClick && m.tagModel.mapClick(pick)
						};
					});
				};

				// 登录权限获取
				(t.getInfo = function(){
					var url = t.LOCAL_API + '/auth/info';
					return reqApi.common.requst.call(that.$route, 'get', url).then((res)=>{
						that.createCesium();
						if(!res.error && res.user){
							m.init();
						}else{
							m.loginView = qf.UI.popWindow({
								cover:true,
								coverFull: true,
								//container:b0_e,		// id || Element对象
								backgroundColor:'rgba(0,0,0,.4);backdrop-filter:blur(15px);',
								closeEvent:true,
								html:'<div style="height:100%;width:100%;background-color:rgba(0,0,0, .75);border-radius:.3rem;display:flex;justify-content:center;align-items:center;box-shadow: 0 0 0.10rem 0.06rem rgba(16, 88, 148, .8);"></div>',
								onload: function(v){
									m.loginView = v;
									var el = v.el;
									v.setStyle(v.Wrap, {height:'6rem', width:'6rem', zIndex:10});
									el.innerHTML = '<div class="ctn-place" ><div class="inbox-range"><div class="ctn-fix"><form class="el-form login-form el-form--label-left"><h3 class="title">乳山瑞博</h3><h3 class="title t-last">智慧矿山管理平台</h3><div class="el-form-item is-required el-form-item--small"><div class="el-form-item__content" style="margin-left: 0px;"><div class="el-input el-input--small el-input--prefix"><input type="text" autocomplete="off" placeholder="账号" class="el-input__inner"><span class="el-input__prefix el-icon-s-custom"></span></div><div class="el-form-item__error">用户名不能为空</div></div></div> <div class="el-form-item is-required el-form-item--small"><div class="el-form-item__content" style="margin-left: 0px;"><div class="el-input el-input--small el-input--prefix"><input type="password" autocomplete="off" placeholder="密码" class="el-input__inner"><span class="el-input__prefix el-icon-key"></span></div><div class="el-form-item__error">密码不能为空</div></div></div> <div class="el-form-item el-form-item--small" style="width: 100%;"><div class="el-form-item__content" style="margin-left: 0px;"><button type="button" class="el-button el-button--primary el-button--medium" style="width: 100%;">登 录</button></div></div></form></div></div></div>';
									
									// 校验
									m.loginView.check = function(el){
										if(qf.trim(el.value)){
											el.parentNode.nextElementSibling.classList.remove('open');
											return 1;
										}else{
											el.parentNode.nextElementSibling.classList.add('open');
											el.focus()
										};
									};

									m.loginView.inputs = el.querySelectorAll("input");
									for(var el of m.loginView.inputs){
										el.onblur = function(e){
											var tag = e.target || e.srcElement;
											m.loginView.check(tag);
										}
									};

									m.loginView.loginCheck = function(){
										var inputs = m.loginView.inputs;
										var username = inputs[0], password = inputs[1];
										if(m.loginView.check(username) && m.loginView.check(password)){
											var param = {
												username: username.value, password: encrypt(password.value)
											};
											var l1 = qf.UI.loading({zIndex:2051, timer:10000});
											m.login(param).then((res)=>{
												l1.close();
												if(res.token && res.user){
													m.init();
													m.setToken(res.token);
													m.loginView.remove();
												}else{
													new qf.UI.Notify({
														zIndex:2050,
														type: 'warning',
														duration: 3000,
														autoOpen:true,
														message: res.message,
													});
												};
											});
										};
									};

									// 回车事件
									m.loginView.keyup = function(e){
										if(e.keyCode === 13){
											m.loginView.loginCheck();
										};
									};
									window.addEventListener('keyup', m.loginView.keyup);
								},
								click: function(tag){
									if(tag.nodeName === 'BUTTON'){
										m.loginView.loginCheck();
									};
								},
								close: function(e){
									window.removeEventListener('keyup', m.loginView.keyup);
									delete m.loginView
								},
							});
						};
					});
				})();
			}, (function(){
				var arr = [], panels = [];
				for(var view of views){
					var id = ~~view.dataset.id;
					panels[id] = view;
					var f = function(t, f, i){
						f('init').models[i] = that['module'+i](this, t, f, i, panels[i]);
					}; id ? arr[id] = f : arr.push(f);
				}; return arr
			})());

			// 禁右键
			document.addEventListener('contextmenu', function(e){
				if(e.button == 2){
					e.preventDefault();
					return false
				}
			});
		});

	},
	methods: {
		showPersonInfo(description) {
			// 使用 Cesium 的 InfoBox 显示信息
			this.viewer.selectedEntity = this.viewer.entities.add({
				description: description,
			});
			this.viewer.infoBox.frame.sandbox = "allow-same-origin allow-top-navigation allow-pointer-lock allow-popups allow-forms allow-scripts";
			this.viewer.infoBox.frame.src = "about:blank";
			this.viewer.infoBox.frame.contentDocument.write(description);
			this.viewer.infoBox.frame.contentDocument.close();
			this.viewer.infoBox.viewModel.showInfo = true;
		},
		module0(m, t, f, dmIndex, view){		// 数据总览
			// console.log(m,t,f,dmIndex,'数据总览')
			var self = this, Catch = {}, viewData = self['view'+dmIndex];
			var mediaUrlHost = process.env.VUE_APP_liveQing;

			// amd2
			var wrap2 = this.$el.querySelector("#amd2 .wrap");
			var amd3 = self.$el.querySelector("#amd3");
			
			var modelAlarmOptons = [
				{
					/* fillColor: Cesium.Color.BLACK,
					backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
					WaveColor: Cesium.Color.fromCssColorString('#09FD77'), */
					fillColor: Cesium.Color.WHITE,
					backgroundColor: new Cesium.Color(0.0, 0.486, 0.650, .8),
					WaveColor: Cesium.Color.fromCssColorString('#09FD77'),
				},
				{
					fillColor: Cesium.Color.WHITE,
					backgroundColor: Cesium.Color.RED,
					WaveColor: Cesium.Color.fromCssColorString('#ff0000'),
				}
			];

			return (function(){
				// 主模块视角
				t.loadViewVisual = function(){
					// 删除数据
					self.Entities.removeAll();
					
					// 创建模型
					m.createModel();
					m.createPersonModel();
				};

				m.initDeviceVisual = function(){
					// m.openVisual();

					setTimeout(() => {
						m.createModel();
						m.createPersonModel();
					}, 1500);
				};

				// 视角
				// m.openVisual = function(){
				// 	fg3d.Assist.flyToLnglat({
				// 		longitude:'121.70710830038986',
				// 		latitude:'36.853636402927986',
				// 		height:'1000',
				// 		heading:'0',
				// 		pitch:Cesium.Math.toRadians(-45),
				// 		// roll:'6.283179332387251',
				// 		duration: 1.5,
				// 	});
				// };

				// 创建模型
				m.createModel = function(){
					// 边坡设备列表
					m.equipdataList().then(function(list){

						//m.clearpreUpdateCallback();
						m.bgEntities = m.bgEntities || {};
						for(var item of list){
							var lng = item.longitude * 1;
							var lat = item.latitude * 1;
							var height = item.height * 1;
							var point = item.point, position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
							var url = item.url;
							var pixelOffsetX = item.pixelOffsetX || 0;
							var eyeOffsetX = item.eyeOffsetX || 3;

							if(item.devicetype === "3"){
								url = "/static/glb/logo_gnss.glb";
								item.orientation = -4.3;
							}else if(item.devicetype === "6"){
								url = "/static/glb/logo_yuliangji.glb";
								item.orientation = -5.0;
							};

							var modelColor = modelAlarmOptons[item.isAlarm];
							var entity = self.viewer.entities.add({
								position: position,
								orientation: Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(item.orientation, 0, 0.0)),
								'model': {
									'uri': url,
									'scale': 1.01,
									'shadows':'ENABLED',
									'color':Cesium.Color.WHEAT,
									//'colorBlendMode':'HIGHLIGHT',
									//'colorBlendAmount':0.1,
									//'lightColor':Cesium.Color.RED,
								},
								viewFrom: new Cesium.Cartesian3(50.0, -50.0, 50.0),
								//字体标签样式
								label: {
									text: item.equipname,
									font: 'normal 28px sans-serif' || 'normal 28px MicroSoft YaHei',
									scale:0.5,
									color: Cesium.Color.WHITE,
									//style: Cesium.LabelStyle.FILL_AND_OUTLINE,		// 字体边框
									showBackground: true,
									heightReference: 0,
									horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
									verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
									distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 8000.0),
									disableDepthTestDistance: 2500.0,
									// 按像素偏移	(左右、上下)
									pixelOffset: new Cesium.Cartesian2(pixelOffsetX, 0),
									// 按视觉偏移, 距离越近越接近偏移值 (左右、上下)
									eyeOffset : new Cesium.Cartesian2(0, 5.5),
									fillColor: modelColor.fillColor,
									backgroundColor: modelColor.backgroundColor,
									//backgroundPadding: new Cesium.Cartesian2(15, 10),
									//pixelOffsetScaleByDistance:new Cesium.NearFarScalar (10, 10, 100),
								},
							});
							entity.info = item;
							m.bgEntities[item.equipno] = entity;

							// 监测效果
							entity.Wave = new fg3d.Materials.Circles.RadarRipple({
								position:position,
								semiMajorAxis: 20.0,
								semiMinorAxis: 20.0,
								color: new Cesium.Color(0.8, 0.0, 0.8, 0.8),
								duration: 10.0,
								glConfig:{
									trailing: '1.8',			// 拖尾
									density: '360.0',			// 波纹密度
									rippleWidth:'0.6',			// 波纹宽度
								},
							});

							/* canvase 弹出层
							var position2 = Cesium.Cartesian3.fromDegrees(lng, lat, height+6);
							m['Billboard' + item.equipno] = new fg3d.Plugins.Billboard(position2, {
								src:'/static/images/frame1-min.png',
								scale:0.8,
								width:425,
								height:266,
								fontSize:50,
								fontX:10,
								fontY:50,
								text:item.equipname,
							}); */
						};
						
						// 启用动画
						m.enableAlarmEffect();
					});
				};

				// 启用动画
				m.enableAlarmEffect = function(){
					m.clearpreUpdateCallback = self.viewer.scene.preUpdate.addEventListener(function(){
						for(var key in m.bgEntities){
							var entity = m.bgEntities[key];
							var isAlarm = entity.info.isAlarm, label = entity.label;
							if(isAlarm){
								var _value = label.backgroundColor._value;
								label.range = (label.range || 9000) % 18000;
								var moment = 9000-Math.abs(9000 - (label.range+=200));
								var level = moment / 10000;
								_value.alpha = 0.1 + level;
							}
						};
					});
				};

				// 更新模型监测数据
				m.updateModelData = function(){
					m.equipdataList().then(function(list){
						for(var item of list){
							var entity = m.bgEntities[item.equipno];
							entity && (entity.info = item);
							var modelColor = modelAlarmOptons[item.isAlarm];
	
							entity.label.fillColor.setValue(modelColor.fillColor);
							entity.label.backgroundColor.setValue(modelColor.backgroundColor);
							//entity.Wave.Entity.color.setValue(modelColor.WaveColor);

							if(entity.infoWindow){
								m.updateWindowContent(entity.md, entity.info);
							};
						};
					});
				};

				// 边坡设备列表
				m.equipdataList = function(){
					return reqApi.common.requstEdge('get', '/tab/Monitoring/equipdata', {}).then((res)=>{
						var list = res.body || [];
						return list;
					});
				};

				// 边坡设备信息
				m.bprealdata = function(devicetype, equipno){
					return reqApi.common.requstEdge('get', '/tab/Monitoring/bprealdata', {devicetype:devicetype, equipno:equipno}).then((res)=>{
						return res.body || []
					});
				};
				// 批次号管理（每次定时器触发时生成一个新的批次号）
				let currentBatch = 0;
				const batchMap = {};

				// 创建人员定位卡模型
				m.createPersonModel = function() {
						// 保存interval ID以便后续清除
						if (!m.personModelInterval) {
								m.personModelInterval = setInterval(() => {
										currentBatch++; // 每次定时器触发，生成新的批次号

										// console.log(m.bgEntities, '(m.bgEntities)');

										// 清除旧实体（只清除当前批次的实体）
										if (m.bgEntities) {
												for (let key in m.bgEntities) {
														if (m.bgEntities.hasOwnProperty(key)) {
																const entity = m.bgEntities[key];
																// 检查实体是否属于当前批次
																if (entity.batch === currentBatch - 1) {
																		self.viewer.entities.remove(entity);
																		delete m.bgEntities[key];
																}
														}
												}
										}

										m.personCardList().then(function(list) {
												// console.log(list, 'list');
												let perList = list; // 使用全部人员数据

												// 创建新实体
												for (let item of perList) {
														let lng = Number(item.lng);
														let lat = Number(item.lat);
														let height = Number(item.hight);
														let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
														let url = "/static/images/poi-marker-default.png";
														let entity = self.viewer.entities.add({
																		position: position,
																		label: {
																						text: item.perName,
																						font: 'normal 28px sans-serif',
																						scale: 0.5,
																						color: Cesium.Color.WHITE,
																						showBackground: true,
																						horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
																						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
																						distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 8000.0),
																						disableDepthTestDistance: 2500.0,
																						heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
																						pixelOffset: new Cesium.Cartesian2(0, -35),
																						fillColor: Cesium.Color.WHITE,
																						backgroundColor: new Cesium.Color(0.0, 0.486, 0.650, 0.8),
																		},
																		billboard: {
																						image: url,
																						scale: 0.5,
																						heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
																						distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 8000.0),
																						horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
																						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
																		},
																		description: `<div><h4>${item.perName}</h4></div>`,
														});
														entity.info = item;
														entity.batch = currentBatch; // 标记当前批次
														m.bgEntities[item.perName] = entity; // 存储新实体
												}
										});
								}, 10000);
						}
				};
				// 更新人员定位卡模型监测数据
				m.updatePersonModelData = function(){
					m.personCardList().then(function(list){
						for(var item of list){
							// var entity = m.bgEntities[item.equipno];
							// entity && (entity.info = item);
							// var modelColor = modelAlarmOptons[item.isAlarm];
	
							// entity.label.fillColor.setValue(modelColor.fillColor);
							// entity.label.backgroundColor.setValue(modelColor.backgroundColor);
							//entity.Wave.Entity.color.setValue(modelColor.WaveColor);

							if(entity.infoWindow){
								m.updateWindowContent(entity.md, entity.info);
							};
						};
					});
				};
				// 人员定位卡列表
				m.personCardList = function(){
					return reqApi.common.requstEdge('get', '/api/per/screen/real', {}).then((res)=>{
						var listPersonCard = res.body || [];
						return listPersonCard;
					});
				};

				// 添加人员定位卡窗口内容
				m.updatePersonWindowContent = function(md, item){
					// console.log(md, item,'md, item')
					
				};
				// 打开人员定位卡驱动窗口
				t.openPersonWindow = function(entity){
					var info = entity.info;
					// console.log(info,'!!!!!!!!')
					if(info && !entity.infoWindow){
						var position = entity.position._value;

						var popClass = info.isAlarm ? 'popupBgImage BgAlarm' : 'popupBgImage';
						
						// 生成窗口
						var popWindow = m['popWindow' + info.equipno] = qf.UI.popWindow({
							name:'',
							pointer:{
								point:'bottom',
								show:true,
								x:68,
							},
							closeButton:{},
							close: function(){
								entity.infoWindow.remove();
								delete entity.infoWindow;
								delete m['popWindow' + info.equipno];
							},
							container:document.createElement('div'),		// id || Element对象
							html:'<div class="'+popClass+'" style="color:#fff;width:150px;font-size:15px;padding:10px;"></div>',
							onload: function(md){
								// console.log(md,'md')
								var equipno = info.equipno;
								md.type = info.devicetype;
								if(equipno){
									m.updatePersonWindowContent(md, info);

									entity.md = md;
									// 创建窗口
									entity.infoWindow = new fg3d.Plugins.View(position, md.Wrap, {
										render: function(){
											return {
												position:position,
												y:-60,
												x:-75,
											};
										},
									});
								};
							},
						});
					};
				};

				// 环境监测设备列表
				t.envirDeviceList = function(){
					return Catch.envirDevices && new Promise(function(a, b){return a(Catch.envirDevices)}) || reqApi.common.requstEdge('get', '/tab/datascreen/enviequip', {}).then((res)=>{
						return Catch.envirDevices = res.body || {};
					});
				};

				// 环境监测数据
				t.envirData = function(mn){
					Catch.mn = mn || Catch.mn;
					return reqApi.common.requstEdge('get', '/tab/datascreen/envirealdata', {mn:Catch.mn}).then((res)=>{
						var body = res.body || {};
						var envidata = body.envidata;
						viewData.envir.data = envidata;
						viewData.envir.name = envidata.deviceName;
						viewData.envir.time = envidata.time.replace('-', '@').split('@')[1];
						viewData.envir.rgdata = body.rgdata;
					});
				};
				// 环境监测模块
				m.EnvirMonitor = function(){
					t.envirDeviceList().then(function(list){
						var mn = list[0].mn;
						t.envirData(mn);

						// 激活事件
						var local = amd3.querySelector(".el-icon-location");
						local && (local.onclick = function(e){
							var tagEl = e.target || e.srcElement;
							if(!Catch.amd3 || !Catch.amd3.show){
								var checkValue = tagEl.dataset.value || mn;
								var html = qf.UI.checkListRender({
									type:"radio",
									list: list,
									select:[checkValue],
									name:'deviceName',				// name 字段名
									value:'mn',						// value 字段名
								});

								// 创建窗口
								Catch.amd3 = qf.UI.popWindow({
									container:tagEl.parentNode,		// id || Element对象
									pointer:{
										show:true,
										point:'left',
										x:0,
									},
									closeButton:{
										horizontal:'right',
										vertical:'top',
									},
									html:'<div style="color:#fff;height:2rem;width:3.5rem;border:1px solid #3EB7EA;background-color:rgba(0,0,0, .5);padding:.15rem;text-align:left;">sdfsdf</div>',
									onload: function(m){
										var el = m.el;
										m.setStyle(m.Wrap, {top:'0rem', left:'2.80rem', zIndex:10});
										
										// 事件
										el.onclick = function(e){
											var tag = e.target || e.srcElement;
											if(tag.nodeName === 'INPUT'){
												Catch.amd3.remove();
												tagEl.dataset.value = tag.value;
												t.envirData(tag.value);
											};
										};
										el.innerHTML = html;
									},
								});
							};
						});
					});
				};
				
				// 设备实时状态总览
				m.deviceRealtime = function(){
					reqApi.common.requstEdge('get', '/tab/datascreen/devicestatus', {}).then((res)=>{
						var list = res.body || [];
						viewData.realTime = list;
						setTimeout(()=>{
							var md5charts = amd5.querySelectorAll(".chart");
							var colors = [
								{styleColor:'#30d7f7', shadowColor:'#5bc2d1'},
								{styleColor:'#c8d842', shadowColor:'#9d793f'},
								{styleColor:'#fa6b2f', shadowColor:'#b33e34'},
								{styleColor:'#4091ec', shadowColor:'#2f7ca6'},
							];
							var len = list.length;
							for(var i=0; i<len; i++){
								var item = list[i], ratio = (item.online / item.count) * 100;
								new Tools.waveMapChart(md5charts[i], ratio, {textColor:'#fff', styleColor:colors[i].styleColor, shadowColor:colors[i].shadowColor});
							};
						}, 500);
					});
				};

				// 产量总览
				Catch.output = function(){
					reqApi.common.requstEdge('get', '/tab/datascreen/output', {}).then((res)=>{
						var body = res.body || {};
						viewData.production = body;
					});
				};

				// 报警总览
				m.alarmoverview = function(){
					var param = {page:0,size:20};
					return reqApi.common.requstEdge('get', '/tab/datascreen/alarmoverview', param).then((res)=>{
						var body = res.body || {}, list = body.data || [];
						return list;
					});
				};

				// 添加窗口内容
				m.updateWindowContent = function(md, item){
					console.log(md,item)
					// 设置按钮颜色
					if(item.isAlarm){
						md.Wrap.classList.add('alarm');
					}else{
						md.Wrap.classList.remove('alarm');
					};
					if(item.perName){
						var part1 = '<p>姓名：'+item.perName+'</p>'
						var part2 = '<p>性别：'+item.perSex+'</p>';
						var part3 = '<p>工号：'+item.perNumber+'</p>';
						var part4 = '<p>部门：'+item.perDept+'</p>';
						var part5 = '<p>职务：'+item.perOffice+'</p>';
						var part6 = '<p>定位卡ID：'+item.phone+'</p>';
						var part7 = '<p>手机号：'+item.perTel+'</p>';
						md.el.innerHTML = '<div style="margin:5px;">' + part1 + part2 +  part3 +  part4 +  part5 +  part6 + part7 + '</div>';
					}else{
						// 设置数值
						var val1Name = md.type === '6' ? '降雨量' : 'x';
						var part1 = '<p>'+item.equipname+'</p><p>'+val1Name+': '+item.x+'</p>';
						var part2 = item.y ? '<p>y: '+item.y+'</p>' + '<p>z: '+item.z+'</p>' : '';
						md.el.innerHTML = '<div style="margin:5px;">' +part1+ part2 + '</div>';
					}

					
				};
				
				// 打开驱动窗口
				t.openDeviceWindow = function(entity){
					var info = entity.info;
					if(info && !entity.infoWindow&& info.equipname){
						var position = entity.position._value;

						var popClass = info.isAlarm ? 'popupBgImage BgAlarm' : 'popupBgImage';
						
						// 生成窗口
						var popWindow = m['popWindow' + info.equipno] = qf.UI.popWindow({
							name:'',
							pointer:{
								point:'bottom',
								show:true,
								x:68,
							},
							closeButton:{},
							close: function(){
								entity.infoWindow.remove();
								delete entity.infoWindow;
								delete m['popWindow' + info.equipno];
							},
							container:document.createElement('div'),		// id || Element对象
							html:'<div class="'+popClass+'" style="color:#fff;width:150px;font-size:15px;padding:10px;"></div>',
							onload: function(md){
								var equipno = info.equipno;
								md.type = info.devicetype;
								if(equipno){
									m.updateWindowContent(md, info);

									entity.md = md;
									// 创建窗口
									entity.infoWindow = new fg3d.Plugins.View(position, md.Wrap, {
										render: function(){
											return {
												position:position,
												y:-60,
												x:-75,
											};
										},
									});
								};
							},
						});
					}else if(info && !entity.infoWindow&&info.perName){
					
						var position = entity.position._value;
						var popClass = info.isAlarm ? 'popupBgImage BgAlarm' : 'popupBgImage';
						// 生成窗口
						var popWindow = m['popWindow' + info.perName] = qf.UI.popWindow({
							name:'',
							pointer:{
								point:'bottom',
								show:true,
								x:68,
							},
							closeButton:{},
							close: function(){
								entity.infoWindow.remove();
								delete entity.infoWindow;
								delete m['popWindow' + info.perName];
							},
							container:document.createElement('div'),		// id || Element对象
							html:'<div class="'+popClass+'" style="color:#fff;width:150px;font-size:15px;padding:10px;"></div>',
							onload: function(md){
								var perName = info.perName;
								md.perDept = info.perDept;
								if(perName){
									m.updateWindowContent(md, info);

									entity.md = md;
									// 创建窗口
									entity.infoWindow = new fg3d.Plugins.View(position, md.Wrap, {
										render: function(){
											return {
												position:position,
												y:-60,
												x:-75,
											};
										},
									});
								};
							},
						});
					};
				};

				// 人员
				m.percarCount = function(){
					reqApi.common.requstEdge('get', '/tab/datascreen/percarcount', {time:'week'}).then((res)=>{
						var body = res.body || {};
						var colors = [Highchart.getRandomColor(0), Highchart.getRandomColor(2), "#38f1f3"];
						var series = Highchart.formatSeriesList(body.lists, {value:'values.person', categoriesKye:'dateUnit', colors:colors, serie:{name:'人员统计'}});

						var options2 = {
							chartConfig:{
								chart: {
									type: 'column',
									margin: 10,
									options3d: {
										enabled: true,
										alpha: 15,
										beta: 15,
										depth: 50,
										viewDistance: 25
									},
								},
								plotOptions: {
									series: {
										depth: 25,
										colorByPoint: true
									}
								},
								tooltip: {
									pointFormat: '<div>{seriesData.name}</div><b>在线：{point.y}人</b><br/>{point.category}'
								},
								xAxis: {
									// categories: series.categories,
									categories: ['2025-02-15','2025-02-16','2025-02-17','2025-02-18','2025-02-19','2025-02-20','2025-02-21','2025-02-22','2025-02-23','2025-02-24','2025-02-25','2025-02-26','2025-02-27',],
								},
								yAxis: {
									title: {
										text: null
									},
									max: 100,
									// startOnTick: false, // 防止自动调整到刻度开始
									// endOnTick: false   // 防止自动调整到刻度结束
								},
								series: [
									{
										data:[16,16,16,16,16,16,16,16,16,16,16,16,16]
									}
								],
							},
							isSeriesData:true,
							notExtendsOptions:true,
						};
						m.percarCountChart = Highchart.template.high(wrap2, {}, options2);
					});
				};

				// 报警弹窗-可变形
				m.createAlarmView = function(){
                    let that = this;
					var checkHtml = '';

					var list = [{areaCode:1, name:'1111'}];
					for(var item of list){
						checkHtml += '<div><input type="checkbox" data-type="list" value="'+item.areaCode+'"/>'+item.name+'dfgdfg</div>';
					};

					return qf.UI.popWindow({
						name:'morphView1',
						container:self.$el,		// id || Element对象
						className:'morph1',
						html:'<div class="morphView"></div>',
						show:false,
						onload: function(o){
							var el = o.el, wrap = o.Wrap, morphView = wrap.firstElementChild;
							o.setStyle(wrap, {
								bottom:'0.3rem', left:'50%', height:0, width:0, zIndex:1,
								transformOrigin:'0px 0px',
								justifyContent:'center',
							});

							// 数据绑定
							Object.defineProperty(o, 'shrink', {
								set: function(f){
									if(f){
										morphView.classList.add('f-prepare');
										morphView.classList.add('f-shrink');
										morphView.classList.remove('f-anim-revert'); 
									}else{
										morphView.classList.add('f-anim-revert');
										setTimeout(() => {
											morphView.classList.remove('f-shrink'); 
											morphView.classList.remove('f-prepare');
										}, 200);
									};
								}
							});
							
							// <input type="checkbox" value="0" checked />全选</div>
							el.innerHTML = `
                            <div class="content">
                                <div class="fixed">
                                    <dl class="scrolling4"></dl>
                                </div>
                                <i class="el-icon-circle-close"></i>
                            </div>
                            <div class="el-icon-bell"></div>
                           
                            `;

							var content = el.firstElementChild;
							o.scroll = content.firstElementChild.firstElementChild;

                            const optBtnWrapper = document.createElement('div');
                            optBtnWrapper.className = 'optBtnWrapper';

                            const startAlarmBtn = document.createElement('a');
                            startAlarmBtn.className = 'button alarm';
                            startAlarmBtn.id = 'startAlarmBtn';
                            startAlarmBtn.innerHTML = '开始';

                            const stopAlarmBtn = document.createElement('a');
                            stopAlarmBtn.className = 'button stop';
                            stopAlarmBtn.id = 'stopAlarmBtn';
                            stopAlarmBtn.innerHTML = '停止';

                            el.appendChild(optBtnWrapper);
                            optBtnWrapper.appendChild(startAlarmBtn);
                            optBtnWrapper.appendChild(stopAlarmBtn);
                            
							o.updateList = function(list){
								var dds = '';
								for(var item of list){
									var state = item.state === 1 ? '报警中' : '已处理';
									dds += '<dd><span>'+item.name+'</span><span class="red">'+state+'</span><span>'+item.time+'</span></dd>';
								}; return o.scroll.innerHTML = dds, o.scroll
							};
		
							// 事件
							wrap.onclick = function(e){
								var tag = e.target || e.srcElement;
								if(tag.className === 'el-icon-circle-close'){
									o.shrink = true;
								}else if(tag.className === 'el-icon-bell'){
									o.shrink = false;
								};
							};
                            startAlarmBtn.addEventListener('click', () => {
                                openAlarm().then(res=>{
                                    res.body===200?new qf.UI.Notify({
                                                position: 'top',
                                                zIndex:2050,
                                                type: 'success',
                                                duration: 3000,
                                                autoOpen:true,
                                                message: res.body,
                                            }):new qf.UI.Notify({
                                                position: 'top',
                                                zIndex:2050,
                                                type: 'warning',
                                                duration: 3000,
                                                autoOpen:true,
                                                message: res.body,
                                            })
                                })
                            });
                            stopAlarmBtn.addEventListener('click', () => {
                                closeAlarm().then(res=>{
                                    res.body===200?new qf.UI.Notify({
                                                position: 'top',
                                                zIndex:2050,
                                                type: 'success',
                                                duration: 3000,
                                                autoOpen:true,
                                                message: res.body,
                                            }):new qf.UI.Notify({
                                                position: 'top',
                                                zIndex:2050,
                                                type: 'warning',
                                                duration: 3000,
                                                autoOpen:true,
                                                message: res.body,
                                            })
                                })
                            });
						},
					});

					// 打开 filter
					//t.morphView1.open();
				};

				// unload
				t.unload = function(){
					// 停止动画更新
					m.clearpreUpdateCallback && m.clearpreUpdateCallback();
					
					// 停止设备数据更新
					//m.timer01.stop();
				};

				// 首次加载
				(m.init = function(){
					// 产量总览
					Catch.output();

					// 环境监测模块
					m.EnvirMonitor();

					// 报警列表
					m.alarmView1 = m.createAlarmView();
					// init
					(m.initAlarmInfo = function(){
						// 报警总览滚动激活
						var ScrollView4 = qf.UI.scrollingPreview({
							container:m.alarmView1.scroll,
						});

						// 报警总览
						m.alarmoverview().then(function(list){
							m.alarmView1.updateList(list);
							m.alarmView1.show = true;
							
							// 激活滚动列表
							setTimeout(() => {
								ScrollView4.update();
							}, 5000);
						});
					})();

					// 计时更新报警列表
					m.alarmModule = new qf.Async.timerCtrl(60000, 'alarmModule');
					m.alarmModule(function(){
						m.alarmoverview().then(function(list){
							m.alarmView1.updateList(list);
						});
					});

					// 设备实时状态总览
					m.deviceRealtime();

					// 人员在线统计
					m.percarCount();

					// 边坡实时监测
					m.timer01 = new qf.Async.timerCtrl(30000, 'timer01');
					m.timer01(function(){
						m.updateModelData();
						m.updatePersonModelData()


					}); m.timer01.start();


					// 创建地图设备
					m.initDeviceVisual();

					// 添加围栏数据
					//t.createWall();
				})();

				// 栏目数据加载
				m.loadData = function(){
					// 产量总览
					Catch.output();

					// 环境监测实时数据
					t.envirData();

					// 人员与车辆在线统计
					m.percarCount();

					// 设备实时状态总览
					//m.deviceRealtime();
				};

				return {
					reload: function(){
						t.loadViewVisual();

						m.timer01.start();

						m.alarmModule.start(1);
					},
					timerUpdate: function(){
						m.loadData()
					},
					mapClick: function(pick){
						var entity = pick.id;
						t.openDeviceWindow(entity);
					},
					unload: function(){
						t.unload();
						// stop
						//m.alarmModule.stop();
					},
					resize: function(){
						m.percarCountChart && m.percarCountChart.reflow();
					},
				};
			})();
		},

		module3(m, t, f, dmIndex){
			var self = this, Catch = {};
			var viewData = self['view'+dmIndex];

			// 降雨量变化趋势图(日)
			var amd20 = document.getElementById("amd20");
			var wrap20 = amd20.querySelector(".wrap");

			// 表面位移变化量(周)
			var amd21 = document.getElementById("amd21");
			var wrap21 = amd21.querySelector(".wrap");
			var title_21 = amd21.querySelector(".item_2>span");

			// 激活事件
			var amd23 = self.$el.querySelector("#amd23");
			var el_amd23 = amd23.querySelector(".el-icon-location");

			// 环境监测近七天变化趋势图
			var amd24 = document.getElementById("amd24");
			var wrap24 = amd24.querySelector(".wrap");
			var title_24 = amd24.querySelector(".item_2");
			var b0_d = this.$el.querySelector("#b0_d");

			return (function(){

				// 视角
				//m.openVisual = function(){
				//	fg3d.Assist.flyToLnglat({
				//		longitude: 114.12785040588982,
				//		latitude: 35.689261801295714,
				//		height: 893.864392424467,
				//		heading: 0.6049227112346074,
				//		pitch: -0.37063033678868607,
				//		roll: 0.0000214519590597817,
				//		duration: 1
				//	});
				//};

				// 降雨量变化趋势图(日)
				m.jyldata = function(){
					reqApi.common.requstEdge('get', '/tab/Monitoring/jyldata', {}).then((res)=>{
						var body = res.body || {};
						var formatSeries = Highchart.seriesDataFormat(body, {datekey:'date', colors:["#4ea9fc"]});
						var options = {
							chartConfig:{
								chart: {
								  type: 'column'
								},
								xAxis: {
								  labels: {
									style:{
									  color:'#55ffff'
									},
								  },
								},
								yAxis: {
									min:0,
									max:10,
									gridLineColor:'tansparent',
									labels:{
										style:{
											color:'#fff'
										},
									},
									stackLabels: {  // 堆叠数据标签
										enabled: true,
									}
								},
								plotOptions: {
									column: {
										dataLabels: {
											enabled: true,
											color: 'white',
											style: {
												textOutline:'none',
											},
											//verticalAlign:'bottom',
											//y:50,
											//position:'right',
										},
										minPointLength:1,	// 柱的最小高度
									},
								},
								tooltip: {
									//valueSuffix: ' m/s'
									pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' + '<td style="padding:0"><b>{series.name} {point.y}</b>mm </td></tr>',
									dateTimeLabelFormats: {
										millisecond: '%H:%M:%S.%L',
										second: '%m-%d %H:%M:%S',
										minute: '%m-%d %H:%M',
										hour: '%m-%d %H:%M',
										day: '%m-%d %H:%M',
										week: '%m-%d %H:%M',
										month: '%Y-%m',
										year: '%Y'
									},
									shared: true,
									//useHTML: true,
								},
								series: formatSeries.series,
							},
							isSeriesData:true,
							notExtendsOptions:true,
						};
						m.jyldataChart = Highchart.template.high(wrap20, {}, options);
					});
				};

				// 表面位移设备列表
				m.bmwyequip = function(){
					reqApi.common.requstEdge('get', '/tab/Monitoring/bmwyequip', {}).then((res)=>{
						var body = res.body || {};
						viewData.mpList = body;

						// 表面位移图表切换事件
						title_21.onclick = function(e){
							var mdName = e.target || e.srcElement;
							if(!Catch.amd21 || !Catch.amd21.show){
								var checkValue = mdName.dataset.equipno || viewData.mpList[0].equipno;
								var html = qf.UI.checkListRender({
									type:"radio",
									list: viewData.mpList,
									select:[checkValue],
									name:'equipname',
									value:'equipno',
								});
								// 创建窗口
								Catch.amd21 = qf.UI.popWindow({
									name:'ssss',
									container:mdName.parentNode,		// id || Element对象
									pointer:{
										point:'left',
										show:true,
										x:0,
									},
									closeButton:true,
									html:'<div style="color:#fff;height:2rem;width:4rem;border:1px solid #3EB7EA;background-color:rgba(0,0,0, .5);padding:.15rem;text-align:left;">sdfsdf</div>',
									onload: function(o){
										var el = o.el;
										o.setStyle(o.Wrap, {top:'0rem', left:'5.00rem'});
										
										// 事件
										el.onclick = function(e){
											var tag = e.target || e.srcElement;
											if(tag.nodeName === 'INPUT'){
												Catch.amd21.remove();
												mdName.innerText = tag.dataset.name;
												mdName.dataset.equipno = tag.value;

												m.setChart21(tag.value)
											};
										};
										el.innerHTML = html;
									},
								});
							};
						};

						m.setChart21(viewData.mpList[0].equipno)
					});
				};
	
				// 表面位移变化量(周)
				m.setChart21 = function(equipno){
					Catch.Chart21Val = equipno || Catch.Chart21Val;

					reqApi.common.requstEdge('get', '/tab/Monitoring/bmwydata', {sensorid:Catch.Chart21Val}).then((res)=>{
						var body = res.body || {};
						var formatSeries = Highchart.seriesDataFormat(body, {datekey:'date', serie:{
							type: 'spline',
							marker: {
								enabled: false
							},
						}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
						var options = {
							chartConfig:{
								chart: {
									//type: 'spline'
								},
								xAxis: {
									type: 'datetime',
									labels: {
										rotation:0,  // 设置轴标签旋转角度
										style:{
											color:'#fff'
										},
										y:15,
										overflow: 'justify'
									},
								},
								yAxis: {
									//min: 0,
									minorGridLineWidth: 0,
									gridLineWidth: 0,
									alternateGridColor: null,
									labels:{
										style:{
											color:'#fff'
										},
										x:-6,
									},
									gridLineColor:'#0F5680',
								},
								tooltip: {
									//valueSuffix: ' m/s'
									pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' + '<td style="padding:0"><b>{series.name} {point.y}</b>mm </td></tr>',
									dateTimeLabelFormats: {
										millisecond: '%H:%M:%S.%L',
										second: '%m-%d %H:%M:%S',
										minute: '%m-%d %H:%M',
										hour: '%m-%d %H:%M',
										day: '%m-%d %H:%M',
										week: '%m-%d %H:%M',
										month: '%Y-%m',
										year: '%Y'
									},
									shared: true,
								},
								legend: {
									enabled:true,
									align: 'right',
									x:0,
									verticalAlign: 'top',
									y: -10,
									floating: true,
									borderColor:'none',
									borderWidth: 1,
									itemStyle:{color:'#fff',},
									itemHoverStyle:{color:'#fff',},
								},
								series:formatSeries.series,
							},
							isSeriesData:true,
							notExtendsOptions:true,
						};
						m.bmwydataChart = Highchart.template.rich(wrap21, {}, options);
					});
				};

				// 请求环境监测设备列表
				m.reqEnvirList = function(){
					return reqApi.common.requstEdge('get', '/tab/Monitoring/equipdataEnv', {}).then((res)=>{
						var list = res.body || {};

						// module 24 激活事件
						var select1 = title_24.querySelector("select");
						
						// 设备选项
						qf.UI.selectRender(select1, list, {
							value:'id',
							onchange: function(val){
								m.setChart24(val);
							},
							onload: function(val){
								m.setChart24(val);
							},
						});
					});
				};

				// 环境监测趋势图
				m.setChart24 = function(envirid){
					m.envirid = envirid || m.envirid;
					var param = {id:m.envirid, mn:m.envirmn};
					reqApi.common.requstEdge('get', '/tab/Monitoring/getsevendata', param).then((res)=>{
						var body = res.body || {};
						var formatSeries = Highchart.seriesDataFormat(body, {datekey:'date'});
						var unit = body.unit;
						var options24 = {
							chartConfig:{
								chart: {
									type: 'areaspline'
								},
								title: {
									text: ''
								},
								legend: {
									layout: 'vertical',
									align: 'left',
									verticalAlign: 'top',
									x: 150,
									y: 100,
									floating: true,
									borderWidth: 1,
								},
								xAxis: {
									plotBands: [{ // 标识出周末
										from: 4.5,
										to: 6.5,
										color: 'rgba(68, 170, 213, .2)'
									}]
								},
								yAxis: {
									title: {
										text: ''
									}
								},
								tooltip: {
									shared: true,
									pointFormat: '{series.name}：{point.y} ' + unit,
								},
								plotOptions: {
									areaspline: {
										fillOpacity: 0.5
									}
								},
								series: formatSeries.series
							},
							isSeriesData:true,
							notExtendsOptions:true,
						};
						Highchart.template.high(wrap24, {}, options24);
					});
				};

				// 初次加载
				(m.init = function(){
					// 降雨量
					m.jyldata();

					// 表面位移设备列表
					m.bmwyequip();

					// 环境设备列表
					m.reqEnvirList().then(function(list){
					});
				})();
				
				// 栏目数据加载
				m.loadData = function(){

					// 降雨量
					m.jyldata();

					// 环境监测模块
					//m.envirData();
					
					// 环境监测趋势图
					m.setChart24();

					// 表面位移变化量(周)
					m.setChart21();
				};		

				return {
					reload: function(){
						//f(0).loadViewVisual();
						//m.openVisual();

						//m.monitorAlarm.start(1);
					},
					timerUpdate: function(){
						m.loadData();
					},
					mapClick: function(pick){
						var entity = pick.id;
						f(0).openDeviceWindow(entity);
					},
					unload: function(){
						f(0).unload();
					},
					resize: function(){
						m.jyldataChart && m.jyldataChart.reflow();
						m.bmwydataChart && m.bmwydataChart.reflow();
					},
				};
			})();
		},

		module4(m, t, f, dmIndex, view){		// 采矿管理
			var self = this, viewData = self['view'+dmIndex], fm = f('init'), thisApi = fm.models[dmIndex];
			var amd40 = view.querySelector("#amd40");
			var areaCtrl = view.querySelector(".area-ctrl");

			return (function(){
				// 视角
				/* m.openVisual = function(){
					fg3d.Assist.flyToLnglat({
						longitude:'114.1674479475088',
						latitude:'35.682672515124445',
						height:'1707.996300209384',
						heading:'5.071707067373581',
						pitch:'-0.6203050977189695',
						roll:'0.00000739612826272662',
						duration: 1.5,
					});
				}; */

				// 在线监测报警实时列表
				m.getModelList = function(){
					var url = fm.LOCAL_API + '/api/dimensional';
					return reqApi.common.requstEdge('get', url, {page:0,size:50,}).then((res)=>{
						var body = res.body || [], list = body.list || [];
						return viewData.modelList = list;
					});
				};

				m.loadDefaultModel = function(){
					m.getModelList().then(function(list){
						m.previewModel(list[0].filePath);
					});
				};
				
				// 模型预览
				m.previewModel = function(filename){
					var filepath = fm.LOCAL_API + '/file/' + filename;

					if(m.popup4){
						m.popup4.i.contentWindow.onMessage(filepath);
					}else{
						qf.UI.popWindow({
							cover:true,
							//container:b0_e,		// id || Element对象
							/* closeButton:{
								horizontal:'right',
								vertical:'top',
							}, */
							closeEvent:true,
							html:'<div style="height:100%;width:100%;border:1px solid #3EB7EA;background-color:rgba(0,0,0, .5);"></div><div style="position:absolute;top:0.08rem;right:0.1rem;font-size:.30rem;color:#3eb7ea;display:flex;align-items:center;"><a href="webTo3DMine:\" style="font-size:.20rem;text-decoration:none;color:unset;margin-right:0.30rem;">3DM</a><i style="margin-right:0.12rem;cursor:pointer;" class="el-icon-zoom-in"></i><i style="cursor:pointer;font-size:.32rem;"class="el-icon-close close"></i></div>',
							onload: function(v){
								m.popup4 = v;
								var el = v.el;
								v.midStyle = {top:(qf.envir.dpr * 100 / 2)+'vh',left:(19.2-12.8)/2-2.8+'rem',marginTop:'-4.2rem',height:'8.6rem',width:'14.6rem'};
								v.maxStyle = {top:0, left:0, marginTop:'0',height:'100%', width:'19.2rem'};
								v.setStyle(v.Wrap, Object.assign(v.midStyle, {zIndex:10}));
								var i = v.i = document.createElement("iframe");
								i.src = process.env.VUE_APP_BASE_API + '/static/3dmine/index20231547.html';
								i.style.cssText = 'display:none;border:0;height:100%;width:100%;';
								i.onload = function(){
									i.style.display = 'block';
									i.contentWindow.onMessage(filepath);
								};
								el.appendChild(i);
								
								// 缩放事件
								v.Wrap.onclick = function(e){
									var tag = e.target || e.srcElement;
									if(tag.className === 'el-icon-zoom-in'){
										v.setStyle(v.Wrap, v.maxStyle);
										tag.className = 'el-icon-zoom-out';
									}else if(tag.className === 'el-icon-zoom-out'){
										v.setStyle(v.Wrap, v.midStyle);
										tag.className = 'el-icon-zoom-in';
									}else if(tag.classList.contains('close')){
										m.popup4.remove()
										delete m.popup4
									};
								};
							},
						});
					};
				};

				m.Overlay = new fg3d.Materials.Overlay();

				// 区域渲染
				m.createAreas = function(list){
					for(var item of list){
						(function(item1){
							item1.areaEntity = m.Overlay.create(item.area);
							var div = document.createElement("div");
							div.cssText = '';
							div.innerHTML = '<span style="font-weight:bold;color:'+item1.lable.color+';text-shadow:4px 4px 0 white, 4px -4px 0 white, -4px -4px 0 white, -4px 4px 0 white, 4px 3px 0 white, 4px -3px 0 white, -4px -3px 0 white, -4px 3px 0 white, 4px 2px 0 white, 4px -2px 0 white, -4px -2px 0 white, -4px 2px 0 white, 4px 1px 0 white, 4px -1px 0 white, -4px -1px 0 white, -4px 1px 0 white, 4px 0px 0 white, 4px 0px 0 white, -4px 0px 0 white, -4px 0px 0 white, 3px 4px 0 white, 3px -4px 0 white, -3px -4px 0 white, -3px 4px 0 white, 2px 4px 0 white, 2px -4px 0 white, -2px -4px 0 white, -2px 4px 0 white, 1px 4px 0 white, 1px -4px 0 white, -1px -4px 0 white, -1px 4px 0 white, 0px 4px 0 white, 0px -4px 0 white, 0px -4px 0 white, 0px 4px 0 white;user-select:none;">'+item1.lable.name+'</span>';
							item1.areaLabelEntity = new fg3d.Plugins.View(item1.lable.position, div, {
								render: function(){
									return {
										position:item1.lable.position,
										y:-10,
										x:-40,
									};
								},
							});
						})(item);
					};
				};

				// 矿山区域
				m.openAreaView = function(){
					m.areaData = [
						{
							lable:{
								name:'生产区域',
								color: 'rgba(201,201,5,1)',
								position:{"x":-2121959.148669658,"y":4732907.446724342,"z":3699688.329300404},
							},
							area:{
								type:'polygon',
								color: fg3d.Assist.convertColor('rgba(201,201,5,0.7)'),
								positions:[{"x":-2122121.69752553,"y":4732948.485187713,"z":3699480.7736413167},{"x":-2121532.6802133354,"y":4733004.795826415,"z":3699820.809463074},{"x":-2121579.3242312316,"y":4732918.078870975,"z":3699914.4527314305},{"x":-2121731.903524157,"y":4732895.190584821,"z":3699832.200684501},{"x":-2121891.970666071,"y":4732840.040141181,"z":3699784.4230823033},{"x":-2122002.2695298186,"y":4732828.6610931195,"z":3699720.5081576174},{"x":-2122030.862723658,"y":4732765.588219904,"z":3699783.130313781},{"x":-2122009.0677196844,"y":4732706.487491439,"z":3699855.875857564},{"x":-2122136.4814477907,"y":4732651.002686095,"z":3699841.1911163903},{"x":-2122182.258534114,"y":4732745.7051489595,"z":3699688.969579434}],
							},
						},
						{
							lable:{
								name:'办公区域',
								color: 'rgba(26,26,198,1)',
								position:{"x":-2121984.5246134335,"y":4732810.697839417,"z":3699767.0667978125},
							},
							area:{
								type:'polygon',
								color: fg3d.Assist.convertColor('rgba(26,26,198,0.7)'),
								positions:[{"x":-2121947.740673984,"y":4732836.739738038,"z":3699755.440539873},{"x":-2122001.7125650863,"y":4732828.060650823,"z":3699721.7572384505},{"x":-2122024.2093514916,"y":4732778.376787009,"z":3699771.581554226},{"x":-2121953.4057358783,"y":4732809.456473601,"z":3699780.121464073}],
							},
						},
						{
							lable:{
								name:'运输道路',
								color: 'green',
								position:{"x":-2121255.62295468,"y":4732688.030442115,"z":3700382.12769257},
							},
							area:{
								type:'polygon',
								color: Cesium['Color']['GREEN']['withAlpha'](0.8),
								positions:[{"x":-2121531.2740100883,"y":4733001.290832277,"z":3699826.151223126},{"x":-2121471.1277392665,"y":4732993.319641265,"z":3699870.481493262},{"x":-2121404.9117971375,"y":4732953.815513793,"z":3699961.724264286},{"x":-2121374.028721476,"y":4732883.284179721,"z":3700071.3308811085},{"x":-2121330.668495002,"y":4732818.472744264,"z":3700176.5342278914},{"x":-2121080.3865163056,"y":4732429.777509618,"z":3700776.4217324816},{"x":-2121099.384574161,"y":4732414.026278343,"z":3700784.5593299256},{"x":-2121346.0748288534,"y":4732806.58878116,"z":3700185.6254272475},{"x":-2121380.745037616,"y":4732857.536893442,"z":3700099.862802012},{"x":-2121415.4792679963,"y":4732936.417002095,"z":3699977.9403856895},{"x":-2121482.8336224435,"y":4732955.330203809,"z":3699911.9428409124},{"x":-2121552.2525749723,"y":4732960.497357658,"z":3699866.193625857}],
							},
						},
						{
							lable:{
								name:'矿山区域',
								color: 'red',
								position:{"x":-2120672.70872001,"y":4732381.842408981,"z":3701207.864998345},
							},
							area:{
								type:'polygon',
								color: Cesium['Color']['RED']['withAlpha'](0.6),
								positions:[{"x":-2120306.0254037874,"y":4732280.2541906275,"z":3701579.011785657},{"x":-2121033.6788596786,"y":4732178.872825701,"z":3701344.8140458036},{"x":-2121067.991964552,"y":4732339.3742958605,"z":3701014.357442467},{"x":-2121036.4552592617,"y":4732448.384141414,"z":3700780.6016604276},{"x":-2120812.2928324672,"y":4732625.405322184,"z":3700751.5119278603},{"x":-2120406.552262311,"y":4732757.367645288,"z":3700829.14458496},{"x":-2120116.857627231,"y":4732566.95730762,"z":3701283.1988117145}],
							},
						},
						{
							lable:{
								name:'临时堆场',
								color: 'rgba(216,160,111,1)',
								position:{x:-2120824.253108862, y:4732476.061036498, z:3700874.681253977},
							},
							area:{
								type:'polygon',
								color: fg3d.Assist.convertColor('rgba(216,160,111,0.8)'),
								positions:[{"x":-2120818.5409808634,"y":4732497.547528367,"z":3700854.1554808877},{"x":-2120785.7388974736,"y":4732470.511882864,"z":3700908.907636978},{"x":-2120851.1276103375,"y":4732451.493873717,"z":3700888.183313841},{"x":-2120842.7455381914,"y":4732489.309663085,"z":3700849.996797884}],
								zIndex:10,
							},
						},
					];
					m.createAreas(m.areaData);
				};
				// clear
				m.clearAreaView = function(){
					if(m.areaData){
						for(var item of m.areaData){
							self.Entities.remove(item.areaEntity);
							item.areaLabelEntity && item.areaLabelEntity.remove()
						};
					};
				};

				// module event
				amd40.onclick = function(e){
					var tag = e.target || e.srcElement;
					if(tag.className === 'el-icon-view'){
						var filename = tag.parentNode.parentNode.dataset.name;
						m.previewModel(filename);
					};
				};

				
				(m.init = function(){
					// 设置视角
					//m.openVisual()
				})();
				
				return {
					reload: function(){
						// 删除数据
						self.Entities.removeAll();
						// 隐藏墙体
						//f(0).WallEntityHide();

						// 加载模型
						m.loadDefaultModel();

						// 设置视角
						//m.openVisual();
					},
					timerUpdate: function(){
						m.getModelList();
					},
					unload: function(){
						// 清空模型
						m.popup4 && m.popup4.remove(); delete m.popup4;
						// 清空区域展示
						m.clearAreaView();
						// 关闭开关
						//self.areaSwitch.dataModel = false;
						
						// 显示墙体
						//f(0).WallEntityShow();
					},
				};
			})();
		},

		// Cesium
		createCesium: function(fn){
			var that = this;
			fg3d.init({
				createViewer: function(){
					return {
						el:'cesiumContainer',
						options:{
							//sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,

							/**
							  * 使用 Cesium 世界地形, 
							  * 
							  * @param: false								// 不显示地形
							  * @param: Cesium.createWorldTerrain()			// Cesium默认世界地形
							  * @createtime: 2021/10/30
							  */
							terrainProvider : Cesium.createWorldTerrain(),
							// 隐藏基本层选择器
							baseLayerPicker : false,
							imageryProvider: null,
							timeline:false,
							homeButton:false,
							fullscreenButton:false,
							infoBox:false,
							sceneModePicker:false,
							navigationInstructionsInitiallyVisible:false,
							navigationHelpButton:false,
							geocoder:false,
							animation:false,				// 底部指针
							selectionIndicator:false,
							shouldAnimate: true,
						}
					};
				}, 
				mounted: function(viewer){

					var self = this
					this.viewer = that.viewer = viewer;

					//取消双击锁定
					fg3d.Event.removeLeftDoubleClick()

					// 去除版权信息
					viewer._cesiumWidget._creditContainer.style.display = "none";
					var path = process.env.VUE_APP_D3Tileset + '/tileset.json';
                    // console.log('path', path)
					var localTile = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
						url: path,
						//maximumScreenSpaceError:1,
						//maximumMemoryUsage:1024,

						// 优化
						scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
						skipLevelOfDetail: true,
						skipScreenSpaceErrorFactor: 64,		// 默认 16
						skipLevels: 1,	// 如果为0，则不会跳过任何级别。与skipScreenSpaceErrorFactor一起使用，以确定要加载的磁贴
						immediatelyLoadDesiredLevelOfDetail: false,		// 当 skipLevelOfDetail 为true时，将只下载满足最大屏幕空间错误的磁贴。忽略跳过因素，只加载所需的磁贴。
						baseScreenSpaceError: 1920,
						maximumScreenSpaceError: 1, // 数值加大，能让最终成像变模糊
						cullWithChildrenBounds: true,
						cullRequestsWhileMoving: true,
						cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
						preloadWhenHidden: true,
						preferLeaves: true,
						maximumMemoryUsage: 512, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
						progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
						dynamicScreenSpaceError: true, // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋(优化选项。减少离相机更远的磁贴的屏幕空间错误)
						dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
						dynamicScreenSpaceErrorFactor: 4.0, // 不知道起了什么作用没，反正放着吧先
						dynamicScreenSpaceErrorHeightFalloff: 0.25,
						
						//控制切片视角显示的数量，可调整性能
						maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
					}));

					// 瓦片默认视角
					localTile.readyPromise.then(function (tileset) {
						var boundingSphere = tileset.boundingSphere;
						viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
						viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
					}).otherwise(function (error) {
						throw (error);
					});

					//this.setView(viewer);
					

					// 环境设置 ---------------------------------------
					/* viewer.clockViewModel.clock.currentTime = Cesium.JulianDate.fromIso8601(
						"2017-07-11T22:30:00Z"
					); */

					//return ;
					// 光影效果
					viewer.scene.globe.enableLighting = true; //关闭光照
					viewer.shadows = false;//关闭阴影

					// 场景效果
					viewer.scene.light = new Cesium.DirectionalLight({
						color:new Cesium.Color(1.0, 1.0, 1.0, .1),
						direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772),
					});
					// 太阳
					viewer.scene.sun.show = true;
					viewer.scene.sun.glowFactor = 20;	// 10倍
					// 天空
					var skyAtmosphere = viewer.scene.skyAtmosphere;
					skyAtmosphere['hueShift'] = 0.0;
					skyAtmosphere['saturationShift'] = 0.5;
					skyAtmosphere['brightnessShift'] = 0.01;
					
					// 地图层调色(bold)
					var baseLayer = viewer.scene.imageryLayers.get(0);
					//将Bing基础层上的海洋设置为透明
					baseLayer.colorToAlpha = new Cesium.Color(1.0, 1.0, 1.0, 1.0);
					// 地球颜色的覆盖高度 0 ~ 1
					//baseLayer.colorToAlphaThreshold = 0.5;
					baseLayer.brightness = 0.95;
					baseLayer.contrast = 1.2;
					baseLayer.hue = 0.0;
					//baseLayer.saturation = 1.08;
					//baseLayer.gamma = 1.14;

					that.Entities = {
						remove: this.remove,
						removes: this.removes,
						removeWidget: this.removeWidget,
						removeAll: function(){
							self.removeEntities();
							self.removeWidget();
						},
					};
					// 新增点击事件监听
					const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
					handler.setInputAction((movement) => {
						this.pickPosition(movement.position);
					}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
				},
				pickPosition(position) {
					const scene = this.viewer.scene;
					const pickedObject = scene.pick(position);

					if (Cesium.defined(pickedObject) && pickedObject.primitive instanceof Cesium.Cesium3DTileset) {
						const ray = this.viewer.camera.getPickRay(position);
						const cartesian = scene.globe.pick(ray, scene);

						if (Cesium.defined(cartesian)) {
							const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
							const longitude = Cesium.Math.toDegrees(cartographic.longitude);
							const latitude = Cesium.Math.toDegrees(cartographic.latitude);
							const height = cartographic.height;

							console.log(`拾取的坐标点：经度 ${longitude}, 纬度 ${latitude}, 高度 ${height}`);
						}
					}
				},
				setView: function(viewer){
					viewer.camera.setView({
						destination:Cesium.Cartesian3.fromDegrees(121.712245,36.86346, 200),
						orientation:{
							// 指向
							heading: 6.048855026902075,
							// 视角
							pitch: -0.29361284379937747,
							// 倾斜
							roll: 0.000003977430843349339,
						},
					});
				},
				removeWidget(){
					var widgetContainer = that.viewer.cesiumWidget.container;
					var popmds = widgetContainer.querySelectorAll(".kmb-popmd-e3d8");
					for(var item of popmds){
						//item.remove();
					};
				},
				remove(obj){
					that.viewer.entities.remove(obj);
				},
				removes(list){
					for(var item of list){
						that.viewer.entities.remove(item);
					};
				},
				removeEntities(){
					var entitys = that.viewer.entities._entities._array;
					var len = entitys.length;
					for(var i=0; i<len; i++){
						var obj = entitys[i];
						if(!obj.wall){
							that.viewer.entities.remove(obj);
							i--;len--;
						};
					};
					//that.viewer.entities.removeAll();
				},
			});
		},
	},
}
</script>

<style lang="scss" scope>
	@font-face {font-family:"diget year";src: url("~@/assets/fonts/DS-Digital.ttf");};
	@font-face {font-family:"zhengdao";src: url("~@/assets/fonts/pangmenzhengdao2.0.ttf");};
	.font_digit{font-family:diget year;}
	.font_zhengdao{font-family:zhengdao;}
	 
	.Screen {
		position:relative;height:100%;width:100%;overflow:hidden;

		.a_0, .b_0{position:absolute;}
		>.actv{display:block;}
		.a_0{
			top:0;left:0;height:100%;width:100%;
			.cesium-ctn{
				height:100%;width:100%;
				.kmb-popmd-e3d8.alarm{
					&>i:nth-child(2){border-color:#ff0000 transparent transparent #ff0000 !important;}
					&>i:nth-child(3){border-color:#ff0000 !important;color:#ff0000 !important;}
					
					&>.popupBgImage{
						background-image:url('/static/images/frame2-min.png');
					}
				}
			}
			
			.a0_{
				position:absolute;top:0;left:0;height:auto;width:100%;z-index:1;

				header{
					position:absolute;top:0;left:0;height:0;width:100%;z-index:5;
					display:flex;user-select:none;

					.b1_bg{
						position:absolute;top:0;left:5.10rem;height:1.10rem;width:8.65rem;
						background:no-repeat top center url('~@/assets/images/layout/s_hd_c.png');
						background-size:100% auto;
						display:flex;justify-content:center;align-items:center;

						&:before, &:after{content:"";position:absolute;top:0;height:.22rem;}
						&:before{
							width:5.10rem;left:-5.10rem;
							background:no-repeat top center url('~@/assets/images/layout/s_hd_l.png');
							background-size:100% auto;
						}
						&:after{
							width:5.45rem;right:-5.45rem;
							background:no-repeat top center url('~@/assets/images/layout/s_hd_r.png');
							background-size:100% auto;
						}
						h2{
							font-size:.38rem;line-height:1;margin:-.06rem 0 0 .2rem;letter-spacing:.03rem;font-weight:normal;
							font-family:zhengdao;color:#fff;text-shadow:#0160fd 0.0 .0 .05rem;
						}
					}

					.a0a_{
						position:absolute;top:.34rem;left:0;height:0;width:100%;
						display:flex;justify-content:space-between;
						ul{
							height:0;display:flex;
							li{
								width:1.64rem;height:.50rem;cursor:pointer;
								background-repeat:no-repeat;background-position:top center;background-size:100% .50rem;
								display:flex;justify-content:center;align-items:center;
								font{
									position:absolute;
									font-family:diget year;font-size:.28rem;text-shadow:#1f94e4 0px 0px .10rem;
									color:transparent;-webkit-text-fill-color:#fff;-webkit-text-stroke: 0.5px #1f94e4;
								}
							}
						}

						ul:first-child{
							margin-left:.22rem;
							li{margin-right:.14rem;}
							li:nth-child(1){
								background-image:url('~@/assets/images/layout/m_1.png');
							}
							li.active:nth-child(1){
								background-image:url('~@/assets/images/layout/m_1a.png');
							}
							li:nth-child(2){
								background-image:url('~@/assets/images/layout/m_5.png');
							}
							li.active:nth-child(2){
								background-image:url('~@/assets/images/layout/m_5a.png');
							}
							//li:nth-child(2){
							//	background-image:url('~@/assets/images/layout/m_2.png');
							//}
							//li.active:nth-child(2){
							//	background-image:url('~@/assets/images/layout/m_2a.png');
							//}
							//li:nth-child(3){
							//	background-image:url('~@/assets/images/layout/m_3.png');
							//}
							//li.active:nth-child(3){
							//	background-image:url('~@/assets/images/layout/m_3a.png');
							//}
						}

						ul:last-child{
							margin-right:.22rem;
							li{margin-right:.14rem;}
							//li:nth-child(1){
							//	background-image:url('~@/assets/images/layout/m_4.png');
							//}
							//li.active:nth-child(1){
							//	background-image:url('~@/assets/images/layout/m_4a.png');
							//}
							li:nth-child(1){
								background-image:url('~@/assets/images/layout/m_4.png');
							}
							li.active:nth-child(1){
								background-image:url('~@/assets/images/layout/m_4a.png');
							}
							li:nth-child(2){
								background-image:url('~@/assets/images/layout/m_6.png');
							}
						}
					}
				}
			}
		}
		.b_0{
			display:flex;top:1.00rem;left:0;bottom:0;width:0;background-color:rgba(0,0,0,.15);
			
			.b0_{
				display:flex;flex-direction:column;justify-content:center;height:100%;width:0;
				.kmb-checkbox{
					dd{line-height:.35rem;}
				}
				
				>div{
					display:none;
					//display:flex;
					width:19.2rem;height:0;justify-content:space-between;
					.side{transition:all .35s cubic-bezier(0.8, 0, 1, 1);}
					.side.b0_left{
						transform-origin:left center;margin-left:.15rem;
						//transform:scaleX(0) perspective(0px) rotateY(5deg);
						transform:scaleX(1) perspective(410px) rotateY(5deg);
						.ct-box{
							margin-top:.05rem;
						}
					}
					.side.b0_right{
						transform-origin:right center;margin-right:.15rem;
						//transform:scaleX(0) perspective(0px) rotateY(-5deg);
						transform:scaleX(1) perspective(410px) rotateY(-5deg);
						.ct-box{
							margin-top:.05rem;
						}
					}
				};
				.active.close{
					>.side:nth-child(1){
						transform:scaleX(0) perspective(0px) rotateY(5deg);
					}
					.side:last-child{
						transform:scaleX(0) perspective(0px) rotateY(-5deg);
					}
				}
				div.active{
					display:flex;
					//.side{display:flex;}
				}
				//div.active{visibility:visible;}

				.side{
					// display:none;
					width:4.80rem;height:0;
					display:flex;flex-direction:column;justify-content:center;user-select:none;color:#fff;
					&>div{
						flex:none;position:relative;min-height:2.70rem;margin:.10rem 0;
					}
					.abs-full{
						display:flex;flex-direction:column;
						.item_2{
							position:relative;margin-top:.05rem;height:.42rem;line-height:.41rem;text-align:center;
							font-size:.17rem;color:#d8f9ff;
							font{font-size:.30rem;}
							.md-name{
								display:flex;height:100%;justify-content:center;align-items:center;cursor:pointer;
								&:before{position:absolute;right:0.15rem;font-size:.28rem;}
							}
						}
					}

					.md-title{
						position:relative;
						ul{
							position:absolute;top:0;right:.38rem;height:100%;width:auto;
							display:flex;display:flex;align-items:center;
							li{
								text-align:center;line-height:.26rem;
								border:1px solid #1c6fbd;font-size:#afc8e6;
								margin:.03rem 0;height:.30rem;width:.30rem;margin-left:.12rem;font-size:.16rem;
								cursor: pointer;
							}
							.actv{
								background-color:rgba(29, 130, 220, .6);
							}
						}
					}
					h4{
						height:.43rem;line-height:.42rem;background:no-repeat center center url('~@/assets/images/layout/md_hd_liner.png');
						background-size:100% 100%;font-size:.26rem;padding-left:.46rem;
						font-family:serif;font-weight:normal;font-style:italic;letter-spacing:.02rem;
					}
					.ct-box{
						flex:1;display:flex;position:relative;
						.tab2{
							margin-top:.10rem;
							ul{
								display:flex;height:.24rem;margin:0 .10rem;
							}
							li{
								flex:1;text-align:center;line-height:.20rem;margin:0 .15rem;max-width:.99rem;
								border-radius:.05rem;font-size:.15rem;color:#37b5b4;
								border:1px solid #1e527a;cursor:pointer;
								box-shadow:inset 0 0 0.10rem 0.03rem rgba(16, 88, 148, .8);
							}
							li.actv{
								border:1px solid #01b0ff;
								color:#34fcfa;
							}
						}
						.wrap{
							position:absolute;top:0;left:0;height:100%;width:100%;
							border:1px solid #2d5b68;
						}
						.flex1{position:relative;}
					}

					.shadow1{
						box-shadow:inset 0 0 0.15rem 0.05rem rgba(1, 95, 121, .8);
						background-color:rgba(0,0,0,.4);
					}

					.a-md1{
						height:5.3rem;
						.wrap{
							display:grid;grid-template-columns:50% 50%;
							&>div:nth-child(1){
								font{text-shadow:#d9fa03 0px 0px .10rem;}
								font:before{background-color:#fece08;}
							}
							&>div:nth-child(2){
								font{text-shadow:#02fe81 0px 0px .10rem;}
								font:before{background-color:#09fd77;}
							}
							&>div:nth-child(3){
								font{text-shadow:#c0f507 0px 0px .10rem;}
								font:before{background-color:#c0f507;}
							}
							&>div:nth-child(4){
								font{text-shadow:#00aef7 0px 0px .10rem;}
								font:before{background-color:#00aef7;}
							}
							&>div:nth-child(5){
								font{text-shadow:#d9fa03 0px 0px .10rem;}
								font:before{background-color:#fece08;}
							}
							&>div:nth-child(6){
								font{text-shadow:#02fe81 0px 0px .10rem;}
								font:before{background-color:#09fd77;}
							}
							&>div:nth-child(7){
								font{text-shadow:#c0f507 0px 0px .10rem;}
								font:before{background-color:#c0f507;}
							}
							&>div:nth-child(8){
								font{text-shadow:#00aef7 0px 0px .10rem;}
								font:before{background-color:#00aef7;}
							}
						}
						.col{
							flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
							box-shadow:inset 0 0 0.15rem 0.05rem rgba(1, 95, 121, .8);margin-top:.10rem;
							span{font-size:.20rem;}
							font{
								position:relative;font-family:diget year;font-size:.46rem;
								padding-left:0.25rem;line-height:.28rem;margin-top:.10rem;
								&:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:0.21rem;width:0.21rem;}
							}
						}
						.col:nth-child(odd){
							margin-right:.05rem;
						}
						.col:nth-child(even){
							margin-left:.05rem;
						}
					}
					.a-md3{
						.ct-box{
							display:flex;flex-direction:column;
							>div{margin-top:.05rem;}

							.info{
								display:flex;justify-content:space-between;padding:0 .08rem;
								span{font-size:.16rem;color:#d1f1fc;}
								font{font-size:.25rem;}
							}
							.ctn{flex:1;position:relative;}
							ul{
								position:absolute;top:0;left:0;height:100%;width:100%;
								display:grid;grid-template-columns:33.33% 33.33% 33.33%;
								li{
									position:relative;padding-left:.75rem;
									display:flex;flex-direction:column;justify-content:center;
									&:before{
										content:"";position:absolute;top:0;left:0;height:100%;width:.80rem;
										background-repeat:no-repeat;background-position:center center;background-size:100% auto;
									}
									div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
									span{font-size:.16rem;}
									font{color:#54c3fb;font-size:.12rem;}
									p{color:#C9E9F9;font-size:.14rem;}
								}
								li:nth-child(1){
									&:before{background-image:url('~@/assets/images/icon/m_md_04.png');}
								}
								li:nth-child(2){
									&:before{background-image:url('~@/assets/images/icon/m_md_01.png');}
								}
								li:nth-child(3){
									&:before{background-image:url('~@/assets/images/icon/m_md_02.png');}
									span{color:#F5B62D;}
								}
								li:nth-child(4){
									&:before{background-image:url('~@/assets/images/icon/m_md_03.png');}
								}
								li:nth-child(5){
									&:before{background-image:url('~@/assets/images/icon/m_md_06.png');}
								}
								li:nth-child(6){
									&:before{background-image:url('~@/assets/images/icon/m_md_08.png');}
									span{color:#F5B62D;}
								}
								li:nth-child(7){
									&:before{background-image:url('~@/assets/images/icon/m_md_06.png');}
								}
								li:nth-child(8){
									&:before{background-image:url('~@/assets/images/icon/m_md_07.png');}
								}
								li:nth-child(9){
									&:before{background-image:url('~@/assets/images/icon/m_md_05.png');}
								}
							}
						}
					}
					.a-md4{
						.ct-box{
							display:flex;
							&>div{position:relative;flex:1;margin:0 .05rem;}
						}
						ul{
							display:flex;flex-direction:column;width:.86rem;
							li{
								flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
								span{
									position:relative;width:100%;font-size:.28rem;line-height:1;margin-bottom:.03rem;
									font-family:'zhengdao';text-align:center;padding-bottom:.03rem;overflow:hidden;
									&:after{
										content:"";position:absolute;bottom:-00%;left:0%;height:100%;width:100%;
									}
								}
								font{line-height:1;}
							}
							li:nth-child(1){
								span:after{
									background-image:radial-gradient(circle at 50% 100%, #02a6fb 3%, rgba(2, 166, 251, .2) 30%, transparent 70%);
								}
							}
							li:nth-child(2){
								span:after{
									background-image:radial-gradient(circle at 50% 100%, #01f8fd 3%, rgba(1, 248, 251, .15) 30%, transparent 60%);
								}
							}
							li:nth-child(3){
								span:after{
									font-weight:bold;
									background-image:radial-gradient(circle at 50% 100%, #fdd9c1 3%, rgba(253, 217, 193, .15) 30%, transparent 60%);
								}
							}
						}

						.scrolling4{
							position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;color:#e1ffff;
							dt,dd{
								position:relative;
								margin-top:.12rem;line-height:1;padding:.04rem .08rem;
								display:grid;grid-template-columns:25% 25% 30% 20%;text-align:center;

								&:before, &:after{position:absolute;top:0;height:100%;font-size:.22rem;color:#21f1fe;}
								&:before{content:"[";left:0;}
								&:after{content:"]";right:0;}
							}
							dt{background-color:rgba(1,35,62,.7);font-size:.16rem;}
							dd{
								background-color:rgba(2,115,165,.3);font-size:.15rem;
								.red{color:#f9480b;font-weight:bold;}
								.orange{color:#fa750c;}
								.yellow{color:#d9f900;}
								.blue{color:#14b5ff;}
							}
						}
						dd{
							span:nth-child(2){
								//color:#13aef1;
							}
						}
						.scrolling4::-webkit-scrollbar{width:2px;}
					}
					.a-md4a{
						div.ct-box{
							flex-direction:column;
							>ul{
								flex-direction:row;height:.71rem;width:100%;
							}
						}
						dl.scrolling4{
							dt, dd{
								&:before, &:after{font-size:.34rem;}
								line-height:.32rem;
							}
							dd{
								span:nth-child(4){font-size:.32rem;}
							}
						}
						dd{
							//span:nth-child(2){color:unset;}
						}
					}
					.a-md5{
						.ct-box{
							ul{display:flex;height:100%;}
							li{
								flex:1;display:flex;flex-direction:column;align-items:center;
								position:relative;padding-top:1.15rem;

								.chart{position:absolute;top:.08rem;height:1.00rem;width:1.00rem;}
								.picture{
									height:.92rem;width:100%;margin-top:.12rem;background-size:.92rem 100%;
								}
								dl{
									position:relative;width:100%;display:flex;flex-direction:column;align-items:center;
									&:after{content:"";position:absolute;top:15%;right:0;height:70%;width:1px;background-color:#4b8090;}
								}
								dt, span{color:#b7fffb;}
								dd{margin-top:.02rem;line-height:1;}
								dt{font-size:.18rem;}
								span{font-size:.16rem;}
								font{font-size:.16rem;font-family:diget year;font-size:.38rem;}
								dd:nth-child(2){font{text-shadow:#00aef7 0px 0px .10rem;}}
								dd:nth-child(3){font{text-shadow:#d9fa03 0px 0px 0.1rem;}}
							}
							li:first-child{
								.picture{
									height:.92rem;width:100%;margin-top:.12rem;
									background:no-repeat center center url('~@/assets/images/icon/m_md_18.png');
									background-size:.92rem 100%;
								}
							}
							li:last-child{
								.picture{
									height:.92rem;width:100%;margin-top:.12rem;
									background:no-repeat center center url('~@/assets/images/icon/m_md_19.png');
									background-size:.92rem 100%;
								}
							}
						}
					}
					.a-md5a{
						.wrap{
							li{
								padding-top:1.14rem;align-items:normal;padding-top:0;
								dl{
									position:relative;margin:.05rem .09rem;flex:1;width:auto;
									border:1px solid #165b58;
									dt{
										margin-bottom:.02rem;padding:.02rem 0;
										width:100%;text-align:center;color:#01fffd;
										background-image:linear-gradient(to right, transparent, #0e5d6c, transparent);
									}
									dd{margin-top:0;line-height:.9;}
									&:before, &:after, dd:last-child:before, dd:last-child:after{
										position:absolute;height:.08rem;width:.08rem;border-style:solid;
										background-color:transparent;border-color:#09c3cf;
									}
									&:before{content:'';top:-1px;left:-1px;border-width:1px 0 0 1px;}
									&:after{top:-1px;right:-1px;border-width:1px 1px 0 0;}
									dd:last-child:before{content:'';bottom:-1px;left:-1px;border-width:0 0 1px 1px;}
									dd:last-child:after{content:'';bottom:-1px;right:-1px;border-width:0 1px 1px 0;}
								}
							}
						}
						.picture{}
					}
					.a-md6{
						.ctn{display:flex;}
						.in-box{
							flex:1;margin:.15rem;background-color:rgba(0,0,0,.8);position:relative;
							>video{position:absolute;object-fit:fill;}
						}
					}
					.a-md7{
						ul{
							display:flex;
							margin-top:.10rem;

							li{
								flex:1;height:.45rem;line-height:.43rem;text-align:center;
								font{font-size:.36rem;margin-right:.03rem;}
							}
							li:first-child{
								margin-right:.10rem;
							}
						}
						.ct-box{
							display:flex;
							.chart{
								position:relative;width:2.94rem;
							}
							dl{
								flex:1;display:flex;flex-direction:column;margin:.15rem;
								dd{
									flex:1;display:flex;flex-direction:column;
									span{position:relative;font-size:.16rem;padding-left:.12rem;}
									font{font-size:.34rem;margin-top:.04rem;}
								}

								dd:first-child{span{border-left:4px solid #44c2fd;}}
								dd:last-child{span{border-left:4px solid #00d6e8;}}
							}
						}
					}

					.a-md8{
						.scrolling4{
							dt,dd{
								display:grid;grid-template-columns:25% 25% 30% 20%;
							}
							dd{
								a{cursor:pointer;}
							}
						}
					}
					.a-md10{
						.scrolling4{
							position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;color:#e1ffff;
						}
						.scrolling4::-webkit-scrollbar{width:2px;}
						dt,dd{
							position:relative;
							margin:.12rem .12rem 0 .12rem;line-height:1;padding:.10rem .04rem;
							display:grid;grid-template-columns:25% 25% 25% 25%;text-align:center;

							&:before, &:after{position:absolute;top:0;height:100%;font-size:.22rem;color:#21f1fe;}
						}
						dt{background-color:rgba(1,35,62,.7);font-size:.16rem;}
						dd{
							background-color:rgba(2,115,165,.3);font-size:.16rem;line-height:.30rem;
							span:nth-child(2){color:#0dfdfe;font-size:.20rem;}
							span:nth-child(3){font-size:.30rem;}
							span:nth-child(4){font-size:.30rem;}
							a{cursor:pointer;}
							a.disabled{
								color:#666;cursor:default;
							}
						}
					}
					.a-md14{
						.ct-box{flex-direction:column;}
					}
					.a-md14.a-md4, .a-md15.a-md4{
						.scrolling4{
							dt,dd{grid-template-columns: 60% 40%;}
							dd span:nth-child(2) {
								font-size:.30rem;cursor:pointer;
							}
						}
					}
					.a-md15{
						.ct-box{flex-direction:column;}
					}
					.a-md17{
						.ct-box{
							flex-direction:column;
						}
					}
					.a-md18{
						.scrolling4::-webkit-scrollbar{width:2px;}
						.info-list{
							dd{
								display:flex;flex-direction:column;justify-content:center;
								border-bottom:1px solid #374d4a;margin:.06rem 0;padding:.10rem 0 .10rem .50rem;
								h5{font-weight:normal;color:#a0ebee;font-size:.16rem;margin-right:5px;}
								span{font-size:.16rem;display:inline-block;margin-right:5px;}
								h5, span, font, div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
								i{
									position:absolute;left:.10rem;width:.30rem;height:.24rem;
									display:flex;justify-content:center;
									&:before{
										content:"";position:absolute;height:0;width:0;bottom:0;
										border-width:.24rem .14rem;border-style:solid;
									}
									&:after{
										content:"!";position:absolute;font-style:normal;line-height:.30rem;font-size:.14rem;color:black;
									}
								}
								.level1{
									&:before{
										border-color:transparent transparent #F93C58 transparent;
									}
								}
								.level2{
									&:before{
										border-color:transparent transparent #FA953A transparent;
									}
								}
								.level3{
									&:before{
										border-color:transparent transparent #E9FA3C transparent;
									}
								}
								.level4{
									&:before{
										border-color:transparent transparent #3BAFFB transparent;
									}
								}
							}
						}
					}
					.a-md19{
						dd{
							span:nth-child(3){color:#0af3fa;}
							span:nth-child(4){cursor:pointer;}
						}
					}
					.a-md24{
						.item_2{
							select{background-color:transparent;color:#e1ffff;font-size:.16rem;}
							select:nth-child(1){width:60%;margin-right:.20rem;}
							select:nth-child(2){width:30%;}
							select:focus{outline:none;}
							option{color:#d8f9ff;background-color:rgba(1,35,62,.7);}
						}
					}
				}

				.b0_a, .b0_b{
				}

				.b0_a{
					.a-md2{height:3.80rem;}		// 人员
					.a-md3{height:3.80rem;}		// 环境
					.a-md5{height:2.80rem;}		// 实时
					.a-md6{height:2.90rem;}		// 监控

					.alarm-view{
						position:absolute;bottom:.2rem;left:50vw;height:.50rem;width:6rem;margin-left:-3rem;
						.fixd{
							position:relative;height:100%;width:100%;display:flex;align-items:center;
							background-color:rgba(0,0,0,.6);font-size:.15rem;
							padding:.05rem;
						}
						.lable{width:1rem;text-align:center;color:#54c3fb;}
						.photo-frame{
							position:relative;height:100%;width:100%;
							&:before, &:after, .in-box:before, .in-box:after{
								content:"";position:absolute;height:.10rem;width:.10rem;z-index:1;
								border-style:solid;border-color:#00AEF7;
							}
							&:before, &:after{top:-1px;}
							&:before{left:-1px;border-width:.02rem 0 0 .02rem;}
							&:after{right:-1px;border-width:.02rem .02rem 0 0;}
							.in-box{
								&:before, &:after{bottom:-1px;}
								&:before{left:-1px;border-width:0 0 .02rem .02rem;}
								&:after{right:-1px;border-width:0 .02rem .02rem 0;}
								ul{
									margin:0 .15rem;
									li{
										position:absolute;top:0;left:0;height:100%;width:100%;
										display:flex;justify-content:space-between;align-items:center;
										transform:scale(1);transform-origin:0px 0px;transform:translateY(100%);
									}
									h5{
										font-size:.15rem;
									}
									.is-animating{
										transition:transform .4s ease-in-out;
									}
									.scroll-in{
										transform:translateY(0%) scale(1);
									}
									.scroll-out{
										transform:translateY(-100%) scale(1);
									}

									.level1{
										color:#F93C58,
									}
									.level2{
										color:#FA953A,
									}
									.level3{
										color:#E9FA3C,
									}
									.level4{
										color:#3BAFFB,
									}
								}
							}
						}
					}
				}
	
				.b0_d{
					.a-md19{height:2.82rem;}
					.a-md20{height:3.80rem;}
					.a-md21{height:3.80rem;}
					.a-md22{height:2.82rem;}
					.a-md23{height:3.80rem;}
					.a-md24{height:3.80rem;}
				}
				.b0_e{
					div.b0_right{
						transform:none;width:3.8rem;
						.a-md40{
							min-height:7rem;margin-bottom:1.5rem;
							dd span:nth-child(1){
								overflow:hidden;text-overflow:ellipsis;word-break:break-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
							}
							dd span:nth-child(2){
								font-size:.25rem;
							}
						}
						.a-md10{
							dt,dd{
								margin:.10rem .12rem 0 .12rem;padding:.06rem .04rem;
								grid-template-columns:70% 30%;
								line-height:.30rem;
							}
						}
					}

					.side-footer{
						position:absolute;bottom:.30rem;left:0;height:0;width:19.2rem;
						display:flex;justify-content:center;
						.area-ctrl{
							position:absolute;bottom:0;height:auto;min-height:auto;user-select:none;
							dl{
								display:flex;
								dt{
									padding:0.12rem 0.22rem;font-size:.16rem;
									box-shadow:inset 0 0 0.15rem 0.05rem rgba(1, 95, 121, .8);
									background-color:rgba(0,0,0,.5);
									>span{margin-right:.20rem;}
								}
							}

							.el-switch{
								.el-switch__core{background-color:#ccc;}
							}

							.el-switch.is-checked{
								.el-switch__core{background-color:#1890ff;}
							}
						}
					}
				}

				div.el-date-editor{
					border-color:#2F8DC2;background:rgba(0,0,0,.5);
					input{background-color:transparent;color:#eee;}
					span{color:#aaa;width:20px;}
				}
			}

			.num_blue1{
				font-family:diget year;
				text-shadow:#00aef7 0px 0px .10rem;
			}
			.num_orange{
				font-family:diget year;
				text-shadow:#d9fa03 0px 0px 0.1rem;
			}
			.num_liuhuang{
				font-family:diget year;
				text-shadow:#C1FA00 0px 0px 0.1rem;
			}
			.num_qingse{
				font-family:diget year;
				text-shadow:#03CEE0 0px 0px 0.1rem;
			}
		}

		.scrolling4{position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;}
		.progress{position:relative;
			height:.15rem;overflow:visible;border-radius:.15rem;
			box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
			border:1px solid #096d7d;
			box-sizing:content-box;text-align:center;line-height:10px;
		}
		.progress-bar{animation:reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
			border-radius:.15rem;
			position: relative;background-color: #5bc0de;background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			-webkit-background-size:40px 40px;
			background-size:40px 40px;
			width:100%;height:100%;color:#fff;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease;font-size:.13rem;
			display:flex;align-items:center;justify-content:center;text-indent:40px;white-space:nowrap;
		}
		.progress .progress-value{display:block;padding:3px 7px;font-size:13px;color:#fff;border-radius:4px;background:#191919;border:1px solid #000;position:absolute;top:-40px;right:-10px;}
		@keyframes progress-bar-stripes{
			from{
				background-position:40px 0
			}
			to{
				background-position:0 0
			}
		}
		@keyframes animate-positive{0%{width:0;}}

		.half{
			flex:1;/* height:50%;width:100%; */display:flex;align-items:center;font-size:.15rem;
			.info{
				flex:1;display:flex;height:.73rem;margin:0 .20rem;border-radius:.73rem;
				background-image:linear-gradient(to right, transparent, rgba(2,93,148, .5), rgba(2,93,148, 1));
				li{
					flex:1;display:flex;flex-direction:column;justify-content:center;color:#fff;padding-left:.12rem;position:relative;
					font{margin-bottom:.05rem;font-size:.34rem;}
					em{font-style:normal;color:#a4f5f6;margin-left:.08rem;}
				}
				li:first-child{
					display:flex;align-items:center;
				}
				li:last-child:before{
					content:"";position:absolute;top:0;left:0;height:100%;
					border-width:0 0 0 2px;border-style:solid;
					border-image:linear-gradient(to bottom, transparent 15%, #286793 50%, transparent 85%) 1;
				}
				.chart-ctn{
					position:absolute;height:1.14rem;width:1.14rem;
				}
				.chart1{
					color:#3097fc;
				}
			}
		}
		.half.reverse{
			.info{
				flex-direction:row-reverse;
				background-image:linear-gradient(to right, rgba(60, 216, 216, .6), rgba(74, 216, 216, .3), transparent);
				li{padding-left:0.18rem;}
				li:last-child:before{
					left:auto;right:0;
					border-image:linear-gradient(to bottom, transparent 15%, #54909a 50%, transparent 85%) 1;
				}
			}
		}

		/* 弹窗背景图  */
		.popupBgImage{
			background-image:url('/static/images/frame1-min.png');
			background-repeat:no-repeat;background-position:center center;background-size:100% 100%;
		}

		/* 加载动画 */
		.loader {
			position:absolute;top:0;left:0;height:100%;width:100%;
			display:flex;justify-content:center;align-items:center;
			&:before{
				content:"";position:absolute;height:60px;width:60px;
				border: 4px solid #1276E3;
				border-left-color: transparent;
				border-bottom: 0;
				border-radius: 50%;
				animation:loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
			}
			&:after{
				content:"";position:absolute;height:40px;width:40px;
				border-radius: 50%;
				border: 4px solid #1276E3;
				border-right: 0;
				border-top-color: transparent;
				animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
			}
		};

		//video:before{content:"";position:absolute;top:0;left:0;height:100%;width:auto;border:1px solid red;}


		/* 弹窗 */
		.morph1{
			.morphView{
				color:#fff;
				width:0;height:0;
				display:flex;justify-content:center;align-items:center;user-select:none;
                position: relative;
				.content{
					position:absolute;bottom:0;background-color:rgba(0,0,0,.5);border:1px solid #3EB7EA;opacity:1;
				}

				.fixed{
					position:relative;width:5rem;height:1.10rem;margin:.25rem .10rem .10rem;

					.scrolling4{
						position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;color:#e1ffff;
						dt,dd{
							position:relative;
							margin-top:.12rem;line-height:1;padding:.04rem .08rem;
							display:grid;grid-template-columns:33.33% 33.33% 33.33%;text-align:center;

							&:before, &:after{position:absolute;top:0;height:100%;font-size:.22rem;color:#21f1fe;}
							&:before{content:"[";left:0;}
							&:after{content:"]";right:0;}
						}
						dt{background-color:rgba(1,35,62,.7);font-size:.16rem;}
						dd{
							background-color:rgba(2,115,165,.3);font-size:.15rem;
							.red{color:#f9480b;font-weight:bold;}
							.orange{color:#fa750c;}
							.yellow{color:#d9f900;}
							.blue{color:#14b5ff;}
						}
					}

					.scrolling4::-webkit-scrollbar{width:3px;}
				}
				.el-icon-circle-close{
					position:absolute;top:.01rem;right:.01rem;font-size:.25rem;cursor:pointer;
					color:#8CCEE6;
				}
				.el-icon-bell{
					position:absolute;height:.30rem;width:.30rem;
					display:flex;align-items:center;justify-content:center;
					border-radius: 1rem;
					border: 1px solid #10E2F3;
					opacity: 0;
					background-color: rgba(26, 93, 129, .6) !important;
					transform:scale(.5);
					&:before{
						font-size:.23rem;line-height:1;font-weight: bold;
						background-image:linear-gradient(to right, #3BD1F7, #049EC7, #B3E0ED);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					&.close{display:none;}
				}
			}
			.f-prepare{		// 准备
				transition:transition .8s ease 0s;
				.content{
					transition:all .5s ease 0s;
				}
				.el-icon-bell{
					transition: all .5s ease 0s;
				}
			}
			.f-shrink{
				z-index:100;cursor:pointer;transform:scale(1.3);
				&.morphView{
					.content{
						transform:rotateX(0deg) rotateY(0deg) scaleY(0.1) scaleX(0.01);
						transform-origin:center bottom; opacity:0;
					}
				}
				.el-icon-bell{
					opacity:1; transform:scale(1);
				}
				animation:anim-shrink .8s ease both;
			}
			.f-anim-revert{
				//animation:anim-revert .5s ease both;
			}
			@-webkit-keyframes anim-shrink{
				0% {
					transform: translateY(0)
				}
				20% {
					transform: translateY(0)
				}
				100% {
					transform: translate3d(0rem, 0rem, 0rem) scale(1.0);
				}
			}
			@-webkit-keyframes anim-revert{
				0% {
					transform: translate3d(0rem, 14rem, 0rem);
				}
				100% {
					transform: translateY(0)
				}
			}
		}
	}

	/* 登录 */
	.ctn-place{
		background:no-repeat top center url('~@/assets/images/login_banel.png');background-size:100% 100%;
		display:flex;width:280px;height:300px;user-select:none;
		.inbox-range{
			flex:1;margin:23px 28px 0;
			.el-form{
				.title{margin:0 auto;text-align:center;color:#01d6fe;letter-spacing:6px;text-indent:4px;font-size:20px;}
				.t-last{margin:0 auto 20px;}
				.el-form-item{margin-bottom:25px;}
				>div:last-child{margin-top:45px;}
				.el-input__prefix{
					width:30px;left:0;font-size:20px;
					display:flex;align-items:center;justify-content:center;
				}
				.el-form-item__error{display:none;}
				.el-form-item__error.open{display:block}
			}
		}
	}

	@keyframes rotate{
		0%{
			transform: rotate(0)
		}
		100%{
			transform: rotate(360deg)
		}
	}

	@keyframes loader-1-outter {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes loader-1-inner {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}
</style>

<style lang='scss'>
    // 20241207
    .optBtnWrapper{
        display: flex;
        gap: .1rem;
        position: absolute;
        right: -3.4rem;
        align-items: center;
        flex-direction: column;
        top: -0.7rem;
        transform: translateY(-50%);
        .button {
            padding: 0.1rem 0.2rem;
            font-size: 0.16rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .alarm {
            background-color: #f44336; /* 红色 */
        }
        .alarm:hover {
            background-color: #d32f2f; /* 深红色 */
        }
        .stop {
            background-color: #4caf50; /* 绿色 */
        }
        .stop:hover {
            background-color: #388e3c; /* 深绿色 */
        }
    }
</style>