<template>
	<el-container class="dashboard">
		<el-header class="header">
			<div class="title">洁净车间看板</div>
			<div class="timer">{{ currentDay }} {{ currentTime }}</div>
		</el-header>
		<el-main>
			<el-row style="margin-bottom: 1vh;">
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">本月产量</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">今日产量</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">今日工序报工量</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">在产产品数</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">本月完工工单</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">本月计划产量</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">本月产量</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
				<el-col :span="3" class="numBlock">
					<dv-border-box-12>
						<div class="numBlock_title">本月产量</div>
						<div class="numBlock_value">123</div>
					</dv-border-box-12>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<div class="leftBlock">
						<el-row style="margin-bottom: 1vh;">
							<el-col :span="12" class="numBlock">
								<dv-border-box-12>
									<div class="numBlock_title">在制工序数</div>
									<div class="numBlock_value">123</div>
								</dv-border-box-12>
							</el-col>
							<el-col :span="12" class="numBlock">
								<dv-border-box-12>
									<div class="numBlock_title">今日完成工序</div>
									<div class="numBlock_value">123</div>
								</dv-border-box-12>
							</el-col>
						</el-row>
						<div style="height: 34vh;position: relative;">
							<dv-border-box-1>
								<div class="chartBlockTitle">车间各工段生产产品数</div>
								<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
							</dv-border-box-1>
						</div>
						<div style="height: 34vh;">
							<dv-border-box-1>
								<div class="chartBlockTitle">产品占比</div>
								<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
							</dv-border-box-1>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="middleBlock">
						<div style="height: 38vh;">
							<dv-border-box-1>
								<div class="chartBlockTitle">车间工段任务展示</div>
								<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
							</dv-border-box-1>
						</div>
						<div style="height: 41vh;">
							<dv-border-box-1>
								<div class="chartBlockTitle">设备列表</div>
								<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
							</dv-border-box-1>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="rightBlock">
						<el-row style="margin-bottom: 1vh;">
							<el-col :span="12" class="numBlock">
								<dv-border-box-12>
									<div class="numBlock_title">在制工单数</div>
									<div class="numBlock_value">123</div>
								</dv-border-box-12>
							</el-col>
							<el-col :span="12" class="numBlock">
								<dv-border-box-12>
									<div class="numBlock_title">本月交付数</div>
									<div class="numBlock_value">123</div>
								</dv-border-box-12>
							</el-col>
						</el-row>
						<div style="height: 34vh;">
							<dv-border-box-1>
								<div class="chartBlockTitle">每个人日产量</div>
								<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
							</dv-border-box-1>
						</div>
						<div style="height: 34vh;">
							<dv-border-box-1>
								<div class="chartBlockTitle">车间整体产品统计</div>
								<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
							</dv-border-box-1>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
	return JSON.parse(JSON.stringify(obj));
}
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export default {
	components: { scScrollTavle },
	data() {
		return {
      		runningStateEnum,
			basicOption: {
				backgroundColor: "",
				tooltip: {
					trigger: "axis",
				},
				legend: {
					icon: "stack",
					right: 0,
				},
				grid: {
					left: "3%",
					right: "2%",
					bottom: "3%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					boundaryGap: true,
					data: [],
					nameTextStyle: {
						color: "#ffffff",
					},
					axisLabel: {
						color: "#ffffff",
					},
				},
				yAxis: {
					name: "",
					type: "value",
					nameTextStyle: {
						color: "#ffffff",
					},
					axisLabel: {
						color: "#ffffff",
					},
				},
				series: [
					{
						name: "",
						type: "bar",
						barWidth: 30,
						label: {
							show: true,
							position: "top",
							color: "#fff",
						},
						itemStyle: {
							borderRadius: [5, 5, 0, 0],
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{offset: 0,color: "#00aaff"},
								{offset: 1,color: "#0033ff"},
							]),
						},
						data: [1,2,3,4,5,6,7],
					},
				],
			},
			chartOption1:{
				 color: ['#2f89cf'],
				tooltip: {
					trigger: 'axis', 
					axisPointer: { 
						type: 'shadow'
					}
				},
				grid: {
					left: "0%",
					top: "10px",
					right: "0%", 
					bottom: "4%", 
					containLabel: true 
				},
				xAxis: {
						type: 'category',
						data: [], // 类目数据
						axisTick: {
							alignWithLabel: true // 刻度线与标签对齐
						},
						axisLabel: {
							color: "rgb(255,255,255)",
							fontSize: "8", 
						},
						axisLine: {
							show: false
						}
					},
				yAxis: {
					type: 'value', 
					axisLabel: {
					color: "rgba(255,255,255,.6)",
					fontSize: "12"
					},
				},
				// 系列配置
				series: {
					name: 'Direct',
					type: 'bar', 
					barWidth: '15',
					data: [],
					itemStyle: {
						barBorderRadius: 5 
					}
				}
			},
			chartOption2: {
				grid: {
					top: "10%", 
					left: "10%",
					bottom: "5%",
					containLabel: true 
				},
				xAxis: {
					// show: false 
					splitLine: {
					    show:false
					},
				},
				// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
				yAxis: [
				{
					axisLine: {
						show: false 
					},
					axisTick: {
						show: false 
					},
					axisLabel: {
						color: "#fff" 
					},
					splitLine: {
					    show:false
					},
					type: 'category', 
					inverse: true, // 反转坐标轴
					data: [] 
				},
				{
					show: false, 
					axisLine: {
						show: false 
					},
					axisTick: {
						show: false 
					},
					splitLine: {
					    show:false
					},
					axisLabel: { 
						textStyle: {
							fontSize: 12,
							color: "#fff" 
						}
					},
					inverse: true, // 反转坐标轴
					data: [], 
				}
				],
				// 一个柱状图，一个边框
				series: [
					{
						name: '柱状图',
						type: 'bar', 
						data: [], 
						yAxisIndex: 0, 
						barCategoryGap: 50, 
						barWidth: 10,
						itemStyle: {
							normal: {
								barBorderRadius: 5,
								color: function (params) { 
									return myColor[params.dataIndex];
								}
							},
							label: { 
								normal: {
									// show: true, 
									position: "outside",
									color: "#fff",
									// formatter: "{a}"
								}
							}
						},
					},
					{
						name: "框", 
						type: "bar", 
						barCategoryGap: 50,
						barWidth: 12,
						itemStyle: { 
							color: "none",
							shadowColor: '#999', // 阴影颜色
							shadowBlur: 3, // 阴影模糊
							shadowOffsetX: 0, // 阴影水平偏移
							shadowOffsetY: 0, // 阴影垂直偏移 
							borderColor: "rgba(153,153,153,0.6)", // 边框颜色
							borderWidth: 0.5, 
							barBorderRadius: 5,
							
						},
						yAxisIndex: 1, 
						data: [] 
					}
				]
			},
			tableHeight: 100,
			speed: 2000,
			time: null,
			deptId: "",
			dayInterval: null,
			chartInterval2: null,
			state_: {
				10: '完好',
				20: '限用',
				30: '在修',
				40: '禁用',
			},
			configData:{
				header:['物料名称','批次号','数量'],
				headerBGC:'#0a3f44',
				headerHeight:40,
				align:'center',
				data:[],
				waitTime:1000,
			},
			configData1:{
				headerBGC:'#0a3f44',
				header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
				headerHeight:40,
				data:[]
			},
			config_left1:{
				data:[]
			} ,
			config_left2:{
				data:[]
			},
			config_middle_top:{
				rowNum:10,
				headerBGC: 'rgba(47,102,107,.34)',
				oddRowBGC: 'rgba(0,0,0,0)',
				evenRowBGC: 'rgba(0,0,0,0)',
			    header: ['任务编号', '产出产品', '任务量', '合格数'],
				data: []
			},
			config_middle_bottom:{
				rowNum:10,
				headerBGC: 'rgba(0,0,0,0)',
				oddRowBGC: 'rgba(0,0,0,0)',
				evenRowBGC: 'rgba(0,0,0,0)',
				header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
				data: []
			},
			currentTime: "",
			currentDay: "",
			today: "",
			end_time:'',
			start_time:'',
		};
	},
	mounted() {
		this.showTime();
		this.dayInterval = setInterval(() => {
			this.showTime();
		}, 1000);
		//近七天的日期数组
		// let daysArr = this.getMondayOfCurrentWeek();
		// this.daysArr = daysArr;
		// let xAxisData = [];
		// daysArr.forEach((item)=>{
		// 	let dates  = item.split('-');
		// 	let obj = dates[1]+'-'+dates[2];
		// 	xAxisData.push(obj);
		// })
		// this.xAxisData = xAxisData;
		// let startDate = new Date(daysArr[0]).getTime()-(1000*60*60*24);
		// let endDate = new Date(daysArr[6]).getTime()+(1000*60*60*24);
		// let start_time = this.$TOOL.dateFormat(new Date(startDate), "yyyy-MM-dd hh:mm:ss");
		// let end_time = this.$TOOL.dateFormat(new Date(endDate), "yyyy-MM-dd hh:mm:ss");
		// this.start_time = start_time;
		// this.end_time = end_time;
		let userInfo = this.$TOOL.data.get("USER_INFO");
    	this.deptId = userInfo.belong_dept;
    	this.deptName = userInfo.belong_dept_name;
		this.getMgroups();
		this.$nextTick(() => {
			//车间各个工段生产产品的数量：每个工段的已完成
			// this.getmgroupMaterial();
			//车间工段任务展示：各个工段的任务列表
			this.getMtask1();
			//设备列表：各个工段的设备列表
			this.getEquipment();
			//每个人日生产量：个人绩效
			this.getCount();
			//车间整体产品统计：最后一个工序的产品统计
			//产品占比：最后一个工序的产品占比
			// this.getMaterials();// this.getmgroupMaterial();
		})
	},
	methods: {
		getMondayOfCurrentWeek() {
			let today = new Date();
			let days = [];
			for (let i = 6; i >= 0; i--) {
				let date = new Date(today);
				date.setDate(today.getDate() - i);
				days.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
			}
			return days;
		},
		//时间
		showTime() {
			this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
			this.currentDay = this.$TOOL.dateFormat(
				new Date(),
				"yyyy年MM月dd日"
			);
		},
		setChart(name, option = null) {
			var myChart = echarts.getInstanceByDom(document.getElementById(name));
			if (myChart == undefined) {
				myChart = echarts.init(document.getElementById(name), "dark", {
					renderer: "svg",
				});
			}
			if (option == null) {
				option = Object.assign({}, this.basicOption);
			}
			setTimeout(() => {
				try {
					myChart.setOption(option);
				} catch (error) {}
			}, 500);
			return myChart;
		},
		getMgroups(){
			let that = this;
			that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
				if(res.length > 0){
				    res.forEach((item,inde)=>{
				         that.mgroupsId += item.id + ',';
						  that.getmgroupMaterial(item);
						 //未完成的物料
						 if(inde==res.length-1){
							that.getLastmgroupMaterial(item);
						 }
						
				    })
				}
			});
		},
		//任务进度
		getMtask1() {
			let that = this;
			let params = {
				state: 20,mgroup__belong_dept: that.deptId,page:0,
				query: " { id, material_out_name, number, count, count_ok }"
			};
			that.config_middle_top.data = [];
			that.$API.pm.mtask.list.req(params).then((res) => {
				if(res.length>0){
					res.forEach((item) => {
						let arr = [];
						arr[0] = item.number;
						arr[1] = item.material_out_name;
						arr[2] = item.count;
						arr[3] = item.count_ok;
						// arr[4] = item.count_ok/item.count*100+'%';
						that.config_middle_top.data.push(arr);
					})
				}
			});
		},
		//库存统计列表
		getmgroupMaterial(item) {
			let that = this;
			let params = { tag: 'done',page_size:1,mgroup: item.id };
			that.$API.wpm.wmaterial.list.req(params).then((res) => {
				let obj = {};
				obj.name = item.name;
				obj.value = res.count;
				that.config_left1.data.push(obj);
			})
		},
		getLastmgroupMaterial(item){
			let that = this;
			let params = { 
				tag: 'done',page:0,mgroup:  item.id ,
				// query: " { id, material_name }"
			};
			that.$API.wpm.wmaterial.list.req(params).then((res) => {
				if(res.length>0){
					let namelist = [],valuelist = [],values=[];
					res.forEach((item)=>{
						let index = namelist.indexOf(item.material_.name);
						if(index==-1){
							namelist.push(item.material_.name);
							valuelist.push(1);
							values.push(1);
						}else{
							valuelist[index] += 1;
							values[index] += 1;
						}
					})
					let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
					let arr = [];
					valuelist.forEach((item)=>{
					    arr.push(maxNum)
					})
					that.chartOption2.yAxis[0].data = namelist;
					that.chartOption2.yAxis[1].data = valuelist;
					that.chartOption2.series[0].data = valuelist;
					that.chartOption2.series[1].data = arr;
					namelist.forEach((item,index)=>{
						let obj = {};
						obj.name = item;
						obj.value = valuelist[index];
						that.config_left2.data.push(obj);
					})
				}
			})
		},
		getEquipment() {
			let that = this;
			let params = {
				page: 0, belong_dept:that.deptId,
				// query: " { id, name, number, model, state ,mgroup_name }"
			};
			that.config_middle_bottom.data = [];
			that.$API.em.equipment.list.req(params).then((res) => {
			    if(res.length>0){
					res.forEach((item) => {
						let arr = [];
					    let state_ = that.state_[item.state];
						let running_state_ = runningStateEnum[item.running_state]?.text;
						arr[0] = item.name;
						arr[1] = item.number;
						arr[2] = state_;
						arr[3] = running_state_;
						arr[4] = item.mgroup_name;
						that.config_middle_bottom.data.push(arr);
					})
				}
			})
		},
		getCount(){
			let that = this;
			let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
			let params = {
				query: {start_date:date,end_date:date,dept_name:that.deptName},
				// query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
			};
			let namelist = [],valuelist = [];
			this.$API.bi.dataset.exec.req("performance", params).then((res) => {
				if(res.data2.ds0.length>0){
					res.data2.ds0.forEach((item)=>{
					    namelist.push(item.操作人);
						valuelist.push(item.合格数);
					})
				}
				that.chartOption1.xAxis.data = namelist;
				that.chartOption1.series.data = valuelist;
			});
		},
	},
};
</script>
<style scoped>
@font-face {
	font-family: "myfont";
	/* 字体名称 */
	src: url("../../../utils/youShe.ttf");
	/* 字体文件相对路径 */
}

.dashboard {
	background-image: url("/public/img/photon_bg.png");
	color: #fff;
	font-family: "Microsoft Yahei" !important;
	background-size: cover;
}

.header {
	/* background: url("/public/img/head_bg.png"); */
	background: url("/public/img/header_bgv.png");
	border-bottom: none;
	background-size: 100% 100%;
	display: block;
	height: 8vh;
	color: rgb(149, 255, 255);
	font-family: "Microsoft Yahei";
	text-align: center;
	padding: 12px 0px;
}
.header > .title {
	font-weight: bold;
	font-family: "myfont";
	font-size: 32px;
	font-size:4vh;
	letter-spacing: 10px;
}
.header > .timer {
	font-size: 14px;
	margin-top: 18px;
	position: absolute;
	top: 5px;
	left: 20px;
}
.numBlock{
	height: 10vh;
}
.numBlock_title{
	height: 4vh;
	width: 100%;
	font-size: 1.5vh;
	line-height: 4vh;
	text-align: center;
}
.numBlock_value{
	height:6vh;
	width: 100%;
	line-height: 5vh;
	text-align: center;
	font-size: 3vh;
	font-family: "myfont";
}
.leftChartBlock1{
	width: 90%;
	height: 28vh;
	z-index: 999;
	left: 5%;
	border-radius: 3vh;
}
.leftChartBlock2{
	width:100%;
	height: 28vh;
}
.middleTableBlock1{
	width:94%;
	height:31vh;
	position: absolute;
	left: 4%
}
.middleTableBlock2{
	width:94%;
	height:34vh;
	position: absolute;
	left: 4%
}
.chartBlockTitle{
	width: 90%;
	height: 5vh;
	margin: auto;
	line-height: 6vh;
	border-radius: 10px;
	text-align: left;
	padding-left: 10px;
	font-size: 1.6vh;
    font-weight: 600;
	border-bottom: 1px solid rgb(83 198 243);
}
</style>
