From d48d28b8fb55822e785f749a42c6d022d3252c35 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Tue, 15 Aug 2023 15:37:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/shunhe/ProdCount.vue | 426 ++++++++++++++++++---------------
 1 file changed, 228 insertions(+), 198 deletions(-)

diff --git a/src/pages/shunhe/ProdCount.vue b/src/pages/shunhe/ProdCount.vue
index 1f82db5..b210a64 100644
--- a/src/pages/shunhe/ProdCount.vue
+++ b/src/pages/shunhe/ProdCount.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="bg">
       <t-header title="顺和大屏监控">
-        <p class="p1">1</p>
+        <!-- <p class="p1">1</p> -->
       </t-header>
       <div class="container">
         <div class="con1">
@@ -52,6 +52,12 @@
               <span>吨</span>
             </div>
           </div>
+          <div class="con03">
+            <div class="title">成品计划完成率</div>
+            <div class="item_content_1">
+              <div id="echart_d1" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
         </div>
         <div class="con4">
           <div class="block_h2">
@@ -72,7 +78,7 @@
       </div>
       <section class="bottom"></section>
     </section>
-    </template>
+</template>
 
 <script>
 import THeader from '@components/header.vue'
@@ -141,12 +147,205 @@ export default {
       this.showNum2 = (res.result.finishedRes[1].real_qty + '').split('')
       this.showNum3 = (res.result.finishedRes[2].real_qty + '').split('')
       this.taskData = [...res.result.productionTask]
+      this.getEchart1()
       this.getEchart2()
       this.realqty = res.result.materialTask[0].real_qty
       this.planqty = res.result.materialTask[0].plan_qty
       this.setEchart01()
       // 五种状态：未成产、已下发、生产中、停止、完成
     },
+    setEchart01 () {
+      let data = [
+        {
+          value: 10,
+          name: '1号砖'
+        },
+        {
+          value: 20,
+          name: '2号砖'
+        },
+        {
+          value: 30,
+          name: '3号砖'
+        },
+        {
+          value: 40,
+          name: '4号砖'
+        },
+        {
+          value: 50,
+          name: '5号砖'
+        },
+        {
+          value: 60,
+          name: '6号砖'
+        }
+      ]
+      var option = {
+        legend: {
+          orient: 'horizontal',
+          bottom: '0%',
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
+        },
+        color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['43%', '70%'],
+            label: {
+              normal: {
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 14
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d01')
+      this.myCharts01 = this.$echarts.init(echart)
+      this.myCharts01.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts01.resize()
+      })
+    },
+    getEchart1 () {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echart_d1'))
+      // var finishArr = []
+      // var unFinishArr = []
+      // var materArr = []
+      // this.materData.map(el => {
+      //   finishArr.push(el.finished_qty)
+      //   unFinishArr.push(el.unfinished_qty)
+      //   materArr.push(el.material_code)
+      // })
+      // 指定图表的配置项和数据
+      var option = {
+        legend: {
+          top: 20,
+          right: 10,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['完成', '未完成']
+        },
+        // title: {
+        //   text: '半成品计划完成率', // 标题
+        //   top: '12px',
+        //   left: '20px',
+        //   textStyle: {
+        //     color: '#fff',
+        //     fontSize: '16'
+        //   }
+        // },
+        // tooltip: {
+        //   trigger: 'axis'
+        // },
+        xAxis: {
+          data: ['1号砖', '2号砖', '3号砖', '4号砖'],
+          // data: materArr,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        // xAxis: {
+        //   type: 'category',
+        //   axisLine: {
+        //     lineStyle: {
+        //       color: '#fff'
+        //     }
+        //   }
+        // },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [{
+          name: '未完成',
+          type: 'bar',
+          barWidth: 14,
+          stack: '完成情况',
+          data: [15, 20, 36, 10],
+          // data: unFinishArr,
+          itemStyle: {
+            normal: {
+              color: '#32C5FF'
+              // label: {
+              //   show: true,
+              //   position: 'inside',
+              //   formatter: function (params) {
+              //     if (params.value !== 0) {
+              //       return params.value
+              //     } else {
+              //       return ''
+              //     }
+              //   }
+              // }
+            }
+          }
+        }, {
+          name: '完成',
+          type: 'bar',
+          barWidth: 14,
+          stack: '完成情况',
+          data: [40, 57, 18, 20],
+          // data: finishArr,
+          itemStyle: {
+            normal: {
+              color: '#F7B502'
+              // label: {
+              //   show: true,
+              //   position: 'inside',
+              //   formatter: function (params) {
+              //     if (params.value !== 0) {
+              //       return params.value
+              //     } else {
+              //       return ''
+              //     }
+              //   }
+              // }
+            }
+          }
+        }]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
     getEchart2 () {
       // 基于准备好的dom，初始化echarts实例
       var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
@@ -201,7 +400,7 @@ export default {
             max: Math.max.apply(null, barData),
             splitNumber: 10,
             splitLine: {
-              show: true,
+              show: false,
               lineStyle: {
                 color: ['#315070'],
                 width: 1,
@@ -224,6 +423,14 @@ export default {
             splitNumber: 10,
             // position: 'right',
             // formatter: '{value}',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#315070'],
+                width: 1,
+                type: 'dashed'
+              }
+            },
             axisLine: {
               show: false,
               lineStyle: {
@@ -275,198 +482,6 @@ export default {
       window.addEventListener('resize', () => {
         this.myCharts02.resize()
       })
-    },
-    setEchart01 () {
-      let data = [
-        {
-          value: 10,
-          name: '1号砖'
-        },
-        {
-          value: 20,
-          name: '2号砖'
-        },
-        {
-          value: 30,
-          name: '3号砖'
-        },
-        {
-          value: 40,
-          name: '4号砖'
-        },
-        {
-          value: 50,
-          name: '5号砖'
-        },
-        {
-          value: 60,
-          name: '6号砖'
-        }
-      ]
-      var option = {
-        legend: {
-          orient: 'horizontal',
-          bottom: '0%',
-          textStyle: {
-            color: '#fff',
-            fontWeight: 'bold',
-            fontSize: 14
-          },
-          itemGap: 30.86,
-          itemWidth: 14.16,
-          itemHeight: 7.38,
-          data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
-        },
-        color: ['#0966E8', '#07E083', '#e7E255', '#cda02e', '#01E38a', '#57c01d'],
-        series: [
-          {
-            type: 'pie',
-            radius: ['43%', '70%'],
-            label: {
-              normal: {
-                // position: 'inner',
-                formatter: '{d}%',
-                textStyle: {
-                  color: '#fff',
-                  fontWeight: 'bold',
-                  fontSize: 14
-                }
-              }
-            },
-            labelLine: {
-              show: true
-            },
-            data: data
-          }
-        ]
-      }
-      let echart = document.getElementById('echart_d01')
-      this.myCharts01 = this.$echarts.init(echart)
-      this.myCharts01.setOption(option)
-      window.addEventListener('resize', () => {
-        this.myCharts01.resize()
-      })
-    },
-    getEchart1 () {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echart_d1'))
-      var finishArr = []
-      var unFinishArr = []
-      var materArr = []
-      this.materData.map(el => {
-        finishArr.push(el.finished_qty)
-        unFinishArr.push(el.unfinished_qty)
-        materArr.push(el.material_code)
-      })
-      // 指定图表的配置项和数据
-      var option = {
-        legend: {
-          top: 20,
-          right: 10,
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 12,
-            lineHeight: 20
-          },
-          itemGap: 20,
-          itemHeight: 8,
-          data: ['完成', '未完成']
-        },
-        title: {
-          text: '半成品计划完成率', // 标题
-          top: '12px',
-          left: '20px',
-          textStyle: {
-            color: '#fff',
-            fontSize: '16'
-          }
-        },
-        // tooltip: {
-        //   trigger: 'axis'
-        // },
-        xAxis: {
-          // data: ['1号砖', '2号砖', '3号砖', '4号砖'],
-          data: materArr,
-          axisLine: {
-            lineStyle: {
-              color: '#fff'
-            }
-          },
-          splitLine: {
-            show: false
-          }
-        },
-        // xAxis: {
-        //   type: 'category',
-        //   axisLine: {
-        //     lineStyle: {
-        //       color: '#fff'
-        //     }
-        //   }
-        // },
-        yAxis: {
-          axisLine: {
-            lineStyle: {
-              color: '#fff'
-            }
-          },
-          splitLine: {
-            show: false
-          }
-        },
-        series: [{
-          name: '未完成',
-          type: 'bar',
-          barWidth: 14,
-          stack: '完成情况',
-          // data: [15, 20, 36, 10],
-          data: unFinishArr,
-          itemStyle: {
-            normal: {
-              color: '#32C5FF'
-              // label: {
-              //   show: true,
-              //   position: 'inside',
-              //   formatter: function (params) {
-              //     if (params.value !== 0) {
-              //       return params.value
-              //     } else {
-              //       return ''
-              //     }
-              //   }
-              // }
-            }
-          }
-        }, {
-          name: '完成',
-          type: 'bar',
-          barWidth: 14,
-          stack: '完成情况',
-          // data: [40, 57, 18, 20],
-          data: finishArr,
-          itemStyle: {
-            normal: {
-              color: '#F7B502'
-              // label: {
-              //   show: true,
-              //   position: 'inside',
-              //   formatter: function (params) {
-              //     if (params.value !== 0) {
-              //       return params.value
-              //     } else {
-              //       return ''
-              //     }
-              //   }
-              // }
-            }
-          }
-        }]
-      }
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option)
-      window.addEventListener('resize', function () {
-        myChart.resize()
-      })
     }
   }
 }
@@ -556,7 +571,7 @@ export default {
   _wh(100%, calc(50% - 69px))
   _fj(row)
 .con2
-  width 40%
+  width 30%
   height 100%
   overflow hidden
   position relative
@@ -579,7 +594,7 @@ export default {
     _wh(calc(100% - 44px), calc(100% - 112px))
     margin 17px auto
 .con3
-  width calc(60% - 15px)
+  width calc(40% - 15px)
   height 100%
   overflow hidden
   position relative
@@ -596,7 +611,7 @@ export default {
   .desc1
     position absolute
     top .56rem
-    left 4.28rem
+    left 2rem
     span
       color #32C5FF
       font-size .16rem
@@ -605,6 +620,21 @@ export default {
     .num
       font-size .22rem
       color #F7B502
+.con03
+  width calc(30% - 15px)
+  height 100%
+  overflow hidden
+  position relative
+  .title
+    position absolute
+    _wh(calc(100% - 34px), 32px)
+    margin 17px
+    padding-left 0.48rem
+    _font(16px, 32px, #fff,,left)
+    background center center / 100% 100% url(../../assets/images/screen1/title_bg_d1.png) no-repeat
+  .item_content_1
+    _wh(calc(100% - 44px), 100%)
+    margin 45px auto
 .con4
   _wh(100%, calc(50% - 85px))
   margin-top 16px