From 707dbf6a192a24b347fa6521a35c243eaa75818d Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Wed, 8 Nov 2023 09:04:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20index=5F10dept=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/index_10dept.vue | 357 ++++++++++++++++-----------
 1 file changed, 212 insertions(+), 145 deletions(-)

diff --git a/src/views/bigScreen/index_10dept.vue b/src/views/bigScreen/index_10dept.vue
index f8f4d8a9..1b4f13b8 100644
--- a/src/views/bigScreen/index_10dept.vue
+++ b/src/views/bigScreen/index_10dept.vue
@@ -28,11 +28,11 @@
                                     <div>昨日合格</div>
                                 </div>
                                 <div style="height: 4px;"></div>
-                                <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
+                                <!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
                                     <div style="color: #fef000; font-size:28px">
                                         130
                                     </div>
-                                </dv-decoration-9>
+                                </dv-decoration-9> -->
                             </div>
                         </el-col>
                         <el-col :xs="8" :md="8">
@@ -42,11 +42,11 @@
                                     <div>累计合格</div>
                                 </div>
                                 <div style="height: 4px;"></div>
-                                <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
+                                <!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
                                     <div style="color: #fef000; font-size:28px">
                                         1300
                                     </div>
-                                </dv-decoration-9>
+                                </dv-decoration-9> -->
                             </div>
                         </el-col>
                     </el-row>
@@ -54,7 +54,7 @@
                     <dv-decoration3 style="width:100%;height:4%;" />
                     <el-row style="height:60%">
                         <el-col>
-                            <dv-border-box12 class="box">
+                            <div class="box">
                                 <div class="boxtitle">
                                     <div style="margin:auto; font-size: 18px; margin-top: 6px">人员到岗
                                     </div>
@@ -122,12 +122,12 @@
                                         </tbody>
                                     </table> -->
                                 </div>
-                            </dv-border-box12>
+                            </div>
                         </el-col>
                     </el-row>
                 </el-col>
                 <el-col :xs="24" :md="14">
-                    <dv-border-box8 class="box" :dur="20">
+                    <div class="box" :dur="20">
                         <div class="boxtitle">
                             <div style="margin:auto; font-size: 18px; margin-top: 6px">任务进度</div>
                         </div>
@@ -189,37 +189,38 @@
                                 </tbody>
                             </table> -->
                         </div>
-                    </dv-border-box8>
+                    </div>
                 </el-col>
             </el-row>
-            <dv-decoration4 :reverse="true" style="width:100%;height:1%;" :dur="20" :color="['orange']" />
+            <div style="height: 1%"></div>
+            <!-- <dv-decoration4 :reverse="true" style="width:100%;height:1%;" :dur="20" :color="['orange']" /> -->
             <el-row style="height:39%" :gutter="10">
                 <el-col :xs="24" :md="9">
-                    <dv-border-box9 class="box">
+                    <div class="box">
                         <div class="boxtitle">
                             <div style="margin:auto; font-size: 18px; margin-top: 6px">全年生产统计</div>
                         </div>
                         <div class="boxmain" id="chart1">
                         </div>
-                    </dv-border-box9>
+                    </div>
                 </el-col>
                 <el-col :xs="24" :md="9">
-                    <dv-border-box9 class="box">
+                    <div class="box">
                         <div class="boxtitle">
                             <div style="margin:auto; font-size: 18px; margin-top: 6px">本月合格率统计</div>
                         </div>
                         <div class="boxmain" id="chart2">
                         </div>
-                    </dv-border-box9>
+                    </div>
                 </el-col>
                 <el-col :xs="24" :md="6">
-                    <dv-border-box9 class="box">
+                    <div class="box">
                         <div class="boxtitle">
                             <div style="margin:auto; font-size: 18px; margin-top: 6px">昨日合格统计</div>
                         </div>
                         <div class="boxmain" id="chart3">
                         </div>
-                    </dv-border-box9>
+                    </div>
                 </el-col>
             </el-row>
         </el-main>
@@ -234,8 +235,9 @@
 }
 
 .header {
-    /* background: url("/public/img/head_bg.png"); */
-    background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp");
+    background: url("/public/img/photon_header.png");
+    border-bottom: none;
+    /* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
     background-size: 100% 100%;
     font-size: 28px;
     justify-content: center;
@@ -248,10 +250,9 @@
 } */
 
 .box {
-    background: rgba(6, 48, 109, .3);
+    background: rgba(10, 63, 68, 0.5);
     height: 100%;
     /* padding: 2px 2px 2px 2px; */
-    border-radius: 2%;
 }
 
 .boxtitle {
@@ -275,8 +276,13 @@
 }
 
 .boxmain {
-    height: calc(100% - 5rem);
-    margin: 0px 4px 0px 4px;
+    height: calc(100% - 40px);
+}
+
+@media screen and (max-width: 800px) {
+    .boxmain {
+        height: 200px;
+    }
 }
 
 .flex_center {
@@ -313,18 +319,6 @@ table td {
     border-bottom: 1px solid rgba(255, 255, 255, .3);
     padding: .1rem 0;
 }
-
-.lineDiv {
-    height: 4px;
-    border-top: 1px solid #eeeeee;
-    position: relative;
-}
-
-.lineDivBlock {
-    position: absolute;
-    width: 10%;
-    height:
-}
 </style>
 <script>
 import * as echarts from "echarts";
@@ -335,36 +329,157 @@ export default {
     data() {
         return {
             basicOption: {
-                tooltip: {},
-                backgroundColor: '',
-                xAxis: {
-                    data: ['一月', '二月', '三月', '四月', '五月', '六月'],
-                    boundaryGap: false,
-                },
-                yAxis: { type: 'value' },
-                series: [
-                    {
-                        name: '销量',
-                        type: 'bar',
-                        barwidth: 10,
-                        radius: ['40%', '70%'],
+                // backgroundColor: '',
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
                         label: {
-                            show: true,
-                            position: 'top'
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                legend: {
+                    icon: "stack",
+                    right: 0,
+                    data: [{
+                        backgroundColor: 'rgb(1,235,239)',
+                        name: 'Line 1',
+                        itemStyle: {
+                            // color:'rgb(1,235,239)',
+                            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'
+                        }
+                    }, {
+                        name: 'Line 2',
+                        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: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
+                        nameTextStyle: {
+                            color: '#ffffff'
+                        },
+                        axisLabel: {
+                            color: '#ffffff'
                         },
-                        itemStyle: {},
-                        emphasis: {},
-                        areaStyle: {},
-                        smooth: true,
-                        data: [5, 20, 36, 10, 10, 20]
                     }
                 ],
-                grid: { // 让图表占满容器
-                    top: "10%",
-                    left: "12%",
-                    right: "4%",
-                    bottom: "10%"
-                }
+                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: 'Line 1',
+                        type: 'bar',
+                        stack: 'Total',
+                        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'
+                        },
+                        data: [140, 232, 101, 264, 90, 340, 250]
+                    },
+                    {
+                        name: 'Line 2',
+                        type: 'bar',
+                        stack: 'Total',
+                        smooth: true,
+                        lineStyle: {
+                            width: 0, color: 'rgb(250,205,0)'
+                        },
+                        showSymbol: false,
+                        areaStyle: {
+                            opacity: 0.8,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: 'rgb(250,205,0)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(254,129,0)'
+                                }
+                            ])
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [120, 282, 111, 234, 220, 340, 310]
+                    },
+                ]
             },
             workerData: [
                 {
@@ -393,18 +508,12 @@ export default {
                 },
             ],
             taskBoard: {
-                header: ['列1', '列2', '列3'],
+                header: ['姓名', '岗位', '班次', '状态'],
+                headerBGC: '#0a3f44',
                 data: [
-                    ['行1列1', '行1列2', '行1列3'],
-                    ['行2列1', '行2列2', '行2列3'],
-                    ['行3列1', '行3列2', '行3列3'],
-                    ['行4列1', '行4列2', '行4列3'],
-                    ['行5列1', '行5列2', '行5列3'],
-                    ['行6列1', '行6列2', '行6列3'],
-                    ['行7列1', '行7列2', '行7列3'],
-                    ['行8列1', '行8列2', '行8列3'],
-                    ['行9列1', '行9列2', '行9列3'],
-                    ['行10列1', '行10列2', '行10列3'],
+                    ['小王', '成型人', '白班', '到岗'],
+                    ['小李', '成型人', '白班', '到岗'],
+                    ['小张', '成型人', '白班', '未到岗'],
                 ],
                 index: true,
                 columnWidth: [50],
@@ -415,25 +524,26 @@ export default {
                 ['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
             ],
             taskBoard2: {
-                header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
-                headerBGC: '#eeeee',
+                header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
+                headerBGC: '#0a3f44',
                 waitTime: 3000,
-                columnWidth: [1, 1, 1, 1, 1],
+                rowNum: 8,
+                columnWidth: [2, 1, 1, 1, 1, 1],
                 data: [
-                    ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
-                    ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3'],
-                    ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3'],
-                    ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3'],
-                    ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3'],
-                    ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3'],
-                    ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3'],
-                    ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3'],
-                    ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3'],
-                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
-                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
-                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
-                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
-                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
+                    ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
+                    ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
+                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
                 ],
                 index: true,
                 columnWidth: [50],
@@ -447,71 +557,28 @@ export default {
     mounted() {
         let chart1Option = deepCopy(this.basicOption)
         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 });
+        // 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 });
 
-                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);
+        //         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 chart2Option = deepCopy(this.basicOption)
         chart2Option.series[0].type = 'line'
+        chart2Option.series[1].type = 'line'
         let chart2 = this.setChart("chart2", chart2Option)
-        let index2 = 0
-        this.chartInterval2 = setInterval(function () {
-            if (chart2 < 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 });
-
-                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;
-            }
-        }, 2000);
         let chart3Option = deepCopy(this.basicOption)
-        chart3Option.series[0].type = 'pie'
-        chart3Option.series[0].itemStyle = {
-            borderRadius: 10,
-            borderColor: '#fff',
-            borderWidth: 2
-        },
-            chart3Option.series[0].emphasis = {
-                value: {
-                    show: true,
-                    fontSize: 40,
-                    Color: 'white',
-                    fontWeight: 'bold'
-                }
-            }
-        chart3Option.grid.right = "10%"
         let chart3 = this.setChart("chart3", chart3Option)
-        let index3 = 0
-        this.chartInterval3 = setInterval(function () {
-            if (index3 < chart3Option.series[0].data.length) {
-                chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
-                chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
-                chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
 
-                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;
-            }
-        }, 2000);
     },
     methods: {
         setChart(name, option = null) {