料仓监控

src/pages/Setup.vue

@@ -68,7 +68,7 @@ export default {
     return {
       loginname: '',
       password: '',
-      options: [{value: '1', label: '大屏'}, {value: '2', label: '压制生产看板'}, {value: '3', label: '分拣作业监控'}, {value: '4', label: '干燥作业监控'}],
+      options: [{value: '1', label: '大屏'}, {value: '2', label: '压制生产看板'}, {value: '3', label: '分拣作业监控'}, {value: '4', label: '干燥作业监控'}, {value: '5', label: '料仓监控'}],
       value: this.$store.getters.equipId,
       baseUrl: this.$store.getters.baseUrl,
       setTime: this.$store.getters.setTime / 1000,
@@ -103,6 +103,8 @@ export default {
         this.$router.push('/boardindex/sortwork')
       } else if (this.value === '4') {
         this.$router.push('/boardindex/drytask')
+      } else if (this.value === '5') {
+        this.$router.push('/boardindex/stockbin')
       }
       let element = document.documentElement
       if (this.fullscreen) {

src/pages/modules/board/DryTask_back.vue

@@ -0,0 +1,229 @@
+<template>
+<div class="dry_wraper">
+  <div class="dry_content">
+    <div class="dry_item_wraper">
+      <div class="dry_title">冷却输送线</div>
+      <div class="dry_item">
+        <div class="dry_hj fl" v-for="e in outKilnInfoVos" :key="e.vehicleCode" :class="e.active ? 'dry_hj_active' : ''">
+          <div class="dry_hj_i">
+            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
+            <div v-show="e.active" class="mater_info">
+              <div class="mater_p p2">{{e.materialCode}}</div>
+              <div class="mater_p p3">{{ e.materialModel }}</div>
+              <div class="mater_p p4">{{ e.materialQty }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <flow-svg direction="pathLeft"></flow-svg>
+    </div>
+    <div class="dry_item_wraper">
+      <div class="dry_title">1号窑</div>
+      <div class="dry_item">
+        <div class="dry_hj dry_hj_1 fr" v-for="e in oneKilnInfoVos" :key="e.vehicleCode"  :class="e.active ? 'dry_hj_active' : ''">
+          <div class="dry_hj_i">
+            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
+            <div v-show="e.active" class="mater_info">
+              <div class="mater_p p2">{{e.materialCode}}</div>
+              <div class="mater_p p3">{{ e.materialModel }}</div>
+              <div class="mater_p p4">{{ e.materialQty }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <flow-svg direction="pathRight"></flow-svg>
+    </div>
+    <div class="dry_item_wraper">
+      <div class="dry_title">2号窑</div>
+      <div class="dry_item">
+        <div class="dry_hj dry_hj_1 fr" v-for="e in twoKilnInfoVos" :key="e.vehicleCode"  :class="e.active ? 'dry_hj_active' : ''">
+          <div class="dry_hj_i">
+            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
+            <div v-show="e.active" class="mater_info">
+              <div class="mater_p p2">{{e.materialCode}}</div>
+              <div class="mater_p p3">{{ e.materialModel }}</div>
+              <div class="mater_p p4">{{ e.materialQty }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <flow-svg direction="pathRight"></flow-svg>
+    </div>
+    <div class="dry_item_wraper">
+      <div class="dry_title">进窑输送线</div>
+      <div class="dry_item">
+        <div class="dry_hj fl" v-for="e in inKilnInfoVos" :key="e.vehicleCode"  :class="e.active ? 'dry_hj_active' : ''">
+          <div class="dry_hj_i">
+            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
+            <div v-show="e.active" class="mater_info">
+              <div class="mater_p p2">{{e.materialCode}}</div>
+              <div class="mater_p p3">{{ e.materialModel }}</div>
+              <div class="mater_p p4">{{ e.materialQty }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <flow-svg direction="pathLeft"></flow-svg>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+import FlowSvg from '@components/flowsvg.vue'
+import { klineInfo } from '@js/mork2.js'
+export default {
+  components: {
+    FlowSvg
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      outKilnInfoVos: [], // 出窑缓存线信息
+      inKilnInfoVos: [], // 入窑缓存线
+      oneKilnInfoVos: [], // 窑1
+      twoKilnInfoVos: [] // 窑2
+    }
+  },
+  created () {
+    this._klineInfo()
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  destroyed () {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this._klineInfo()
+      }, this.interTime)
+    },
+    async _klineInfo () {
+      let res = await klineInfo()
+      this.outKilnInfoVos = [...res.outKilnInfoVos]
+      this.outKilnInfoVos.map(el => {
+        this.$set(el, 'active', true)
+      })
+      for (let i = this.outKilnInfoVos.length; i < 39; i++) {
+        this.outKilnInfoVos.push({vehicleCode: `out${i}`, active: false})
+      }
+      this.inKilnInfoVos = [...res.inKilnInfoVos]
+      this.inKilnInfoVos.map(el => {
+        this.$set(el, 'active', true)
+      })
+      for (let i = this.inKilnInfoVos.length; i < 40; i++) {
+        this.inKilnInfoVos.push({vehicleCode: `in${i}`, active: false})
+      }
+      this.oneKilnInfoVos = [...res.oneKilnInfoVos]
+      this.oneKilnInfoVos.map(el => {
+        this.$set(el, 'active', true)
+      })
+      for (let i = this.oneKilnInfoVos.length; i < 37; i++) {
+        this.oneKilnInfoVos.push({vehicleCode: `yao1${i}`, active: false})
+      }
+      this.twoKilnInfoVos = [...res.twoKilnInfoVos]
+      this.twoKilnInfoVos.map(el => {
+        this.$set(el, 'active', true)
+      })
+      for (let i = this.twoKilnInfoVos.length; i < 37; i++) {
+        this.twoKilnInfoVos.push({vehicleCode: `yao2${i}`, active: false})
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.dry_wraper
+  position relative
+  // border-left 4px solid #18537a
+  // border-right 4px solid #18537a
+  _wh(100%, 100%)
+  // background: -webkit-radial-gradient(closest-side circle,rgba(86, 188, 234, 50%) 25%, #034c6d 100%)
+  // box-shadow inset 3px -6px 6px 0px rgba(0, 0, 0, 30%), inset -6px 3px 6px 0px rgba(0, 0, 0, 30%)
+  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
+.dry_content
+  position relative
+  _wh(100%, 100%)
+  padding 10px 0
+  // box-shadow inset 3px -6px 6px 0px rgba(0, 0, 0, 30%), inset -6px 3px 6px 0px rgba(0, 0, 0, 30%)
+.dry_item_wraper
+  _wh(100%, calc((100% - 60px) / 4))
+  margin-bottom 20px
+  &:last-child
+    margin-bottom 0
+.dry_title
+  font-size 24px
+  font-family: 'YouSheBiaoTiHei';
+  font-weight: 400;
+  color: transparent;
+  line-height 30px
+  background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  text-align: center;
+.dry_item
+  clear both
+  _wh(100%, calc(100% - 46px))
+  padding 20px 10px 0px 10px
+.dry_hj
+  position relative
+  _wh(2.5%, calc(100% - 10px))
+  // background-color #02344d
+  // border 2px solid #186189
+  border-radius 4px
+  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
+  border 2px solid rgba(42, 189, 251, 50%)
+  border-right 0
+  &:last-child
+    border-right 2px solid rgba(42, 189, 251, 50%)
+  &:after
+    content ''
+    position absolute
+    _wh(2px, 10px)
+    bottom -11px
+    left calc(50% - 1px)
+    background-color rgba(42, 189, 251, 50%)
+.dry_hj_i
+  _wh(100%, 100%)
+  background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
+  background-size 12px 12px
+  background-repeat repeat
+.dry_hj_active
+  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
+  border 2px solid #B55F4E
+  border-right 0
+  &:last-child
+    border-right 2px solid #B55F4E
+  .dry_hj_i
+    background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
+.dry_hj_1
+  &:last-child
+    border-right 0
+.p1
+  _font(14px, 30px, #73f440,,)
+  // border-bottom 2px solid rgba(42, 189, 251, 50%)
+.mater_info
+  height calc(100% - 32px)
+.mater_p
+  display flex
+  justify-content center
+  align-items center
+  width 100%
+  _font(12px, 13px, #fff,,center)
+.p2
+  height 50%
+  // border-bottom 2px solid #186189
+.p3
+  height 25%
+  // border-bottom 2px solid #186189
+.p4
+  height 25%
+</style>
+  

src/pages/modules/board/StockBin.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="st_wraper">
+    <div class="state_wraper">
+      <div class="state_icon bg_col_1"></div>
+      <div class="state_title">满货位</div>
+      <div class="state_icon bg_col_2"></div>
+      <div class="state_title">空货位</div>
+    </div>
+    <div class="st_content">
+      <div class="st_item">
+        <div class="txt">A区</div>
+        <div class="p_wraper">
+          <div class="p_item" v-for="(e, i) in dataList[0]" :key="'a'+ i">
+            <div class="p_item_i">
+              <p class="p1">{{ e.point_name }}</p>
+              <p class="p2">{{ e.qty }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="st_item">
+        <div class="txt">B区</div>
+        <div class="p_wraper">
+          <div class="p_item" v-for="(e, i) in dataList[1]" :key="'b'+ i">
+            <div class="p_item_i">
+              <p class="p1">{{ e.point_name }}</p>
+              <p class="p2">{{ e.qty }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="st_item">
+        <div class="txt">C区</div>
+        <div class="p_wraper">
+          <div class="p_item" v-for="(e, i) in dataList[2]" :key="'c'+ i">
+            <div class="p_item_i">
+              <p class="p1">{{ e.point_name }}</p>
+              <p class="p2">{{ e.qty }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="st_item">
+        <div class="txt">Z区</div>
+        <div class="p_wraper">
+          <div class="p_item" v-for="(e, i) in dataList[3]" :key="'z'+ i" :class="{'p_item_active': e.point_status === '2'}">
+            <div class="p_item_i">
+              <p class="p1">{{ e.point_name }}</p>
+              <p class="p2">{{ e.qty }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import { klineInfo } from '@js/getData2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      dataList: [[], [], [], []]
+    }
+  },
+  created () {
+    this.refresh()
+    for (let i = 0; i < 4; i++) {
+      if (i < 3) {
+        for (let j = 0; j < 16; j++) {
+          this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '1'})
+        }
+      } else {
+        for (let j = 0; j < 12; j++) {
+          this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '2'})
+        }
+      }
+    }
+    console.log(this.dataList)
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  destroyed () {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        // this._klineInfo()
+      }, this.interTime)
+    }
+    // async _klineInfo () {
+    //   let res = await klineInfo()
+    //   console.log(res)
+    // }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.st_wraper
+  position relative
+  _wh(100%, 100%)
+  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
+  padding 20px 20px 0 20px
+.state_wraper
+  _wh(100%, 40px)
+  _fj(row, flex-start)
+.state_icon
+  _wh(14px, 14px)
+.state_title
+  _font(20px, 40px, #fff,,)
+  margin 0 40px 0 10px
+.bg_col_1
+  border-radius 4px
+  box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
+  border 1px solid #B55F4E
+  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
+.bg_col_2
+  border-radius 4px
+  box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
+  border 1px solid rgba(42, 189, 251, 50%)
+  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
+.st_content
+  _wh(100%, calc(100% - 40px))
+  _fj(row)
+.st_item
+  _wh(22.5%, 100%)
+.txt
+  _font(26px, 40px, #fff,,center)
+  font-family: "YouSheBiaoTiHei"
+  margin-bottom 20px
+.p_wraper
+  _wh(100%, calc(100% - 60px))
+  _fj(row, flex-start, flex-start)
+  align-content: flex-start
+  flex-wrap wrap
+.p_item
+  _wh(30%, 14%)
+  padding 14px
+  margin-bottom 4%
+  border-radius 4px
+  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
+  border 4px solid rgba(42, 189, 251, 50%)
+  overflow hidden
+  &:nth-child(3n+2)
+    margin 0 5% 2% 5%
+.p_item_i
+  _wh(100%, 100%)
+  background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
+  background-size 12px 12px
+  background-repeat repeat
+  _fj(,center)
+.p_item_active
+  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
+  border 4px solid #B55F4E
+  .p_item_i
+    background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
+.p1
+  _font(20px, 30px,#EFF2FF,,)
+  // font-family: 'YouSheBiaoTiHei'
+  font-family: "SourceHanSansCN-Bold";
+  height 30px
+  text-shadow: 0px 1px 1px #A0D4FF;
+.p2
+  _font(18px, 30px, #EFF2FF,,center)
+  font-family: "SourceHanSansCN-Bold";
+  height 30px
+</style>

src/pages/modules/home/index.vue

@@ -155,7 +155,7 @@ export default {
   },
   data () {
     return {
-      options: [{value: 1, label: '压制生产看板'}, {value: 2, label: '分拣作业监控'}, {value: 3, label: '干燥作业监控'}],
+      options: [{value: 1, label: '压制生产看板'}, {value: 2, label: '分拣作业监控'}, {value: 3, label: '干燥作业监控'}, {value: 4, label: '料仓监控'}],
       value: '',
       interTime: this.$store.getters.setTime,
       timer: null,
@@ -223,6 +223,8 @@ export default {
         this.$router.push('/boardindex/sortwork')
       } else if (this.value === 3) {
         this.$router.push('/boardindex/drytask')
+      } else if (this.value === 4) {
+        this.$router.push('/boardindex/stockbin')
       }
     },
     refresh () {

src/router/index.js

@@ -7,6 +7,7 @@ const boardIndex = r => require.ensure([], () => r(require('@page/modules/board/
 const PressProd = r => require.ensure([], () => r(require('@page/modules/board/PressProd')), 'PressProd')
 const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/board/SortWorkMonitor')), 'SortWorkMonitor')
 const DryTask = r => require.ensure([], () => r(require('@page/modules/board/DryTask')), 'DryTask')
+const StockBin = r => require.ensure([], () => r(require('@page/modules/board/StockBin')), 'StockBin')
 
 Vue.use(Router)
 
@@ -40,6 +41,10 @@ export default new Router({
         path: 'drytask',
         component: DryTask,
         meta: {title: '干燥作业监控'}
+      }, {
+        path: 'stockbin',
+        component: StockBin,
+        meta: {title: '料仓监控'}
       }]
     }
   ]