<template>
	<div class="container">
		<header class="pageHeader">
			<div class="header_center_text">{{ bigScreenName }}</div>
			<div class="header_left">
				<span>{{ currentYear }}年{{ currentMonth }}月{{ currentDay }}日{{currentWeek}}</span>
			</div>
			<div class="header_right">
				<span>{{ currentTime }}</span>
				<span style="margin: 0 5px;">|</span>
				<img src="img/v_track.png" style="margin-right: 5px;">
				<span>枣庄</span>
			</div>
			<img class="header_bg" src="img/photon_header.png" />
			<div class="header_line header_line1"></div>
			<div class="header_line header_line2"></div>
		</header>
		<div id="model" class="model">
			<div id="loadingScreen">
				<el-progress
					type="circle"
					:percentage="loadedPercent"
					:width="220"
					status="warning"
				>
					<template #default="{ percentage }">
						<div class="loadPercent">{{ percentage }}%</div>
						<div class="loadText">工厂模型加载中</div>
					</template>
				</el-progress>
			</div>
			<canvas id="renderCanvas"></canvas>
		</div>
		<div class="left_block">
			<div class="flexItem">
				<div class="itemTitle">
					<div>任务产量</div>
				</div>
				<div class="itemBody itemBody1">
					<div style="display: flex;justify-content: space-around;">
						<div class="block1NumberWrap">
							<div class="block1Numberinner">
								<span class="block1Text">日产量</span>
								<span class="block1Number">{{ count_day }}</span>
							</div>
						</div>
					</div>
					<div style="display: flex;justify-content: space-around;">
						<div class="block1NumberWrap">
							<div class="block1Numberinner">
								<span class="block1Text">周产量</span>
								<span class="block1Number">{{ count_week }}</span>
							</div>
						</div>
					</div>
					<div style="display: flex;justify-content: space-around;">
						<div class="block1NumberWrap">
							<div class="block1Numberinner">
								<span class="block1Text">月产量</span>
								<span class="block1Number">{{ count_month }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="left_block2">
			<div class="flexItem">
				<div class="itemTitle">
					<div>生产不合格分布统计</div>
				</div>
				<div class="itemBody">
					<div id="notokPieChart" style="width:20vw;height:21vh;"></div>
				</div>
			</div>
		</div>
		<div class="left_block3">
			<div class="flexItem">
				<div class="itemTitle2">
					<div>库存</div>
					<el-carousel height="4vh" :interval="30000" indicator-position="none" 
					style="position: absolute;top: 0;right: 0;width: 100px;">
						<el-carousel-item>
							<div style="color: #ffffff; z-index: 10;font-size: 18px;">成品库</div>
						</el-carousel-item>
						<el-carousel-item>
							<div style="color: #ffffff; z-index: 10;font-size: 18px;">原料库</div>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="itemBody itemBody1">
					<el-carousel height="14vh" :interval="30000" indicator-position="none">
						<el-carousel-item>
							<dv-scroll-board 
								:config="configDataProd" 
								class="boxmain" 
							/>
						</el-carousel-item>
						<el-carousel-item>
							<dv-scroll-board 
								:config="configData30" 
								class="boxmain" 
							/>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div class="flexItem">
				<div class="itemTitle2">
					<div class="itemTitleIcon"></div>
					<div>质量分析</div>
				</div>
				<div class="itemBody3">
						<scEcharts v-if="visibal0" :height="pieHeight" :width="pieWidth" :option="option0"></scEcharts>
						<scEcharts v-if="visibal1" :height="pieHeight" :width="pieWidth" :option="option1"></scEcharts>
						<scEcharts v-if="visibal2" :height="pieHeight" :width="pieWidth" :option="option2"></scEcharts>
						<scEcharts v-if="visibal3" :height="pieHeight" :width="pieWidth" :option="option3"></scEcharts>
					</div>
			</div>
		</div>
		<div class="right_block">
			<div class="flexItem videoFlexItem">
				<div class="itemTitle2">
					<div class="itemTitleIcon"></div>
					<div>实时视频</div>
				</div>
				<div class="itemBody" style="height: 32.5vh;">
					<video width="100%" height="100%" autoplay controls loop>
						<source src="img/gx/gx_video.mp4" type="video/mp4">
					</video>
				</div>
			</div>
			<div class="flexItem newsFlexItem">
				<div class="itemTitle2">
					<div class="itemTitleIcon"></div>
					<div>宣传公告</div>
				</div>
				<div class="itemBody">
					<div class="viewsItem">
						<div class="viewsItem_wrap">
							<img style="float: left;" class="viewsItem_img"  :src="articleObj.poster">
							<article>
								{{ articleObj.content }}
							</article>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom_block">
			<div id="scroll" class="bottom_block2">
				<div class="flexItem3">
					<div class="flexItem3_title">黑化</div>
					<div class="flexItem3Body">
						<dv-scroll-board 
							:config="configData0" 
							class="inmBoxmain" 
						/>
						<scEcharts v-if="visibals0" :width="lineWidth" :height="lineHeight" :option="options0" style="margin-top: 0.5vh;"></scEcharts>
					</div>
				</div>	
				<div class="flexItem3">
					<div class="flexItem3_title">减薄A</div>
					<div class="flexItem3Body">
						<dv-scroll-board 
							:config="configData1" 
							class="inmBoxmain" 
						/>
						<scEcharts v-if="visibals1" :width="lineWidth" :height="lineHeight" :option="options1" style="margin-top: 0.5vh;"></scEcharts>
					</div>
				</div>				
				<div class="flexItem3">
					<div class="flexItem3_title">倒角</div>
					<div class="flexItem3Body">
						<dv-scroll-board 
							:config="configData2" 
							class="inmBoxmain" 
						/>
						<scEcharts v-if="visibals2" :width="lineWidth" :height="lineHeight" :option="options2" style="margin-top: 0.5vh;"></scEcharts>
					</div>
				</div>	
				<div class="flexItem3">
					<div class="flexItem3_title">成品抛</div>
					<div class="flexItem3Body">
						<dv-scroll-board 
							:config="configData3" 
							class="inmBoxmain" 
						/>
						<scEcharts v-if="visibals3" :width="lineWidth" :height="lineHeight" :option="options3" style="margin-top: 0.5vh;"></scEcharts>
					</div>
				</div>	
				<div class="flexItem3">
					<div class="flexItem3_title">检测</div>
					<div class="flexItem3Body">
						<dv-scroll-board 
							:config="configData4" 
							class="inmBoxmain" 
						/>
						<scEcharts v-if="visibals4" :width="lineWidth" :height="lineHeight" :option="options4" style="margin-top: 0.5vh;"></scEcharts>
					</div>
				</div>	
			</div>
		</div>
	</div>
</template>
<script>
import * as echarts from "echarts";
import scEcharts from '@/components/scEcharts';
import config from "@/config";
import "animate.css";
import baseUrl from "@/config";

let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
// 需要时动态加载 Babylon.js 和其他依赖
const loadBabylon = async () => {
  if (BABYLON) return;
  BABYLON = await import('babylonjs');
  BABYLON_GUI = await import('babylonjs-gui');
  BABYLON_GRID = await import('@/utils/gridMaterial');
  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');

  // 配置 Draco 编解码器
  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
  
  // 加载 Babylon.js 加载器
  await import('babylonjs-loaders');
};

const configData={
	header : ['物料批次','未加工','进行中','已完成','合格数'],
	headerBGC : '#0a3f44',
	rowNum : 4,
	headerHeight : 35,
	align : 'center',
	waitTime : 1000,
	columnWidth: [110,68,68,68,68],
	data : [],
}
const baseOption={
	color: ['rgb(255,160,0)','rgb(64,158,255)','rgb(54,256,158)'],
	tooltip: {
		trigger: 'item',
	},
	grid:{
		top: '20%',
		bottom: 0,
	},
	xAxis:{
		type: 'category',
		axisLine: {
			lineStyle: {
				color: '#fff',
			}
		},
		axisLabel: {
			interval: 0,
			rotate: 40,
			fontSize: 10,
			color: '#fff',
		},
		data:[1,2,3,4,5,6,7]
	},
	yAxis:[
		{
			type: 'value',
			// name: '数量',
			axisLine: {
				lineStyle: {
					color: '#fff',
				}
			},
			axisLabel: {
				fontSize: 8,
				color: '#fff',
				top: 10,
			},
			
		},
		{
			type: "value",
			// name: "合格率",
			position: "right",
			alignTicks: true,
			offset: 0,
			axisLine: {
				show: true,
				lineStyle: {
					fontSize: 8,
					color: "rgb(54,256,158)",
				},
			},
			axisLabel: {
				formatter: "{value}",
			},
		}
	],
	legend: {
		itemWidth: 12,
		itemHeight: 12,
		left: 'center',
		top: '0.5%',
		textStyle: {
			color: '#fff',
			fontSize: 10,
		},
	},
	series: [
		{
			name:'生产数',
			type: 'bar',
			barWidth: 10,
			yAxisIndex: 0,
			itemStyle: {
			    borderRadius: [ 5, 5, 0,0]
			},
			data: [0,0,0,0,0,0,0]
		},
		{
			name: '合格数',
			type: 'bar',
			barWidth: 10,
			yAxisIndex: 0,
			itemStyle: {
			    borderRadius: [ 5, 5, 0,0]
			},
			data: [0,0,0,0,0,0,0]
		},
		{
			name: '合格率',
			type: 'line',
			yAxisIndex: 1,
			data: [0,0,0,0,0,0,0]
		}
	]
}
const baseOption2= {
	color: ['rgb(64,158,255)','rgb(255,160,0)'],
	title: {
		text: '棒料',
		left: 'center',
		textStyle:{
			fontSize: 16,
			color: '#fff',
		}
	},
	tooltip: {
		trigger: 'item',
		formatter: '{a} <br/>{b}: {c} ({d}%)'
	},
	legend: {
		itemWidth: 12,
		itemHeight: 12,
		left: 'center',
		bottom: '1%',
		textStyle: {
			color: '#fff',
			fontSize: 10,
		},
	},
	series: {
		type: 'pie',
		radius: ['10%', '60%'],
		center: ['50%', '50%'],
		// label: false,
		itemStyle: {
			borderRadius: 10
		},
		 label: {
			formatter: '{c} ({d}%)',
			position: 'inside',
			textStyle: {
				color: '#fff',
				// color: 'rgb(54,256,158)',
				fontSize: 10,
			},
		},
		data: [
			{value: 0, name: '合格'},
			{value: 0, name: '不合格'},
		]
	}
}
export default {
	components: {
		scEcharts
	},
	data() {
		return {
			initialAlpha: Math.PI / 2,
			initialBeta: Math.PI / 5,
			initialRadius: 2.3,
			initialTarget: null,
			resizeTimeout: null,
			loadedPercent: 0,
			percentage: 25,
			baseUrl: baseUrl.HOST_URL,
			updateTime: "2023-08-17 16:00:00",
			//当前时间
			currentTime: "",
			currentWeek: "",
			currentYear: "",
			currentMonth: "",
			currentDay: "",
			currentDate:"",
			days:0,
			timerTime: null,
			start_date: "",
			end_date: "",
			heightTimer: null,
			count_day:0,
			count_week:0,
			count_month:0,
			myChart: null,
			sectionNames: {
				'地面': "一层",//    
				'一层地面': "一层",// 地面   
				'地面.001': "二层",// 地面   
				'二层地面': "二层",//地面.001
			},
			// 质量分析饼状图option
			option0: {},
			option1: {},
			option2: {},
			option3: {},
			visibal0: false,
			visibal1: false,
			visibal2: false,
			visibal3: false,
			//设备状态饼状图option
			option_eq: {
				color: ['rgb(145,204,117)', '#ffa500 ', 'rgb(250,200,88)', 'rgb(215,102,97)', 'rgb(185,51,46)' ],
				// tooltip: {
				// 	trigger: 'item',
				// 	formatter: '{a} <br/>{b}: {c} ({d}%)'
				// },
				// legend: {
				// 	show:true,
				// 	itemWidth: 12,
				// 	itemHeight: 12,
				// 	orient: 'vertical',
				// 	right: '1%',
				// 	textStyle:{
				// 		color:"#ffffff"
				// 	},
				// },
				series:{
					name:'不良占比分布',
					type: 'pie',
					radius: ['55%', '90%'],
					center: ['50%', '50%'],
					itemStyle: {
						borderRadius: 10,
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center',
						formatter: '{b} {d}%',
						color: '#fff',
						fontSize: 18,
					},
					labelLine: {
						show: true
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 20,
							fontWeight: 'bold'
						}
					},
					data: []
				}
			},
			//成品table数据
			configDataProd:{
				header:['物料名称','物料批次','物料数量'],
				headerBGC:'#0a3f44',
				headerHeight:35,
				align:'center',
				data:[],
				rowNum : 3,
				waitTime:3000,
				columnWidth: [260,260,100],
			},
			//原料table数据
			configData30:{
				header:['物料名称','物料批次','物料数量'],
				headerBGC:'#0a3f44',
				headerHeight:35,
				align:'center',
				data:[],
				rowNum : 3,
				waitTime:3000,
				columnWidth: [260,260,100],
			},
			//工序库存table数据
			configData0:{},
			configData1:{},
			configData2:{},
			configData3:{},
			configData4:{},
			configData5:{},
			scrollNum:0,
			scrollInterval:null,
			//近七天日数组
			dayArr:[],
			visibals0: false,
			visibals1: false,
			visibals2: false,
			visibals3: false,
			visibals4: false,
			//工序柱状图option
			options0:{},
			options1:{},
			options2:{},
			options3:{},
			options4:{},
			articleObj:{},
			videoUrl:'',
			pieWidth:0,
			lineWidth:0,
			pieHeight:0,
			lineHeight:0,
			setIntervals:null,
		};
	},
	mounted() {
		let that = this;
		let nowDate = new Date();
		let firstDay = new Date(nowDate.getTime()-6*24*60*60*1000);
		let start_date = that.$TOOL.dateFormat(firstDay, 'yyyy-MM-dd');
		let end_date = that.$TOOL.dateFormat(nowDate, 'yyyy-MM-dd');
		that.start_date = start_date;
		that.end_date = end_date;
		console.log('that.start_date',that.start_date)
		console.log('that.end_date',that.end_date)
		this.bigScreenName = this.$TOOL.data.get("BASE_INFO").base.bigScreen_name;
		console.log('this.bigScreenName',this.bigScreenName)
		this.showTime();
		loadBabylon().then(()=>{
			this.initView()
		})
		this.timerTime = setInterval(() => {
			this.showTime();
		}, 1000);
	},
	methods: {
		//初始化视图
		initView(){
		    let that = this;
			var windowHeight = window.innerHeight;
			var windowWidth = window.innerWidth;
			that.pieWidth =Math.round((windowWidth/100*33)/4)+'px';
			that.pieHeight = Math.round((windowHeight/100)*14)+'px';
			that.lineWidth = (windowWidth/5-10)+'px';
			that.lineHeight = (windowHeight/100)*12.5+'px';
		
			//一天的毫秒数
			let nowDate = new Date();
			let year = nowDate.getFullYear();
			let month = nowDate.getMonth() + 1;
			let day = nowDate.getDate();
			that.days = new Date(year, month, 0).getDate();
			that.currentYear = year;
			that.currentMonth = month;
			that.currentDay = day;
			let dayArr = [];
			for(let i=6;i>-1;i--){
				let date = new Date(nowDate.getTime()-i*24*60*60*1000);
				let day = date.getDate();
				dayArr.push(day);
			}
			that.dayArr = dayArr;
		
			that.myChart = echarts.init(document.getElementById('notokPieChart'));
			that.myChart.setOption(that.option_eq);
			let index2 = 0;
			that.chartInterval2 = setInterval(function () {
				if (index2 < that.option_eq.series.data.length) {
					that.myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
					});
					that.myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: index2,
					});
					that.myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: index2,
					});
					index2++;
				} else {
					index2 = 0;
				}
			}, 3000);
			that.$nextTick(function () {
				// that.getEquipments();
				that.getCountnotok();
				that.getMaterials();
				that.getMgroup();
				that.getTaskNumber();
				that.getArticles();
				that.getpurinrate();
				that.initFactory();
				that.addListener();
			})
			that.setIntervals = setInterval(function () {
				that.getCountnotok();
				that.getMaterials();
				that.getMgroup();
				that.getTaskNumber();
				that.getArticles();
				that.getpurinrate();
			}, 300000);
		},
		//获取公告和视频
		getArticles(){
			let that = this;
			that.$API.cms.article.list.req({page:0}).then((res) => {
			    if(res.length>0){
					let articleList = [],videoList = [];
					res.forEach((item)=>{
					    if(item.video == ''){
							articleList.push(item);
						}else{
							videoList.push(item);
						}
					})
					that.articleObj = articleList[0];
					that.videoUrl = that.baseUrl+videoList[0].video;
				}
			})
		},
		//时间
		showTime() {
			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
			this.currentWeek = this.$TOOL.dateFormat(new Date(), "week");
			this.currentDate = this.$TOOL.dateFormat(new Date(),"yyyy年MM月dd日");
		},
		//屏幕监听
		addListener() {
			let that = this;
			window.addEventListener("resize", function () {
				if (that.scrollInterval!=null) {
				    clearInterval(that.scrollInterval);
				}
				if (this.resizeTimeout) {
					clearTimeout(this.resizeTimeout);
				}
				// 设置一个新的 resizeTimeout，延迟调整样式
				this.resizeTimeout = setTimeout(function () {
					that.initDomStyle();
				}, 300); // 延迟 300 毫秒，可以根据需要调整
			});
		},
		//初始化模型容器大小
		initDomStyle() {
			let that = this;
			// 获取窗口的总高度
			var windowHeight = window.innerHeight;
			var windowWidth = window.innerWidth;
			var container = document.getElementsByClassName("container")[0];
			var model = document.getElementsByClassName("model")[0];
			that.pieWidth = windowWidth/500*33+'px';
			that.lineWidth = (windowWidth/5-10)+'px';
			that.pieHeight = windowHeight/100*13+'px';
			that.lineHeight = windowHeight/100*12.8+'px';
			if (windowWidth > 960) {
				container.style.overflow = "hidden";
				model.style.position = "absolute";
				model.style.height = windowHeight - 3 + "px";
				model.style.top = 0;
			} else {
				container.style.overflow = "auto";
				var chartHeight = windowWidth * 0.6;
				model.style.position = "relative";
				model.style.height = chartHeight;
			}
			if (that.engine != null) {
				that.engine.resize();
			}
			that.resizeChart();
		},
		//更新图表数据
		resizeChart(name) {
			// 根据name resize chart
			var myChart = echarts.getInstanceByDom(
				document.getElementById(name)
			);
			if (myChart != undefined) {
				myChart.resize();
			}
		},
		//获取日/周/月产量
		getTaskNumber(){
			let that = this;
			let month = that.currentMonth>9?that.currentMonth:'0'+that.currentMonth;
			let day = that.currentDay>9?that.currentDay:'0'+that.currentDay;
			let current_date = that.currentYear+'-'+month+'-'+day;
			let objDay = {query:{start_date:current_date,end_date:current_date,mgroup_name:'二次超洗'}};
			that.$API.bi.dataset.exec.req('lineDay_m2', objDay).then((res0) => {
				if(res0.data2.ds0&&res0.data2.ds0.length>0){
					that.count_day = res0.data2.ds0[0].生产数;
				}
			});
			let ondDayTime = 86400000;
			let nowDate = new Date();
			let week = nowDate.getDay();//当前时间的week数
			let weekFirst = week-1;//第一天对应的天数
			let weekLast = 7-week;//最后一天对应的天数
			let first = that.$TOOL.dateFormat2(new Date(nowDate.getTime() - (weekFirst * ondDayTime)));//本周周一
			let last = that.$TOOL.dateFormat2(new Date(nowDate.getTime() + (weekLast * ondDayTime)));//本周周日
			let objWeek = {query:{
				start_date:first,end_date:last,mgroup_name:'二次超洗',
				group_bys_date:',月,周',order_bys_date:',月,周',
				select_cols_date:', EXTRACT ( MONTH FROM mlog.handle_date) AS 月,EXTRACT(WEEK FROM mlog.handle_date) AS 周'
			}};
			that.$API.bi.dataset.exec.req('lineDay_m2', objWeek).then((res1) => {
				if(res1.data2.ds0&&res1.data2.ds0.length>0){
					that.count_week = res1.data2.ds0[0].生产数;
				}
			});
			let start_month = that.currentYear+'-'+month+'-01';
			let end_month = that.currentYear+'-'+month+'-'+new Date(that.currentYear, month, 0).getDate();
			let objMonth = {query:{
				start_date:start_month,end_date:end_month,mgroup_name:'二次超洗',
				group_bys_date:',月',order_bys_date:',月',
				select_cols_date:', EXTRACT ( MONTH FROM mlog.handle_date) AS 月'
			}};
			that.$API.bi.dataset.exec.req('lineDay_m2', objMonth).then((res2) => {
				if(res2.data2.ds0&&res2.data2.ds0.length>0){
					that.count_month = res2.data2.ds0[0].生产数;
				}
			});
		},
		//不合格分布
		getCountnotok(){
			let that = this;
			let obj = {query:{start_date:that.start_date,end_date:that.end_date}};
			that.$API.bi.dataset.exec.req('notok_dis', obj).then((res) => {
				let seriesData = [];
				if(res.data2.ds0){
					res.data2.ds0.forEach((item) => {
						let obj = {};
						obj.name = item.不合格项;
						obj.value = item.数量;
						seriesData.push(obj);
					})
				}
				that.option_eq.series.data = seriesData;
				that.myChart.setOption({series:{data:seriesData}});
			})
		},
		getpurinrate(){
			let that = this;
			that.visibal0 = true;
			that.option0 = that.deepCopy(baseOption2);
			that.option0.title.text = '原料棒';
			console.log('that.option0',that.option0);
			let obj = {query:{start_date:that.start_date,end_date:that.end_date}};
			that.$API.bi.dataset.exec.req('mio_okrate', obj).then((res)=>{
				if(res.data2.ds0){
					let obj = res.data2.ds0[0];
					that.option0.series.data[0].value = obj.总数-obj.不合格数;
					that.option0.series.data[1].value = obj.不合格数;
				}
			})
		},
		//库存统计列表(原料30库库存和成品10库库存)
		getMaterials() {
			let that = this;
			that.$API.inm.warehouse.batch.req({ page: 0,material__type:10,count__gte:1}).then((res10) => {
				that.configDataProd.data = [];
				if(res10.length>0){
					res10.forEach((item) => {
					    let arr = [];
						arr[0] = item.material_name;
						arr[1] = item.batch;
						arr[2] = item.count;
						that.configDataProd.data.push(arr);
					})
				}
			})
			that.$API.inm.warehouse.batch.req({ page: 0,material__type:30,count__gte:1}).then((res30) => {
				that.configData30.data = [];
				if(res30.length>0){
					res30.forEach((item) => {
					    let arr = [];
						arr[0] = item.material_name;
						arr[1] = item.batch;
						arr[2] = item.count;
						that.configData30.data.push(arr);
					})
				}
			})
		},
		//获取工段中各个批次的数量
		initFactory() {
			let that = this;
			const canvas = document.getElementById("renderCanvas"); // Get the canvas element
			const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
			BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {};
			BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
				document.getElementById("loadingScreen").style.display = "none";
			};
			engine.displayLoadingUI();
			const createScene = function () {
				const scene = new BABYLON.Scene(engine);
				scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
				// 加载背景图片
				const backgroundImage = new BABYLON.Layer("","img/gx/gx_bj.jpg",scene,true);
				const camera = new BABYLON.ArcRotateCamera(
					"camera",
					that.initialAlpha,
					that.initialBeta,
					that.initialRadius,
					new BABYLON.Vector3(0, -4.5, 1.2)
				);
				that.camera = camera;
				that.initialTarget = camera.getTarget();
				camera.upperBetaLimit = Math.PI / 3.1; //无法移动到地面以下
				camera.attachControl(canvas, true);
				camera.maxZ = 1000; // 调整适当的值
				// 相机限制
				camera.lowerRadiusLimit = 29;
				camera.upperRadiusLimit = 50;
				// camera.useAutoRotationBehavior = true;//自动旋转
				// 灯光
				const light = new BABYLON.HemisphericLight(
					"light",
					new BABYLON.Vector3(1, 1, 0)
				);
				light.intensity = 1.8;

				// 全屏GUI
				const advancedTexture =
					BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI(
						"myUI"
					);
				that.myui = advancedTexture;
				// 主控制区
				var control_main = new BABYLON_GUI.StackPanel();
				control_main.isVertical = false;
				control_main.top = "40%";
				control_main.left = "-15%";
				advancedTexture.addControl(control_main);
				var remoteGlbUrl = config.HOST_URL + "/media/model/gx.glb";
				BABYLON.SceneLoader.Append(remoteGlbUrl,"",scene,
					function (evt) {
						var loadedPercent = 0;
						if (evt.lengthComputable) {
							loadedPercent = parseInt(
								(evt.loaded * 100) / evt.total
							);
						} else {
							var dlCount = evt.loaded / (1024 * 1024);
							loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
						}
						that.loadedPercent = loadedPercent;
					}
				);
				return scene;
			};
			const scene = createScene(); //Call the createScene function
			engine.runRenderLoop(function () {
				scene.render();
			});
			this.engine = engine;
			this.scene = scene;
			window.addEventListener("resize", function () {
				engine.resize();
			});
		},
		deepCopy(obj) {
			return JSON.parse(JSON.stringify(obj));
		},
		//获取所有工段
		getMgroup(){
			let that = this;
			that.$API.mtm.mgroup.list.req({page:0}).then((res) => {
			    let data = res;
				that.mgroupsData = res;
				for(let i=0;i<data.length;i++){
					if(data[i].name=='黑化'){
						that.getProcessDatas(data[i].name,0);
						that.getProcessCount(data[i].name,0);
					}else if(data[i].name=='减薄A'){
						that.getProcessDatas(data[i].name,1);
						that.getProcessCount(data[i].name,1);
					}else if(data[i].name=='倒角'){
						that.getProcessDatas(data[i].name,2);
						that.getProcessCount(data[i].name,2);
					}else if(data[i].name=='成品抛'){
						that.getProcessDatas(data[i].name,3);
						that.getProcessCount(data[i].name,3);
					}else if(data[i].name=='外观检验'){
						that.getProcessDatas(data[i].name,4);
						that.getProcessCount(data[i].name,4);
					}
					if(data[i].name=='外协白片抛'){
						that.getProcessCount0(data[i].name,1);
					}else if(data[i].name=='外协一次抛'){
						that.getProcessCount0(data[i].name,2);
					}else if(data[i].name=='外扫'){
						that.getProcessCount0(data[i].name,3);
					}
					
				}
			})
		},
		//获取工序批次数据
		getProcessDatas(name,index){
			let that = this;
			// let month = that.currentMonth>9?that.currentMonth:'0'+that.currentMonth;
			// let day = that.currentDay>9?that.currentDay:'0'+that.currentDay;
			// let current_date = that.currentYear+'-'+month+'-'+day;
			// let obj = {query:{current_date:current_date,mgroup_name:name}};
			// that.$API.bi.dataset.exec.req('batch_search', obj).then((res) => {
			let keys = 'configData'+index;
			that[keys] = that.deepCopy(configData);
			that[keys].data = [];
			that.$API.wpm.ana.batchwork.req({mgroup_name:name}).then((res) => {
				if(res.length>0){
					//根据工段名称分组
					res.forEach((item) => {
						let arr = [];
						arr[0] = item.batch;
						arr[1] = item.count_todo;
						arr[2] = item.count_working;
						arr[3] = item.count_real;
						arr[4] = item.count_ok;
						that[keys].data.push(arr);
					})
				}
			});
		},
		//获取工序近七天的柱状图数据
		getProcessCount(name,index){
			let that = this;
			let visibalKey = 'visibals'+index;
			let optionKey = 'options'+index;
			that[optionKey] = that.deepCopy(baseOption);
			that[optionKey].xAxis.data =that.dayArr;
			that[visibalKey] = true;
			if(index==4){
				that[optionKey].yAxis.pop();
				that[optionKey].series.pop();
			}
			let obj = {query:{end_date:that.end_date,start_date:that.start_date,mgroup_name:name}};
			that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => {
				if(res.data2.ds0){
					let lists = res.data2.ds0;
					if(lists.length>0){
						let data0=[],data1=[],data2=[];
						lists.forEach((item) => {
							let index = that.dayArr.indexOf(item.日);
							data0[index] = item.生产数;
							data1[index] = item.合格数;
							data2[index] = item.合格率;
						})
						that[optionKey].series[0].data = data0;
						that[optionKey].series[1].data = data1;
					}
				}
			});
		},
		//获取质量分析饼状图数据
		getProcessCount0(name,index){
			let that = this;
			let visibalKey = 'visibal'+index;
			let optionKey = 'option'+index;
			that[optionKey] = that.deepCopy(baseOption2);
			that[visibalKey] = true;
			if(index==1){
				that.option1.title.text = '白片抛';
			}else if(index==2){
				that.option2.title.text = '一次抛';
			}else if(index==3){
				that.option3.title.text = '外形抛光';
			}
			let obj = {query:{end_date:that.end_date,start_date:that.start_date,mgroup_name:name}};
			that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => {
				if(res.data2.ds0){
					let lists = res.data2.ds0;
					if(lists.length>0){
						let count_ok=0 ,count_notok=0;
						lists.forEach((item) => {
							count_ok += Number(item.合格数);
							count_notok += Number(item.不合格数) ;
						})
						that[optionKey].series.data[0].value = count_ok;
						that[optionKey].series.data[1].value = count_notok;
					}
				}
			});
		},
	},
	beforeUnmount() {
		let that = this;
		this.scene = null;
		clearInterval(that.timerTime);
		clearInterval(that.scrollInterval);
		clearInterval(that.setIntervals);
		that.timerTime = null;
		that.scrollInterval = null;
		that.setIntervals = null;
	},
	beforeDestoryed() {
		let that = this;
		this.scene = null;
		clearInterval(that.timerTime);
		clearInterval(that.scrollInterval);
		clearInterval(that.setIntervals);
		that.timerTime = null;
		that.scrollInterval = null;
		that.setIntervals = null;
	},
};
</script>
<style scoped>
@font-face {
	font-family: "myfont";
	/* 字体名称 */
	src: url("../../utils/youShe.ttf");
	/* 字体文件相对路径 */
}
.loadPercent{
	font-size: 30px;
	color: white;
	font-weight: bold;
}
.loadText{
	font-size: 18px;
	color: white;
	margin-top: 10px;
}
.container {
	/* background: url("/public/img/gx/gx_bj.jpg") no-repeat; */
	background-size: cover;
	height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
}
/* header-start */
.pageHeader {
	z-index: 100;
	height: 6.48vh;
	width: 100vw;
	padding: 0 1vw;
	line-height:6.48vh;
	color: #ffffff;
	position: absolute;
	text-align: center;
	box-sizing: border-box;
	justify-content: space-between;
	/* border-bottom: 1px solid rgba(54, 217, 187, 0.3); */
}
.header_left{
	position: absolute;top: 0;left: 1vw;font-size: 18px;
}
 .header_center_text{
	font-family: myfont;letter-spacing: 0.2em; font-size: 3vh;line-height:5vh;z-index: 100;
 }
.header_right{
	position: absolute;top: 0;right: 1vw;font-size: 18px;
}
.header_bg{
	z-index: -1;position: absolute;top:0;left:0;width:100vw;height:6.48vh;
}
.header_line{
	top:6vh;
	height: 1px;
	position: absolute;
	background: rgb(54,217,187);
}
.header_line1{
	width: 0.5vw;
	right: 8vw;
}
.header_line2{
	width: 1.5vw;
	right: 4vw;
}
/* header-end */

/* 两边的模块 */
.left_block,
.left_block2,
.right_block{
	top:6.48vh;
	width:16.5vw;
	z-index: 10;
	display: flex;
	position:absolute;
	overflow:hidden;
	flex-direction: column;
	padding: 0 5px;
	height: 20vh;
	box-sizing: border-box;
	background: rgba(9, 31, 43, 0.5);
}
.left_block{
	width:13vw;
}
.left_block2{
	width:20vw;
}
.left_block3{
	top:31.48vh;
	left: 0;
	width:33vw;
	display: flex;
	position:absolute;
	overflow:hidden;
	flex-direction: column;
	padding: 0 5px;
	height: 37vh;
	background: rgba(9, 31, 43, 0.5);
}
.left_block3 .flexItem{
    width:32.8vw;
	height: 38vh;
}
.left_block {
	left: 0;
	height: 25vh;
}
.right_block {
	right: 0;
	width:33vw;
	height: 62vh;
}
.left_block2{
	left: 13vw;
	height: 25vh;
	padding: 0 5px;
}
.left_block2 .flexItem{
    width:16vw;
}
.flexItem{
	width: 16.5vw;
}
.left_block>.flexItem,.left_block>.flexItem>.itemTitle{
	width:13vw;
}
.left_block2>.flexItem,.left_block2>.flexItem>.itemTitle{
	width:20vw;
}
.videoFlexItem{
	width: 32.8vw;
	height: 37vh;
}
.newsFlexItem{
	width: 32.8vw;
	height: 25vh;
}
/* //短标题 */
.itemTitle{
	color: #fff;
    height: 4.2vh;
    padding-left: 1.5em;
    font-size: 1.3vh;
    line-height: 4vh;
    width: 16vw;
	background-size: 100% 100%;
	background-image: url("/public/img/gx/title_bg2.png");
}
/* //长标题 */
.itemTitle2 {
	color: #fff;
	height:4.2vh;
	padding-left: 1.5em;
	font-size: 1.3vh;
    line-height: 4vh;
	background: url("/public/img/gx/title_bg.png") ;
	background-size: 100% 100%;
	display: flex;
	position: relative;
}
/* 下面的工序表格标题 */

.itemTitle_b{
	height: 40px;
	line-height: 40px;
	width: 370px;
	font-size: 14px;
	padding-left: 2.5em;
}

.block1NumberWrap{
	width:11vw;
	border: 1px solid rgba(54, 217, 187, 0.3);
	padding: 3px;
	text-align: center;
}
.block1Numberinner{
	background: rgba(54, 217, 187, 0.3);
	color: #fff;
	height: 6vh;
    line-height: 7.5vh;
	position: relative;
}
.block1Text{
	top: 0;
	left: 10px;
	height: 2vh;
	line-height: 2vh;
	position: absolute;
	font-size: 0.8vh;
}
.block1Number{
	font-size: 3vh;
	vertical-align: bottom;
	margin: 0 0.5em;
	color: orange;
	font-weight: bold;
}
.itemBody {
	width: 100%;
	border-radius: 20px;
	/* margin-top: 5px; */
}
.itemBody1{
	display: flex;
	flex-direction: column;
	justify-content:space-around;
}
.eqItem{
	width: 50%;
	display: inline-block;
}
.inmItemBody{
	display: flex;
}
.boxmain{
	height: 13vh;
	width:100%;
	margin:auto;
}
/* 下面的工序表模块 */
.bottom_block{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 31vh;
	overflow: hidden;
}
.bottom_block2{
	width: 300%;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 31.4vh;
	display: flex;
	transition: left 2s ease;
}

.flexItem3 {
	width: 20vw;
	height: 31.5vh;
	position: relative;
	background: rgba(9, 31, 43, 0.5)
}
.flexItem3_title{
	left: 50%;
    width: 7.8vw;
    height: 2.8vh;
    line-height: 2.5vh;
    font-size: 16px;
    color: #00ffff;
    text-align: center;
    border: 1px solid #00ffff;
    border-radius: 5px;
    box-shadow: inset 0 0 5px 5px rgb(0 255 255 / 32%);
    z-index: 99;
    position: absolute;
    top: 0.6vh;
    transform: translateX(-50%);
    background: rgb(4 50 83);
}
.flexItem3Body{
	width: 19.8vw;
    height: 28.5vh;
    padding-top: 2vh;
    border: 1px solid #00ffff;
    border-radius: 5px;
    position: absolute;
    top: 2vh;
    box-shadow: inset 0 0 15px 5px rgb(0 255 255 / 32%);
}

.inmBoxmain{
	flex: 1;
	height:12.4vh;
	width:98%;
	margin:auto;
	/* margin-bottom: 0.5vh; */
	/* border-left: 2px solid #0f5b8e; */
	box-shadow: -4px 0px 4px -1px #0f5b8e;
}
.itemBody3{
	display: flex;
}
.viewsItem {
	color: #ffffff;
    width: 32.3vw;
    height: 9.26vh;
    font-size: 15px;
    display: inline-block;
    margin-bottom: 1vh;
}
.viewsItem_wrap {
	/* height: 9.26vh; */
	flex-direction: column;
	/* border-left: 5px solid rgba(28, 169, 231, 0.81); */
	padding-left: 10px;
	border-radius: 5px;
}
.viewsItem_img{
	height: 20vh;
	width: 49%;
}
article{
	font-size: 12px;
	margin-top: 5px;
	text-indent: 2em;
	display: -webkit-box;
	-webkit-line-clamp: 13;  /* 限制显示 5 行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

}

/deep/ .header-item{
    padding: 0 5px!important;
	font-size: 12px!important;
}
/deep/ .dv-scroll-board .rows .ceil {
    font-size: 12px!important;
    padding: 0 5px!important;
}
.model {
	top: 0;
	width: 100%;
	height: 100%;
}

#renderCanvas {
	width: 100%;
	height: 100%;
}

#loadingScreen {
	position: absolute;
	width: 100%;
	top: 260px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

.numberFont {
	font-size: 22px;
	font-weight: bold;
}

.numberUnit {
	font-size: 12px;
}


</style>
