数据

2024-10-22 14:45:52 +08:00
parent b81af1d44e
commit 05e740fd4c
9 changed files with 2884 additions and 431 deletions
--- a/README.md
+++ b/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
--- a/src/config/getData2.js
+++ b/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', {})
--- a/src/config/mork2.js
+++ b/src/config/mork2.js
--- a/src/images/area_a.jpg
+++ b/src/images/area_a.jpg
--- a/src/images/area_a.png
+++ b/src/images/area_a.png
--- a/src/images/area_b.jpg
+++ b/src/images/area_b.jpg
--- a/src/images/area_b.png
+++ b/src/images/area_b.png
--- a/src/pages/modules/home/index.vue
+++ b/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)">
-                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
+                    <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.name }}</p>
                      <div class="pie_legend_txt_wraper">
-                        <p class="pie_legend_txt_2">{{ e.status }}</p>
-                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
+                        <p class="pie_legend_txt_2">{{ e.count }}</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="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                <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="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="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                <div class="absolute hw_wrap" style="left: 60.79%;top: 7%;">
+                  <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="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                <div class="absolute hw_wrap" style="left: 60.79%;top: 36%;">
+                  <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)">
-                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
+                    <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.name }}</p>
                      <div class="pie_legend_txt_wraper">
-                        <p class="pie_legend_txt_2">{{ e.status }}</p>
-                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
+                        <p class="pie_legend_txt_2">{{ e.count }}</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="hw_item green" v-for="(e, i) in dataList1" :key="i"></div>
+                <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="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 { getAllBigScreen } from '@js/getData2.js'
+import { allDeviceStatus } 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%'}],
-      machineData1: [{x: '10%', y: '19%'}, {x: '10%', y: '36%'}, {x: '10%', y: '63%'}, {x: '10%', y: '81%'}],
+      dataList2: [],
+      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 () {
-      let res = await getAllBigScreen()
-      this.curList = [...res.inventoryIOAnalysis]
-      res.stateStatistics.fourState.map(el => {
-        let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
-        rate = rate.toFixed(2) + '%'
-        this.$set(el, 'rate', rate)
-      })
-      this.stateStatistics = res.stateStatistics
+    async _allDeviceStatus () {
+      let res = await allDeviceStatus()
+      this.machineData = res
+      this.dataList1 = [...this.machineData[17]]
+      this.dataList2 = [...this.machineData[19]]
      this.setEchart1()
      this.setEchart2()
      this.setEchart3()
@@ -246,10 +251,11 @@ export default {
      let barName = []
      let barData1 = []
      let barData2 = []
-      this.curList.map(el => {
-        barName.push(el.material_name)
-        barData1.push(el.total_instorage_qty)
-        barData2.push(el.total_outstorage_qty)
+      let arr = [...this.machineData[16]]
+      arr.map(el => {
+        barName.push(el.device_code)
+        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
-      seriesData.map((el, i) => {
-        el.value = el.status
-        el.name = el.stateName
+      let seriesData = this.dataList1.slice(1)
+      seriesData.map(el => {
+        el.value = el.count
+        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 => {
-        barName.push(el.material_name)
-        barData1.push(el.total_instorage_qty)
-        barData2.push(el.total_outstorage_qty)
+      let arr = [...this.machineData[18]]
+      arr.map(el => {
+        barName.push(el.device_code)
+        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
-      seriesData.map((el, i) => {
-        el.value = el.status
-        el.name = el.stateName
+      let seriesData = this.dataList2.slice(1)
+      seriesData.map(el => {
+        el.value = el.count
+        el.name = el.name
+        seriesData.push(el.name)
      })
-      let total = this.stateStatistics.count
+      let total = this.dataList2[0].count
      let option = {
        color: colors,
        grid: {
--- a/src/pages/modules/home/style.stylus
+++ b/src/pages/modules/home/style.stylus
@@ -62,15 +62,15 @@
  font-size 14px
  color #fff
  text-align center
-  line-height 42px
-  height calc(100% - 170px)
+  line-height 34px
+  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
-  left: 60.79%;
-  top: 7%;
-.hw_wrap_1
-  top: 36%;
-.hw_wrap_2
-  top: 66%;
-.hw_wrap_3
-  left: 73.54%
-  top: 13%;
+  justify-content: flex-start
 .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: 4px solid rgba(22, 52, 22, 80%);
+  border-radius: 50%
+.status_icon_s
+  width 12px
+  height 12px
+  border-width 3px
 .bg_j
  width 8px
  height 8px