no message

src/pages/management/ZhiPanGuan.vue

@@ -51,7 +51,19 @@
             <div class="item_tip">
               <div class="item_tip_left">设备报警信息</div>
             </div>
-            <div class="item_content"></div>
+            <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">
+                    <ul class="scroll-ul_1">
+                      <li v-for="(e, i) in scollList1" :key="i">
+                        <div class="scroll-ul_1_div">{{e.time}}</div>
+                        <div class="scroll-ul_1_div">{{e.p}}</div>
+                      </li>
+                    </ul>
+                </vue-seamless-scroll>
+              </div>
+            </div>
           </div>
         </div>
         <div class="right_wrap">
@@ -100,7 +112,9 @@
             <div class="item_tip">
               <div class="item_tip_left">设备状态</div>
             </div>
-            <div class="item_content"></div>
+            <div class="item_content">
+              <div id="echart_zpg_5" style="width: 100%; height: 100%"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -129,11 +143,29 @@ export default {
       myCharts1: '',
       myCharts2: '',
       myCharts3: '',
-      myCharts4: ''
+      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'}],
+      arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}]
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 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.setEchart1()
+    this.setEchart2()
   },
   methods: {
     toJump () {
@@ -267,6 +299,164 @@ export default {
           this.myCharts4.resize()
         })
       }
+    },
+    setEchart2 () {
+      let date = []
+      let data1 = []
+      let data2 = []
+      let data3 = []
+      this.arrL2.map(e => {
+        date.push(e.date)
+        data1.push(e.elbow_qty)
+        data2.push(e.comprehensive_qty)
+        data3.push(e.comprehensive_qty)
+      })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            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: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#33CCCC',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data2
+          },
+          {
+            name: '成品工段',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data3
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_zpg_5')
+      if (this.myCharts5 !== '') {
+        this.myCharts5.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts5 = this.$echarts.init(echart)
+        this.myCharts5.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts5.resize()
+        })
+      }
     }
   }
 }
@@ -313,7 +503,7 @@ export default {
   line-height .32rem
   background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
 .item_tip_l
-  background-image url(../../assets/images/screen1/title_bg_d2.png)
+  background-image url(../../assets/images/screen1/title_bg_3.png)
 .item_tip_left
   float left
   _wh(60%, 100%)
@@ -362,4 +552,56 @@ export default {
   _wh(1.6rem, 1.6rem)
   _fj(center, center)
   background center bottom / 100% 100% url(../../assets/images/screen1/item_3.png) no-repeat
+.item_content_2
+  position relative
+  padding 0
+  &::after
+    position absolute
+    top 0
+    left 0
+    content ''
+    _wh(100%, 100%)
+    background-image: linear-gradient(0deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px),
+      linear-gradient(90deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px);
+    background-size: 28px 13px
+    opacity .2
+    z-index 10
+.alarm_box_l
+  position absolute
+  left 10%
+  top 0
+  z-index 100
+  _wh(35%, 100%)
+  background left center / 55% auto url(../../assets/images/alarm.png) no-repeat
+.alarm_box_r
+  position relative
+  z-index 101
+  _wh(73%, 100%)
+  margin-left 27%
+  padding .17rem 10% .24rem 1rem
+  background-color rgba(244,247,38,.34)
+  overflow hidden
+  &::after
+    content ''
+    _wh(3px, 100%)
+    position absolute
+    z-index 102
+    top 0
+    left 0
+    background rgba(244,247,38,.6)
+    box-shadow 0px 0px 5px 3px rgba(244,247,38,.34)
+.scroll-ul_1
+  li
+    _wh(100%, .44rem)
+    .scroll-ul_1_div
+      float left
+      _font(.18rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      overflow hidden
+      &:nth-child(1)
+        color #f1c76d
+        margin-right .2rem
+        font-size .16rem
 </style>