From a97006c2d35b9669322eb4c07fc77a46f30624e0 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 26 Mar 2024 15:30:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:10=E8=BD=A6=E9=97=B4=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=AC=E6=9C=88=E7=9A=84=E7=94=9F=E4=BA=A7?=
 =?UTF-8?q?=E5=90=88=E6=A0=BC=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_10dept.vue | 1610 +++++++++++++++-----------
 1 file changed, 920 insertions(+), 690 deletions(-)

diff --git a/src/views/bigScreen/index_10dept.vue b/src/views/bigScreen/index_10dept.vue
index 9bb26fce..9c272c28 100644
--- a/src/views/bigScreen/index_10dept.vue
+++ b/src/views/bigScreen/index_10dept.vue
@@ -1,752 +1,982 @@
 <template>
-    <el-container class="dashboard">
-        <el-header class="header">
-            <div style="font-weight: bold; font-family:'myfont';font-size:32px">10车间生产数据看板</div>
-            <div style="font-size: 14px;margin-top:18px">{{ currentDay }} {{ currentTime }}</div>
-        </el-header>
-        <el-main>
-            <el-row style="height: 60%" :gutter="10">
-                <el-col :xs="24" :md="10" style="height: 100%;">
-                    <el-row style="height: 38%;" :gutter="10">
-                        <el-col :xs="8" :md="8" 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" style="overflow:scroll">
-                                    <div v-for="item in todayMtask" :key="item.id"
-                                        style="height: 40px;line-height: 40px;padding: 0 20px;display: flex;justify-content: space-between;">
-                                        <span style="font-size:12px">{{ item.material_out_name }}</span>
-                                        <span
-                                            style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
-                                            {{ item.count }}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </el-col>
-                        <el-col :xs="8" :md="8">
-                            <div class="box">
-                                <div class="boxtitle bgimg">
-                                    <div class="boxlabel">昨日合格</div>
-                                </div>
-                                <div style="height: 4px;"></div>
-                                <div class="boxmain flex_center bigdata border">
-                                    <span>{{ yesterdayObjet.物料名 }}</span>
-                                    <span
-                                        style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">{{
-                yesterdayObjet.合格数 }}</span>
-                                </div>
-                            </div>
-                        </el-col>
-                        <el-col :xs="8" :md="8">
-                            <div class="box">
-                                <div class="boxtitle bgimg">
-                                    <div class="boxlabel">累计合格</div>
-                                </div>
-                                <div style="height: 4px;"></div>
-                                <div class="boxmain bigdata border" style="overflow:scroll">
-                                    <div v-for="item in monthobjList" :key="item.id" style="height: 40px;">
-                                        <span style="font-size:12px">{{ item.物料名 }}</span>
-                                        <span
-                                            style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
-                                            {{ item.合格数 }}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                    <div style="height:2%"></div>
-                    <el-row style="height:60%">
-                        <div class="box">
-                            <div class="boxtitle">
-                                <div class="boxlabel">人员到岗
-                                </div>
-                            </div>
-                            <div style="height: 2px;"></div>
-                            <div class="boxmain" id="scrollContainer1">
-                                <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
-                                    :rowData="attendanceData" :titleData="liData1" :refValue="refValue1">
-                                </scScrollTavle>
-                            </div>
-                        </div>
-                    </el-row>
-                </el-col>
-                <el-col :xs="24" :md="14" style="height: 100%;">
-                    <div class="box" :dur="20">
-                        <div class="boxtitle">
-                            <div class="boxlabel">任务进度</div>
-                        </div>
-                        <div style="height: 2px;"></div>
-                        <div class="boxmain" id="scrollContainer2">
-                            <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="processData"
-                                :titleData="liData2" :refValue="refValue2"></scScrollTavle>
-                        </div>
-                    </div>
-                </el-col>
-            </el-row>
-            <div style="height: 1%"></div>
-            <el-row style="height:39%" :gutter="10">
-                <el-col :xs="24" :md="9">
-                    <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="9">
-                    <div class="box">
-                        <div class="boxtitle">
-                            <div class="boxlabel">本月合格率统计</div>
-                        </div>
-                        <div class="boxmain" id="chart2">
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :xs="24" :md="6">
-                    <div class="box">
-                        <div class="boxtitle">
-                            <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
-                        </div>
-                        <div class="boxmain" id="chart3">
-                        </div>
-                    </div>
-                </el-col>
-            </el-row>
-        </el-main>
-    </el-container>
+	<el-container class="dashboard">
+		<el-header class="header">
+			<div class="title">10车间生产数据看板</div>
+			<div class="timer">{{ currentDay }} {{ currentTime }}</div>
+		</el-header>
+		<el-main>
+			<el-row style="height: 60%" :gutter="10">
+				<el-col :xs="24" :md="10" style="height: 100%">
+					<el-row style="height: 38%" :gutter="10">
+						<el-col :xs="8" :md="8" 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"
+									style="overflow: scroll"
+								>
+									<div
+										v-for="item in todayMtask"
+										:key="item.id"
+										class="boxmainItem"
+									>
+										<span style="font-size: 12px">
+											{{ item.material_out_name }}
+										</span>
+										<span class="boxmainItemNumber">
+											{{ item.count }}
+										</span>
+									</div>
+								</div>
+							</div>
+						</el-col>
+						<el-col :xs="8" :md="8" style="height: 100%">
+							<div class="box">
+								<div class="boxtitle bgimg">
+									<div class="boxlabel">昨日合格</div>
+								</div>
+								<div style="height: 4px"></div>
+								<div class="boxmain flex_center bigdata border">
+									<span>{{ yesterdayObjet.物料名 }}</span>
+									<span class="boxmainItemNumber">{{
+										yesterdayObjet.合格数
+									}}</span>
+								</div>
+							</div>
+						</el-col>
+						<el-col :xs="8" :md="8" 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"
+									style="overflow: scroll"
+								>
+									<div
+										v-for="item in monthobjList"
+										:key="item.id"
+										class="boxmainItem"
+									>
+										<span style="font-size: 12px">{{
+											item.物料名
+										}}</span>
+										<span class="boxmainItemNumber">
+											{{ item.合格数 }}
+										</span>
+									</div>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+					<div style="height: 2%"></div>
+					<el-row style="height: 60%">
+						<div class="box">
+							<div class="boxtitle">
+								<div class="boxlabel">人员到岗</div>
+							</div>
+							<div style="height: 2px"></div>
+							<div class="boxmain" id="scrollContainer1">
+								<scScrollTavle
+									v-if="table1Visible"
+									:tableHeight="containerHeight1"
+									:rowData="attendanceData"
+									:titleData="liData1"
+									:refValue="refValue1"
+								>
+								</scScrollTavle>
+							</div>
+						</div>
+					</el-row>
+				</el-col>
+				<el-col :xs="24" :md="14" style="height: 100%">
+					<div class="box halfBox">
+						<div class="boxtitle">
+							<div class="boxlabel">任务进度</div>
+						</div>
+						<div style="height: 2px"></div>
+						<div class="boxmain" id="scrollContainer2">
+							<scScrollTavle
+								v-if="table2Visible"
+								:tableHeight="containerHeight2"
+								:rowData="processData"
+								:titleData="liData2"
+								:refValue="refValue2"
+							></scScrollTavle>
+						</div>
+					</div>
+					<div class="box halfBox">
+						<div class="boxtitle">
+							<div class="boxlabel">本月合格数统计</div>
+						</div>
+						<div class="boxmain" id="chart4"></div>
+					</div>
+				</el-col>
+			</el-row>
+			<div style="height: 1%"></div>
+			<el-row style="height: 39%" :gutter="10">
+				<el-col :xs="24" :md="9">
+					<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="9">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">本月合格率统计</div>
+						</div>
+						<div class="boxmain" id="chart2"></div>
+					</div>
+				</el-col>
+				<el-col :xs="24" :md="6">
+					<div class="box">
+						<div class="boxtitle">
+							<div
+								style="
+									margin-left: 6px;
+									font-size: 18px;
+									margin-top: 6px;
+								"
+							>
+								昨日合格统计
+							</div>
+						</div>
+						<div class="boxmain" id="chart3"></div>
+					</div>
+				</el-col>
+			</el-row>
+		</el-main>
+	</el-container>
 </template>
 
 <script>
 import * as echarts from "echarts";
-import scScrollTavle from '@/components/scScrollTable.vue';
-const xAxisData1 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+import scScrollTavle from "@/components/scScrollTable.vue";
+const xAxisData1 = [
+	"1月",
+	"2月",
+	"3月",
+	"4月",
+	"5月",
+	"6月",
+	"7月",
+	"8月",
+	"9月",
+	"10月",
+	"11月",
+	"12月",
+];
 function deepCopy(obj) {
-    return JSON.parse(JSON.stringify(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:'rgb(1,235,239)',
-                            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'
-                        }
-                    }],
-                    // itemStyle: {
-                    //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    //         {
-                    //             offset: 0,
-                    //             color: 'rgb(250,205,0)'
-                    //         },
-                    //         {
-                    //             offset: 1,
-                    //             color: 'rgb(254,129,0)'
-                    //         }
-                    //     ])
-                    // }
-                },
-                toolbox: {
-                    feature: {
-                        // saveAsImage: {}
-                    }
-                },
-                grid: {
-                    left: '5%',
-                    right: '5%',
-                    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: 30,
-                        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)'
-                                }
-                            ])
-                        },
-                        data: []
-                    },
-                ]
-            },
-            chart3Option: {
-                backgroundColor: '',
-                tooltip: {
-                    trigger: 'item'
-                },
-                legend: {
-                    top: 'bottom',
-                },
-                series: {
-                    name: '完成率',
-                    type: 'pie',
-                    radius: '50%',
-                    itemStyle: {
-                        borderRadius: 2
-                    },
-                    center: ['50%', '45%'],
-                    data: [],
-                    emphasis: {
-                        itemStyle: {
-                            shadowBlur: 10,
-                            shadowOffsetX: 0,
-                            shadowColor: 'rgba(0, 0, 0, 0.5)'
-                        }
-                    }
-                }
-            },
-            containerHeight1: 100,
-            containerHeight2: 100,
-            table1Visible: false,
-            table2Visible: false,
-            refValue1: 'moocBox1',
-            refValue2: 'moocBox2',
-            liData1: ['序号', '姓名', '岗位', '班次', '状态'],
-            attendanceData: [],
-            liData2: ['序号', '产品名称', '规格', '型号', '计划开始时间', '计划结束时间', '完成进度', '产量', '状态'],
-            processData: [],
-            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: '',
-            todayObjet: {},
-            yesterdayObjet: {},
-            monthobjList: [],
-        }
-    },
-    mounted() {
-        //表格table1的显示
-        this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
-        this.table1Visible = true;
-        //表格table2的显示
-        this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
-        this.table2Visible = true;
+	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:'rgb(1,235,239)',
+								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",
+							},
+						},
+					],
+					// itemStyle: {
+					//     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					//         {
+					//             offset: 0,
+					//             color: 'rgb(250,205,0)'
+					//         },
+					//         {
+					//             offset: 1,
+					//             color: 'rgb(254,129,0)'
+					//         }
+					//     ])
+					// }
+				},
+				toolbox: {
+					feature: {
+						// saveAsImage: {}
+					},
+				},
+				grid: {
+					left: "5%",
+					right: "5%",
+					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: 30,
+						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)",
+									},
+								]
+							),
+						},
+						data: [],
+					},
+				],
+			},
+			chart3Option: {
+				backgroundColor: "",
+				tooltip: {
+					trigger: "item",
+				},
+				legend: {
+					top: "bottom",
+				},
+				series: {
+					name: "完成率",
+					type: "pie",
+					radius: "50%",
+					itemStyle: {
+						borderRadius: 2,
+					},
+					center: ["50%", "45%"],
+					data: [],
+					emphasis: {
+						itemStyle: {
+							shadowBlur: 10,
+							shadowOffsetX: 0,
+							shadowColor: "rgba(0, 0, 0, 0.5)",
+						},
+					},
+				},
+			},
+			containerHeight1: 100,
+			containerHeight2: 100,
+			table1Visible: false,
+			table2Visible: false,
+			refValue1: "moocBox1",
+			refValue2: "moocBox2",
+			liData1: ["序号", "姓名", "岗位", "班次", "状态"],
+			attendanceData: [],
+			liData2: [
+				"序号",
+				"产品名称",
+				"规格",
+				"型号",
+				"计划开始时间",
+				"计划结束时间",
+				"完成进度",
+				"产量",
+				"状态",
+			],
+			processData: [],
+			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: "",
+			todayObjet: {},
+			yesterdayObjet: {},
+			monthobjList: [],
+		};
+	},
+	mounted() {
+		//表格table1的显示
+		this.containerHeight1 =
+			document.getElementById("scrollContainer1").clientHeight;
+		this.table1Visible = true;
+		//表格table2的显示
+		this.containerHeight2 =
+			document.getElementById("scrollContainer2").clientHeight;
+		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;
-        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.getMtask();
-        this.getAttendance();
-        this.getProductLine();
-        this.getTodayMtask();
-    },
-    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)
-            }
+		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;
+		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.getMtask();
+		this.getAttendance();
+		this.getProductLine();
+		this.getTodayMtask();
+	},
+	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
-        },
-        //到岗记录
-        getAttendance() {
-            let that = this;
-            let obj = {};
-            obj.work_date = this.currentYear + '-' + this.currentMonth + '-' + this.currentDay;
-            // obj.work_date = '2023-11-24';
-            obj.page = 0;
-            that.$API.hrm.attendance.list.req(obj).then((res) => {
-                console.log('到岗记录:', res);
-                let attendanceData = [];
-                res.forEach(item => {
-                    let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {};
-                    obj1.elType = 'primary';
-                    obj1.value = item.user_name;
-                    obj2.elType = 'primary';
-                    obj2.value = item.post_name;
-                    obj3.elType = 'primary';
-                    obj3.value = item.shift_name;
-                    obj4.elType = 'tag';
-                    obj4.value = item.state;
-                    arr.push(obj1);
-                    arr.push(obj2);
-                    arr.push(obj3);
-                    arr.push(obj4);
-                    attendanceData.push(arr);
-                });
+			setTimeout(() => {
+				try {
+					myChart.setOption(option);
+				} catch (error) {}
+			}, 500);
+			return myChart;
+		},
+		//到岗记录
+		getAttendance() {
+			let that = this;
+			let obj = {};
+			obj.work_date =
+				this.currentYear +
+				"-" +
+				this.currentMonth +
+				"-" +
+				this.currentDay;
+			// obj.work_date = '2023-11-24';
+			obj.page = 0;
+			that.$API.hrm.attendance.list.req(obj).then((res) => {
+				console.log("到岗记录:", res);
+				let attendanceData = [];
+				res.forEach((item) => {
+					let arr = [],
+						obj1 = {},
+						obj2 = {},
+						obj3 = {},
+						obj4 = {};
+					obj1.elType = "primary";
+					obj1.value = item.user_name;
+					obj2.elType = "primary";
+					obj2.value = item.post_name;
+					obj3.elType = "primary";
+					obj3.value = item.shift_name;
+					obj4.elType = "tag";
+					obj4.value = item.state;
+					arr.push(obj1);
+					arr.push(obj2);
+					arr.push(obj3);
+					arr.push(obj4);
+					attendanceData.push(arr);
+				});
 
-                this.attendanceData = attendanceData;
-                debugger;
-            });
-        },
-        //任务进度
-        getMtask() {
-            let that = this;
-            let obj = {};
-            obj.start_date__gte = this.start_date;
-            obj.end_date__lte = this.end_date;
-            obj.belong_dept__name = '10车间';
-            obj.page = 0;
-            that.$API.pm.utask.list.req(obj).then((res) => {
-                console.log('任务进度:', res);
-                let processData = [];
-                res.forEach(item => {
-                    let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
-                    obj1.elType = 'primary';
-                    obj1.value = item.material_.name;
-                    obj2.elType = 'primary';
-                    obj2.value = item.material_.specification;
-                    obj8.elType = 'primary';
-                    obj8.value = item.material_.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.attendanceData = attendanceData;
+				debugger;
+			});
+		},
+		//任务进度
+		getMtask() {
+			let that = this;
+			let obj = {};
+			obj.start_date__gte = this.start_date;
+			obj.end_date__lte = this.end_date;
+			obj.belong_dept__name = "10车间";
+			obj.page = 0;
+			that.$API.pm.utask.list.req(obj).then((res) => {
+				console.log("任务进度:", res);
+				let processData = [];
+				res.forEach((item) => {
+					let arr = [],
+						obj1 = {},
+						obj2 = {},
+						obj3 = {},
+						obj4 = {},
+						obj5 = {},
+						obj6 = {},
+						obj7 = {},
+						obj8 = {};
+					obj1.elType = "primary";
+					obj1.value = item.material_.name;
+					obj2.elType = "primary";
+					obj2.value = item.material_.specification;
+					obj8.elType = "primary";
+					obj8.value = item.material_.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.processData = processData;
-                debugger;
-            });
-        },
-        //生产线
-        getProductLine() {
-            let that = this;
-            //全年生产统计 1月1号-----12月1号
-            let obj1 = {
-                query: { start_date: that.currentYear + '-01-01', end_date: that.currentYear + '-12-31', dept_name: "10车间" },
-            };
-            that.$API.bi.dataset.exec.req('lineMonth', obj1).then((res1) => {
-                console.log('全年生产统计:', res1);
-                let list1 = res1.data2.ds0;
-                let seriesData1 = [], xAxisData1 = [];
-                for (let i = 0; i < 12; i++) {
-                    let day = i + 1;
-                    let text = day + '月';
-                    xAxisData1[i] = text;
-                    seriesData1[i] = 0;
-                }
-                if (list1.length > 0) {
-                    list1.forEach(item1 => {
-                        let index1 = item1.月 - 1;
-                        seriesData1[index1] = item1.合格数;
-                    })
-                }
-                let chart1Option = deepCopy(this.basicOption)
-                chart1Option.xAxis.data = xAxisData1;
-                chart1Option.series[0].data = seriesData1;
-                // chart1Option.yAxis.name='合格数';
-                let chart1 = this.setChart("chart1", chart1Option);
-                let index1 = 0
-                this.chartInterval1 = setInterval(function () {
-                    if (index1 < chart1Option.series[0].data.length) {
-                        chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
-                        chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
-                        chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
-                        index1++;
-                    } else {
-                        index1 = 0;
-                    }
-                }, 3000);
-            });
-            let obj = {
-                query: { start_date: that.start_date, end_date: that.end_date, dept_name: "10车间" },
-            };
-            that.$API.bi.dataset.exec.req('lineMonth', obj).then((res) => {
-                console.log('本月生产统计:', res);
-                that.monthobjList = res.data2.ds0;
-            });
-            //本月合格率统计///11月1号-----11月30号
-            let obj2 = {
-                query: { start_date: that.start_date, end_date: that.end_date, dept_name: "10车间" },
-            };
-            that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => {
-                console.log('本月合格率统计:', res2);
-                let list2 = res2.data2.ds0;
-                let seriesData2 = [], xAxisData2 = [];
-                for (let i = 0; i < that.days; i++) {
-                    let day = i + 1;
-                    let text = day + '日';
-                    xAxisData2[i] = text;
-                    seriesData2[i] = 0;
-                }
-                if (list2.length > 0) {
-                    list2.forEach(item2 => {
-                        let index2 = item2.日 - 1;
-                        seriesData2[index2] = Math.round(item2.合格率);
-                    })
-                }
-                console.log('xAxisData2', xAxisData2)
-                let chart2Option = deepCopy(this.basicOption);
-                chart2Option.xAxis.data = xAxisData2;
-                // chart2Option.yAxis.name='合格率';
-                chart2Option.legend = {
-                    icon: "stack",
-                    right: 0,
-                    data: [{
-                        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'
-                        }
-                    }],
-                };
-                let series2 = [{
-                    name: '合格率',
-                    type: 'line',
-                    smooth: true,
-                    lineStyle: {
-                        width: 1, color: 'rgb(1,235,239)'
-                    },
-                    showSymbol: false,
-                    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)'
-                            }
-                        ])
-                    },
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    label: {
-                        show: true,
-                        position: 'top',
-                        color: '#fff'
-                    },
-                    itemStyle: {
-                        borderRadius: [2, 2, 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)'
-                            }
-                        ])
-                    },
-                    data: seriesData2
-                }];
-                chart2Option.series = series2;
-                let chart2 = this.setChart("chart2", chart2Option);
-                let index2 = 0
-                this.chartInterval2 = setInterval(function () {
-                    if (index2 < chart2Option.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 });
-                        index2++;
-                    } else {
-                        index2 = 0;
-                    }
-                }, 3000);
-            });
+				this.processData = processData;
+				debugger;
+			});
+		},
+		//生产线
+		getProductLine() {
+			let that = this;
+			//全年生产统计 1月1号-----12月1号
+			let obj1 = {
+				query: {
+					start_date: that.currentYear + "-01-01",
+					end_date: that.currentYear + "-12-31",
+					dept_name: "10车间",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineMonth", obj1).then((res1) => {
+				console.log("全年生产统计:", res1);
+				let list1 = res1.data2.ds0;
+				let seriesData1 = [],
+					xAxisData1 = [];
+				for (let i = 0; i < 12; i++) {
+					let day = i + 1;
+					let text = day + "月";
+					xAxisData1[i] = text;
+					seriesData1[i] = 0;
+				}
+				if (list1.length > 0) {
+					list1.forEach((item1) => {
+						let index1 = item1.月 - 1;
+						seriesData1[index1] = item1.合格数;
+					});
+				}
+				let chart1Option = deepCopy(this.basicOption);
+				chart1Option.xAxis.data = xAxisData1;
+				chart1Option.series[0].data = seriesData1;
+				// chart1Option.yAxis.name='合格数';
+				let chart1 = this.setChart("chart1", chart1Option);
+				let index1 = 0;
+				this.chartInterval1 = setInterval(function () {
+					if (index1 < chart1Option.series[0].data.length) {
+						chart1.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						chart1.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index1,
+						});
+						chart1.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index1,
+						});
+						index1++;
+					} else {
+						index1 = 0;
+					}
+				}, 3000);
+			});
+			let obj = {
+				query: {
+					start_date: that.start_date,
+					end_date: that.end_date,
+					dept_name: "10车间",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineMonth", obj).then((res) => {
+				console.log("本月生产统计:", res);
+				that.monthobjList = res.data2.ds0;
+			});
+			//本月合格率统计///11月1号-----11月30号
+			let obj2 = {
+				query: {
+					start_date: that.start_date,
+					end_date: that.end_date,
+					dept_name: "10车间",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineDay", obj2).then((res2) => {
+				console.log("本月合格率统计:", res2);
+				let list2 = res2.data2.ds0;
+				let seriesData2 = [],
+					seriesData4 = [],
+					xAxisData2 = [];
+				for (let i = 0; i < that.days; i++) {
+					let day = i + 1;
+					let text = day + "日";
+					xAxisData2[i] = text;
+					seriesData2[i] = 0;
+					seriesData4[i] = 0;
+				}
+				if (list2.length > 0) {
+					list2.forEach((item2) => {
+						let index2 = item2.日 - 1;
+						seriesData2[index2] = Math.round(item2.合格率);
+						seriesData4[index2] += item2.合格数;
+					});
+				}
+				console.log("xAxisData2", xAxisData2);
+				let chart2Option = deepCopy(this.basicOption);
+				let chart4Option = deepCopy(this.basicOption);
+				chart2Option.xAxis.data = xAxisData2;
+				chart4Option.xAxis.data = xAxisData2;
+				// chart2Option.yAxis.name='合格率';
+				chart2Option.legend = {
+					icon: "stack",
+					right: 0,
+					data: [
+						{
+							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",
+							},
+						},
+					],
+				};
+				let series2 = [
+					{
+						name: "合格率",
+						type: "line",
+						smooth: true,
+						lineStyle: {
+							width: 1,
+							color: "rgb(1,235,239)",
+						},
+						showSymbol: false,
+						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)",
+									},
+								]
+							),
+						},
+						emphasis: {
+							focus: "series",
+						},
+						label: {
+							show: true,
+							position: "top",
+							color: "#fff",
+						},
+						itemStyle: {
+							borderRadius: [2, 2, 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)",
+									},
+								]
+							),
+						},
+						data: seriesData2,
+					},
+				];
+				chart2Option.series = series2;
+				chart4Option.series[0].data = seriesData4;
+				let chart2 = this.setChart("chart2", chart2Option);
+				let chart4 = this.setChart("chart4", chart4Option);
+				let index2 = 0;
+				this.chartInterval2 = setInterval(function () {
+					if (index2 < chart2Option.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,
+						});
+						chart4.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						chart4.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						chart4.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index2,
+						});
+						index2++;
+					} else {
+						index2 = 0;
+					}
+				}, 3000);
+			});
 
-            //车间生产昨日统计 12月1号
-            let obj3 = {
-                query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "10车间" },
-            };
-            that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => {
-                console.log('车间生产昨日统计:', res3);
-                let seriesData3 = [
-                    { value: 0, name: '椭圆弯曲' },
-                    { value: 0, name: '大小头' },
-                    { value: 0, name: '偏壁' },
-                    { value: 0, name: '结石' },
-                    { value: 0, name: '气线' },
-                    { value: 0, name: '合格' },
-                ]
-                if (res3.data2.ds0.length > 0) {
-                    let item3 = res3.data2.ds0[0];
-                    that.yesterdayObjet = item3;
-                    seriesData3[0].value = item3.弯曲;
-                    seriesData3[1].value = item3.大小头;
-                    seriesData3[2].value = item3.偏壁;
-                    seriesData3[3].value = item3.结石;
-                    seriesData3[4].value = item3.气线;
-                    seriesData3[5].value = item3.合格数;
-                }
-                that.chart3Option.series.data = seriesData3;
-                let chart3 = this.setChart("chart3", that.chart3Option);
-                let index3 = 0
-                this.chartInterval3 = setInterval(function () {
-                    if (index3 < that.chart3Option.series.data.length) {
-                        chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
-                        chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
-                        chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
-                        index3++;
-                    } else {
-                        index3 = 0;
-                    }
-                }, 3000);
-                debugger;
-            });
-
-        },
-        //今日任务
-        getTodayMtask() {
-            let that = this;
-            let obj = {};
-            obj.start_date = this.today;
-            obj.end_date = this.today;
-            obj.mgroup__belong_dept__name = '10车间';
-            obj.page = 0;
-            that.$API.pm.mtask.list.req(obj).then((res) => {
-                that.todayMtask = res;
-                console.log('今日任务:', res);
-            });
-        },
-        //累计合计
-    }
-}
+			//车间生产昨日统计 12月1号
+			let obj3 = {
+				query: {
+					start_date: that.yesterday,
+					end_date: that.yesterday,
+					dept_name: "10车间",
+				},
+			};
+			that.$API.bi.dataset.exec.req("lineDay", obj3).then((res3) => {
+				console.log("车间生产昨日统计:", res3);
+				let seriesData3 = [
+					{ value: 0, name: "椭圆弯曲" },
+					{ value: 0, name: "大小头" },
+					{ value: 0, name: "偏壁" },
+					{ value: 0, name: "结石" },
+					{ value: 0, name: "气线" },
+					{ value: 0, name: "合格" },
+				];
+				if (res3.data2.ds0.length > 0) {
+					let item3 = res3.data2.ds0[0];
+					that.yesterdayObjet = item3;
+					seriesData3[0].value = item3.弯曲;
+					seriesData3[1].value = item3.大小头;
+					seriesData3[2].value = item3.偏壁;
+					seriesData3[3].value = item3.结石;
+					seriesData3[4].value = item3.气线;
+					seriesData3[5].value = item3.合格数;
+				}
+				that.chart3Option.series.data = seriesData3;
+				let chart3 = this.setChart("chart3", that.chart3Option);
+				let index3 = 0;
+				this.chartInterval3 = setInterval(function () {
+					if (index3 < that.chart3Option.series.data.length) {
+						chart3.dispatchAction({
+							type: "downplay",
+							seriesIndex: 0,
+						});
+						chart3.dispatchAction({
+							type: "highlight",
+							seriesIndex: 0,
+							dataIndex: index3,
+						});
+						chart3.dispatchAction({
+							type: "showTip",
+							seriesIndex: 0,
+							dataIndex: index3,
+						});
+						index3++;
+					} else {
+						index3 = 0;
+					}
+				}, 3000);
+				debugger;
+			});
+		},
+		//今日任务
+		getTodayMtask() {
+			let that = this;
+			let obj = {};
+			obj.start_date = this.today;
+			obj.end_date = this.today;
+			obj.mgroup__belong_dept__name = "10车间";
+			obj.page = 0;
+			that.$API.pm.mtask.list.req(obj).then((res) => {
+				that.todayMtask = res;
+				console.log("今日任务:", res);
+			});
+		},
+		//累计合计
+	},
+};
 </script>
 <style scoped>
 @font-face {
-    font-family: 'myfont';
-    /* 字体名称 */
-    src: url('../../utils/youShe.ttf');
-    /* 字体文件相对路径 */
+	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;
+	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;
+	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%;
+	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));
+	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%;
+	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
+	margin-left: 6px;
+	font-size: 18px;
+	margin-top: 6px;
 }
 
 .boxmain {
-    height: calc(100% - 40px);
+	height: calc(100% - 40px);
+}
+.boxmainItem {
+	height: 40px;
+	line-height: 40px;
+	padding: 0 20px;
+	display: flex;
+	justify-content: space-between;
+}
+.boxmainItem > .boxmainItemNumber {
+	color: #fef000;
+	margin-left: 10px;
+	font-weight: bold;
+	font-family: electronicFont;
 }
-
 @media screen and (max-width: 800px) {
-    .boxmain {
-        height: 200px;
-    }
+	.boxmain {
+		height: 200px;
+	}
 }
 
 .flex_center {
-    display: flex;
-    align-items: center;
-    justify-content: center
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .border {
-    border: 1px dashed #49bcf7;
+	border: 1px dashed #49bcf7;
 }
 
 .bigdata {
-    font-size: 24px;
+	font-size: 24px;
 }
 
 .title {
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
+	height: 40px;
+	line-height: 40px;
+	text-align: center;
 }
 
 .marquee_top {
-    transition: all 0.5s ease-in-out;
-    margin-top: -26px;
+	transition: all 0.5s ease-in-out;
+	margin-top: -26px;
 }
 
 .totall {
-    color: #fff;
-    background-color: rgb(10, 63, 68);
+	color: #fff;
+	background-color: rgb(10, 63, 68);
 }
 
 .rollData {
-    background-color: rgb(10, 39, 50);
+	background-color: rgb(10, 39, 50);
 }
 
-.rollData:nth-of-type(2n+1) {
-    background-color: rgb(0, 59, 81);
+.rollData:nth-of-type(2n + 1) {
+	background-color: rgb(0, 59, 81);
 }
-</style>
\ No newline at end of file
+.halfBox {
+	height: 50%;
+}
+</style>