Browse Source

修改数字为数码形式

master
[liang] 3 years ago
parent
commit
54b09d088f
  1. BIN
      src/assets/img/brand/numberBg.png
  2. 19
      src/components/seamless/index.vue
  3. 36
      src/views/Brand.vue

BIN
src/assets/img/brand/numberBg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

19
src/components/seamless/index.vue

@ -5,22 +5,22 @@
<div class="table-header">
<span style="width: 2rem">时间</span>
<span style="width: 3rem">停车场</span>
<span style="width: 1rem">出入口</span>
<span style="width: 1.2rem">出入口</span>
<span style="width: 1rem">车辆类型</span>
<span style="width: 1.2rem">车牌号</span>
<span style="width: 0.8rem">收费金额</span>
<span style="width: 0.8rem">状态</span>
<span style="width: 1.1rem">车牌号</span>
<span style="width: 0.9rem">收费金额</span>
<span style="width: 0.6rem">状态</span>
</div>
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
<div class="line" v-for="(item, index) in listData" :key="index"
:class="item.accessType === '入场' ? 'in' : ''">
<span style="width: 2rem">{{ item.createTime }}</span>
<span style="width: 3rem" class='title'>{{ item.parkName }}</span>
<span style="width: 1rem">{{ item.entranceChannel }}</span>
<span style="width: 1rem">{{ item.carType }}</span>
<span style="width: 1.2rem">{{ item.entranceChannel }}</span>
<span style="width: 0.9rem">{{ item.carType }}</span>
<span style="width: 1.2rem">{{ item.plateNumber }}</span>
<span style="width: 0.8rem">{{ item.orderRealPaidAmout }}</span>
<span style="width: 0.8rem">{{ item.accessType }}</span>
<span style="width: 0.9rem">{{ item.orderRealPaidAmout }}</span>
<span style="width: 0.6rem">{{ item.accessType }}</span>
</div>
</vue-seamless-scroll>
</div>
@ -86,7 +86,8 @@ export default {
line-height: 0.7rem;
font-size: 0.25rem;
color: #fff;
background: url(../../assets/img/brand/parkIngo.png);
background: url(../../assets/img/brand/parkIngo.png) no-repeat;
background-size: 9.8rem 0.7rem;
}
.sn-body {

36
src/views/Brand.vue

@ -29,7 +29,7 @@
<td class="td">收费金额</td>
</thead>
<tbody class="tbody">
<tr class="tr" v-for="(item, index) in rankData" :key="index" >
<tr class="tr" v-for="(item, index) in rankData" :key="index">
<td class="td" v-if="index == 0"><img src="/img/img3.png" alt=""></td>
<td class="td" v-if="index == 1"><img src="/img/img4.png" alt=""></td>
<td class="td" v-if="index == 2"><img src="/img/img5.png" alt=""></td>
@ -66,8 +66,10 @@
<span>今日交易金额</span>
</div>
<div class="resume-bd">
<countTo :startVal="startNumber" :endVal="endNumber" :duration="1500" separator=""></countTo>
<countTo :startVal="startAmount" :endVal="endAmount" :duration="1500" separator=""></countTo>
<countTo :startVal="startNumber" :endVal="endNumber" :prefix="numberPrefix" :duration="1500" separator="">
</countTo>
<countTo :startVal="startAmount" :endVal="endAmount" :prefix="amountPrefix" :duration="1500" separator="">
</countTo>
</div>
</div>
@ -174,6 +176,8 @@ export default {
startAmount: 0,
endNumber: 0,
endAmount: 0,
numberPrefix: '00000', //
amountPrefix: '00000', //
realTimeInOutRecord: [],//
heartTimes: 0, //
geoCoordMap: {},
@ -242,8 +246,10 @@ export default {
const { totalAmount, totalNum } = res.data
this.startNumber = this.endNumber;
this.startAmount = this.endAmount;
this.endNumber = +totalNum;
this.endAmount = +totalAmount;
this.endNumber = +totalNum || 0;
this.endAmount = +totalAmount || 0;
this.numberPrefix = '00000'.substr(0, (6 - `${this.endNumber}`.length));
this.amountPrefix = '00000'.substr(0, (6 - `${this.endAmount}`.length));
}
});
//
@ -394,9 +400,9 @@ export default {
};
// this.useCarCon = res.data
for(var i=0;i<res.data.length;i++){
for (var i = 0; i < res.data.length; i++) {
// : [113.884791, 22.560888],
this.geoCoordMap[res.data[i].lngY,res.data[i].parkName]=[res.data[i].lngY,res.data[i].latX]
this.geoCoordMap[res.data[i].lngY, res.data[i].parkName] = [res.data[i].lngY, res.data[i].latX]
this.XAData.push(
[{ name: "长沙" }, { name: res.data[i].parkName, value: res.data[i].useCarNum }]
)
@ -542,7 +548,7 @@ export default {
// eslint-disable-next-line no-unused-vars
formatter: (params, ticket, callback) => {
if (params.seriesType == "effectScatter") {
return "车位数量:" + params.data.name + " " + params.data.value[2]+"个";
return "车位数量:" + params.data.name + " " + params.data.value[2] + "个";
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
@ -817,19 +823,21 @@ export default {
span {
margin-top: 0.25rem;
box-shadow: 0rem 0.02rem 0.08rem rgba(38, 228, 245, 0.7);
// box-shadow: 0rem 0.02rem 0.08rem rgba(38, 228, 245, 0.7);
width: 3.535rem;
text-align: center;
text-align: right;
height: 0.725rem;
line-height: 0.725rem;
font-size: 0.45rem;
color: #fff;
font-family: "LCD";
letter-spacing: 0.1rem;
letter-spacing: 0.28rem;
text-shadow: 0.02rem 0.02rem 0.04rem #000;
background: linear-gradient(180deg,
rgba(101, 172, 255, 0) 0%,
rgba(29, 104, 190, 0.78) 100%);
box-sizing: border-box;
padding-left: .1rem;
background-image: url(../assets/img/brand/numberBg.png);
background-repeat: repeat-y space;
background-size: 0.6rem 0.725rem
}
}
}

Loading…
Cancel
Save