接口数据

README.md

@@ -21,3 +21,4 @@ npm run build --report
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 # 马钢大屏尺寸1920*1080
+# 接口地址：https://apifox.com/apidoc/shared-502f730f-87a1-45eb-a8ec-786fd1ac8602

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
+    "default-passive-events": "^2.0.0",
     "echarts": "^5.3.2",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

src/assets/js/getData2.js

@@ -1,126 +1,3 @@
-import {post, post1} from '@js/http.js'
+import {post} from '@js/http.js'
 
-/** 1.1配粉设备下拉框 */
+export const vpress = (url) => post('api/cockpit/v2/press', {})
-export const queryDevice = (url) => post1(url + '/api/screen/pdm/queryDevice', {})
-
-/** 1.1大屏左一 */
-// export const planReached = (id) => post('api/bigscreen/product/planReached', {})
-export const planReached = (id) => {
-  let res = {
-    code: '1',
-    dayResult: {
-      jo1: {plan_qty: '100', real_qty: '200', finish_rate: '200'},
-      jo2: {plan_qty: '100', real_qty: '200', finish_rate: '200'},
-      jo3: {plan_qty: '100', real_qty: '200', finish_rate: '200'}
-    },
-    monthResult: {
-      joo1: {plan_qty: '100', real_qty: '200', finish_rate: '200'},
-      joo2: {plan_qty: '100', real_qty: '200', finish_rate: '200'},
-      joo3: {plan_qty: '100', real_qty: '200', finish_rate: '200'}
-    }
-  }
-  return res
-}
-
-/** 1.2大屏左二 */
-// export const worksectionHarvest = (id) => post('api/bigscreen/product/worksectionHarvest', {})
-export const worksectionHarvest = (id) => {
-  let res = {
-    code: '1',
-    result: [
-      {
-        'device_name': '运行',
-        'failure': 0,
-        'shutdown': 0,
-        'standby': 0,
-        'running': 5
-      },
-      {
-        'device_name': '暂停',
-        'failure': 0,
-        'shutdown': 0,
-        'standby': 1,
-        'running': 0
-      },
-      {
-        'device_name': '停机',
-        'failure': 0,
-        'shutdown': 2,
-        'standby': 0,
-        'running': 0
-      },
-      {
-        'device_name': '故障',
-        'failure': 1,
-        'shutdown': 0,
-        'standby': 0,
-        'running': 0
-      }
-    ]
-  }
-  return res
-}
-
-/** 1.3大屏左三 */
-// export const monthHarvest = (id) => post('api/bigscreen/product/monthHarvest', {})
-export const monthHarvest = (id) => {
-  let res = {
-    code: '1',
-    result: [{date: '混料', real_qty: '10', rate: '10'}, {date: '压制', real_qty: '8', rate: '15'}, {date: '干燥', real_qty: '3', rate: '2'}, {date: '分拣', real_qty: '7', rate: '5'}]
-  }
-  return res
-}
-
-/** 1.4大屏右一 */
-// export const output = (id) => post('api/bigscreen/product/output', {})
-export const output = (id) => {
-  let res = {
-    code: '1',
-    result: {finish_rate: '80', plan_qty: '10', real_qty: '20', sum_qty: '100', normal_qty: '20', delayed_qty: '10'}
-  }
-  return res
-}
-
-/** 1.5大屏右二 */
-// export const topHarvest = (id) => post('api/bigscreen/product/topHarvest', {})
-export const topHarvest = (id) => {
-  let res = {
-    code: '1',
-    result: [{sort: '1', material_spec: 'aa', real_qty: '10'}, {sort: '1', material_spec: 'aa', real_qty: '10'}, {sort: '1', material_spec: 'aa', real_qty: '10'}]
-  }
-  return res
-}
-
-/** 1.6大屏右三 */
-// export const monthOrder = (id) => post('api/bigscreen/product/monthOrder', {})
-export const monthOrder = (id) => {
-  let res = {
-    code: '1',
-    result: [{material_spec: '1', real_qty: '10'}]
-  }
-  return res
-}
-
-/** 1.7大屏中一 */
-// export const productSchedule = (id) => post('api/bigscreen/product/productSchedule', {})
-export const productSchedule = (id) => {
-  let res = {
-    code: '1',
-    result: [{a1: 'hn01', a2: 'wl01', a3: '1号混料', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '2号混料', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '1号砖', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '2号砖', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '3号砖', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '1号砖', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '2号砖', a4: '1.05吨'}, {a1: 'hn01', a2: 'wl01', a3: '3号砖', a4: '1.05吨'}]
-  }
-  return res
-}
-
-/** 1.8大屏中二 */
-export const unfinishOrder = (id) => post('api/bigscreen/product/unfinishOrder', {})
-
-// 车间看板
-// 1.1任务数
-export const getTask = (id) => post('api/agvBigScreen/getTask', {})
-// 1.2车辆状态
-export const getAgvMsg = (id) => post('api/agvBigScreen/getAgvMsg', {})
-
-/** 大屏首页报表 */
-export const homepageData = () => post('api/dashboard/homepageData', {})
-/** 大屏首页设备 */
-export const homepageEquipment = () => post('api/dashboard/homepageEquipment', {})

src/main.js

@@ -10,6 +10,7 @@ import '@css/layout2.styl'
 import filter from '@js/filter.js'
 import { Dialog, toast } from '@js/mUtils.js'
 import {post} from '@js/http.js'
+import 'default-passive-events'
 import * as echarts from 'echarts'
 import VueParticles from 'vue-particles'
 import scroll from 'vue-seamless-scroll'

src/pages/Setup.vue

@@ -94,7 +94,7 @@ export default {
         // equipId: this.active
       }
       this.$store.dispatch('setConfig', obj)
-      this.$router.push('/prodcount')
+      this.$router.push('/board')
       let element = document.documentElement
       if (this.fullscreen) {
         if (document.exitFullscreen) {

src/pages/board.vue

@@ -3,36 +3,32 @@
     <t-header  title="压制生产看板"></t-header>
     <div class="content">
       <div class="zd-row yj_wraper">
-        <div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
+        <div class="yj_item" v-for="(e, i) in PressInfo" :key="'yj' + i">
-          <div class="zd-row jccenter yj_name">{{ e.device_code }}</div>
+          <div class="zd-row jccenter yj_name">{{ e.point_code }}</div>
           <div class="yj_info_wraper">
-            <div class="zd-row yj_info">
+            <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p2">压机状态:</div>
+              <div class="yj_info_p1">{{ e.point_status }}</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
+              <div class="yj_info_p2">压机状态</div>
             </div>
-            <div class="zd-row yj_info">
+            <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p2">当前产品:</div>
+              <div class="yj_info_p1">{{ e.material_code }}</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
+              <div class="yj_info_p2">当前产品</div>
             </div>
-            <div class="zd-row yj_info">
+            <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p2">泥料:</div>
+              <div class="yj_info_p1">{{ e.raw_material_code }}</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
+              <div class="yj_info_p2">泥料</div>
             </div>
-            <div class="zd-row yj_info">
+            <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p2">当班产量:</div>
+              <div class="yj_info_p1">{{ e.team_qty }}</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
+              <div class="yj_info_p2">当班产量</div>
             </div>
-            <div class="zd-row yj_info">
+            <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p2">布料仓余量:</div>
+              <div class="yj_info_p1">{{ e.blj_weight }}</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
+              <div class="yj_info_p2">布料仓余量</div>
             </div>
-            <div class="zd-row yj_info">
+            <div class="zd-row flexcol jccenter yj_info">
-              <div class="yj_info_p2">缓存线泥料余量:</div>
+              <div class="yj_info_p1">{{ e.rate }}</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
+              <div class="yj_info_p2">当班合格率</div>
-            </div>
-            <div class="zd-row yj_info">
-              <div class="yj_info_p2">当班合格率:</div>
-              <div class="yj_info_p1">{{ e.status }}</div>
             </div>
           </div>
         </div>
@@ -50,11 +46,11 @@
               <div class="zd-row num_content">
                 <div class="zd-row flexcol  jccenter num_item">
                   <div class="yj_info_p2">日计划量</div>
-                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                  <div class="yj_info_p1">{{PlanInfo.dayPlanSum}}&nbsp;吨</div>
                 </div>
                 <div class="zd-row flexcol  jccenter num_item">
                   <div class="yj_info_p2">日完成量</div>
-                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                  <div class="yj_info_p1">{{PlanInfo.dayRealSum}}&nbsp;吨</div>
                 </div>
               </div>
             </div>
@@ -65,22 +61,22 @@
               <div class="zd-row num_content">
                 <div class="zd-row flexcol  jccenter num_item">
                   <div class="yj_info_p2">月计划量</div>
-                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                  <div class="yj_info_p1">{{PlanInfo.planMonthSum}}&nbsp;吨</div>
                 </div>
                 <div class="zd-row flexcol  jccenter num_item">
                   <div class="yj_info_p2">月完成量</div>
-                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                  <div class="yj_info_p1">{{PlanInfo.realMonthSum}}&nbsp;吨</div>
                 </div>
               </div>
             </div>
             <div class="zd-row num_wrap_2">
               <div class="zd-row pass_item">
                 <p class="pass_p1">日合格率</p>
-                <p class="pass_p2">20%</p>
+                <p class="pass_p2">{{PlanInfo.dayPassRate.toFixed(2)}}%</p>
               </div>
               <div class="zd-row pass_item">
-                <p class="pass_p1">日合格率</p>
+                <p class="pass_p1">月合格率</p>
-                <p class="pass_p2">20%</p>
+                <p class="pass_p2">{{PlanInfo.montPassRate.toFixed(2)}}%</p>
               </div>
             </div>
           </div>
@@ -92,12 +88,12 @@
           <div class="item_wrap">
             <div class="zd-row nl_wrap">
               <div class="zd-row cur_nl_wrap">
-                <div class="yj_info_p2">当前缓存线泥料种类</div>
+                <div class="yj_info_p4">当前缓存线泥料种类</div>
-                <div class="yj_info_p1">20</div>
+                <div class="yj_info_p3">{{ DataInfo.count }}</div>
               </div>
               <div class="zd-row cur_nl_wrap cur_nl_wrap_1">
-                <div class="yj_info_p2">当前缓存线泥料总重</div>
+                <div class="yj_info_p4">当前缓存线泥料总重</div>
-                <div class="yj_info_p1">20</div>
+                <div class="yj_info_p3">{{ DataInfo.sum }}</div>
               </div>
             </div>
             <div class="data_wrap">
@@ -110,15 +106,15 @@
                 <li>停留时间</li>
               </ul>
               <div class="scroll_container">
-                <vue-seamless-scroll :data="dataList2" :class-option="defaultOption1">
+                <vue-seamless-scroll :data="dataList" :class-option="defaultOption1">
                   <ul class="scroll-ul">
-                    <li v-for="(e, i) in dataList2" :key="i">
+                    <li v-for="(e, i) in dataList" :key="i">
                     <div class="zd-row jccenter scroll-item">{{i+1}}</div>
-                    <div class="zd-row jccenter scroll-item">{{e.material_code}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.redundance_material_code}}</div>
                     <div class="zd-row jccenter scroll-item">{{e.material_name}}</div>
-                    <div class="zd-row jccenter scroll-item">{{e.qty}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.material_weight}}</div>
-                    <div class="zd-row jccenter scroll-item">{{e.time}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.down_time}}</div>
-                    <div class="zd-row jccenter scroll-item">{{e.time1}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.minutes_difference}}</div>
                     </li>
                   </ul>
                 </vue-seamless-scroll>
@@ -134,14 +130,20 @@
 
 <script>
 import THeader from '@components/header.vue'
+import { vpress } from '@js/getData2'
+// import { vpress } from '@js/mork2'
 export default {
   components: {
     THeader
   },
   data () {
     return {
-      dataList1: [],
+      interTime: this.$store.getters.setTime,
-      dataList2: [{material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}]
+      timer: null,
+      PressInfo: [], // 压机数据
+      PlanInfo: {planMonthSum: 0, dayPlanSum: 0, realMonthSum: 0, dayPassRate: 0, montPassRate: 0, dayRealSum: 0}, // 合格数
+      DataInfo: {}, // 泥料数据
+      dataList: []
     }
   },
   computed: {
@@ -158,17 +160,32 @@ export default {
       }
     }
   },
-  created () {
-    for (let i = 0; i < 8; i++) {
-      this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
-    }
-  },
   mounted () {
-    this.setEchart1()
+    this.initData()
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
   },
   methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this.initData()
+      }, this.interTime)
+    },
+    async initData () {
+      let res = await vpress()
+      this.PressInfo = [...res.PressInfo]
+      this.PlanInfo = res.PlanInfo
+      this.DataInfo = res.DataInfo
+      this.dataList = [...res.DataInfo.dataInfo]
+      this.setEchart1()
+      this.setEchart2()
+    },
     setEchart1 () {
-      let value = 10
+      let value = (this.PlanInfo.dayRealSum / this.PlanInfo.dayPlanSum) * 100
+      value = value.toFixed(2)
+      console.log(value)
       let title = '%'
       let text = '完成率'
       let option = {
@@ -180,24 +197,24 @@ export default {
             textStyle: {
               rich: {
                 a: {
-                  fontSize: 22,
+                  fontSize: 16,
                   color: '#00D9FF',
                   fontFamily: 'SourceHanSansCN',
                   foontWeight: '700'
                 },
                 b: {
-                  fontSize: 14,
+                  fontSize: 12,
                   color: '#ffffff',
                   fontFamily: 'SourceHanSansCN',
                   foontWeight: '700',
-                  padding: [10, 0, 0, 3]
+                  padding: [4, 0, 0, 2]
                 },
                 c: {
                   color: '#FFFFFF',
                   fontSize: 12,
                   fontWeight: '700',
                   fontFamily: 'SourceHanSansCN',
-                  padding: [10, 0, 0, 0]
+                  padding: [4, 0, 0, 0]
                 }
               }
             }
@@ -235,11 +252,9 @@ export default {
             data: [value],
             coordinateSystem: 'polar',
             itemStyle: {
-              normal: {
               color: '#00dfff'
             }
           }
-          }
         ]
       }
       if (document.getElementById('echart_d1') == null) {
@@ -251,6 +266,91 @@ export default {
       window.addEventListener('resize', () => {
         echart.resize()
       })
+    },
+    setEchart2 () {
+      let value = (this.PlanInfo.realMonthSum / this.PlanInfo.planMonthSum) * 100
+      value = value.toFixed(2)
+      console.log(value)
+      let title = '%'
+      let text = '完成率'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 16,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [4, 0, 0, 2]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 12,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [4, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['85%', '100%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              color: '#00dfff'
+            }
+          }
+        ]
+      }
+      if (document.getElementById('echart_d2') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('echart_d2'))
+      let echart = this.$echarts.init(document.getElementById('echart_d2'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
     }
   }
 }
@@ -294,22 +394,41 @@ footer
   height calc(100% - .45rem)
   padding .1rem
 .yj_info
-  height calc(100% / 7)
+  height calc(100% / 6)
   background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
 .yj_info_p1
+  width 100%
   font-size: .18rem;
   line-height: .18rem;
   color: #FFFFFF;
   letter-spacing: 1.88px;
   text-align: center;
   font-weight: 700;
+  margin-bottom: 8px;
 .yj_info_p2
+  width 100%
   font-size: .14rem
   line-height: .14rem
   color: #84B0DA;
   letter-spacing: 2px;
   text-align: center;
   font-weight: 700;
+.yj_info_p3
+  width 100%
+  font-size: .22rem;
+  line-height: .22rem;
+  color: #FFFFFF;
+  letter-spacing: 1.88px;
+  text-align: right;
+  font-weight: 700;
+.yj_info_p4
+  width 100%
+  font-size: .18rem
+  line-height: .18rem
+  color: #fff;
+  letter-spacing: 2px;
+  text-align: left;
+  font-weight: 700;
 .num_wraper
   width 100%
   height 45%

yarn.lock

@@ -2107,6 +2107,11 @@ deep-is@~0.1.3:
   resolved "http://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+default-passive-events@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-passive-events/-/default-passive-events-2.0.0.tgz#79b1aa67becbaab38b718469b5480fef92eda649"
+  integrity sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==
+
 define-properties@^1.1.2:
   version "1.1.3"
   resolved "http://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"