看板

src/config/getData2.js

@@ -1,3 +1,6 @@
 import {post} from './http.js'
 // 获取大屏所有数据
-export const getAllBigScreen = () => post('api/bigScreen/getAllBigScreen', {})
+// export const getAllBigScreen = () => post('api/bigScreen/getAllBigScreen', {})
+
+// 无锡帝科看板数据
+export const getAllBigScreen = () => post('api/kanban/wwdkdate', {})

src/config/mork01.js

@@ -0,0 +1,65 @@
+/* eslint-disable */
+export const getAllBigScreen = () => {
+    let res = {
+        drbzsituation: [
+            {
+                "finish_weight": 50.0,
+                "plan_weight": 100.0,
+                "material_id": "1759154624864063488",
+                "material_name": "测试物料",
+                "material_code": "A1001"
+            },
+            {
+                "finish_weight": 66.0,
+                "plan_weight": 78.0,
+                "material_id": "1759155580745945088",
+                "material_name": "测试物料2",
+                "material_code": "A1002"
+            }
+        ],
+        dddatebase: [
+            {
+                "customer": "客户1",
+                "production_materials": "xh001",
+                "large_model": "l-a-1821053300573868033",
+                "small_model": "s-a-001",
+                "lable_batch": "pc001",
+                "weight": "100kg",
+                "dd_status": "完成"
+            },
+            {
+                "customer": "客户2",
+                "production_materials": "xh022",
+                "large_model": "l-a-1525485734957203888",
+                "small_model": "s-a-002",
+                "lable_batch": "pc002",
+                "weight": "80kg",
+                "dd_status": "未完成"
+            },
+            {
+                "customer": "客户3",
+                "production_materials": "xh003",
+                "large_model": "l-a-1732493429929066100",
+                "small_model": "s-a-003",
+                "lable_batch": "pc003",
+                "weight": "50kg",
+                "dd_status": "完成"
+            }
+        ],
+        fhsituation: {
+            'enter_proportion': 120,
+            'out_proportion': 80,
+            'start_proportion': 130,
+            'doing_proportion': 200,
+            'finish_proportion': 60,
+        },
+        ypsituation: [
+            {
+                "customer": "客户1",
+                "batch": "2024-08-07 13:19:10",
+                "dd_status": "已完成"
+            }
+        ]
+    }
+    return res
+}

src/pages_960/Setup.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="body-container">
-    <h1>车间物流监控</h1>
+    <h1>无锡帝科发货大数据平台</h1>
     <div class="login_wrap">
       <div class="login_cnt">
         <div class="title-name">系统配置</div>
@@ -46,7 +46,7 @@ export default {
         setTime: this.setTime * 1000
       }
       this.$store.dispatch('setConfig', obj)
-      this.$router.push('/home')
+      this.$router.push('/wxdk')
       let element = document.documentElement
       if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
         if (element.requestFullscreen) {

src/pages_960/modules/home/index2.vue

@@ -0,0 +1,728 @@
+<template>
+  <div class="n_container">
+      <div class="n_header">
+          <div class="n_header_h1">
+              <h1>无锡帝科发货大数据平台</h1>
+          </div>
+          <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
+      </div>
+      <div class="n_body_container">
+          <div class="n-center_wraper">
+            <div class="w_wraper">
+              <div class="item_wraper0">
+                <div class="title_wraper title_wraper_1">
+                  <p>订单数据</p>
+                </div>
+                <div class="content_wraper content_wraper3" style="padding: 0">
+                  <div class="scroll_wrap">
+                    <ul class="scroll_tab_1">
+                      <li>客户名称</li>
+                      <li>实发型号</li>
+                      <li>大型号</li>
+                      <li>小批次</li>
+                      <li>标签批次号</li>
+                      <li>重量</li>
+                      <li>订单状态</li>
+                    </ul>
+                    <div class="scroll_container_1">
+                      <vue-seamless-scroll :data="dataList1" :class-option="defaultOption1">
+                        <ul class="scroll-ul_1">
+                          <li v-for="(e, i) in dataList1" :key="i">
+                          <div class="scroll-ul_1_div">{{e.customer}}</div>
+                          <div class="scroll-ul_1_div">{{e.production_materials}}</div>
+                          <!-- <div class="scroll-ul_1_div">
+                            <span class="state" :class="'state_' + e.status"></span>
+                            <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
+                          </div> -->
+                          <div class="scroll-ul_1_div">{{e.large_model}}</div>
+                          <div class="scroll-ul_1_div">{{e.small_model}}</div>
+                          <div class="scroll-ul_1_div">{{e.lable_batch}}</div>
+                          <div class="scroll-ul_1_div">{{e.weight}}</div>
+                          <div class="scroll-ul_1_div">{{e.dd_status}}</div>
+                          </li>
+                        </ul>
+                      </vue-seamless-scroll>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="n_left_wraper">
+            <div class="w_wraper">
+              <div class="item_wraper">
+                <div class="title_wraper">
+                  <p>成品包装发货情况</p>
+                </div>
+                <div class="content_wraper content_wraper_2">
+                  <div class="pie_wraper pie_wraper1">
+                    <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
+                  </div>
+                  <div class="pie_wraper pie_wraper2">
+                    <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_wraper">
+                <div class="title_wraper">
+                  <p>当日包装完成情况</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="w_wraper">
+                      <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="item_wraper">
+                <div class="title_wraper">
+                  <p>包装发货进度</p>
+                </div>
+                <div class="content_wraper content_wraper3" style="padding: 0">
+                  <div class="scroll_wrap">
+                    <ul class="scroll_tab_2">
+                      <li>客户名称</li>
+                      <li>批次</li>
+                      <li>订单状态</li>
+                    </ul>
+                    <div class="scroll_container_2">
+                      <vue-seamless-scroll :data="dataList2" :class-option="defaultOption2">
+                        <ul class="scroll-ul_2">
+                          <li v-for="(e, i) in dataList2" :key="i">
+                          <div class="scroll-ul_2_div">{{e.customer}}</div>
+                          <div class="scroll-ul_2_div">{{e.batch}}</div>
+                          <div class="scroll-ul_2_div">{{e.dd_status}}</div>
+                          </li>
+                        </ul>
+                      </vue-seamless-scroll>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { getAllBigScreen } from '@js/mork01.js'
+// import { getAllBigScreen } from '@js/getData2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      // chart2Timer: null,
+      curList: [], // 当日出入
+      historyList: [], // 历史分析
+      statisList: [], // 当日生产统计
+      loadList: [], // 当日车间上下料
+      dataList1: [], // 订单数据-滚动列表1
+      dataList2: [], // 订单数据-滚动列表2
+      myChart1: null,
+      myChart2: null,
+      myChart3: null
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 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: 5000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 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: 5000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  created () {
+    this.refresh()
+  },
+  mounted () {
+    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
+    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+    this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
+  },
+  destroyed () {
+    if (this.myChart1 !== null) {
+      this.myChart1.dispose()
+      this.myChart1 = null
+    }
+    if (this.myChart2 !== null) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+    if (this.myChart3 !== null) {
+      this.myChart3.dispose()
+      this.myChart3 = null
+    }
+    if (this.timer !== null) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    // if (this.chart2Timer !== null) {
+    //   clearInterval(this.chart2Timer)
+    //   this.chart2Timer = null
+    // }
+  },
+  methods: {
+    back () {
+      let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
+      if (flag) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      }
+      this.$router.push('/setup')
+    },
+    refresh () {
+      this._getAllBigScreen()
+      this.timer = setInterval(() => {
+        this._getAllBigScreen()
+      }, this.interTime)
+    },
+    async _getAllBigScreen () {
+      let res = await getAllBigScreen()
+      // if (this.chart2Timer !== null) {
+      //   clearInterval(this.chart2Timer)
+      //   this.chart2Timer = null
+      // }
+      this.fhobj = res.fhsituation // 成品包装发货情况
+      this.curList = [...res.drbzsituation] // 当日包装完成情况
+      this.dataList1 = [...res.dddatebase] // 滚动1-订单数据
+      this.dataList2 = [...res.ypsituation] // 滚动2-（样品）包装发货进度
+      this.setEchart1()
+      this.setEchart2()
+      this.setEchart3()
+    },
+    setEchart1 () {
+      let data = [
+        {
+          value: this.fhobj.enter_proportion,
+          name: '入库'
+        },
+        {
+          value: this.fhobj.out_proportion,
+          name: '未入库'
+        }
+      ]
+      var option = {
+        legend: {
+          // orient: 'vertical',
+          orient: 'horizontal',
+          top: '-1%',
+          // right: 0,
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 12
+          },
+          itemGap: 10.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          // data: dataName
+          data: ['入库', '未入库']
+        },
+        color: ['#0966E8', '#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['43%', '70%'],
+            label: {
+              normal: {
+                show: false,
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 12
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart1.setOption(option, true)
+    },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      this.curList.map(el => {
+        barName.push(el.material_name)
+        barData1.push(el.plan_weight)
+        barData2.push(el.finish_weight)
+      })
+      let option = {
+        grid: {
+          top: 20,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          top: '0',
+          right: '0',
+          textStyle: {
+            color: '#9BB9DD',
+            fontSize: 8,
+            lineHeight: 8
+          },
+          itemGap: 15,
+          itemWidth: 4,
+          itemHeight: 4,
+          data: [{name: '计划重量', itemStyle: {color: '#67D470'}}, {name: '已完成重量', itemStyle: {color: '#1980EA'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: '#3C5787'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            color: '#7591B2',
+            fontSize: 8,
+            lineHeight: 6,
+            margin: 5
+          },
+          data: barName
+        },
+        yAxis: {
+          type: 'value',
+          // name: '单位：块',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 4,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#B5C5D4',
+            fontSize: 6
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [2, 1],
+              color: '#455C86'
+            }
+          }
+        },
+        series: [
+          {
+            name: '计划重量',
+            type: 'bar',
+            barWidth: '10',
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(103,212,112,0.2)'
+                },
+                {
+                  offset: 0.08,
+                  color: 'rgba(103,212,112,0.9)'
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(255,255,255,0.9)'
+                }
+              ])
+            },
+            data: barData1
+          },
+          {
+            name: '已完成重量',
+            type: 'bar',
+            barWidth: '10',
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(25,128,234,0.2)'
+                },
+                {
+                  offset: 0.08,
+                  color: 'rgba(25,128,234,0.9)'
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(255,255,255,0.9)'
+                }
+              ])
+            },
+            data: barData2
+          }
+        ],
+        dataZoom: [
+          {
+            xAxisIndex: 0, // 这里是从X轴的0刻度开始
+            show: false, // 是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 3 // 展示到第几个。
+          }
+        ]
+      }
+      this.myChart2.setOption(option, true)
+      // this.chart2Timer = setInterval(() => {
+      //   if (option.dataZoom[0].endValue >= barData1.length - 1) {
+      //     option.dataZoom[0].endValue = 3
+      //     option.dataZoom[0].startValue = 0
+      //   } else {
+      //     option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+      //     option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+      //   }
+      //   this.myChart2.setOption(option, true)
+      // }, 2000)
+    },
+    setEchart3 () {
+      let data = [
+        {
+          value: this.fhobj.start_proportion,
+          name: '未开始'
+        },
+        {
+          value: this.fhobj.doing_proportion,
+          name: '进行中'
+        },
+        {
+          value: this.fhobj.finish_proportion,
+          name: '已完成'
+        }
+      ]
+      var option = {
+        legend: {
+          // orient: 'vertical',
+          orient: 'horizontal',
+          top: '-1%',
+          // right: 0,
+          textStyle: {
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: 12
+          },
+          itemGap: 10.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          // data: dataName
+          data: ['未开始', '进行中', '已完成']
+        },
+        color: ['#39E083', '#ffee0e', '#f975aa', '#32c5ff', '#f7b502'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['43%', '70%'],
+            label: {
+              normal: {
+                show: false,
+                // position: 'inner',
+                formatter: '{d}%',
+                textStyle: {
+                  color: '#fff',
+                  fontWeight: 'bold',
+                  fontSize: 12
+                }
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart3.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.n_container
+  position relative
+  width 100%
+  height 100%
+  overflow hidden
+.n_header
+  position absolute
+  left 0
+  top 0
+  width 100%
+  height 88px
+  background center / 100% url('../../../images/header_bg_s.png') no-repeat
+.n_header_h1
+  width: 100%;
+  height: 100%;
+  padding-top 12px
+  h1
+      font-size: 22px;
+      font-weight: 700;
+      color: #fff;
+      line-height: 1;
+      text-align center;
+      letter-spacing 4px
+.exit_btn
+  position absolute
+  left 3%
+  top 11%
+  z-index 100
+  height 16px
+  width 16px
+  line-height 16px
+  font-size 16px
+  color #AECAF5
+  text-align: center;
+.n_body_container
+  width 100%
+  height 100%
+  padding 60px 10px 10px 10px
+  display: flex;
+  // justify-content: space-between;
+  flex-direction: column;
+.n_left_wraper
+  width 100%
+  height 45%
+.n-center_wraper
+  width 100%
+  height 55%
+.w_wraper
+  width 100%
+  height 100%
+  display: flex;
+  justify-content: space-between;
+  overflow hidden
+.item_wraper0
+  width 100%
+  // height calc((100% - 20px) / 3)
+  height 100%
+  margin-bottom 10px
+  box-sizing: border-box;
+  padding: 8px 8px;
+  &:last-child
+    // margin-bottom 0
+.item_wraper
+  width 100%
+  // height calc((100% - 20px) / 3)
+  height 100%
+  margin-bottom 10px
+  box-sizing: border-box;
+  padding: 8px 8px;
+  &:last-child
+    // margin-bottom 0
+  &:nth-child(1), &:nth-child(6)
+    width 40%
+  &:nth-child(2), &:nth-child(3)
+    width 30%
+.item_wraper_1
+  // height calc((200% - 20px) / 3)
+.title_wraper
+  width 100%
+  height 24px
+  background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
+  padding 2px 22px
+  p
+    font-size 10px
+    font-weight: 400;
+    color: #fff;
+    line-height 12px
+.title_wraper_1
+  background-image url('../../../images/bg-title_1_s.png')
+.content_wraper
+  width 100%
+  height calc(100% - 24px)
+  padding 8px
+  background-color rgba(30, 65, 126, 70%)
+.content_wraper3
+  height 100%
+  overflow hidden
+.content_wraper_2
+  padding 0
+  display flex
+  justify-content: center;
+.pie_wraper
+  width 50%
+  height 100%
+  // padding 1px 0 0 1px
+  // background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
+.pie_wraper1
+  width 50%
+  // background #fff
+.pie_wraper2
+  width 50%
+  // background #ff0
+.scroll_wrap
+    width 100%
+    height 100%
+    padding 5px 10px 2px 10px
+.scroll_tab_1
+  width 100%
+  height 20px
+  background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 14%
+    font-size 8px;
+    line-height 20px
+    color #AFBED8
+    text-align center
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 2px
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1), &:nth-child(6)
+      width 15%
+    .state
+      display block
+      width 20px
+      height 14px
+    .state_name
+      width calc(100% - 20px)
+.scroll_container_1
+  width 100%
+  height calc(100% - 20px)
+  overflow hidden
+.scroll-ul_1
+  li
+    width 100%
+    height 20px
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+    .scroll-ul_1_div
+      float left
+      width 14%
+      height 20px
+      display flex
+      flex-direction row
+      justify-content center
+      align-items center
+      flex-wrap nowrap
+      font-size 8px
+      line-height 8px
+      color #B2BBD7
+      text-align center
+      // word-wrap break-word
+      // word-break break-all
+      white-space nowrap
+      padding 0 1px
+      overflow hidden
+      &:nth-child(1), &:nth-child(6)
+        width 15%
+      .state
+        display block
+        width 20px
+        height 14px
+      .state_name
+        width 100%
+        height 20px
+.scroll_tab_2
+  width 100%
+  height 20px
+  background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 33%
+    font-size 8px;
+    line-height 20px
+    color #AFBED8
+    text-align center
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 2px
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 34%
+    .state
+      display block
+      width 20px
+      height 14px
+    .state_name
+      width calc(100% - 20px)
+.scroll_container_2
+  width 100%
+  height calc(100% - 20px)
+  overflow hidden
+.scroll-ul_2
+  li
+    width 100%
+    height 20px
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+    .scroll-ul_2_div
+      float left
+      width 33%
+      height 20px
+      display flex
+      flex-direction row
+      justify-content center
+      align-items center
+      flex-wrap nowrap
+      font-size 8px
+      line-height 8px
+      color #B2BBD7
+      text-align center
+      // word-wrap break-word
+      // word-break break-all
+      white-space nowrap
+      padding 0 1px
+      overflow hidden
+      &:nth-child(1)
+        width 34%
+      .state
+        display block
+        width 20px
+        height 14px
+      .state_name
+        width 100%
+        height 20px
+</style>

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 
 const Setup = r => require.ensure([], () => r(require('../pages_960/Setup')), 'Setup')
 const home = r => require.ensure([], () => r(require('../pages_960/modules/home/index')), 'home')
+const wxdk = r => require.ensure([], () => r(require('../pages_960/modules/home/index2')), 'home')
 
 Vue.use(Router)
 
@@ -20,6 +21,10 @@ export default new Router({
     {
       path: '/home',
       component: home
+    },
+    {
+      path: '/wxdk',
+      component: wxdk
     }
   ]
 })