新看板

src/assets/css/reset.css

@@ -130,3 +130,17 @@ div, p {
     -khtml-user-select:none;/*早期浏览器*/
     user-select:none;
 }
+
+.zd-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.flexcol {
+	flex-direction: column;
+}
+
+.jccenter {
+	justify-content: center;
+}

src/components/header.vue

@@ -71,7 +71,6 @@ header
   position relative
   width 100%
   height 1rem
-  position relative
   background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
   p
     font-family "YouSheBiaoTiHei"

src/pages/board.vue

@@ -2,14 +2,128 @@
   <section class="container">
     <t-header  title="压制生产看板"></t-header>
     <div class="content">
-      <div class="yj_wraper">
+      <div class="zd-row yj_wraper">
         <div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
-          <div class="fontV yj_name">{{ e.device_code }}</div>
+          <div class="zd-row jccenter yj_name">{{ e.device_code }}</div>
           <div class="yj_info_wraper">
-            <div class="yj_info">
+            <div class="zd-row yj_info">
               <div class="yj_info_p2">压机状态:</div>
               <div class="yj_info_p1">{{ e.status }}</div>
             </div>
+            <div class="zd-row yj_info">
+              <div class="yj_info_p2">当前产品:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+            <div class="zd-row yj_info">
+              <div class="yj_info_p2">泥料:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+            <div class="zd-row yj_info">
+              <div class="yj_info_p2">当班产量:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+            <div class="zd-row yj_info">
+              <div class="yj_info_p2">布料仓余量:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+            <div class="zd-row yj_info">
+              <div class="yj_info_p2">缓存线泥料余量:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+            <div class="zd-row yj_info">
+              <div class="yj_info_p2">当班合格率:</div>
+              <div class="yj_info_p1">{{ e.status }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="zd-row num_wraper">
+        <div class="left_wrap">
+          <div class="title_wrap_1">
+            <p>成型工序</p>
+          </div>
+          <div class="item_wrap">
+            <div class="zd-row num_wrap_1">
+              <div class="echart_wrap">
+                <div id="echart_d1" style="width: 100%; height: 100%"></div>
+              </div>
+              <div class="zd-row num_content">
+                <div class="zd-row flexcol  jccenter num_item">
+                  <div class="yj_info_p2">日计划量</div>
+                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                </div>
+                <div class="zd-row flexcol  jccenter num_item">
+                  <div class="yj_info_p2">日完成量</div>
+                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                </div>
+              </div>
+            </div>
+            <div class="zd-row num_wrap_1">
+              <div class="echart_wrap">
+                <div id="echart_d2" style="width: 100%; height: 100%"></div>
+              </div>
+              <div class="zd-row num_content">
+                <div class="zd-row flexcol  jccenter num_item">
+                  <div class="yj_info_p2">月计划量</div>
+                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                </div>
+                <div class="zd-row flexcol  jccenter num_item">
+                  <div class="yj_info_p2">月完成量</div>
+                  <div class="yj_info_p1">1000&nbsp;吨</div>
+                </div>
+              </div>
+            </div>
+            <div class="zd-row num_wrap_2">
+              <div class="zd-row pass_item">
+                <p class="pass_p1">日合格率</p>
+                <p class="pass_p2">20%</p>
+              </div>
+              <div class="zd-row pass_item">
+                <p class="pass_p1">日合格率</p>
+                <p class="pass_p2">20%</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="left_wrap right_wrap">
+          <div class="title_wrap_1 title_wrap_2">
+            <p>缓存线泥料</p>
+          </div>
+          <div class="item_wrap">
+            <div class="zd-row nl_wrap">
+              <div class="zd-row cur_nl_wrap">
+                <div class="yj_info_p2">当前缓存线泥料种类</div>
+                <div class="yj_info_p1">20</div>
+              </div>
+              <div class="zd-row cur_nl_wrap cur_nl_wrap_1">
+                <div class="yj_info_p2">当前缓存线泥料总重</div>
+                <div class="yj_info_p1">20</div>
+              </div>
+            </div>
+            <div class="data_wrap">
+              <ul class="scroll_tab">
+                <li>序号</li>
+                <li>泥料编码</li>
+                <li>泥料名称</li>
+                <li>泥料重量</li>
+                <li>排料时间</li>
+                <li>停留时间</li>
+              </ul>
+              <div class="scroll_container">
+                <vue-seamless-scroll :data="dataList2" :class-option="defaultOption1">
+                  <ul class="scroll-ul">
+                    <li v-for="(e, i) in dataList2" :key="i">
+                    <div class="zd-row jccenter scroll-item">{{i+1}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.material_code}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.material_name}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.qty}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.time}}</div>
+                    <div class="zd-row jccenter scroll-item">{{e.time1}}</div>
+                    </li>
+                  </ul>
+                </vue-seamless-scroll>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -26,25 +140,131 @@ export default {
   },
   data () {
     return {
-      dataList1: []
+      dataList1: [],
+      dataList2: [{material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}]
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        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)
+      }
     }
   },
   created () {
     for (let i = 0; i < 8; i++) {
       this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
     }
+  },
+  mounted () {
+    this.setEchart1()
+  },
+  methods: {
+    setEchart1 () {
+      let value = 10
+      let title = '%'
+      let text = '完成率'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 22,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 14,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [10, 0, 0, 3]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 12,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [10, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['85%', '100%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              normal: {
+                color: '#00dfff'
+              }
+            }
+          }
+        ]
+      }
+      if (document.getElementById('echart_d1') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('echart_d1'))
+      let echart = this.$echarts.init(document.getElementById('echart_d1'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
+  position relative
   width 100%
   height 100%
 .content
   width 100%
   height calc(100% - 1rem)
-  padding .3rem .33rem
+  padding .25rem .33rem .38rem .33rem
 footer
   position absolute
   left 0
@@ -54,21 +274,15 @@ footer
   background center bottom / auto 100% url(../assets/images/screen1/bottom.png) no-repeat
 .yj_wraper
   width 100%
-  height calc(50% - .16rem)
+  height calc(55% - .15rem)
-  margin-bottom .32rem
+  margin-bottom .15rem
-  padding .31rem .16rem .31rem .16rem
+  padding .31rem .16rem .2rem .16rem
   background center / 100% 100% url(../assets/images/screen1/item_8.png) no-repeat
-  display flex
-  justify-content space-between
-.fontV
-  display flex
-  justify-content center
-  align-items center
 .yj_item
   width 11.6%
   background-color #001536
 .yj_name
-  height .5rem
+  height .45rem
   font-size .18rem
   line-height .18rem
   color #78B1DE
@@ -77,14 +291,11 @@ footer
   font-weight 700
   background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
 .yj_info_wraper
-  height calc(100% - .5rem)
+  height calc(100% - .45rem)
   padding .1rem
 .yj_info
   height calc(100% / 7)
   background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
-  display flex
-  justify-content space-between
-  align-items center
 .yj_info_p1
   font-size: .18rem;
   line-height: .18rem;
@@ -99,4 +310,120 @@ footer
   letter-spacing: 2px;
   text-align: center;
   font-weight: 700;
+.num_wraper
+  width 100%
+  height 45%
+.left_wrap
+  width 30%
+  height 100%
+  margin-right .32rem
+  background-color rgba(6,11,24,0.70)
+.right_wrap
+  width calc(70% - .32rem)
+.title_wrap_1
+  height .34rem
+  background center bottom / 100% 100% url(../assets/images/screen1/bg_title_s.png) no-repeat
+  padding-left .1rem
+  p
+    font-size: .18rem;
+    line-height .34rem
+    color: #FFFFFF;
+    letter-spacing: 2px;
+    text-shadow: 0 0 9px #159AFF;
+    font-weight: 700;
+    padding-left .28rem
+    background left center / .22rem .22rem url(../assets/images/screen1/bg_title_tip.png) no-repeat
+.title_wrap_2
+  background-image url(../assets/images/screen1/bg_title_j.png)
+.item_wrap
+  height calc(100% - .34rem)
+  padding .1rem .3rem .2rem .3rem
+.num_wrap_1
+  height calc(42% - .1rem)
+  background bottom center / 100% 3px url(../assets/images/screen1/line_2.png) no-repeat
+  pdding-bottom .1rem
+  margin-bottom .1rem
+.num_wrap_2
+  height 16%
+.echart_wrap
+  width 1.1rem
+  height 1.1rem
+  background center / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
+  padding .16rem
+.num_content
+  width calc(100% - 1.34rem)
+  height 100%
+.num_item
+  width 45%
+  height 55%
+  background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
+  .yj_info_p2
+    margin-bottom .1rem
+.pass_item
+  width 48%
+  height 100%
+  background center / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
+  padding 0 .1rem 0 .2rem
+.pass_p1
+  font-size .16rem
+  color #fff
+.pass_p2
+  font-size .18rem
+  color #00D5FF
+.nl_wrap
+  height .5rem
+  margin .1rem 0 .14rem 0
+.cur_nl_wrap
+  width 45%
+  height 100%
+  background center / 100% 100% url(../assets/images/screen1/item_9.png) no-repeat
+  padding 0 .3rem
+  .yj_info_p2
+    color #fff
+    font-size .18rem
+  .yj_info_p1
+    font-size .24rem
+    font-family 'YouSheBiaoTiHei'
+.cur_nl_wrap_1
+  background-image url(../assets/images/screen1/item_10.png)
+.data_wrap
+  height calc(100% - .74rem)
+  border 1px solid rgba(8,205,248,0.3)
+.scroll_tab
+  width 100%
+  height .4rem
+  li
+    float left
+    width 18%
+    font-size .14rem
+    line-height .4rem
+    color #78B1DE
+    text-align center
+    font-family 'SourceHanSansCN-Regular'
+    &:nth-child(1)
+      width 10%
+.scroll_container
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul
+  li
+    width 100%
+    height .44rem
+    // border-bottom 1px solid rgba(122,159,224,0.17)
+    box-shadow: inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+  .scroll-item
+    float left
+    width 18%
+    height .44rem
+    font-size .14rem
+    line-height .14rem
+    color #fff
+    text-align center
+    font-family: 'SourceHanSansCN-Regular';
+    overflow hidden
+    &:nth-child(1)
+      width 10%
 </style>