From 064a2e2639b020b9cb756d695ced3d8b7d00aa99 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Thu, 8 Sep 2022 10:25:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/reset.css    |   8 +-
 src/assets/images/dot_1.png | Bin 0 -> 2290 bytes
 src/assets/js/getData2.js   |  16 ++
 src/pages/DeviceManage.vue  | 429 +++++++++++++++++++++++++++---------
 src/pages/Setup.vue         |  38 +++-
 5 files changed, 383 insertions(+), 108 deletions(-)
 create mode 100644 src/assets/images/dot_1.png

diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index a84ff34..0e9f155 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -79,12 +79,12 @@ li {
 }
  
 html, body {
-     /* width: 1920px;
-     height: 1080px; */
-     width: 100%;
+     width: 1920px;
+     height: 1080px;
+     /* width: 100%;
      height: 100%;
      min-width: 1440px;
-     min-height: 784px;
+     min-height: 784px; */
 }
  
 body {
diff --git a/src/assets/images/dot_1.png b/src/assets/images/dot_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7b8815250868413743aa1d5edeae5b7654a8598
GIT binary patch
literal 2290
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
M07*qoM6N<$g3<O{ApigX

literal 0
HcmV?d00001

diff --git a/src/assets/js/getData2.js b/src/assets/js/getData2.js
index cafbb57..7a3b29a 100644
--- a/src/assets/js/getData2.js
+++ b/src/assets/js/getData2.js
@@ -22,3 +22,19 @@ export const queryInfo3 = (id) => post('api/screen/pdm/queryInfo3', {
 export const queryInfo4 = (id) => post('api/screen/pdm/queryInfo4', {
   device_id: id
 })
+
+/** 设备管理综合查询 */
+/** 1.1设备每日开机时长 */
+export const getDeviceTime = (id) => post('api/deviceBigScreen/getDeviceTime', {})
+/** 2.1设备数量 */
+export const getDeviceNumber = (id) => post('api/deviceBigScreen/getDeviceNumber', {})
+/** 3.1年故障类别TOP10 */
+export const getDeviceFault = (id) => post('api/deviceBigScreen/getDeviceFault', {})
+/** 4.1设备运行状态 */
+export const getDeviceRunStatus = (id) => post('api/deviceBigScreen/getDeviceRunStatus', {})
+/** 5.1设备年计划保养状态 */
+export const getDeviceYearStatus = (id) => post('api/deviceBigScreen/getDeviceYearStatus', {})
+/** 6.1年保养计划监控 */
+export const getDeviceYearMainPlan = (id) => post('api/deviceBigScreen/getDeviceYearMainPlan', {})
+/** 7.1近30天班组情况 */
+export const getDeviceGroupStatus = (id) => post('api/deviceBigScreen/getDeviceGroupStatus', {})
diff --git a/src/pages/DeviceManage.vue b/src/pages/DeviceManage.vue
index e3bc6a7..537cb62 100644
--- a/src/pages/DeviceManage.vue
+++ b/src/pages/DeviceManage.vue
@@ -27,14 +27,14 @@
                 <li>保养台数</li>
               </ul>
               <div class="scroll_container_1">
-                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
+                <vue-seamless-scroll :data="gridArr1" :class-option="defaultOption1">
                   <ul class="content-block-scroll-ul_1">
-                    <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
-                      <div>{{e.id}}</div>
-                      <div>{{e.material_code}}</div>
-                      <div>{{e.pcsn}}</div>
-                      <div>{{e.workorder_qty}}</div>
-                      <div>{{e.product_qty}}</div>
+                    <li v-for="(e, i) in gridArr1" :key="i">
+                      <div class="scroll-ul_1_div">{{e.dept_name}}</div>
+                      <div class="scroll-ul_1_div">{{e.normal_num}}</div>
+                      <div class="scroll-ul_1_div">{{e.fault_num}}</div>
+                      <div class="scroll-ul_1_div">{{e.out_num}}</div>
+                      <div class="scroll-ul_1_div">{{e.main_num}}</div>
                     </li>
                   </ul>
                 </vue-seamless-scroll>
@@ -56,15 +56,22 @@
                 <li>完成率(%)</li>
               </ul>
               <div class="scroll_container_1">
-                <vue-seamless-scroll :data="array1" :class-option="defaultOption2">
+                <vue-seamless-scroll :data="gridArr2" :class-option="defaultOption2">
                   <ul class="content-block-scroll-ul_1 content-block-scroll-ul_2">
-                    <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
-                      <div>{{e.id}}</div>
-                      <div>{{e.material_code}}</div>
-                      <div>{{e.pcsn}}</div>
-                      <div>{{e.workorder_qty}}</div>
-                      <div>{{e.product_qty}}</div>
-                      <div>{{e.ee}}</div>
+                    <li v-for="(e, i) in gridArr2" :key="i">
+                      <div class="scroll-ul_1_div">{{e.dept_name}}</div>
+                      <div class="scroll-ul_1_div">{{e.need_num}}</div>
+                      <div class="scroll-ul_1_div">{{e.end_num}}</div>
+                      <div class="scroll-ul_1_div">{{e.begin_num}}</div>
+                      <div class="scroll-ul_1_div">{{e.not_num}}</div>
+                      <!-- <div class="scroll-ul_1_div">{{e.confirm_rate}}</div> -->
+                      <div class="scroll-ul_1_div">
+                        <div class="progress_line_wrap">
+                          <div class="progress_dot_wrap">
+                            <div class="progress_dot" :style="{'left': Number(e.confirm_rate) + '%'}"></div>
+                          </div>
+                        </div>
+                      </div>
                     </li>
                   </ul>
                 </vue-seamless-scroll>
@@ -85,11 +92,11 @@
                     <div class="num_items">
                       <div class="right_1_up_right_item">
                         <p class="right_1_up_p1">总设备台数</p>
-                        <p class="right_1_up_p2">100<span></span></p>
+                        <p class="right_1_up_p2">{{num1}}<span></span></p>
                       </div>
                       <div class="right_1_up_right_item">
                         <p class="right_1_up_p1">在用台数</p>
-                        <p class="right_1_up_p2">100<span></span></p>
+                        <p class="right_1_up_p2">{{num2}}<span></span></p>
                       </div>
                     </div>
                     <div class="echart_wrap_l_wrap">
@@ -97,13 +104,13 @@
                     </div>
                   </div>
                   <div class="echart_wrap_r">
-                    <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1" :key="i">
+                    <div class="right_1_down_inner_3_i" v-for="(e, i) in echartArr3" :key="i">
                       <div class="right_1_down_inner_3_l">
                         <span><i :style="{'background-color': e.color}"></i></span>
-                        <span>{{e.material_spec}}</span>
+                        <span>{{e.dept_name}}</span>
                       </div>
                       <div class="right_1_down_inner_3_r">
-                        <span>{{e.real_qty}}</span>
+                        <span>{{e.device_num}}</span>
                         <span>个</span>
                       </div>
                     </div>
@@ -117,22 +124,32 @@
                 <div class="tip_item_bg1"></div>
               </div>
               <div class="grid_wrap grid_wrap_1">
-                <ul class="scroll_tab_1">
+                <ul class="scroll_tab_1 scroll_tab_3">
                   <li>事业部</li>
-                  <li>正常台数</li>
-                  <li>故障台数</li>
-                  <li>委外台数</li>
-                  <li>保养台数</li>
+                  <li>设备名称</li>
+                  <li>设备号</li>
+                  <li>计划内容</li>
+                  <li>计划时期</li>
+                  <li>实施人</li>
+                  <li>实际操作时间</li>
+                  <li>保养倒计时</li>
+                  <li>延期时间</li>
+                  <li>评价</li>
                 </ul>
                 <div class="scroll_container_1">
-                  <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
-                    <ul class="content-block-scroll-ul_1">
-                      <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
-                        <div>{{e.id}}</div>
-                        <div>{{e.material_code}}</div>
-                        <div>{{e.pcsn}}</div>
-                        <div>{{e.workorder_qty}}</div>
-                        <div>{{e.product_qty}}</div>
+                  <vue-seamless-scroll :data="gridArr3" :class-option="defaultOption3">
+                    <ul class="content-block-scroll-ul_1 content-block-scroll-ul_3">
+                      <li v-for="(e, i) in gridArr3" :key="i">
+                        <div class="scroll-ul_1_div">{{e.dept_name}}</div>
+                        <div class="scroll-ul_1_div">{{e.device_name}}</div>
+                        <div class="scroll-ul_1_div">{{e.device_code}}</div>
+                        <div class="scroll-ul_1_div">{{e.plan_content}}</div>
+                        <div class="scroll-ul_1_div">{{e.plan_time}}</div>
+                        <div class="scroll-ul_1_div">{{e.impl_name}}</div>
+                        <div class="scroll-ul_1_div">{{e.impl_time}}</div>
+                        <div class="scroll-ul_1_div">{{e.main_time}}</div>
+                        <div class="scroll-ul_1_div">{{e.putoff_time}}</div>
+                        <div class="scroll-ul_1_div">{{e.remark}}</div>
                       </li>
                     </ul>
                   </vue-seamless-scroll>
@@ -158,21 +175,21 @@
             </div>
             <div class="grid_wrap">
               <ul class="scroll_tab_1">
-                <li>事业部</li>
-                <li>正常台数</li>
-                <li>故障台数</li>
-                <li>委外台数</li>
-                <li>保养台数</li>
+                <li>班组</li>
+                <li>MTBF(h)</li>
+                <li>MTTR(h)</li>
+                <li>平均OEE（%）</li>
+                <li>总维修时间(h)</li>
               </ul>
               <div class="scroll_container_1">
-                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
+                <vue-seamless-scroll :data="gridArr4" :class-option="defaultOption4">
                   <ul class="content-block-scroll-ul_1">
-                    <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
-                      <div>{{e.id}}</div>
-                      <div>{{e.material_code}}</div>
-                      <div>{{e.pcsn}}</div>
-                      <div>{{e.workorder_qty}}</div>
-                      <div>{{e.product_qty}}</div>
+                    <li v-for="(e, i) in gridArr4" :key="i">
+                      <div class="scroll-ul_1_div">{{e.group_name}}</div>
+                      <div class="scroll-ul_1_div">{{e.device_mtbf}}</div>
+                      <div class="scroll-ul_1_div">{{e.device_mttr}}</div>
+                      <div class="scroll-ul_1_div">{{e.device_oee}}</div>
+                      <div class="scroll-ul_1_div">{{e.device_time}}</div>
                     </li>
                   </ul>
                 </vue-seamless-scroll>
@@ -187,6 +204,7 @@
 
 <script>
 import THeader from '@components/header.vue'
+import {getDeviceTime, getDeviceNumber, getDeviceFault, getDeviceRunStatus, getDeviceYearStatus, getDeviceYearMainPlan, getDeviceGroupStatus} from '@js/getData2.js'
 export default {
   name: 'DeviceManage',
   components: {
@@ -194,19 +212,27 @@ export default {
   },
   data () {
     return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
       myCharts1: '',
       myCharts2: '',
       myCharts3: '',
-      array1: [{id: '1dfk;kf;'}, {id: '1dfk;kf;'}, {id: '1dfk;kf;'}],
-      colors: ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94'],
-      arrR1: [{material_spec: 'aa', real_qty: '10', color: '#E0CA07'}, {material_spec: 'bb', real_qty: '20', color: '#007744'}, {material_spec: 'cc', real_qty: '30', color: '#C0C0C0'}, {material_spec: 'dd', real_qty: '40', color: '#B68845'}, {material_spec: 'ee', real_qty: '50', color: '#07E083'}]
+      echartArr1: [],
+      echartArr2: [],
+      echartArr3: [],
+      num1: '',
+      num2: '',
+      gridArr1: [],
+      gridArr2: [],
+      gridArr3: [],
+      gridArr4: []
     }
   },
   computed: {
     defaultOption1 () {
       return {
         step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -216,6 +242,18 @@ export default {
       }
     },
     defaultOption2 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption3 () {
       return {
         step: 0.4, // 数值越大速度滚动越快
         limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
@@ -226,34 +264,78 @@ export default {
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
       }
+    },
+    defaultOption4 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
     }
   },
   mounted () {
-    this.setEchart1()
-    this.setEchart2()
-    this.setEchart3()
+    this._getDeviceTime()
+    this._getDeviceFault()
+    this._getDeviceNumber()
+    this._getDeviceRunStatus()
+    this._getDeviceYearStatus()
+    this._getDeviceYearMainPlan()
+    this._getDeviceGroupStatus()
+    this.refresh()
+  },
+  beforeDestroy () {
+    window.clearInterval(this.timer)
   },
   methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this._getDeviceTime()
+        this._getDeviceFault()
+        this._getDeviceNumber()
+        this._getDeviceRunStatus()
+        this._getDeviceYearStatus()
+        this._getDeviceYearMainPlan()
+        this._getDeviceGroupStatus()
+      }, this.interTime)
+    },
+    /** 每日开机时长 */
+    async _getDeviceTime () {
+      let res = await getDeviceTime()
+      if (res.code === '1') {
+        this.echartArr1 = [...res.device_time_arr]
+        this.setEchart1()
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
     setEchart1 () {
       let option = {
         grid: {
-          top: 50,
-          left: 25,
-          right: 25,
+          top: 60,
+          left: 0,
+          right: 54,
           bottom: 0,
           containLabel: true
         },
         legend: {
           top: 0,
-          right: 0,
+          left: 0,
+          icon: 'rect',
           textStyle: {
             color: '#ffffff',
-            fontSize: 16,
-            lineHeight: 20
+            fontSize: 12,
+            lineHeight: 16,
+            padding: [0, 0, 0, 0]
           },
-          itemGap: 20,
-          itemHeight: 8,
-          data: ['a', 'b', 'c']
+          itemGap: 10,
+          itemWidth: 14,
+          itemHeight: 5,
+          data: ['棒料事业部', '矿用合金事业部', '型材事业部', '混合料厂', '武汉运营保障部', '精密零件事业部']
         },
         // dataZoom: [
         //   {
@@ -280,12 +362,11 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: 16
-              // align: 'center'
+              fontSize: 13
             },
-            rotate: 50
+            rotate: -45
           },
-          data: ['2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1']
+          data: this.echartArr1.map((it) => it.device_date)
         },
         yAxis: {
           type: 'value',
@@ -313,18 +394,13 @@ export default {
         },
         series: [
           {
-            name: 'a',
+            name: '棒料事业部',
             type: 'line',
             smooth: true,
             symbolSize: 5,
             showSymbol: false,
             itemStyle: {
-              normal: {
-                lineStyle: {
-                  color: '#0E90FD',
-                  width: 2.4
-                }
-              }
+              color: '#0E90FD'
             },
             areaStyle: {
               normal: {
@@ -342,21 +418,16 @@ export default {
                 ], false)
               }
             },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: this.echartArr1.map((it) => it.dept_name_bl)
           },
           {
-            name: 'b',
+            name: '矿用合金事业部',
             type: 'line',
             smooth: true,
             symbolSize: 5,
             showSymbol: false,
             itemStyle: {
-              normal: {
-                lineStyle: {
-                  color: '#33CCCC',
-                  width: 2.4
-                }
-              }
+              color: '#33CCCC'
             },
             areaStyle: {
               normal: {
@@ -372,21 +443,16 @@ export default {
                 ], false)
               }
             },
-            data: [220, 182, 191, 234, 290, 330, 310]
+            data: this.echartArr1.map((it) => it.dept_name_ky)
           },
           {
-            name: 'c',
+            name: '型材事业部',
             type: 'line',
             smooth: true,
             symbolSize: 5,
             showSymbol: false,
             itemStyle: {
-              normal: {
-                lineStyle: {
-                  color: '#B68845',
-                  width: 2.4
-                }
-              }
+              color: '#B68845'
             },
             areaStyle: {
               normal: {
@@ -404,7 +470,84 @@ export default {
                 ], false)
               }
             },
-            data: [120, 180, 91, 134, 190, 130, 310]
+            data: this.echartArr1.map((it) => it.dept_name_xc)
+          },
+          {
+            name: '混合料厂',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              color: 'rgba(155, 155, 226, 0.8)'
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(155, 155, 226, 0.8)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(155, 155, 226, 0)'
+                  }
+                ], false)
+              }
+            },
+            data: this.echartArr1.map((it) => it.dept_name_hh)
+          },
+          {
+            name: '武汉运营保障部',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              color: '#6de82d'
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#6de82d',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: '#d9ff7d',
+                    opacity: 1
+                  }
+                ], false)
+              }
+            },
+            data: this.echartArr1.map((it) => it.dept_name_wh)
+          },
+          {
+            name: '精密零件事业部',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              color: 'rgba(217, 31, 44, 1)'
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#D91F2C'
+                  },
+                  {
+                    offset: 1,
+                    color: '#FFFFFF'
+                  }
+                ], false)
+              }
+            },
+            data: this.echartArr1.map((it) => it.dept_name_jm)
           }
         ]
       }
@@ -416,6 +559,16 @@ export default {
         this.myCharts1.resize()
       })
     },
+    /** 年故障类别TOP10 */
+    async _getDeviceFault () {
+      let res = await getDeviceFault()
+      if (res.code === '1') {
+        this.echartArr2 = [...res.device_fault_arr]
+        this.setEchart2()
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
     setEchart2 () {
       let option = {
         grid: {
@@ -482,7 +635,7 @@ export default {
               fontSize: 14
             }
           },
-          data: ['aa', 'bb']
+          data: this.echartArr2.map((it) => it.device_fault_type)
         },
         series: [
           {
@@ -501,7 +654,7 @@ export default {
                 color: '#33CCCC'
               }
             },
-            data: ['120', '30']
+            data: this.echartArr2.map((it) => it.device_fault_num)
           }
         ]
       }
@@ -513,10 +666,26 @@ export default {
         this.myCharts2.resize()
       })
     },
+    /** 设备数量 */
+    async _getDeviceNumber () {
+      let res = await getDeviceNumber()
+      if (res.code === '1') {
+        this.num1 = res.device_all_num
+        this.num2 = res.device_use_num
+        let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
+        res.device_all_arr.map((e, i) => {
+          this.$set(e, 'color', colors[i])
+        })
+        this.echartArr3 = [...res.device_all_arr]
+        this.setEchart3()
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
     setEchart3 () {
       let arr = []
-      this.arrR1.map(el => {
-        arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
+      this.echartArr3.map(el => {
+        arr.push({name: el.dept_name, value: parseFloat(el.device_num), itemStyle: {color: el.color}})
       })
       var option = {
         tooltip: {
@@ -550,6 +719,42 @@ export default {
           this.myCharts3.resize()
         })
       }
+    },
+    /** 设备运行状态 */
+    async _getDeviceRunStatus () {
+      let res = await getDeviceRunStatus()
+      if (res.code === '1') {
+        this.gridArr1 = [...res.device_run_arr]
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 设备年计划保养状态 */
+    async _getDeviceYearStatus () {
+      let res = await getDeviceYearStatus()
+      if (res.code === '1') {
+        this.gridArr2 = [...res.device_year_arr]
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 年保养计划监控 */
+    async _getDeviceYearMainPlan () {
+      let res = await getDeviceYearMainPlan()
+      if (res.code === '1') {
+        this.gridArr3 = [...res.device_year_arr]
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 近30天班组情况 */
+    async _getDeviceGroupStatus () {
+      let res = await getDeviceGroupStatus()
+      if (res.code === '1') {
+        this.gridArr4 = [...res.device_group_arr]
+      } else {
+        this.Dialog(res.desc)
+      }
     }
   }
 }
@@ -597,14 +802,13 @@ export default {
   background linear-gradient(0deg, rgb(15, 44, 84) 0%, rgb(0, 8, 50) 100%)
   p
     display inline-block
-    _font(.18rem, .25rem, #fff)
-    border-bottom .01rem solid #53cdf9
-    padding-top .06rem
+    _font(.18rem, .40rem, #fff)
+    border-bottom .02rem solid #53cdf9
 .tip_item_bg1
   position absolute
-  bottom 0.08rem
+  bottom -0.01rem
   left .2rem
-  _wh(.05rem, .05rem)
+  _wh(.06rem, .06rem)
   background-color #53cdf9
   transform rotate(45deg)
   box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
@@ -620,6 +824,7 @@ export default {
   _wh(calc(100% - .4rem), calc(100% - .7rem))
   margin .08rem .2rem .2rem .2rem
   border .01rem solid rgba(8,205,248,0.3)
+  overflow hidden
 .grid_wrap_1
   margin-left 0
   margin-right 0
@@ -637,8 +842,12 @@ export default {
     padding 0 .02rem
     overflow hidden
     box-sizing border-box
+.scroll_container_1
+  overflow hidden
 .scroll_tab_2 li
   width calc(100% / 6)
+.scroll_tab_3 li
+  width calc(100% / 10)
 .content-block-scroll-ul_1
   li
     _wh(100%, .44rem)
@@ -650,7 +859,7 @@ export default {
       border-bottom none
 .content-block-scroll-ul_1
   li
-    div
+    .scroll-ul_1_div
       float left
       _wh(20%, .44rem)
       _fj(center)
@@ -660,8 +869,25 @@ export default {
       white-space nowrap
       padding 0 .02rem
       overflow hidden
-.content-block-scroll-ul_2 li div
+      .progress_line_wrap
+        position relative
+        _wh(1.35rem, .03rem)
+        background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
+      .progress_dot_wrap
+        position absolute
+        _wh(100%, .15rem)
+        top -.06rem
+        left -.05rem
+      .progress_dot
+        position absolute
+        top 0
+        left 0
+        _wh(.15rem, .15rem)
+        background center center / 100% 100% url(../assets/images/dot_1.png) no-repeat
+.content-block-scroll-ul_2 li .scroll-ul_1_div
   width calc(100% / 6)
+.content-block-scroll-ul_3 li .scroll-ul_1_div
+  width calc(100% / 10)
 .num_items
   _wh(100%, .6rem)
   _fj()
@@ -691,11 +917,12 @@ export default {
 .echart_wrap_r
   _wh(40%, 100%)
   padding-left .2rem
-  _fj(,flex-start)
+  _fj(flex-start,flex-start)
   flex-direction column
 .right_1_down_inner_3_i
   _wh(100%, .4rem)
   _fj()
+  margin-bottom .1rem
   background center bottom / 100% 100% url(../assets/images/item_5.png) no-repeat
 .right_1_down_inner_3_l
   _wh(50%, 100%)
diff --git a/src/pages/Setup.vue b/src/pages/Setup.vue
index 82148fb..27290f8 100644
--- a/src/pages/Setup.vue
+++ b/src/pages/Setup.vue
@@ -44,6 +44,18 @@
                 </dropdown-menu>
               </div>
             </div>
+            <div class="inputOuter">
+              <label>设备大屏</label>
+              <div class="fr select_wrap select_wrap_1">
+                <dropdown-menu
+                  :option="option1"
+                  :active="active1"
+                  :open="open1"
+                  @toggleItem="toggleItem1"
+                  @dropdownMenu="dropdownMenu1">
+                </dropdown-menu>
+              </div>
+            </div>
           </div>
           <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div>
         </div>
@@ -71,7 +83,10 @@ export default {
       heightLimit: false,
       option: [],
       active: '',
-      open: false
+      open: false,
+      option1: [{value: '1', label: '混合料厂配粉任务看板'}, {value: '2', label: '设备管理综合查询'}],
+      active1: '',
+      open1: false
     }
   },
   mounted () {
@@ -106,21 +121,36 @@ export default {
       this.active = i + ''
       this.open = false
     },
+    toggleItem1 () {
+      if (!this.open1) {
+        this.open1 = true
+      } else {
+        this.open1 = false
+      }
+    },
+    dropdownMenu1 (i) {
+      this.active1 = i + ''
+      this.open1 = false
+    },
     _config () {
       if (this.active === '') {
         this.toast('请选择配粉工位')
         return
       }
+      if (this.active1 === '') {
+        this.toast('请选择设备大屏')
+        return
+      }
       let obj = {
         baseUrl: this.baseUrl,
         setTime: this.setTime,
         equipId: this.option[this.active].value
       }
       this.$store.dispatch('setConfig', obj)
-      if (this.equipId === 1) {
+      if (this.option1[this.active1].value === '1') {
         this.$router.push('/taskscreen')
       } else {
-        this.$router.push('/taskscreen')
+        this.$router.push('/DeviceManage')
       }
       let element = document.documentElement
       if (this.fullscreen) {
@@ -235,6 +265,8 @@ label
   height 38px
   line-height 38px
   font-size 16px
+.select_wrap_1
+  width 260px
 .btn1
   outline none
   border none