sort

src/pages/modules/SortWorkMonitor.vue

@@ -0,0 +1,579 @@
+<template>
+  <section class="bg">
+    <t-header title="分拣作业监控">
+    </t-header>
+    <div class="container">
+      <div class="zdy_box">
+        <div class="zero-wrap">
+          <div class="zero-title">
+            <div class="item_tip_left">分拣线1</div>
+          </div>
+          <div class="zero-title">
+            <div class="item_tip_left">分拣线2</div>
+          </div>
+          <div class="zero-title">
+            <div class="item_tip_left">人工分拣线</div>
+          </div>
+        </div>
+        <div class="one_wrap">
+          <div class="e-box">
+            <div class="a-box">
+              <!-- <div class="a-title">分拣线1：</div> -->
+              <div class="pie_wraper_2">
+                <div class="w_wraper">
+                  <div id="new_home_echart_01" style="width: 220px; height: 220px;"></div>
+                </div>
+              </div>
+            </div>
+            <div class="b-box">
+              <div class="b-item"><span>当前工单：</span><span>GD0000001</span></div>
+              <div class="b-item"><span>客户：</span><span>XXXX有限公司</span></div>
+              <div class="b-item"><span>物料：</span><span>VOD钢包砖</span></div>
+              <div class="b-item"><span>规格：</span><span>200*165/135*100</span></div>
+              <div class="b-item"><span>数量：</span><span>10000块</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="two_wrap">
+          <div class="zdy_box">
+            <div class="two_wrap_item">
+              <div class="two_w_item_label">当日已拆垛：</div>
+            </div>
+            <div class="two_wrap_item">
+              <div class="two_w_item_label">当日已码垛：</div>
+            </div>
+          </div>
+        </div>
+        <div class="three_wrap">
+          <div class="zdy_box">
+            <div class="three_w_item">
+              <vue-seamless-scroll :data="chaiduoArr" :class-option="defaultOption1">
+                <ul class="scroll-ul_1">
+                  <li v-for="(e, i) in chaiduoArr" :key="i">
+                    <span>{{e.datetime}}&nbsp;</span>
+                    <span class="scroll_th">托盘号:</span>
+                    <span>{{ e.vehicleCode }}，</span>
+                    <span class="scroll_th">物料:</span>
+                    <span>{{ e.materialName }}，</span>
+                    <span class="scroll_th">数量:</span>
+                    <span>{{ e.qty }}，</span>
+                    <span class="scroll_th">重量:</span>
+                    <span>{{ e.weight }}</span>
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
+            </div>
+            <div class="three_w_item">
+              <vue-seamless-scroll :data="maduoArr" :class-option="defaultOption1">
+                <ul class="scroll-ul_1">
+                  <li v-for="(e, i) in maduoArr" :key="i">
+                    <span>{{e.datetime}}&nbsp;</span>
+                    <span class="scroll_th">托盘号:</span>
+                    <span>{{ e.vehicleCode }}，</span>
+                    <span class="scroll_th">物料:</span>
+                    <span>{{ e.materialName }}，</span>
+                    <span class="scroll_th">数量:</span>
+                    <span>{{ e.qty }}，</span>
+                    <span class="scroll_th">重量:</span>
+                    <span>{{ e.weight }}</span>
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+        <div class="four_wrap">
+            <div class="item_tip item_tip_bg_l">
+              <div class="item_tip_left">剩余工单列表</div>
+            </div>
+            <div class="item_content">
+              <div class="scroll_wrap">
+                <ul class="scroll_tab_2">
+                  <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_2">
+                  <vue-seamless-scroll :data="residualWorkOrder" :class-option="defaultOption2">
+                    <ul class="scroll-ul_2">
+                      <li v-for="(e, i) in residualWorkOrder" :key="i">
+                        <div class="scroll-ul_2_div">{{e.workOrderCode}}</div>
+                        <div class="scroll-ul_2_div">{{e.materialName}}</div>
+                        <div class="scroll-ul_2_div">{{e.spec}}</div>
+                        <div class="scroll-ul_2_div">{{e.qty}}</div>
+                        <div class="scroll-ul_2_div">{{e.weight}}</div>
+                        <div class="scroll-ul_2_div">{{e.orderCode}}</div>
+                        <div class="scroll-ul_2_div">{{e.customer}}</div>
+                        <div class="scroll-ul_2_div">{{e.vehicleType}}</div>
+                        <div class="scroll-ul_2_div">{{e.hasHalf}}</div>
+                        <div class="scroll-ul_2_div">{{e.createTime}}</div>
+                      </li>
+                    </ul>
+                  </vue-seamless-scroll>
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header3.vue'
+import {sortProductionMonitor} from '@js/getData1.js'
+// import {sortProductionMonitor} from '@js/mork2.js'
+export default {
+  name: 'SortWorkMonitor',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      timer: null,
+      interTime: this.$store.getters.setTime,
+      current: {},
+      chaiduo: {},
+      maduo: {},
+      chaiduoArr: [],
+      maduoArr: [],
+      residualWorkOrder: [],
+      stateStatistics: {
+        count: '20',
+        // fourState: [{'status': '5', 'stateName': '正常运行'}, {'status': '5', 'stateName': '暂未生产'}, {'status': '5', 'stateName': '空闲设备'}, {'status': '5', 'stateName': '故障设备'}]
+        fourState: [{'status': '80', 'stateName': '正常运行'}, {'status': '20', 'stateName': '暂未生产'}]
+      }
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        timer1: null,
+        timer2: null,
+        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)
+      }
+    },
+    defaultOption2 () {
+      return {
+        timer1: null,
+        timer2: null,
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 6, // 开始无缝滚动的数据量 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.refresh()
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  methods: {
+    refresh () {
+      this._sortProductionMonitor()
+      this.timer2 = setInterval(() => {
+        this._sortProductionMonitor()
+      }, this.interTime)
+    },
+    async _sortProductionMonitor () {
+      let res = await sortProductionMonitor()
+      this.current = res.current
+      this.chaiduo = res.depalletize
+      this.maduo = res.palletize
+      this.chaiduoArr = [...res.depalletizedVehicle]
+      this.maduoArr = [...res.palletizedVehicle]
+      this.residualWorkOrder = [...res.residualWorkOrder]
+    },
+    setEchart01 () {
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
+      let seriesData = this.stateStatistics.fourState
+      seriesData.map((el, i) => {
+        el.value = el.status
+        el.name = el.stateName
+      })
+      // let total = this.stateStatistics.count
+      let total = 1850
+      let option = {
+        color: colors,
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: `{a|已完成}\n{b|${total}}`,
+          x: 'center',
+          y: '39%',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 16,
+                lineHeight: 20,
+                color: '#A8C3E6',
+                fontFamily: 'SourceHanSansCN-Regular'
+              },
+              b: {
+                fontSize: 30,
+                lineHeight: 36,
+                color: '#DBE7F6',
+                fontFamily: 'YouSheBiaoTiHei'
+              }
+            }
+          }
+        },
+        series: [{
+          name: '设备运行统计',
+          type: 'pie',
+          radius: ['61%', '69%'],
+          center: ['50%', '50%'],
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false
+          },
+          itemStyle: {
+            borderColor: 'RGBA(27, 58, 98, .5)',
+            borderWidth: 2
+          },
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          selectedOffset: 20,
+          data: seriesData
+        }]
+      }
+      if (document.getElementById('new_home_echart_01') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('new_home_echart_01'))
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_01'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    },
+    setEchart02 () {
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
+      let seriesData = this.stateStatistics.fourState
+      seriesData.map((el, i) => {
+        el.value = el.status
+        el.name = el.stateName
+      })
+      // let total = this.stateStatistics.count
+      let total = 1850
+      let option = {
+        color: colors,
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: `{a|已完成}\n{b|${total}}`,
+          x: 'center',
+          y: '39%',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 16,
+                lineHeight: 20,
+                color: '#A8C3E6',
+                fontFamily: 'SourceHanSansCN-Regular'
+              },
+              b: {
+                fontSize: 30,
+                lineHeight: 36,
+                color: '#DBE7F6',
+                fontFamily: 'YouSheBiaoTiHei'
+              }
+            }
+          }
+        },
+        series: [{
+          name: '设备运行统计',
+          type: 'pie',
+          radius: ['61%', '69%'],
+          center: ['50%', '50%'],
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false
+          },
+          itemStyle: {
+            borderColor: 'RGBA(27, 58, 98, .5)',
+            borderWidth: 2
+          },
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          selectedOffset: 20,
+          data: seriesData
+        }]
+      }
+      if (document.getElementById('new_home_echart_02') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('new_home_echart_02'))
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_02'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    },
+    setEchart03 () {
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
+      let seriesData = this.stateStatistics.fourState
+      seriesData.map((el, i) => {
+        el.value = el.status
+        el.name = el.stateName
+      })
+      // let total = this.stateStatistics.count
+      let total = 1850
+      let option = {
+        color: colors,
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: `{a|已完成}\n{b|${total}}`,
+          x: 'center',
+          y: '39%',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 16,
+                lineHeight: 20,
+                color: '#A8C3E6',
+                fontFamily: 'SourceHanSansCN-Regular'
+              },
+              b: {
+                fontSize: 30,
+                lineHeight: 36,
+                color: '#DBE7F6',
+                fontFamily: 'YouSheBiaoTiHei'
+              }
+            }
+          }
+        },
+        series: [{
+          name: '设备运行统计',
+          type: 'pie',
+          radius: ['61%', '69%'],
+          center: ['50%', '50%'],
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false
+          },
+          itemStyle: {
+            borderColor: 'RGBA(27, 58, 98, .5)',
+            borderWidth: 2
+          },
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          selectedOffset: 20,
+          data: seriesData
+        }]
+      }
+      if (document.getElementById('new_home_echart_03') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('new_home_echart_03'))
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_03'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+// @import '~@css/mixin'
+@import '../../css/mixin'
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.container
+  _wh(100%, calc(100% - 138px))
+  padding 30px 25.09px 0
+  clear both
+.bottom
+  _wh(100%, 38px)
+  background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
+.zero-wrap
+  _wh(100%, 12%)
+  padding 0 0 15px 0
+  // background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
+  // overflow hidden
+  display flex
+.zero-title
+  width 33%
+  margin-right 1%
+  height 32px
+  line-height 32px
+  font-family: "SourceHanSansCN";
+  font-weight: bold;
+  font-size 18px
+  color #ffffff
+  background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
+.one_wrap
+  _wh(100%, 12%)
+  padding 0 0 15px 15px
+  // background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
+  overflow hidden
+  display flex
+.zdy_box
+  _fj(flex-start, flex-start)
+  flex-wrap wrap
+  align-content flex-start
+.one_wrap_item
+  height calc(50% - 15px)
+  _fj(flex-start)
+  margin-top 15px
+  margin-right 15px
+.one_w_item_label
+  min-width 80px
+  padding 0 10px 0 0
+  _font(18px, 1, #32c5ff,,center)
+.one_w_item_label_1
+  padding 0 0 0 10px
+.one_w_item_text
+  min-width 20px
+  height 100%
+  _font(30px, 1, #f7b502,,center)
+  _fj(center)
+  background-color rgba(50,197,255,0.1)
+  padding 0 10px
+.two_wrap
+  _wh(100%, 9%)
+  padding 20px 0 15px 0
+.two_wrap_item
+  _wh(50%, 100%)
+  padding 0 15px
+  _fj()
+.two_w_item_label
+  width 170px
+  _font(18px, 1, #32c5ff,,)
+.two_w_item_text
+  _wh(calc(100% - 70px), 100%)
+.three_wrap
+  _wh(100%, 40%)
+.three_w_item
+  _wh(calc(50% - 15px), 100%)
+  padding 15px
+  background-image linear-gradient(to bottom, #040b1a, #050919)
+  overflow hidden
+  &:first-child
+    margin-right 30px
+.four_wrap
+  _wh(100%, calc(39% - 20px))
+  margin-top 20px
+  // padding 10px 15px
+  // background-image linear-gradient(to bottom, #050c1b, #16243c)
+  // border 2px solid #16243c
+  // border-top-left-radius 10px
+  // border-top-right-radius 10px
+.scroll-ul_1
+  width 100%
+  li
+    width 100%
+    line-height 40px
+    span
+     _font(16px, 1, #fff,,)
+    .scroll_th
+      color #2ef6ff
+.item_tip
+    _wh(100%, 32px)
+    line-height 32px
+    padding 0 10px
+.item_tip_bg_l
+    background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
+.item_tip_left
+    _wh(60%, 100%)
+    font-family "SourceHanSansCN"
+    _font(18px, inherit, #fff, 700, left)
+    letter-spacing 2px
+    text-shadow 0 0 9px #159AFF
+    padding-left 34px
+    background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
+.item_content
+    _wh(100%, calc(100% - 37px))
+    margin-top 7px
+.scroll_wrap
+    _wh(100%, 100%)
+    border 1px solid rgba(8,205,248,0.3)
+.scroll_tab_2
+    _wh(100%, 40px)
+    border-bottom 1px solid rgba(8,205,248,0.3)
+    li
+      float left
+      width 10%
+      _font(14px,40px,#78B1DE,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 2px
+      overflow hidden
+      box-sizing border-box
+.scroll_container_2
+    width 100%
+    height calc(100% - 40px)
+    overflow hidden
+.scroll-ul_2
+    li
+      _wh(100%, 44px)
+      border-bottom 1px solid rgba(8,205,248,0.3)
+      &:nth-child(even)
+          background rgba(1,24,52,0.60)
+          box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_2_div
+        float left
+        _wh(10%, 44px)
+        _fj(center)
+        _font(14px, 44px, #fff,,center)
+        word-wrap break-word
+        word-break break-all
+        white-space nowrap
+        padding 0 2px
+        overflow hidden
+</style>