diff --git a/src/assets/images/alarm.png b/src/assets/images/alarm.png new file mode 100644 index 0000000..6500f0d Binary files /dev/null and b/src/assets/images/alarm.png differ diff --git a/src/assets/images/bg.png b/src/assets/images/bg.png deleted file mode 100644 index 214abaf..0000000 Binary files a/src/assets/images/bg.png and /dev/null differ diff --git a/src/assets/images/bg1.png b/src/assets/images/bg1.png deleted file mode 100644 index e95779a..0000000 Binary files a/src/assets/images/bg1.png and /dev/null differ diff --git a/src/assets/images/bg2.png b/src/assets/images/bg2.png deleted file mode 100644 index 82c666f..0000000 Binary files a/src/assets/images/bg2.png and /dev/null differ diff --git a/src/assets/images/bg3.png b/src/assets/images/bg3.png deleted file mode 100644 index 41b467d..0000000 Binary files a/src/assets/images/bg3.png and /dev/null differ diff --git a/src/assets/images/header.png b/src/assets/images/header.png deleted file mode 100644 index 47285bf..0000000 Binary files a/src/assets/images/header.png and /dev/null differ diff --git a/src/assets/images/mon_04.png b/src/assets/images/mon_04.png deleted file mode 100644 index fe84efd..0000000 Binary files a/src/assets/images/mon_04.png and /dev/null differ diff --git a/src/assets/images/screen1/title_bg_3.png b/src/assets/images/screen1/title_bg_3.png new file mode 100644 index 0000000..704f8bf Binary files /dev/null and b/src/assets/images/screen1/title_bg_3.png differ diff --git a/src/assets/images/tip.png b/src/assets/images/tip.png deleted file mode 100644 index 0db0dd6..0000000 Binary files a/src/assets/images/tip.png and /dev/null differ diff --git a/src/pages/management/ZhiPanGuan.vue b/src/pages/management/ZhiPanGuan.vue index 6194ba2..a407851 100644 --- a/src/pages/management/ZhiPanGuan.vue +++ b/src/pages/management/ZhiPanGuan.vue @@ -51,7 +51,19 @@
设备报警信息
-
+
+
+
+ +
    +
  • +
    {{e.time}}
    +
    {{e.p}}
    +
  • +
+
+
+
@@ -100,7 +112,9 @@
设备状态
-
+
+
+
@@ -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