BJ_web_developers / cityOperationCenter

Commit d3aefa979e1427652d6014c0b185481ffaadfb20

Authored by liuqimichale
1 parent be7e8a78

订单消息

Inline Side-by-side
Showing 3 changed files with 142 additions and 108 deletions
src/api/common.js
  View file @d3aefa9
... ... @@ -42,6 +42,10 @@ export default {
42 42 return tmpHtml;
43 43  
44 44 },
45   -
46   -
  45 + /**
  46 + * 金额转换
  47 + */
  48 + formatMoney:function (val) {
  49 + return val/100;
  50 + }
47 51 }
... ...
src/components/berth/index.vue
  View file @d3aefa9
... ... @@ -61,12 +61,6 @@
61 61 window.addEventListener('resize', function() {
62 62 this.pieChart.resize()
63 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 64 }).catch((response)=>{
71 65 console.log(response);
72 66 })
... ...
src/components/orderMessage/index.vue
  View file @d3aefa9
... ... @@ -3,129 +3,165 @@
3 3 <div class="theme-card">
4 4 <div class="title"><span>订单消息</span></div>
5 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 48 </div>
35 49 </div>
36 50 </div>
37 51 </template>
38 52  
39 53 <script>
40   - import echarts from 'echarts'
  54 + import common from '../../api/common'
41 55 export default {
42 56 name: "orderMessage",
43 57 data() {
44 58 return {
45 59 orderList:"",//公告列表
46 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 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 91 </script>
76 92  
77 93 <style scoped lang="scss">
78 94 .app-orderMessageBox {
79 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 167 </style>
... ...