数据

README.md

@@ -21,4 +21,5 @@ 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).
 
 # 注意事项
-+ 大屏分辨率都为 960*540
++ 大屏分辨率都：960*540
++ 接口地址：http://47.98.105.245:8001/project/39/interface/api

src/config/getData2.js

@@ -1,3 +1,3 @@
 import {post} from './http.js'
 // 获取大屏所有数据
-export const getAllBigScreen = () => post('api/bigScreen/getAllBigScreen', {})
+export const allDeviceStatus = () => post('api/chaoWei/allDeviceStatus', {})

src/pages/modules/home/index.vue

@@ -32,11 +32,11 @@
                     <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
                   </div>
                   <div class="pie_legend">
-                    <div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
+                    <div class="pie_legend_item" v-for="(e, i) in dataList1.slice(1)" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
-                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
+                      <p class="pie_legend_txt_1">{{ e.name }}</p>
                       <div class="pie_legend_txt_wraper">
-                        <p class="pie_legend_txt_2">{{ e.status }}</p>
+                        <p class="pie_legend_txt_2">{{ e.count }}</p>
-                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
+                        <p class="pie_legend_txt_3">{{ e.percent }}</p>
                       </div>
                     </div>
                   </div>
@@ -68,16 +68,24 @@
               </div>
               <div class="area_t_a">1#车间监控</div>
               <div class="relative area_a">
-                <div class="absolute hw_wrap">
+                <div class="absolute status_icon" :style="{'left': '10%', 'top': 11 + i * 22 + '%'}" v-for="(e, i) in machineData[1]" :key="'TBX1' + i" :class="['bgray', 'bred', 'byellow', 'bgreen'][Number(e.mode)]"></div>
-                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                <div class="absolute status_icon" :style="{'left': 25.6 + i * 3.05 + '%', 'top': '80%'}" v-for="(e, i) in machineData[2]" :key="'ZDM1' + i" :class="['bgray', 'bred', 'byellow', 'bgreen'][Number(e.mode)]"></div>
+                <div class="absolute hw_wrap hw_wrap_h" style="left: 33.6%;top: 33%;">
+                  <div class="hw_item hw_item_h" v-for="(e, i) in machineData[3]" :key="'HCQ1' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
                 </div>
-                <div class="absolute hw_wrap hw_wrap_1">
+                <div class="absolute hw_wrap" style="left: 60.79%;top: 7%;">
-                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                  <div class="hw_item" v-for="(e, i) in machineData[4]" :key="'HCQ2' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
                 </div>
-                <div class="absolute hw_wrap hw_wrap_2">
+                <div class="absolute hw_wrap" style="left: 60.79%;top: 36%;">
-                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                  <div class="hw_item" v-for="(e, i) in machineData[5]" :key="'HCQ3' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
+                </div>
+                <div class="absolute hw_wrap" style="left: 60.79%;top: 66%;">
+                  <div class="hw_item" v-for="(e, i) in machineData[6]" :key="'HCQ4' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
+                </div>
+                <div class="absolute status_icon status_icon_s" :style="{'left': 74 + i * 2.6 + '%', 'top': '70%'}" v-for="(e, i) in machineData[7]" :key="'BP' + i" :class="['bgray', 'bred', 'byellow', 'bgreen'][Number(e.mode)]"></div>
+                <div class="absolute hw_wrap hw_wrap_h" style="left: 74.5%;top: 102%;">
+                  <div class="hw_item hw_item_h" v-for="(e, i) in machineData[8]" :key="'HCQ5' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
                 </div>
-                <div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData" :key="i"></div>
               </div>
             </div>
           </div>
@@ -106,11 +114,11 @@
                     <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
                   </div>
                   <div class="pie_legend">
-                    <div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
+                    <div class="pie_legend_item" v-for="(e, i) in dataList2.slice(1)" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
-                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
+                      <p class="pie_legend_txt_1">{{ e.name }}</p>
                       <div class="pie_legend_txt_wraper">
-                        <p class="pie_legend_txt_2">{{ e.status }}</p>
+                        <p class="pie_legend_txt_2">{{ e.count }}</p>
-                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
+                        <p class="pie_legend_txt_3">{{ e.percent }}</p>
                       </div>
                     </div>
                   </div>
@@ -142,10 +150,17 @@
               </div>
               <div class="area_t_a area_t_b">2#车间监控</div>
               <div class="relative area_b">
-                <div class="absolute hw_wrap hw_wrap_3">
+                <div class="absolute status_icon" :style="{'left': '10%', 'top': i < 2 ? (18 + i * 19 + '%') : (24 + i * 19 + '%')}" v-for="(e, i) in machineData[9]" :key="'TBX2' + i" :class="['bgray', 'bred', 'byellow', 'bgreen'][Number(e.mode)]"></div>
-                  <div class="hw_item green" v-for="(e, i) in dataList1" :key="i"></div>
+                <div class="absolute hw_wrap hw_wrap_h" style="left: 26.27%;top: 70%;">
+                  <div class="hw_item hw_item_h" v-for="(e, i) in machineData[10]" :key="'HCQ6' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
+                </div>
+                <div class="absolute status_icon" :style="{'left': i < 10 ? (32.2 + i * 3.4 + '%') : (32.2 + (i - 10) * 3.4 + '%'), 'top': i < 10 ? '11%' : '76%'}" v-for="(e, i) in machineData[11]" :key="'ZDM2' + i" :class="['bgray', 'bred', 'byellow', 'bgreen'][Number(e.mode)]"></div>
+                <div class="absolute hw_wrap" style="left: 73.54%;top: 13%;">
+                  <div class="hw_item green" v-for="(e, i) in machineData[12]" :key="'HCQ7' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
+                </div>
+                <div class="absolute hw_wrap hw_wrap_v" style="left: 85.1%;top: 13%;">
+                  <div class="hw_item green" v-for="(e, i) in machineData[13]" :key="'HCQ8' + i" :class="['gray', '', '', 'green'][Number(e.move)]"></div>
                 </div>
-                <div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData1" :key="i"></div>
               </div>
             </div>
           </div>
@@ -154,19 +169,15 @@
 </template>
 
 <script>
-import { getAllBigScreen } from '@js/mork2.js'
+import { allDeviceStatus } from '@js/getData2.js'
-// import { getAllBigScreen } from '@js/getData2.js'
 export default {
   data () {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
-      curList: [], // 当日出入
-      stateStatistics: {}, // 设备运行统计
-      dataList: [],
       dataList1: [],
-      machineData: [{x: '10%', y: '10%'}, {x: '10%', y: '32%'}, {x: '10%', y: '53%'}, {x: '10%', y: '79%'}, {x: '75%', y: '71%'}, {x: '80%', y: '71%'}, {x: '85.4%', y: '71%'}, {x: '90.4%', y: '71%'}, {x: '95.6%', y: '71%'}],
+      dataList2: [],
-      machineData1: [{x: '10%', y: '19%'}, {x: '10%', y: '36%'}, {x: '10%', y: '63%'}, {x: '10%', y: '81%'}],
+      machineData: {},
       myChart1: null,
       myChart2: null,
       myChart3: null,
@@ -175,8 +186,6 @@ export default {
   },
   created () {
     this.refresh()
-    this.dataList = new Array(50)
-    this.dataList1 = new Array(140)
   },
   mounted () {
     this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
@@ -223,20 +232,16 @@ export default {
       this.$router.push('/setup')
     },
     refresh () {
-      this._getAllBigScreen()
+      this._allDeviceStatus()
       this.timer = setInterval(() => {
-        this._getAllBigScreen()
+        this._allDeviceStatus()
       }, this.interTime)
     },
-    async _getAllBigScreen () {
+    async _allDeviceStatus () {
-      let res = await getAllBigScreen()
+      let res = await allDeviceStatus()
-      this.curList = [...res.inventoryIOAnalysis]
+      this.machineData = res
-      res.stateStatistics.fourState.map(el => {
+      this.dataList1 = [...this.machineData[17]]
-        let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
+      this.dataList2 = [...this.machineData[19]]
-        rate = rate.toFixed(2) + '%'
-        this.$set(el, 'rate', rate)
-      })
-      this.stateStatistics = res.stateStatistics
       this.setEchart1()
       this.setEchart2()
       this.setEchart3()
@@ -246,10 +251,11 @@ export default {
       let barName = []
       let barData1 = []
       let barData2 = []
-      this.curList.map(el => {
+      let arr = [...this.machineData[16]]
-        barName.push(el.material_name)
+      arr.map(el => {
-        barData1.push(el.total_instorage_qty)
+        barName.push(el.device_code)
-        barData2.push(el.total_outstorage_qty)
+        barData1.push(el.a)
+        barData2.push(el.b)
       })
       let option = {
         grid: {
@@ -388,12 +394,13 @@ export default {
       let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
       let colorListIn = ['#141828', '#67D470', '#B4C9EF', '#EF5252']
       let colorListOut = ['#1980EA', '#141828', '#141828', '#141828']
-      let seriesData = this.stateStatistics.fourState
+      let seriesData = this.dataList1.slice(1)
-      seriesData.map((el, i) => {
+      seriesData.map(el => {
-        el.value = el.status
+        el.value = el.count
-        el.name = el.stateName
+        el.name = el.name
+        seriesData.push(el.name)
       })
-      let total = this.stateStatistics.count
+      let total = this.dataList1[0].count
       let option = {
         color: colors,
         grid: {
@@ -555,10 +562,11 @@ export default {
       let barName = []
       let barData1 = []
       let barData2 = []
-      this.curList.map(el => {
+      let arr = [...this.machineData[18]]
-        barName.push(el.material_name)
+      arr.map(el => {
-        barData1.push(el.total_instorage_qty)
+        barName.push(el.device_code)
-        barData2.push(el.total_outstorage_qty)
+        barData1.push(el.a)
+        barData2.push(el.b)
       })
       let option = {
         grid: {
@@ -687,12 +695,13 @@ export default {
       let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
       let colorListIn = ['#141828', '#67D470', '#B4C9EF', '#EF5252']
       let colorListOut = ['#1980EA', '#141828', '#141828', '#141828']
-      let seriesData = this.stateStatistics.fourState
+      let seriesData = this.dataList2.slice(1)
-      seriesData.map((el, i) => {
+      seriesData.map(el => {
-        el.value = el.status
+        el.value = el.count
-        el.name = el.stateName
+        el.name = el.name
+        seriesData.push(el.name)
       })
-      let total = this.stateStatistics.count
+      let total = this.dataList2[0].count
       let option = {
         color: colors,
         grid: {

src/pages/modules/home/style.stylus

@@ -62,15 +62,15 @@
   font-size 14px
   color #fff
   text-align center
-  line-height 42px
+  line-height 34px
-  height calc(100% - 170px)
+  height calc(100% - 190px)
 .area_a
   width 752px
   height 155px
   margin 0 auto
   background center / 100% 100% url('../../../images/area_a.jpg') no-repeat
 .area_t_b
-  height calc(100% - 165px)
+  height calc(100% - 180px)
 .area_b
   height 150px
   background center / 100% 100% url('../../../images/area_b.jpg') no-repeat
@@ -114,6 +114,7 @@
 .pie_legend_item
   width 50%
   padding 0 0 0 10px
+  background 2px 0 / 8px auto no-repeat
 .pie_legend_txt_1
   font-size: 8px;
   line-height: 8px
@@ -132,13 +133,13 @@
   color: #9BB9DD;
   opacity: 0.5;
 .pie_legend_item_bg_1
-  background top left / 8px auto url('../../../images/fk_1.png') no-repeat
+  background-image url('../../../images/fk_1.png')
 .pie_legend_item_bg_2
-  background top left / 8px auto url('../../../images/fk_2.png') no-repeat
+  background-image url('../../../images/fk_2.png')
 .pie_legend_item_bg_3
-  background top left / 8px auto url('../../../images/fk_3.png') no-repeat
+  background-image url('../../../images/fk_3.png')
 .pie_legend_item_bg_4
-  background top left / 8px auto url('../../../images/fk_5.png') no-repeat
+  background-image url('../../../images/fk_5.png')
 .scroll_wrap
     width 100%
     height 100%
@@ -214,20 +215,19 @@
   width: 60px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between
+  justify-content: flex-start
-  left: 60.79%;
-  top: 7%;
-.hw_wrap_1
-  top: 36%;
-.hw_wrap_2
-  top: 66%;
-.hw_wrap_3
-  left: 73.54%
-  top: 13%;
 .hw_item
   width: 5px;
   height: 7px;
   margin: 0.5px;
+.hw_wrap_h
+  width 16px
+.hw_item_h
+  width: 7px;
+  height: 5px;
+  margin: 0.5px;
+.hw_wrap_v
+  width 6px
 .status_wrap
   top 10px
   right 10px
@@ -248,6 +248,18 @@
   background-color #bfbfbf
 .red
   background-color #ff1016
+.bgreen
+  background-color #11ff0d
+  border: 4px solid rgba(22, 52, 22, 80%)
+.byellow
+  background-color #fdfd0f
+  border: 4px solid rgb(52, 48, 22, 80%)
+.bgray
+  background-color #bfbfbf
+  border: 4px solid rgba(98, 100, 98, 80%)
+.bred
+  background-color #ff1016
+  border: 4px solid rgba(52, 22, 40, 80%)
 .status_name
   margin-left 5px
   font-size 10px
@@ -255,8 +267,11 @@
 .status_icon
   width: 16px;
   height: 16px;
-  border-radius: 50%;
+  border-radius: 50%
-  border: 4px solid rgba(22, 52, 22, 80%);
+.status_icon_s
+  width 12px
+  height 12px
+  border-width 3px
 .bg_j
   width 8px
   height 8px