From 1793a41dfb650f5b1b6b7c90d3434e87b5a43609 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 26 Aug 2024 09:02:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=BB=91=E5=8C=96=E8=BD=A6=E9=97=B4?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_heihuadept.vue | 992 +++++++++++++++++++++++
 1 file changed, 992 insertions(+)
 create mode 100644 src/views/bigScreen/index_heihuadept.vue

diff --git a/src/views/bigScreen/index_heihuadept.vue b/src/views/bigScreen/index_heihuadept.vue
new file mode 100644
index 00000000..a6be8cfd
--- /dev/null
+++ b/src/views/bigScreen/index_heihuadept.vue
@@ -0,0 +1,992 @@
+<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="height: 30%" :gutter="10">
+				<el-col :xs="7" :md="7" style="height: 100%">
+					<div class="box">
+						<div class="boxtitle bgimg">
+							<div class="boxlabel">昨日黑化合格统计</div>
+						</div>
+						<div style="height: 4px"></div>
+						<div class="boxmain bigdata border">
+							<div v-for="item in yesHeihuaData" :key="item.物料名" class="lineDiv">
+								<span>{{ item.物料名 }}</span>
+								<span class="boxmainItemNumber">{{item.合格数}}</span>
+							</div>
+						</div>
+					</div>
+				</el-col>
+				<el-col :xs="7" :md="7">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">
+								昨日黑化不合格统计
+							</div>
+						</div>
+						<div class="boxmain" id="pieChart1"></div>
+					</div>
+				</el-col>
+				<el-col :xs="10" :md="10" style="height: 100%">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">黑化任务进度</div>
+						</div>
+						<div style="height: 2px"></div>
+						<div class="boxmain" id="scrollContainer">
+							<scScrollTavle
+								v-if="table1Visible"
+								:tableHeight="tableHeight"
+								:rowData="processData1"
+								:titleData="liData"
+								:refValue="refValue1"
+							></scScrollTavle>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+			<div style="height: 0.3%"></div>
+			<!-- 退火 -->
+			<el-row style="height: 30%" :gutter="10">
+				<el-col :xs="7" :md="7" style="height: 100%">
+					<div class="box">
+						<div class="boxtitle bgimg">
+							<div class="boxlabel">昨日退火合格统计</div>
+						</div>
+						<div style="height: 4px"></div>
+						<div class="boxmain bigdata border">
+							<!-- flex_center -->
+							<div v-for="item in yesTuihuoData" :key="item.物料名"  class="lineDiv">
+								<span>{{ item.物料名 }}</span>
+								<span class="boxmainItemNumber">{{item.合格数}}</span>
+							</div>
+						</div>
+					</div>
+				</el-col>
+				<el-col :xs="7" :md="7">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">
+								昨日退火不合格统计
+							</div>
+						</div>
+						<div class="boxmain" id="pieChart2"></div>
+					</div>
+				</el-col>
+				<el-col :xs="10" :md="10" style="height: 100%">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">退火任务进度</div>
+						</div>
+						<div style="height: 2px"></div>
+						<div class="boxmain" id="scrollContainer">
+							<scScrollTavle
+								v-if="table2Visible"
+								:tableHeight="tableHeight"
+								:rowData="processData2"
+								:titleData="liData"
+								:refValue="refValue2"
+							></scScrollTavle>
+						</div>
+					</div>
+					
+				</el-col>
+			</el-row>
+			<!-- 合格数/合格率 -->
+			<div style="height: 0.3%"></div>
+			<el-row style="height: 39%" :gutter="10">
+				<el-col :xs="24" :md="12">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">黑化车间本月合格数统计</div>
+						</div>
+						<div class="boxmain" id="chart1"></div>
+					</div>
+				</el-col>
+				<el-col :xs="24" :md="12">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">黑化车间本月合格率统计</div>
+						</div>
+						<div class="boxmain" id="chart2"></div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import scScrollTavle from "@/components/scScrollTable.vue";
+function deepCopy(obj) {
+	return JSON.parse(JSON.stringify(obj));
+}
+export default {
+	components: { scScrollTavle },
+	data() {
+		return {
+			basicOption: {
+				backgroundColor: "",
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						type: "cross",
+						label: {
+							backgroundColor: "#6a7985",
+						},
+					},
+				},
+				legend: {
+					icon: "stack",
+					right: 0,
+					data: [
+						{
+							backgroundColor: "rgb(1,235,239)",
+							name: "黑化",
+							itemStyle: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgb(250,205,0)",
+										},
+										{
+											offset: 1,
+											color: "rgb(254,129,0)",
+										},
+									]
+								),
+							},
+							textStyle: {
+								color: "#fff",
+							},
+						},
+						{
+							backgroundColor: "rgb(250,205,0)",
+							name: "退火",
+							itemStyle: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgb(1,235,239)",
+										},
+										{
+											offset: 1,
+											color: "rgb(5, 158, 163)",
+										},
+									]
+								),
+							},
+							textStyle: {
+								color: "#fff",
+							},
+						},
+					],
+				},
+				toolbox: {
+					feature: {
+						// saveAsImage: {}
+					},
+				},
+				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",
+					},
+					splitLine: {
+						show: false,
+						lineStyle: {
+							type: "dashed", //y轴分割线类型
+							color: "rgba(102,102,102,0.9)",
+							width: 1,
+						},
+					},
+				},
+				series: [
+					{
+						name: "黑化",
+						type: "bar",
+						// stack: "Ad",
+						barWidth: 10,
+						emphasis: {
+							focus: "series",
+						},
+						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: "rgb(250,205,0)",
+									},
+									{
+										offset: 1,
+										color: "rgb(254,129,0)",
+									},
+								]
+							),
+						},
+						areaStyle: {
+							opacity: 0.8,
+							color: new echarts.graphic.LinearGradient(
+								0,
+								0,
+								0,
+								1,
+								[
+									{
+										offset: 0,
+										color: "rgb(250,205,0)",
+									},
+									{
+										offset: 1,
+										color: "rgb(254,129,0)",
+									},
+								]
+							),
+						},
+						smooth: true,
+						// lineStyle: {
+						// 	width: 1,
+						// 	color: "rgb(1,235,239)",
+						// },
+						data: [],
+					},
+					{
+						name: "退火",
+						type: "bar",
+						// stack: "Ad",
+						barWidth: 10,
+						emphasis: {
+							focus: "series",
+						},
+						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: "rgb(1,235,239)",
+									},
+									{
+										offset: 1,
+										color: "rgb(5, 158, 163)",
+									},
+								]
+							),
+						},
+						areaStyle: {
+							opacity: 0.8,
+							color: new echarts.graphic.LinearGradient(
+								0,
+								0,
+								0,
+								1,
+								[
+									{
+										offset: 0,
+										color: "rgb(1,235,239)",
+									},
+									{
+										offset: 1,
+										color: "rgb(5, 158, 163)",
+									},
+								]
+							),
+						},
+						smooth: true,
+						// lineStyle: {
+						// 	width: 1,
+						// 	color: "rgb(1,235,239)",
+						// },
+						data: [10,50,80,60,65,58,70,80,90,100,110,120],
+					},
+				],
+			},
+			pieOption: {
+				backgroundColor: "",
+				tooltip: {
+					trigger: "item",
+				},
+				legend: {
+					top: "bottom",
+				},
+				series: {
+					name: "不合格统计",
+					type: "pie",
+					radius: "50%",
+					itemStyle: {
+						borderRadius: 2,
+					},
+					center: ["50%", "45%"],
+					data: [
+					{ value: 0, name: "划伤" },
+					{ value: 0, name: "气泡" },
+					{ value: 0, name: "水纹" },
+					{ value: 0, name: "崩边" },
+					{ value: 0, name: "雾面" },
+					{ value: 0, name: "麻点" },
+					{ value: 0, name: "线痕" },
+					{ value: 0, name: "破损" },
+					{ value: 0, name: "其他" },
+					],
+					emphasis: {
+						itemStyle: {
+							shadowBlur: 10,
+							shadowOffsetX: 0,
+							shadowColor: "rgba(0, 0, 0, 0.5)",
+						},
+					},
+				},
+			},
+			tableHeight: 100,
+			table1Visible: false,
+			table2Visible: false,
+			refValue1: "moocBox1",
+			refValue2: "moocBox2",
+			liData: ["序号","产出名称","规格","型号","开始时间","结束时间","完成进度","产量","状态"],
+			processData1: [],
+			processData2: [],
+			todayMtask: [],
+			speed: 2000,
+			myScroll: null,
+			iliHeight: 30,
+			time: null,
+			delay: 20,
+			start_date: "",
+			end_date: "",
+			yesterday: "",
+			dayInterval: null,
+			chartInterval1: null,
+			chartInterval2: null,
+			chartInterval3: null,
+			stateOption: {
+				30: "生产中",
+				40: "已完成",
+			},
+			currentTime: "",
+			currentDay: "",
+			today: "",
+			yesterdayObjet: {},
+			yesHeihuaData:[
+				{年: 2024, 月: 7, 日: 5, 物料名: "CNC_黑化", 生产数: 260, 合格数: 240, 不合格数: 0, 划伤: 0, 气泡: 0, 水纹: 0, 崩边: 0, 雾面: 0,麻点:0},
+			],
+			yesTuihuoData:[
+				{年: 2024, 月: 7, 日: 5, 物料名: "CNC_退火", 生产数: 250, 合格数: 240, 不合格数: 0, 划伤: 0, 气泡: 0, 水纹: 0, 崩边: 0, 雾面: 0,麻点:0},
+			],
+		};
+	},
+	mounted() {
+		//表格table的高度
+		this.tableHeight = document.getElementById("scrollContainer").clientHeight;
+		this.table1Visible = true;
+		this.table2Visible = true;
+
+		this.showTime();
+		this.dayInterval = setInterval(() => {
+			this.showTime();
+		}, 1000);
+		let date = new Date();
+		let year = date.getFullYear();
+		let month = date.getMonth() + 1;
+		let day = date.getDate();
+		let days = new Date(year, month, 0).getDate();
+		this.days = days;
+		this.currentYear = year;
+		this.currentMonth = month;
+		this.currentDay = day;
+		month = month < 10 ? "0" + month : month;
+		this.start_date = year + "-" + month + "-01";
+		this.end_date =
+			year + "-" + month + "-" + new Date(year, month, 0).getDate();
+		this.today = year + "-" + month + "-" + day;
+		let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
+		this.yesterday =
+			yesterday.getFullYear() +
+			"-" +
+			(yesterday.getMonth() + 1) +
+			"-" +
+			yesterday.getDate();
+		this.getProductLine1();
+		// this.getProductLine2();
+		this.getMtask1();
+		this.getMtask2();
+	},
+	methods: {
+		//时间
+		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) {
+			// 根据name 渲染数据, option需填写，否则option为模拟数据
+			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;
+		},
+		//黑化合格数统计
+		getProductLine1() {
+			let that = this;
+			let obj = {
+				query: {
+					start_date: that.start_date,
+					end_date: that.end_date,
+					mgroup_name: "黑化",
+					"group_bys_material": "",
+					"order_bys_material": "",
+					"select_cols_material": "",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineDay_m", obj).then((res) => {
+				console.log("本月黑化生产统计:", res);
+				let list2 = res.data2.ds0;
+				let seriesData1 = [],
+					seriesData2 = [],
+					seriesData3 = [];
+				for (let i = 0; i < that.days; i++) {
+					seriesData1[i] = 0;
+					seriesData2[i] = 0;
+				}
+				if (list2.length > 0) {
+					list2.forEach((item2) => {
+						let index2 = item2.日 - 1;
+						//合格率=当天的合格数/当天的总生产数
+						seriesData1[index2] += item2.合格数;
+						seriesData2[index2] += item2.生产数;
+					});
+				}
+				for (let i = 0; i < that.days; i++) {
+					if(seriesData2[i]>0&&seriesData1[i] >=0){
+						seriesData3[i] = Math.round(seriesData1[i]/seriesData2[i])*100 ;
+					}else{
+						seriesData3[i]=0;
+					}
+				}
+				let chart1Option = deepCopy(this.basicOption);
+				let chart2Option = deepCopy(this.basicOption);
+
+				
+				chart1Option.series[0].data = seriesData1;
+				chart2Option.series[0].type = 'line';
+				chart2Option.series[0].data = seriesData3;
+				that.getProductLine2(chart1Option,chart2Option);
+			});
+
+			//黑化生产昨日统计
+			let obj2 = {
+				query: {
+					start_date: that.yesterday,
+					end_date: that.yesterday,
+					mgroup_name: "黑化",
+					"group_bys_material": "",
+					"order_bys_material": "",
+					"select_cols_material": "",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineDay_m", obj2).then((res2) => {
+				// console.log("黑化生产昨日统计:", res2);
+				that.yesHeihuaData = res2.data2.ds0;
+				let pieOption = deepCopy(that.pieOption);
+				if (res2.data2.ds0.length > 0) {
+					res2.data2.ds0.forEach((item) => {
+						pieOption.series.data[0].value += item.划伤;
+						pieOption.series.data[1].value += item.气泡;
+						pieOption.series.data[2].value = item.水纹;
+						pieOption.series.data[3].value = item.崩边;
+						pieOption.series.data[4].value = item.雾面;
+						pieOption.series.data[5].value = item.麻点;
+						pieOption.series.data[5].value = item.线痕;
+						pieOption.series.data[5].value = item.破损;
+						pieOption.series.data[5].value = item.其他;
+					});
+				}
+				let pieChart1 = this.setChart("pieChart1", pieOption);
+				let index1 = 0;
+				this.chartInterval3 = setInterval(function () {
+					if (index1 < that.pieOption.series.data.length) {
+						pieChart1.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						pieChart1.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index1,
+						});
+						pieChart1.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index1,
+						});
+						index1++;
+					} else {
+						index1 = 0;
+					}
+				}, 3000);
+				debugger;
+			});
+		},
+		//退火合格数统计
+		getProductLine2(chart1Option,chart2Option) {
+			let that = this;
+			let obj = {
+				query: {
+					start_date: that.start_date,
+					end_date: that.end_date,
+					mgroup_name: "退火",
+					"group_bys_material": "",
+					"order_bys_material": "",
+					"select_cols_material": "",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineDay_m", obj).then((res) => {
+				// console.log("本月退火生产统计:", res);
+				let list = res.data2.ds0;
+				let seriesData1 = [],
+					seriesData2 = [],
+					seriesData3 = [],
+					xAxisData = [];
+				for (let i = 0; i < that.days; i++) {
+					let day = i + 1;
+					let text = day + "日";
+					xAxisData[i] = text;
+					seriesData1[i] = 0;
+					seriesData2[i] = 0;
+				}
+				if (list.length > 0) {
+					list.forEach((item2) => {
+						let index2 = item2.日 - 1;
+						seriesData1[index2] += item2.合格数;
+						seriesData2[index2] += item2.生产数;
+					});
+				}
+				for (let i = 0; i < that.days; i++) {
+					if(seriesData2[i]>0&&seriesData1[i] >=0){
+						seriesData3[i] = Math.round(seriesData1[i]/seriesData2[i])*100 ;
+					}else{
+						seriesData3[i]=0;
+					}
+				}
+				chart1Option.xAxis.data = xAxisData;
+				chart2Option.xAxis.data = xAxisData;
+
+				
+				chart1Option.series[1].data = seriesData1;
+				chart2Option.series[1].type = 'line';
+				chart2Option.series[1].data = seriesData3;
+
+				let chart1 = this.setChart("chart1", chart1Option);
+				let chart2 = this.setChart("chart2", chart2Option);
+				
+				let index2 = 0;
+				this.chartInterval2 = setInterval(function () {
+					if (index2 < chart1Option.series[0].data.length) {
+						chart2.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						chart2.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						chart2.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						chart1.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						chart1.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						chart1.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						index2++;
+					} else {
+						index2 = 0;
+					}
+				}, 3000);
+			});
+			
+			//车间生产昨日统计 
+			let obj2 = {
+				query: {
+					start_date: that.yesterday,
+					end_date: that.yesterday,
+					mgroup_name: "退火",
+					"group_bys_material": "",
+					"order_bys_material": "",
+					"select_cols_material": "",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineDay_m", obj2).then((res2) => {
+				// console.log("车间生产昨日统计:", res2);
+				that.yesTuihuoData = res2.data2.ds0;
+				let pieOption = deepCopy(that.pieOption);
+				if (res2.data2.ds0.length > 0) {
+					res2.data2.ds0.forEach((item) => {
+						pieOption.series.data[0].value += item.划伤;
+						pieOption.series.data[1].value += item.气泡;
+						pieOption.series.data[2].value = item.水纹;
+						pieOption.series.data[3].value = item.崩边;
+						pieOption.series.data[4].value = item.雾面;
+						pieOption.series.data[5].value = item.麻点;
+						pieOption.series.data[5].value = item.线痕;
+						pieOption.series.data[5].value = item.破损;
+						pieOption.series.data[5].value = item.其他;
+					});
+				}
+				let pieChart2 = this.setChart("pieChart2", pieOption);
+				let index2 = 0;
+				this.chartInterval3 = setInterval(function () {
+					if (index2 < pieOption.series.data.length) {
+						pieChart2.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						pieChart2.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						pieChart2.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						index2++;
+					} else {
+						index2 = 0;
+					}
+				}, 3000);
+				debugger;
+			});
+		},
+		//黑化任务进度
+		getMtask1() {
+			let that = this;
+			that.$API.mtm.mgroup.list.req({ page: 0, search: '黑化'})
+			.then((res) => {
+				if(res.length != 1){
+					that.$message.error("获取工段错误");
+					return;
+				}
+				let mgroup = res[0].id;
+				let obj = {};
+				// obj.start_date__gte = this.start_date;
+				// obj.end_date__lte = this.end_date;
+				obj.mgroup = mgroup;
+				obj.page = 0;
+				that.$API.pm.mtask.list.req(obj).then((res) => {
+					let processData = [];
+					res.forEach((item) => {
+						let arr = [],
+							obj1 = {},
+							obj2 = {},
+							obj3 = {},
+							obj4 = {},
+							obj5 = {},
+							obj6 = {},
+							obj7 = {},
+							obj8 = {};
+						obj1.elType = "primary";
+						obj1.value = item.material_out_.name;
+						obj2.elType = "primary";
+						obj2.value = item.material_out_.specification;
+						obj8.elType = "primary";
+						obj8.value = item.material_out_.model;
+						obj3.elType = "primary";
+						obj3.value = item.start_date;
+						obj4.elType = "primary";
+						obj4.value = item.end_date;
+						obj5.elType = "progress";
+						let process = Math.round(
+							(item.count_ok / item.count) * 100
+						);
+						obj5.value = process;
+						obj6.elType = "primary";
+						obj6.value = item.count_ok;
+						obj7.elType = "tag";
+						obj7.value = item.state;
+						arr.push(obj1);
+						arr.push(obj2);
+						arr.push(obj8);
+						arr.push(obj3);
+						arr.push(obj4);
+						arr.push(obj5);
+						arr.push(obj6);
+						arr.push(obj7);
+						processData.push(arr);
+					});
+					this.processData1 = processData;
+				});
+			});
+		},
+		//退火任务进度
+		getMtask2() {
+			let that = this;
+			that.$API.mtm.mgroup.list.req({ page: 0, search: '退火'})
+			.then((res) => {
+				if(res.length != 1){
+					that.$message.error("获取工段错误");
+					return;
+				}
+				let mgroup = res[0].id;
+				let obj = {};
+				// obj.start_date__gte = this.start_date;
+				// obj.end_date__lte = this.end_date;
+				obj.mgroup = mgroup;
+				obj.page = 0;
+				that.$API.pm.mtask.list.req(obj).then((res) => {
+					let processData = [];
+					res.forEach((item) => {
+						let arr = [],
+							obj1 = {},
+							obj2 = {},
+							obj3 = {},
+							obj4 = {},
+							obj5 = {},
+							obj6 = {},
+							obj7 = {},
+							obj8 = {};
+						obj1.elType = "primary";
+						obj1.value = item.material_out_.name;
+						obj2.elType = "primary";
+						obj2.value = item.material_out_.specification;
+						obj8.elType = "primary";
+						obj8.value = item.material_out_.model;
+						obj3.elType = "primary";
+						obj3.value = item.start_date;
+						obj4.elType = "primary";
+						obj4.value = item.end_date;
+						obj5.elType = "progress";
+						let process = Math.round(
+							(item.count_ok / item.count) * 100
+						);
+						obj5.value = process;
+						obj6.elType = "primary";
+						obj6.value = item.count_ok;
+						obj7.elType = "tag";
+						obj7.value = item.state;
+						arr.push(obj1);
+						arr.push(obj2);
+						arr.push(obj8);
+						arr.push(obj3);
+						arr.push(obj4);
+						arr.push(obj5);
+						arr.push(obj6);
+						arr.push(obj7);
+						processData.push(arr);
+					});
+					this.processData2 = processData;
+				});
+			});
+		},
+	},
+};
+</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/photon_header.png");
+	border-bottom: none;
+	background-size: 100% 100%;
+	font-size: 26px;
+	display: block;
+	height: 80px;
+	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;
+}
+.header > .timer {
+	font-size: 14px;
+	margin-top: 18px;
+}
+.box {
+	background: rgba(10, 63, 68, 0.5);
+	height: 100%;
+}
+
+.boxtitle {
+	color: #fff;
+	font-size: 16px;
+	display: flex;
+	height: 36px;
+	background: linear-gradient(
+		40deg,
+		rgba(11, 101, 140, 0.451),
+		rgba(0, 34, 48, 0.335),
+		rgba(11, 101, 140, 0.451)
+	);
+}
+
+.bgimg {
+	background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png");
+	background-size: 140% 100%;
+}
+
+.boxlabel {
+	margin-left: 6px;
+	font-size: 18px;
+	margin-top: 6px;
+}
+
+.boxmain {
+	height: calc(100% - 40px);
+}
+.lineDiv {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 0.5em;
+}
+ .boxmainItemNumber {
+	color: rgb(42,234,200);
+	margin-left: 10px;
+	font-weight: bold;
+	font-face:24px;
+	font-family: electronicFont;
+}
+@media screen and (max-width: 800px) {
+	.boxmain {
+		height: 200px;
+	}
+}
+
+.flex_center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.border {
+	border: 1px dashed #49bcf7;
+}
+
+.bigdata {
+	font-size: 20px;
+}
+
+.title {
+	height: 40px;
+	line-height: 40px;
+	text-align: center;
+}
+
+.marquee_top {
+	transition: all 0.5s ease-in-out;
+	margin-top: -26px;
+}
+
+.totall {
+	color: #fff;
+	background-color: rgb(10, 63, 68);
+}
+
+.rollData {
+	background-color: rgb(10, 39, 50);
+}
+
+.rollData:nth-of-type(2n + 1) {
+	background-color: rgb(0, 59, 81);
+}
+.halfBox {
+	height: 50%;
+}
+</style>