直盘管样式

src/pages/management/ZhiPanGuan.vue

@@ -54,7 +54,7 @@
             <div class="item_content item_content_2">
               <div class="alarm_box_l"></div>
               <div class="alarm_box_r">
-                <vue-seamless-scroll :data="scollList1" :class-option="defaultOption1">
+                <vue-seamless-scroll  class="scroll_wrap" :data="scollList1" :class-option="defaultOption1">
                     <ul class="scroll-ul_1">
                       <li v-for="(e, i) in scollList1" :key="i">
                         <div class="scroll-ul_1_div">{{e.time}}</div>
@@ -123,7 +123,46 @@
           <div class="item_tip item_tip_l">
             <div class="item_tip_left">任务列表</div>
           </div>
-          <div class="item_content"></div>
+          <div class="item_content item_content_3">
+            <div class="scroll_wrap">
+              <ul class="scroll_tab">
+                <li>序号</li>
+                <li>工单号</li>
+                <li>物料</li>
+                <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">
+                <vue-seamless-scroll :data="scollList2" :class-option="defaultOption2">
+                  <ul class="scroll-ul_2">
+                    <li v-for="(e, i) in scollList2" :key="i">
+                      <div class="scroll-ul_2_div">{{i + 1}}</div>
+                      <div class="scroll-ul_2_div">{{e.data1}}</div>
+                      <div class="scroll-ul_2_div">盘管双斜</div>
+                      <div class="scroll-ul_2_div">规格1</div>
+                      <div class="scroll-ul_2_div">15000</div>
+                      <div class="scroll-ul_2_div">15010</div>
+                      <div class="scroll-ul_2_div">个</div>
+                      <div class="scroll-ul_2_div">盘管双斜1</div>
+                      <div class="scroll-ul_2_div">{{e.data1}}</div>
+                      <div class="scroll-ul_2_div scroll_status_wrap"><span :style="{'background-color': ['#33CCCC', '#EAAD24', '#0E90FD', '#c9c9c9'][Number(e.device_status)]}"></span>已完成</div>
+                      <div class="scroll-ul_2_div">08:00:00</div>
+                      <div class="scroll-ul_2_div">08:00:00</div>
+                      <div class="scroll-ul_2_div">08:00:00</div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -145,15 +184,28 @@ export default {
       myCharts3: '',
       myCharts4: '',
       myCharts5: '',
-      scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}, {time: '2020-1-1', p: '故障故障故障故障故障5'}, {time: '2020-1-1', p: '故障故障故障故障故障6'}],
+      scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}],
-      arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}]
+      echartData1: [{data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}],
+      scollList2: [{data1: 'GD00001', device_status: '0'}, {data1: 'GD00001', device_status: '1'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}]
     }
   },
   computed: {
     defaultOption1 () {
       return {
         step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
+        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: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -301,15 +353,17 @@ export default {
       }
     },
     setEchart2 () {
-      let date = []
       let data1 = []
       let data2 = []
       let data3 = []
-      this.arrL2.map(e => {
+      let data4 = []
-        date.push(e.date)
+      let device = []
-        data1.push(e.elbow_qty)
+      this.echartData1.map(e => {
-        data2.push(e.comprehensive_qty)
+        data1.push(e.data1)
-        data3.push(e.comprehensive_qty)
+        data2.push(e.data2)
+        data3.push(e.data3)
+        data4.push(e.data4)
+        device.push(e.device)
       })
       let option = {
         grid: {
@@ -329,7 +383,7 @@ export default {
           itemGap: 30.86,
           itemWidth: 14.16,
           itemHeight: 7.38,
-          data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
+          data: [{name: '正常运行', itemStyle: {color: '#33CCCC'}}, {name: '故障', itemStyle: {color: '#EAAD24'}}, {name: '待机', itemStyle: {color: '#0E90FD'}}, {name: '关机', itemStyle: {color: '#c9c9c9'}}]
         },
         xAxis: {
           type: 'category',
@@ -348,10 +402,9 @@ export default {
             textStyle: {
               color: '#8FABBF',
               fontSize: 16
-            },
+            }
-            rotate: 50
           },
-          data: date
+          data: device
         },
         yAxis: {
           type: 'value',
@@ -379,29 +432,7 @@ export default {
         },
         series: [
           {
-            name: '弯头工段',
+            name: '正常运行',
-            type: 'bar',
-            barWidth: '8',
-            itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 1,
-                    color: 'rgba(96,112,128,0.10)',
-                    opacity: 1
-                  },
-                  {
-                    offset: 0,
-                    color: '#0E90FD',
-                    opacity: 0.1
-                  }
-                ])
-              }
-            },
-            data: data1
-          },
-          {
-            name: '综合工段',
             type: 'bar',
             barWidth: '8',
             itemStyle: {
@@ -420,10 +451,10 @@ export default {
                 ])
               }
             },
-            data: data2
+            data: data1
           },
           {
-            name: '成品工段',
+            name: '故障',
             type: 'bar',
             barWidth: '8',
             itemStyle: {
@@ -442,7 +473,51 @@ export default {
                 ])
               }
             },
+            data: data2
+          },
+          {
+            name: '待机',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
             data: data3
+          },
+          {
+            name: '关机',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#c9c9c9',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(148,145,145,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data4
           }
         ]
       }
@@ -487,7 +562,8 @@ export default {
   _wh(100%, 60%)
   clear both
 .bottom_wrap
-  _wh(100%, 40%)
+  _wh(100%, calc(40% - .3rem))
+  margin-top .3rem
 .left_wrap
   float left
   width 49%
@@ -580,7 +656,6 @@ export default {
   margin-left 27%
   padding .17rem 10% .24rem 1rem
   background-color rgba(244,247,38,.34)
-  overflow hidden
   &::after
     content ''
     _wh(3px, 100%)
@@ -588,8 +663,12 @@ export default {
     z-index 102
     top 0
     left 0
-    background rgba(244,247,38,.6)
+    background rgba(244,247,38,.55)
     box-shadow 0px 0px 5px 3px rgba(244,247,38,.34)
+.scroll_wrap
+  _wh(100%, 100%)
+  background-image linear-gradient(180deg, rgba(55,141,186,0.00) 0%, rgba(40,183,235,0.10) 100%)
+  overflow hidden
 .scroll-ul_1
   li
     _wh(100%, .44rem)
@@ -604,4 +683,54 @@ export default {
         color #f1c76d
         margin-right .2rem
         font-size .16rem
+.item_content_3
+  height: calc(100% - 0.38rem)
+  padding 0
+  margin-top .06rem
+  border 0.01rem solid rgba(8,205,248,0.3)
+.scroll_tab
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 8%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 4%
+.scroll_container
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_2
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem 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(8%, .44rem)
+      _fj(center)
+      _font(.14rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      &:nth-child(1)
+        width 4%
+    .scroll_status_wrap
+      position relative
+      span
+        position absolute
+        left 25%
+        _wh(7px, 7px)
+        border-radius 50%
 </style>