From e6488c51a508e4c0df83708402e90214e0369df1 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 29 Mar 2024 09:41:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:7=E8=BD=A6=E9=97=B4=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=95=B0=E6=8D=AE=E8=B0=83=E6=95=B4=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A7=E8=BD=A6=E9=97=B4=E4=B8=8D=E5=90=88?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=9F=E8=AE=A1=E5=8E=BB=E6=8E=89=E5=90=88=E6=A0=BC?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_7dept.vue | 1397 +++++++++++++++------------
 1 file changed, 791 insertions(+), 606 deletions(-)

diff --git a/src/views/bigScreen/index_7dept.vue b/src/views/bigScreen/index_7dept.vue
index 6c213101..236e494e 100644
--- a/src/views/bigScreen/index_7dept.vue
+++ b/src/views/bigScreen/index_7dept.vue
@@ -1,673 +1,858 @@
 <template>
-    <el-container class="dashboard">
-        <el-header class="header">
-            <div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</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%;">
-                    <div class="box" style="height: 29%">
-                        <div class="boxtitle">
-                            <div class="boxlabel">今日任务</div>
-                        </div>
-                        <div style="height: 4px;"></div>
-                        <div class="boxmain  bigdata border" style="overflow:scroll;padding:5px;">
-                            <div v-for="item in todayMtask" :key="item.id"
-                                style="width:50%;display:inline-block;height: 40px;line-height:40px;padding:0 20px;">
-                                <div
-                                    style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee">
-                                    <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>
-                    </div>
-                    <div style="height: 1%;"></div>
-                    <el-row style="height:70%">
-                        <el-col style="height: 100%;">
-                            <div class="box">
-                                <div class="boxtitle">
-                                    <div class="boxlabel">任务进度</div>
-                                </div>
-                                <div style="height: 4px;"></div>
-                                <div class="boxmain" id="scrollContainer1">
-                                    <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
-                                        :rowData="processData" :titleData="liData1" :refValue="refValue1">
-                                    </scScrollTavle>
-                                </div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </el-col>
-                <el-col :xs="24" :md="14" style="height: 100%;">
-                    <div class="box">
-                        <div class="boxtitle">
-                            <div class="boxlabel">生产线</div>
-                        </div>
-                        <div style="height: 4px;"></div>
-                        <div class="boxmain" id="scrollContainer2">
-                            <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="lineData"
-                                :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 style="margin-left: 6px;font-size: 18px; margin-top: 6px">本月生产统计</div>
-                        </div>
-                        <div class="boxmain" id="chart1">
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :xs="24" :md="9">
-                    <div class="box">
-                        <div class="boxtitle">
-                            <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</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
+				style="
+					font-weight: bold;
+					font-family: 'myfont';
+					font-size: 32px;
+				"
+			>
+				7车间生产数据大看板
+			</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%">
+					<div class="box" style="height: 29%">
+						<div class="boxtitle">
+							<div class="boxlabel">今日任务</div>
+						</div>
+						<div style="height: 4px"></div>
+						<div
+							class="boxmain bigdata border"
+							style="overflow: scroll; padding: 5px"
+						>
+							<div
+								v-for="item in todayMtask"
+								:key="item.id"
+								style="
+									width: 50%;
+									display: inline-block;
+									height: 40px;
+									line-height: 40px;
+									padding: 0 20px;
+								"
+							>
+								<div
+									style="
+										display: flex;
+										justify-content: space-between;
+										border-bottom: 1px dashed #eeeeee;
+									"
+								>
+									<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>
+					</div>
+					<div style="height: 1%"></div>
+					<el-row style="height: 70%">
+						<el-col style="height: 100%">
+							<div class="box">
+								<div class="boxtitle">
+									<div class="boxlabel">任务进度</div>
+								</div>
+								<div style="height: 4px"></div>
+								<div class="boxmain" id="scrollContainer1">
+									<scScrollTavle
+										v-if="table1Visible"
+										:tableHeight="containerHeight1"
+										:rowData="processData"
+										:titleData="liData1"
+										:refValue="refValue1"
+									>
+									</scScrollTavle>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+				<el-col :xs="24" :md="14" style="height: 100%">
+					<div class="box">
+						<div class="boxtitle">
+							<div class="boxlabel">生产线</div>
+						</div>
+						<div style="height: 4px"></div>
+						<div class="boxmain" id="scrollContainer2">
+							<scScrollTavle
+								v-if="table2Visible"
+								:tableHeight="containerHeight2"
+								:rowData="lineData"
+								: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
+								style="
+									margin-left: 6px;
+									font-size: 18px;
+									margin-top: 6px;
+								"
+							>
+								本月生产统计
+							</div>
+						</div>
+						<div class="boxmain" id="chart1"></div>
+					</div>
+				</el-col>
+				<el-col :xs="24" :md="9">
+					<div class="box">
+						<div class="boxtitle">
+							<div
+								style="
+									margin-left: 6px;
+									font-size: 18px;
+									margin-top: 6px;
+								"
+							>
+								本月合格率统计
+							</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';
+import scScrollTavle from "@/components/scScrollTable.vue";
 function deepCopy(obj) {
-    return JSON.parse(JSON.stringify(obj));
+	return JSON.parse(JSON.stringify(obj));
 }
 export default {
-    components: { scScrollTavle },
-    data() {
-        return {
-            basicOption: {
-                backgroundColor: '',
+	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'
-                        }
-                    }],
-                },
-                grid: {
-                    left: '2%',
-                    right: '2%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: true,
-                    data: ['1号炉', '2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
-                    nameTextStyle: {
-                        color: '#ffffff'
-                    },
-                    axisLabel: {
-                        color: '#ffffff'
-                    },
-                },
-                yAxis: [
-                    {
-                        name: "",
-                        type: 'value',
-                        nameTextStyle: {
-                            color: '#ffffff'
-                        },
-                        axisLabel: {
-                            color: '#ffffff'
-                        },
-                        splitLine: {
-                            show: false,
-                        },
-                    }
-                ],
-                series: [{
-                    name: '生产数',
-                    type: 'bar',
-                    smooth: true,
-                    lineStyle: {
-                        width: 1, color: 'rgb(1,235,239)'
-                    },
-                    barWidth: 30,
-                    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: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 340, 250]
-                }]
-            },
-            chart3Option: {
-                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: '合格' },
-                    ],
-                    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: ['序号', '规格', '型号', '完成进度', '产量', '任务时间', '状态'],
-            processData: [],
-            liData2: ['序号', '炉号', '产品名称', '型号', '规格', '合格数量', '锅数', '设备状态'],
-            lineData: [],
-            todayMtask: [],
-            time: null,
-            delay: 20,
-            dayInterval: null,
-            days: 30,
-            today: '',
-            start_date: '',
-            end_date: '',
-            currentTime: '',
-            currentDay: '',
-            yesterday: '',
-            chartInterval1: null,
-            chartInterval2: null,
-            chartInterval3: null,
-        }
-    },
-    mounted() {
-        //表格table1的显示
-        this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
-        this.table1Visible = true;
-        //表格table2的显示
-        this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
-        this.table2Visible = true;
-        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;
-        let start_date = year + '-' + month + '-01';
-        let lastDay = new Date(year, month, 0).getDate();
-        let end_date = year + '-' + month + '-' + lastDay;
-        this.start_date = start_date;
-        this.end_date = end_date;
-        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.getProductLine();
-        this.getUtask();
-        this.getTodayMtask();
-        this.getLineData();
-        //时间
-        this.showTime()
-        this.dayInterval = setInterval(() => {
-            this.showTime()
-        }, 1000)
-    },
-    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)
-        },
-        //任务进度
-        getUtask() {
-            let that = this;
-            let obj = {};
-            obj.start_date__gte = this.start_date;
-            obj.end_date__lte = this.end_date;
-            obj.belong_dept__name = '7车间';
-            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 = {};
-                    obj1.elType = 'primary';
-                    obj1.value = item.material_.model;
-                    obj2.elType = 'primary';
-                    obj2.value = item.material_.specification;
-                    obj3.elType = 'progress';
-                    let process = Math.round((item.count_ok / item.count) * 100)
-                    obj3.value = process;
-                    obj4.elType = 'primary';
-                    obj4.value = item.count_ok;
-                    obj5.elType = 'primary';
-                    obj5.value = item.start_date + '-' + item.end_date;
-                    obj6.elType = 'tag';
-                    obj6.value = item.state;
-                    arr.push(obj1);
-                    arr.push(obj2);
-                    arr.push(obj3);
-                    arr.push(obj4);
-                    arr.push(obj5);
-                    arr.push(obj6);
-                    processData.push(arr);
-                });
-                this.processData = processData;
-            });
-        },
-        //7车间生产按炉进度
-        getLineData() {
-            let that = this;
-            that.$API.bi.dataset.exec.req('linedept7', {}).then((res) => {
-                console.log('7车间生产线:', res);
-                let list = res.data2.ds0;
-                if (list.length > 0) {
-                    let lineData = [];
-                    list.forEach(item => {
-                        let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {};
-                        obj1.elType = 'primary';
-                        obj1.value = item.equip_number;//炉号
-                        obj2.elType = 'primary';
-                        obj2.value = item.material_name;
-                        obj3.elType = 'primary';
-                        obj3.value = item.material_model;
-                        obj4.elType = 'primary';
-                        obj4.value = item.material_specification;
-                        obj5.elType = 'primary';
-                        let process = item.count_ok
-                        obj5.value = process;
-                        obj6.elType = 'primary';
-                        obj6.value = item.index;
-                        obj7.elType = 'tag';
-                        obj7.value = 'q' + item.equip_state;
-                        arr.push(obj1);
-                        arr.push(obj2);
-                        arr.push(obj3);
-                        arr.push(obj4);
-                        arr.push(obj5);
-                        arr.push(obj6);
-                        arr.push(obj7);
-                        lineData.push(arr);
-                    });
-                    this.lineData = lineData;
-                }
-            });
-        },
-        //生产线
-        getProductLine() {
-            let that = this;
-            //本月生产统计
-            let obj1 = {
-                query: { start_date: that.start_date, end_date: that.end_date },
-            };
-            that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res1) => {
-                console.log('本月生产统计:', res1);
-                let list1 = res1.data2.ds0;
-                let seriesData1 = [], xAxisData1 = [];
-                if (list1.length > 0) {
-                    list1.forEach(item1 => {
-                        xAxisData1.push(item1.equip_number);
-                        seriesData1.push(item1.count_real);
-                    })
-                }
-                let chart1Option = deepCopy(this.basicOption)
-                chart1Option.xAxis.data = xAxisData1;
-                chart1Option.series[0].data = seriesData1;
-                let chart1 = that.setChart("chart1", chart1Option);
-            });
-            //本月合格率统计
-            let obj2 = {
-                query: { start_date: that.start_date, end_date: that.end_date, dept_name: "7车间" },
-            };
-            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.合格率);
-                    })
-                }
-                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 = that.setChart("chart2", chart2Option);
-            });
+				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",
+							},
+						},
+					],
+				},
+				grid: {
+					left: "2%",
+					right: "2%",
+					bottom: "3%",
+					containLabel: true,
+				},
+				xAxis: {
+					type: "category",
+					boundaryGap: true,
+					data: [
+						"1号炉",
+						"2号炉",
+						"3号炉",
+						"4号炉",
+						"5号炉",
+						"6号炉",
+						"7号炉",
+						"8号炉",
+					],
+					nameTextStyle: {
+						color: "#ffffff",
+					},
+					axisLabel: {
+						color: "#ffffff",
+					},
+				},
+				yAxis: [
+					{
+						name: "",
+						type: "value",
+						nameTextStyle: {
+							color: "#ffffff",
+						},
+						axisLabel: {
+							color: "#ffffff",
+						},
+						splitLine: {
+							show: false,
+						},
+					},
+				],
+				series: [
+					{
+						name: "生产数",
+						type: "bar",
+						smooth: true,
+						lineStyle: {
+							width: 1,
+							color: "rgb(1,235,239)",
+						},
+						barWidth: 30,
+						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: [
+							140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
+							264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250,
+							140, 232, 101, 264, 90, 340, 250, 340, 250,
+						],
+					},
+				],
+			},
+			chart3Option: {
+				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: "其他" },
+					],
+					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: [
+				"序号",
+				"规格",
+				"型号",
+				"完成进度",
+				"产量",
+				"任务时间",
+				"状态",
+			],
+			processData: [],
+			liData2: [
+				"序号",
+				"炉号",
+				"产品名称",
+				"型号",
+				"规格",
+				"合格数量",
+				"锅数",
+				"设备状态",
+			],
+			lineData: [],
+			todayMtask: [],
+			time: null,
+			delay: 20,
+			dayInterval: null,
+			days: 30,
+			today: "",
+			start_date: "",
+			end_date: "",
+			currentTime: "",
+			currentDay: "",
+			yesterday: "",
+			chartInterval1: null,
+			chartInterval2: null,
+			chartInterval3: null,
+		};
+	},
+	mounted() {
+		//表格table1的显示
+		this.containerHeight1 =
+			document.getElementById("scrollContainer1").clientHeight;
+		this.table1Visible = true;
+		//表格table2的显示
+		this.containerHeight2 =
+			document.getElementById("scrollContainer2").clientHeight;
+		this.table2Visible = true;
+		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;
+		let start_date = year + "-" + month + "-01";
+		let lastDay = new Date(year, month, 0).getDate();
+		let end_date = year + "-" + month + "-" + lastDay;
+		this.start_date = start_date;
+		this.end_date = end_date;
+		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.getProductLine();
+		this.getUtask();
+		this.getTodayMtask();
+		this.getLineData();
+		//时间
+		this.showTime();
+		this.dayInterval = setInterval(() => {
+			this.showTime();
+		}, 1000);
+	},
+	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);
+		},
+		//任务进度
+		getUtask() {
+			let that = this;
+			let obj = {};
+			obj.start_date__gte = this.start_date;
+			obj.end_date__lte = this.end_date;
+			obj.belong_dept__name = "7车间";
+			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 = {};
+					obj1.elType = "primary";
+					obj1.value = item.material_.model;
+					obj2.elType = "primary";
+					obj2.value = item.material_.specification;
+					obj3.elType = "progress";
+					let process = Math.round(
+						(item.count_ok / item.count) * 100
+					);
+					obj3.value = process;
+					obj4.elType = "primary";
+					obj4.value = item.count_ok;
+					obj5.elType = "primary";
+					obj5.value = item.start_date + "-" + item.end_date;
+					obj6.elType = "tag";
+					obj6.value = item.state;
+					arr.push(obj1);
+					arr.push(obj2);
+					arr.push(obj3);
+					arr.push(obj4);
+					arr.push(obj5);
+					arr.push(obj6);
+					processData.push(arr);
+				});
+				this.processData = processData;
+			});
+		},
+		//7车间生产按炉进度
+		getLineData() {
+			let that = this;
+			that.$API.bi.dataset.exec.req("linedept7", {}).then((res) => {
+				console.log("7车间生产线:", res);
+				let list = res.data2.ds0;
+				if (list.length > 0) {
+					let lineData = [];
+					list.forEach((item) => {
+						let arr = [],
+							obj1 = {},
+							obj2 = {},
+							obj3 = {},
+							obj4 = {},
+							obj5 = {},
+							obj6 = {},
+							obj7 = {};
+						obj1.elType = "primary";
+						obj1.value = item.equip_number; //炉号
+						obj2.elType = "primary";
+						obj2.value = item.material_name;
+						obj3.elType = "primary";
+						obj3.value = item.material_model;
+						obj4.elType = "primary";
+						obj4.value = item.material_specification;
+						obj5.elType = "primary";
+						let process = item.count_ok;
+						obj5.value = process;
+						obj6.elType = "primary";
+						obj6.value = item.index;
+						obj7.elType = "tag";
+						obj7.value = "q" + item.equip_state;
+						arr.push(obj1);
+						arr.push(obj2);
+						arr.push(obj3);
+						arr.push(obj4);
+						arr.push(obj5);
+						arr.push(obj6);
+						arr.push(obj7);
+						lineData.push(arr);
+					});
+					this.lineData = lineData;
+				}
+			});
+		},
+		//生产线
+		getProductLine() {
+			let that = this;
+			//本月生产统计
+			let obj1 = {
+				query: { start_date: that.start_date, end_date: that.end_date },
+			};
+			that.$API.bi.dataset.exec.req("stoveStatics", obj1).then((res1) => {
+				console.log("本月生产统计:", res1);
+				let list1 = res1.data2.ds0;
+				let seriesData1 = [],
+					xAxisData1 = [];
+				if (list1.length > 0) {
+					list1.forEach((item1) => {
+						xAxisData1.push(item1.equip_name);
+						seriesData1.push(item1.count_real);
+					});
+				}
+				let chart1Option = deepCopy(this.basicOption);
+				chart1Option.xAxis.data = xAxisData1;
+				chart1Option.series[0].data = seriesData1;
+				let chart1 = that.setChart("chart1", chart1Option);
+			});
+			//本月合格率统计
+			let obj2 = {
+				query: {
+					start_date: that.start_date,
+					end_date: that.end_date,
+					dept_name: "7车间",
+				},
+			};
+			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.合格率);
+					});
+				}
+				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 = that.setChart("chart2", chart2Option);
+			});
 
-            //车间生产昨日统计 12月1号
-            let obj3 = {
-                query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "7车间" },
-            };
-            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 = that.setChart("chart3", that.chart3Option);
-            });
-        },
-        //今日任务
-        getTodayMtask() {
-            let that = this;
-            let obj = {};
-            obj.start_date = this.today;
-            obj.end_date = this.today;
-            obj.mgroup__belong_dept__name = '7车间';
-            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: "7车间",
+				},
+			};
+			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: "其他" },
+				];
+				if (res3.data2.ds0) {
+					let list3 = res3.data2.ds0;
+					if (list3.length > 0) {
+						list3.forEach((item3) => {
+							seriesData3[0].value += item3.炸纹;
+							seriesData3[1].value += item3.条纹;
+							seriesData3[2].value += item3.气泡;
+							seriesData3[3].value += item3.弯曲;
+							seriesData3[4].value += item3.其他;
+						});
+					}
+				}
+				that.chart3Option.series.data = seriesData3;
+				let chart3 = that.setChart("chart3", that.chart3Option);
+			});
+		},
+		//今日任务
+		getTodayMtask() {
+			let that = this;
+			let obj = {};
+			obj.start_date = this.today;
+			obj.end_date = this.today;
+			obj.mgroup__belong_dept__name = "7车间";
+			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;
 }
 
 .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%;
 }
 
 .boxmain {
-    height: calc(100% - 40px);
+	height: calc(100% - 40px);
 }
 
 @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;
-    box-sizing: border-box;
+	font-size: 24px;
+	box-sizing: border-box;
 }
 
 .boxlabel {
-    margin-left: 6px;
-    font-size: 18px;
-    margin-top: 6px
+	margin-left: 6px;
+	font-size: 18px;
+	margin-top: 6px;
 }
 
 .wrapper {
-    overflow: hidden;
-    height: 220px;
+	overflow: hidden;
+	height: 220px;
 }
 
 .wrapper2 {
-    height: 180px;
-    overflow: hidden;
+	height: 180px;
+	overflow: hidden;
 }
 
 .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
+</style>