Commit d3aefa979e1427652d6014c0b185481ffaadfb20
1 parent
be7e8a78
订单消息
Showing
3 changed files
with
142 additions
and
108 deletions
src/api/common.js
src/components/berth/index.vue
| @@ -61,12 +61,6 @@ | @@ -61,12 +61,6 @@ | ||
| 61 | window.addEventListener('resize', function() { | 61 | window.addEventListener('resize', function() { |
| 62 | this.pieChart.resize() | 62 | this.pieChart.resize() |
| 63 | }.bind(this)); | 63 | }.bind(this)); |
| 64 | - | ||
| 65 | - // let barChartOption = this.barChartOption | ||
| 66 | - // this.barChart=this.createBar(barChartOption); | ||
| 67 | - // window.addEventListener('resize', function() { | ||
| 68 | - // this.barChart.resize() | ||
| 69 | - // }.bind(this)); | ||
| 70 | }).catch((response)=>{ | 64 | }).catch((response)=>{ |
| 71 | console.log(response); | 65 | console.log(response); |
| 72 | }) | 66 | }) |
src/components/orderMessage/index.vue
| @@ -3,129 +3,165 @@ | @@ -3,129 +3,165 @@ | ||
| 3 | <div class="theme-card"> | 3 | <div class="theme-card"> |
| 4 | <div class="title"><span>订单消息</span></div> | 4 | <div class="title"><span>订单消息</span></div> |
| 5 | <div class="content"> | 5 | <div class="content"> |
| 6 | - <table class="orderMessageTb"> | ||
| 7 | - <tr> | ||
| 8 | - <td> | ||
| 9 | - <table class="tbHead"> | ||
| 10 | - <tr><td><div class="orderImgCom orderNum"></div></td><td>订单编号</td></tr> | ||
| 11 | - </table> | ||
| 12 | - </td> | ||
| 13 | - <td> | ||
| 14 | - <table class="tbHead"> | ||
| 15 | - <tr><td><div class="orderImgCom orderPark"></div></td><td>停车场</td></tr> | ||
| 16 | - </table> | ||
| 17 | - </td> | ||
| 18 | - <td> | ||
| 19 | - <table class="tbHead"> | ||
| 20 | - <tr><td><div class="orderImgCom orderMoney"></div></td><td>收费金额</td></tr> | ||
| 21 | - </table> | ||
| 22 | - </td> | ||
| 23 | - </tr> | ||
| 24 | - <tr> | ||
| 25 | - <td colspan="3"> | ||
| 26 | - <div class="orderListBox" id="orderListBox"> | ||
| 27 | - <marquee class="marqueeStyle" direction="up" behavior="scroll" scrollamount="2" onMouseOut="this.start()" onMouseOver="this.stop()" scrolldelay="0" loop="-1" > | ||
| 28 | - <div class="orderListBox" v-html="orderList"></div> | ||
| 29 | - </marquee> | ||
| 30 | - </div> | ||
| 31 | - </td> | ||
| 32 | - </tr> | ||
| 33 | - </table> | 6 | + <!--<table class="orderMessageTb">--> |
| 7 | + <!--<tr>--> | ||
| 8 | + <!--<td>--> | ||
| 9 | + <!--<table class="tbHead">--> | ||
| 10 | + <!--<tr><td><div class="orderImgCom orderNum"></div></td><td>订单编号</td></tr>--> | ||
| 11 | + <!--</table>--> | ||
| 12 | + <!--</td>--> | ||
| 13 | + <!--<td>--> | ||
| 14 | + <!--<table class="tbHead">--> | ||
| 15 | + <!--<tr><td><div class="orderImgCom orderPark"></div></td><td>停车场</td></tr>--> | ||
| 16 | + <!--</table>--> | ||
| 17 | + <!--</td>--> | ||
| 18 | + <!--<td>--> | ||
| 19 | + <!--<table class="tbHead">--> | ||
| 20 | + <!--<tr><td><div class="orderImgCom orderMoney"></div></td><td>收费金额</td></tr>--> | ||
| 21 | + <!--</table>--> | ||
| 22 | + <!--</td>--> | ||
| 23 | + <!--</tr>--> | ||
| 24 | + <!--<tr>--> | ||
| 25 | + <!--<td colspan="3">--> | ||
| 26 | + <!--<div class="orderListBox" id="orderListBox">--> | ||
| 27 | + <!--<marquee class="marqueeStyle" direction="up" behavior="scroll" scrollamount="2" onMouseOut="this.start()" onMouseOver="this.stop()" scrolldelay="0" loop="-1" >--> | ||
| 28 | + <!--<div class="orderListBox" v-html="orderList"></div>--> | ||
| 29 | + <!--</marquee>--> | ||
| 30 | + <!--</div>--> | ||
| 31 | + <!--</td>--> | ||
| 32 | + <!--</tr>--> | ||
| 33 | + <!--</table>--> | ||
| 34 | + <ul class="news-wrap"> | ||
| 35 | + <li class="orderNum">订单编号</li> | ||
| 36 | + <li class="orderPark">停车场</li> | ||
| 37 | + <li class="orderMoney">收费金额</li> | ||
| 38 | + </ul> | ||
| 39 | + <div class="nwwest-roll news-wrap" id="nwwest-roll"> | ||
| 40 | + <ul id="roll-ul"> | ||
| 41 | + <li v-for="item in list" ref="rollul" :class="{anim:animate==true}"> | ||
| 42 | + <div :title="item.orderId">{{item.orderId}}</div> | ||
| 43 | + <div :title="item.plName">{{item.plName}}</div> | ||
| 44 | + <div :title="item.orderActFee">{{item.orderActFee|common.formatMoney}}</div> | ||
| 45 | + </li> | ||
| 46 | + </ul> | ||
| 47 | + </div> | ||
| 34 | </div> | 48 | </div> |
| 35 | </div> | 49 | </div> |
| 36 | </div> | 50 | </div> |
| 37 | </template> | 51 | </template> |
| 38 | 52 | ||
| 39 | <script> | 53 | <script> |
| 40 | - import echarts from 'echarts' | 54 | + import common from '../../api/common' |
| 41 | export default { | 55 | export default { |
| 42 | name: "orderMessage", | 56 | name: "orderMessage", |
| 43 | data() { | 57 | data() { |
| 44 | return { | 58 | return { |
| 45 | orderList:"",//公告列表 | 59 | orderList:"",//公告列表 |
| 46 | //marqueeHeight: '100%', | 60 | //marqueeHeight: '100%', |
| 47 | - name: '订单公告' | 61 | + name: '订单公告', |
| 62 | + animate: true, | ||
| 63 | + list: [] | ||
| 48 | } | 64 | } |
| 49 | }, | 65 | }, |
| 50 | - mounted() { | ||
| 51 | - //this.createLine(); | ||
| 52 | - this.orderList=this._getOrderList(); | 66 | + created() { |
| 67 | + this.axios.post('urban/intelligence/orderPark/queryLastOrderPark',{ | ||
| 68 | + orgIds: [10003,10005] | ||
| 69 | + }).then((response)=>{ | ||
| 70 | + let data = response.data.data | ||
| 71 | + console.log(data) | ||
| 72 | + this.list = data; | ||
| 73 | + setInterval(this.scroll, 2000) | ||
| 74 | + }).catch((response)=>{ | ||
| 75 | + console.log(response); | ||
| 76 | + }) | ||
| 77 | + | ||
| 53 | }, | 78 | }, |
| 54 | methods: { | 79 | methods: { |
| 55 | - _getOrderList:function(){ | ||
| 56 | - let tmpHtml=""; | ||
| 57 | - let tmpNum="0000001"; | ||
| 58 | - let tmpPark="老电视台路路侧泊位停车场"; | ||
| 59 | - | ||
| 60 | - let tmpMoney="5.00"; | ||
| 61 | - | ||
| 62 | - tmpHtml +="<table style='width: 100%;height: 100%; text-align: center;border:0px solid'>"; | ||
| 63 | - for(let i=0;i<10;i++){ | ||
| 64 | - tmpHtml +="<tr style='height: 20px;'>"+ | ||
| 65 | - "<td style='width: 20%'>"+tmpNum+i+"</td>"+ | ||
| 66 | - "<td style='width: 60%'>"+tmpPark+i+"</td>"+ | ||
| 67 | - "<td style='width: 20%;color:#04C304;'>"+tmpMoney+"</td>"+ | ||
| 68 | - "</tr>"; | ||
| 69 | - } | ||
| 70 | - tmpHtml +="</table>"; | ||
| 71 | - return tmpHtml; | 80 | + scroll() { |
| 81 | + this.animate = !this.animate; | ||
| 82 | + var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向 | ||
| 83 | + setTimeout(function () { | ||
| 84 | + that.list.push(that.list[0]); | ||
| 85 | + that.list.shift(); | ||
| 86 | + that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了 | ||
| 87 | + }, 0) | ||
| 72 | } | 88 | } |
| 73 | - }, | 89 | + } |
| 74 | } | 90 | } |
| 75 | </script> | 91 | </script> |
| 76 | 92 | ||
| 77 | <style scoped lang="scss"> | 93 | <style scoped lang="scss"> |
| 78 | .app-orderMessageBox { | 94 | .app-orderMessageBox { |
| 79 | width: 100%; | 95 | width: 100%; |
| 80 | - .content{ | ||
| 81 | - padding: 0; | ||
| 82 | - } | ||
| 83 | - .theme-card{ | ||
| 84 | - height: 100%; | ||
| 85 | - } | ||
| 86 | - .orderMessageTb{ | ||
| 87 | - position: relative; | ||
| 88 | - margin: 0 auto; | ||
| 89 | - width: 100%; | ||
| 90 | - height: 100%; | ||
| 91 | - font-size: 12px; | ||
| 92 | - } | ||
| 93 | - .orderMessageTb > tr td,.tbHead{ | ||
| 94 | - vertical-align: middle; | ||
| 95 | - text-align: center; | ||
| 96 | - } | ||
| 97 | - .orderMessageTb > tr:first-child{ | ||
| 98 | - height: 35px; | ||
| 99 | - } | ||
| 100 | - .orderListBox{ | ||
| 101 | - width: 100%;height: 100%;position: relative; | ||
| 102 | - } | ||
| 103 | - .tbHead{ | ||
| 104 | - display: inline-block; | ||
| 105 | - } | ||
| 106 | - .orderImgCom{ | ||
| 107 | - position:relative; | ||
| 108 | - height: 18px; | ||
| 109 | - width: 18px; | ||
| 110 | - margin-right: 5px; | ||
| 111 | - } | ||
| 112 | - .orderNum{ | ||
| 113 | - background: url(../../images/com/orderNum.svg) no-repeat;background-size: 100% 100%; | ||
| 114 | - } | ||
| 115 | - .orderPark{ | ||
| 116 | - background: url(../../images/com/orderPark.svg) no-repeat;background-size: 100% 100%; | ||
| 117 | - } | ||
| 118 | - .orderMoney{ | ||
| 119 | - background: url(../../images/com/orderMoney.svg) no-repeat;background-size: 100% 100%; | ||
| 120 | - } | ||
| 121 | - .marqueeStyle{ | ||
| 122 | - border:0px solid red; | ||
| 123 | - overflow: hidden; | ||
| 124 | - position: absolute; | ||
| 125 | - width: 100%; | ||
| 126 | - height: 100%; | ||
| 127 | - top: 0;left: 0;right: 0; | ||
| 128 | - bottom:0; | 96 | + .content{ |
| 97 | + padding: 0; | ||
| 98 | + } | ||
| 99 | + .theme-card{ | ||
| 100 | + height: 100%; | ||
| 101 | + } | ||
| 102 | + .news-wrap{ | ||
| 103 | + height: 40px; | ||
| 104 | + line-height: 40px; | ||
| 105 | + font-size: 14px; | ||
| 106 | + li{ | ||
| 107 | + float: left; | ||
| 108 | + padding-left: 0; | ||
| 109 | + padding-left: 30px; | ||
| 110 | + background-size: 14px 14px; | ||
| 111 | + background-position: 10px center; | ||
| 112 | + background-repeat: no-repeat; | ||
| 113 | + list-style: none; | ||
| 114 | + } | ||
| 115 | + .orderNum{ | ||
| 116 | + width: 80px; | ||
| 117 | + background-image: url(../../images/com/orderNum.svg) ; | ||
| 118 | + } | ||
| 119 | + .orderMoney{ | ||
| 120 | + width: 80px; | ||
| 121 | + background-image: url(../../images/com/orderMoney.svg) ; | ||
| 122 | + } | ||
| 123 | + .orderPark{ | ||
| 124 | + width: calc(100% - 250px); | ||
| 125 | + background-image: url(../../images/com/orderPark.svg) ; | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + .nwwest-roll { | ||
| 131 | + width: 100%; | ||
| 132 | + height: calc(100% - 60px); | ||
| 133 | + overflow: hidden; | ||
| 134 | + transition: all 0.5s; | ||
| 135 | + li{ | ||
| 136 | + width: 100%; | ||
| 137 | + height: 26px; | ||
| 138 | + line-height: 26px; | ||
| 139 | + font-size: 12px; | ||
| 140 | + padding-left: 10px; | ||
| 141 | + color: #fff; | ||
| 142 | + background:rgba(255,255,255,.1); | ||
| 143 | + margin-bottom: 10px; | ||
| 144 | + div{ | ||
| 145 | + float: left; | ||
| 146 | + overflow: hidden; | ||
| 147 | + white-space: nowrap; | ||
| 148 | + text-overflow: ellipsis; | ||
| 149 | + &:nth-of-type(1){ | ||
| 150 | + width: 110px; | ||
| 151 | + } | ||
| 152 | + &:nth-of-type(2){ | ||
| 153 | + width: calc(100% - 220px); | ||
| 154 | + } | ||
| 155 | + &:nth-of-type(3){ | ||
| 156 | + width: 80px; | ||
| 157 | + } | ||
| 158 | + | ||
| 159 | + } | ||
| 160 | + } | ||
| 161 | + } | ||
| 129 | } | 162 | } |
| 163 | + .anim { | ||
| 164 | + transition: all 0.5s; | ||
| 165 | + | ||
| 130 | } | 166 | } |
| 131 | </style> | 167 | </style> |