From 0932ffb3a9c9461042c188bfcda99f00fe06dfd9 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Tue, 15 Aug 2023 11:29:05 +0800
Subject: [PATCH] echart

---
 src/pages/shunhe/ProdCount.vue | 560 +++++++++------------------------
 1 file changed, 157 insertions(+), 403 deletions(-)

diff --git a/src/pages/shunhe/ProdCount.vue b/src/pages/shunhe/ProdCount.vue
index 1853cb5..1f82db5 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" @click="toJump">1</p>
+        <p class="p1">1</p>
       </t-header>
       <div class="container">
         <div class="con1">
@@ -39,23 +39,19 @@
             </div>
           </div>
           <div class="con3" style="position: relative">
-            <div class="title">成品计划完成情况</div>
-            <div class="item_content_1">
-              <div id="echart_d05" style="width: 100%; height: 100%"></div>
-            </div>
-          </div>
-          <!-- <div class="con3" style="position: relative">
             <div class="title">在制品设备生产量</div>
-            <div id="echarts2" style="width: 100%; height: 100%;"></div>
+            <div class="item_content_1">
+              <div id="echarts2" style="width: 100%; height: 100%;"></div>
+            </div>
             <div class="desc1">
               <span>当日产量：</span>
-              <span class="num">{{showNum3}}</span>
+              <span class="num">{{showNum4}}</span>
               <span class="span3">块</span>
               <span>当班产量：</span>
-              <span class="num">{{showNum4}}</span>
+              <span class="num">{{showNum5}}</span>
               <span>吨</span>
             </div>
-          </div> -->
+          </div>
         </div>
         <div class="con4">
           <div class="block_h2">
@@ -93,9 +89,11 @@ export default {
       timer: null,
       showNum1: '',
       showNum2: '',
-      showNum3: '222',
+      showNum3: '',
       showNum4: '333',
-      myCharts05: '',
+      showNum5: '333',
+      myCharts01: '',
+      myCharts02: '',
       materData: [],
       deviceData: [],
       resData: {},
@@ -143,136 +141,141 @@ 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.setEchart05()
-      // this.getEchart2()
+      this.getEchart2()
       this.realqty = res.result.materialTask[0].real_qty
       this.planqty = res.result.materialTask[0].plan_qty
       this.setEchart01()
       // 五种状态：未成产、已下发、生产中、停止、完成
     },
-    // getEchart2 () {
-    //   // 基于准备好的dom，初始化echarts实例
-    //   var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
-    //   var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
-    //   var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
-    //   // var lineData = []
-    //   // var barData = []
-    //   // var xData = []
-    //   // this.deviceData.map(el => {
-    //   //   console.log(el.produce_qty)
-    //   //   lineData.push(el.produce_qty)
-    //   //   barData.push(el.produce_num)
-    //   //   xData.push(el.device_name)
-    //   // })
-    //   var myChart = echarts.init(document.getElementById('echarts2'))
-    //   var option = {
-    //     legend: {
-    //       top: 20,
-    //       right: 10,
-    //       textStyle: {
-    //         color: '#ffffff',
-    //         fontSize: 12,
-    //         lineHeight: 20
-    //       },
-    //       itemGap: 20,
-    //       itemHeight: 8,
-    //       data: ['数量', '重量']
-    //     },
-    //     // tooltip: {
-    //     //   trigger: 'axis'
-    //     // },
-    //     xAxis: {
-    //       // name: '设备',
-    //       type: 'category',
-    //       data: xData,
-    //       nameGap: 60, // 坐标轴名称与轴线之间的距离。
-    //       axisLine: {
-    //         show: true,
-    //         lineStyle: {
-    //           color: '#fff'
-    //         }
-    //       },
-    //       axisLabel: {
-    //         color: '#fff'
-    //       }
-    //     },
-    //     yAxis: [
-    //       {
-    //         // name: '交易额（亿元）',
-    //         type: 'value',
-    //         min: 0,
-    //         // max: 100000,
-    //         max: Math.max.apply(null, barData),
-    //         splitNumber: 10,
-    //         splitLine: {
-    //           show: true,
-    //           lineStyle: {
-    //             color: ['#315070'],
-    //             width: 1,
-    //             type: 'dotted'
-    //           }
-    //         },
-    //         axisLine: {
-    //           show: false,
-    //           lineStyle: {
-    //             color: '#fff'
-    //           }
-    //         }
-    //       },
-    //       {
-    //         // name: '增长率',
-    //         type: 'value',
-    //         min: 0,
-    //         // max: 10,
-    //         max: Math.max.apply(null, lineData),
-    //         splitNumber: 10,
-    //         // position: 'right',
-    //         // formatter: '{value}',
-    //         axisLine: {
-    //           show: false,
-    //           lineStyle: {
-    //             color: '#fff'
-    //           }
-    //         },
-    //         itemStyle: {
-    //           color: '#F7B502'
-    //         }
-    //       }
-    //     ],
-    //     series: [
-    //       {
-    //         name: '数量',
-    //         type: 'bar',
-    //         data: barData,
-    //         barWidth: 10,
-    //         itemStyle: {
-    //           color: '#32C5FF'
-    //         }
-    //       },
-    //       {
-    //         name: '重量',
-    //         type: 'line',
-    //         symbolSize: 12, // 拐点圆的大小
-    //         symbol: 'circle',
-    //         data: lineData,
-    //         lineStyle: {
-    //           color: '#F7B502'
-    //         },
-    //         itemStyle: {
-    //           normal: {
-    //             color: '#F7B502'
-    //           }
-    //         },
-    //         yAxisIndex: 1
-    //       }
-    //     ]
-    //   }
-    //   // 使用刚指定的配置项和数据显示图表。
-    //   myChart.setOption(option)
-    //   window.addEventListener('resize', function () {
-    //     myChart.resize()
-    //   })
-    // },
+    getEchart2 () {
+      // 基于准备好的dom，初始化echarts实例
+      var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
+      var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
+      var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
+      // var lineData = []
+      // var barData = []
+      // var xData = []
+      // this.deviceData.map(el => {
+      //   console.log(el.produce_qty)
+      //   lineData.push(el.produce_qty)
+      //   barData.push(el.produce_num)
+      //   xData.push(el.device_name)
+      // })
+      var option = {
+        legend: {
+          top: 20,
+          right: 10,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['数量', '重量']
+        },
+        // tooltip: {
+        //   trigger: 'axis'
+        // },
+        xAxis: {
+          // name: '设备',
+          type: 'category',
+          data: xData,
+          nameGap: 60, // 坐标轴名称与轴线之间的距离。
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: [
+          {
+            // name: '交易额（亿元）',
+            type: 'value',
+            min: 0,
+            // max: 100000,
+            max: Math.max.apply(null, barData),
+            splitNumber: 10,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#315070'],
+                width: 1,
+                type: 'dotted'
+              }
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            }
+          },
+          {
+            // name: '增长率',
+            type: 'value',
+            min: 0,
+            // max: 10,
+            max: Math.max.apply(null, lineData),
+            splitNumber: 10,
+            // position: 'right',
+            // formatter: '{value}',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              color: '#F7B502'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            data: barData,
+            barWidth: 10,
+            itemStyle: {
+              color: '#32C5FF'
+            }
+          },
+          {
+            name: '重量',
+            type: 'line',
+            symbolSize: 12, // 拐点圆的大小
+            symbol: 'circle',
+            data: lineData,
+            lineStyle: {
+              color: '#F7B502'
+            },
+            itemStyle: {
+              normal: {
+                color: '#F7B502'
+              }
+            },
+            yAxisIndex: 1
+          }
+        ]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      // var myChart = echarts.init(document.getElementById('echarts2'))
+      // myChart.setOption(option)
+      // window.addEventListener('resize', function () {
+      //   myChart.resize()
+      // })
+      let echart = document.getElementById('echarts2')
+      this.myCharts02 = this.$echarts.init(echart)
+      this.myCharts02.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts02.resize()
+      })
+    },
     setEchart01 () {
       let data = [
         {
@@ -303,7 +306,7 @@ export default {
       var option = {
         legend: {
           orient: 'horizontal',
-          bottom: '1%',
+          bottom: '0%',
           textStyle: {
             color: '#fff',
             fontWeight: 'bold',
@@ -344,145 +347,6 @@ export default {
         this.myCharts01.resize()
       })
     },
-    setEchart05 () {
-      var data05d0 = []
-      var data05d1 = []
-      var data05d2 = []
-      this.resData.planRes.map(el => {
-        data05d0.push(el.workorder_procedure)
-        data05d1.push(el.plan_qty)
-        data05d2.push(el.real_qty)
-      })
-      let option = {
-        grid: {
-          top: 50,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          containLabel: true
-        },
-        legend: {
-          icon: 'rect',
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
-            lineHeight: 14
-          },
-          itemGap: 30.86,
-          itemWidth: 14.16,
-          itemHeight: 7.38,
-          data: [{name: '计划生产数量', itemStyle: {color: '#0E90FD'}}, {name: '已完成数量', itemStyle: {color: '#EAAD24'}}]
-        },
-        xAxis: {
-          type: 'category',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              width: 2,
-              color: '#8FABBF'
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 14
-            }
-          },
-          data: data05d0
-          // data: ['压制', '干燥', '包装']
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            show: false
-          },
-          splitNumber: 2,
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 14
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: [8, 4],
-              dashOffset: 4,
-              color: '#8FABBF',
-              opacity: 0.2
-            }
-          }
-        },
-        series: [
-          {
-            name: '计划生产数量',
-            type: 'bar',
-            barWidth: '28',
-            barGap: '100%', // 柱图间距
-            itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 1,
-                    color: 'rgba(96,112,128,0.10)',
-                    opacity: 1
-                  },
-                  {
-                    offset: 0,
-                    color: '#0E90FD',
-                    opacity: 0.1
-                  }
-                ])
-              }
-            },
-            data: data05d1
-            // data: ['390', '390', '390']
-          },
-          {
-            name: '已完成数量',
-            type: 'bar',
-            barWidth: '28',
-            barGap: '100%', // 柱图间距
-            itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#B68845',
-                    opacity: 1
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(134,98,45,0.25)',
-                    opacity: 0.25
-                  }
-                ])
-              }
-            },
-            data: data05d2
-            // data: ['210', '210', '210']
-          }
-        ]
-      }
-      let echart = document.getElementById('echart_d05')
-      if (this.myCharts05 !== '') {
-        this.myCharts05.dispose()
-      }
-      if (echart !== null) {
-        this.myCharts05 = this.$echarts.init(echart)
-        this.myCharts05.setOption(option)
-        window.addEventListener('resize', () => {
-          this.myCharts05.resize()
-        })
-      }
-    },
     getEchart1 () {
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('echart_d1'))
@@ -603,129 +467,6 @@ export default {
       window.addEventListener('resize', function () {
         myChart.resize()
       })
-    },
-    getEchart2 () {
-      // 基于准备好的dom，初始化echarts实例
-      // var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
-      // var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
-      // var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
-      var lineData = []
-      var barData = []
-      var xData = []
-      this.deviceData.map(el => {
-        console.log(el.produce_qty)
-        lineData.push(el.produce_qty)
-        barData.push(el.produce_num)
-        xData.push(el.device_name)
-      })
-      var myChart = echarts.init(document.getElementById('echarts2'))
-      var option = {
-        legend: {
-          top: 20,
-          right: 10,
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 12,
-            lineHeight: 20
-          },
-          itemGap: 20,
-          itemHeight: 8,
-          data: ['数量', '重量']
-        },
-        // tooltip: {
-        //   trigger: 'axis'
-        // },
-        xAxis: {
-          // name: '设备',
-          type: 'category',
-          data: xData,
-          nameGap: 60, // 坐标轴名称与轴线之间的距离。
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#fff'
-            }
-          },
-          axisLabel: {
-            color: '#fff'
-          }
-        },
-        yAxis: [
-          {
-            // name: '交易额（亿元）',
-            type: 'value',
-            min: 0,
-            // max: 100000,
-            max: Math.max.apply(null, barData),
-            splitNumber: 10,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: ['#315070'],
-                width: 1,
-                type: 'dotted'
-              }
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#fff'
-              }
-            }
-          },
-          {
-            // name: '增长率',
-            type: 'value',
-            min: 0,
-            // max: 10,
-            max: Math.max.apply(null, lineData),
-            splitNumber: 10,
-            // position: 'right',
-            // formatter: '{value}',
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#fff'
-              }
-            },
-            itemStyle: {
-              color: '#F7B502'
-            }
-          }
-        ],
-        series: [
-          {
-            name: '数量',
-            type: 'bar',
-            data: barData,
-            barWidth: 10,
-            itemStyle: {
-              color: '#32C5FF'
-            }
-          },
-          {
-            name: '重量',
-            type: 'line',
-            symbolSize: 12, // 拐点圆的大小
-            symbol: 'circle',
-            data: lineData,
-            lineStyle: {
-              color: '#F7B502'
-            },
-            itemStyle: {
-              normal: {
-                color: '#F7B502'
-              }
-            },
-            yAxisIndex: 1
-          }
-        ]
-      }
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option)
-      window.addEventListener('resize', function () {
-        myChart.resize()
-      })
     }
   }
 }
@@ -843,14 +584,27 @@ export default {
   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_d2.png) no-repeat
   .item_content_1
-    _wh(calc(100% - 44px), calc(100% - 90px))
-    margin 17px auto
+    _wh(calc(100% - 44px), 100%)
+    margin 45px auto
+  .desc1
+    position absolute
+    top .56rem
+    left 4.28rem
+    span
+      color #32C5FF
+      font-size .16rem
+    .span3
+      margin-right .5rem
+    .num
+      font-size .22rem
+      color #F7B502
 .con4
   _wh(100%, calc(50% - 85px))
   margin-top 16px