diff --git a/src/pages/management/ZhiPanGuan.vue b/src/pages/management/ZhiPanGuan.vue index a407851..687fe2f 100644 --- a/src/pages/management/ZhiPanGuan.vue +++ b/src/pages/management/ZhiPanGuan.vue @@ -54,7 +54,7 @@
- +
  • {{e.time}}
    @@ -123,7 +123,46 @@
    任务列表
    -
    +
    +
    +
      +
    • 序号
      • +
    • 工单号
      • +
    • 物料
      • +
    • 规格
      • +
    • 数量
      • +
    • 已生产
      • +
    • 单位
      • +
    • 机台
      • +
    • 归属订单
      • +
    • 状态
      • +
    • 计划开始
      • +
    • 开始时间
      • +
    • 结束时间
      • +
    +
    + +
      +
    • +
      {{i + 1}}
      +
      {{e.data1}}
      +
      盘管双斜
      +
      规格1
      +
      15000
      +
      15010
      +
      个
      +
      盘管双斜1
      +
      {{e.data1}}
      +
      已完成
      +
      08:00:00
      +
      08:00:00
      +
      08:00:00
      +
      • +
    +     +
    +
    +
@@ -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'}], - arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}] + 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'}], + 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 => { - date.push(e.date) - data1.push(e.elbow_qty) - data2.push(e.comprehensive_qty) - data3.push(e.comprehensive_qty) + let data4 = [] + let device = [] + this.echartData1.map(e => { + data1.push(e.data1) + 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: '弯头工段', - 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: '综合工段', + 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%