jack
/
parkBigScreen2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改数字为数码形式

master
[liang] 3 years ago
parent
2430fadea3
commit
54b09d088f
3 changed files with 154 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/brand/numberBg.png
  2. 19
      src/components/seamless/index.vue
  3. 276
      src/views/Brand.vue

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

19
src/components/seamless/index.vue
View File

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

276
src/views/Brand.vue
View File

@ -29,7 +29,7 @@
<td class="td">收费金额</td> <td class="td">收费金额</td>
</thead> </thead>
<tbody class="tbody"> <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 == 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 == 1"><img src="/img/img4.png" alt=""></td>
<td class="td" v-if="index == 2"><img src="/img/img5.png" alt=""></td> <td class="td" v-if="index == 2"><img src="/img/img5.png" alt=""></td>
@ -66,8 +66,10 @@
<span>今日交易金额</span> <span>今日交易金额</span>
</div> </div>
<div class="resume-bd"> <div class="resume-bd">
<countTo :startVal="startNumber" :endVal="endNumber" :duration="1500" separator=""></countTo> <countTo :startVal="startNumber" :endVal="endNumber" :prefix="numberPrefix" :duration="1500" separator="">
<countTo :startVal="startAmount" :endVal="endAmount" :duration="1500" separator=""></countTo> </countTo>
<countTo :startVal="startAmount" :endVal="endAmount" :prefix="amountPrefix" :duration="1500" separator="">
</countTo>
</div> </div>
</div> </div>
@ -174,6 +176,8 @@ export default {
startAmount: 0, startAmount: 0,
endNumber: 0, endNumber: 0,
endAmount: 0, endAmount: 0,
numberPrefix: '00000', // 前面补零
amountPrefix: '00000', // 前面补零
realTimeInOutRecord: [],//实时进出信息 realTimeInOutRecord: [],//实时进出信息
heartTimes: 0, //心跳次数 heartTimes: 0, //心跳次数
geoCoordMap: {}, geoCoordMap: {},
@ -200,9 +204,9 @@ export default {
mounted() { mounted() {
if (authCode && typeof +authCode === 'number') { if (authCode && typeof +authCode === 'number') {
this.heart(); this.heart();
setTimeout(() => { setTimeout(() => {
this.getEchart(); this.getEchart();
}, 800); }, 800);
} else { } else {
// console.log('授权码为空', authCode); // console.log('授权码为空', authCode);
alert('授权码为空,请从系统调用页面!') alert('授权码为空,请从系统调用页面!')
@ -242,8 +246,10 @@ export default {
const { totalAmount, totalNum } = res.data const { totalAmount, totalNum } = res.data
this.startNumber = this.endNumber; this.startNumber = this.endNumber;
this.startAmount = this.endAmount; this.startAmount = this.endAmount;
this.endNumber = +totalNum; this.endNumber = +totalNum || 0;
this.endAmount = +totalAmount; this.endAmount = +totalAmount || 0;
this.numberPrefix = '00000'.substr(0, (6 - `${this.endNumber}`.length));
this.amountPrefix = '00000'.substr(0, (6 - `${this.endAmount}`.length));
} }
}); });
// 实时进出信息 // 实时进出信息
@ -276,129 +282,129 @@ export default {
if (res && res.code === 200) this.useCarCon = res.data if (res && res.code === 200) this.useCarCon = res.data
}) })
BiApi.parkingCarNum({ authCode }).then((res) => { BiApi.parkingCarNum({ authCode }).then((res) => {
this.geoCoordMap = { this.geoCoordMap = {
上海: [121.4648, 31.2891], 上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901], 东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513], 东营: [118.7073, 37.5513],
中山: [113.4229, 22.478], 中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615], 临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936], 临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242], 丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854], 丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883], 乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097], 佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948], 保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043], 兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899], 包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539], 北京: [116.4551, 40.2539],
北海: [109.314, 21.6211], 北海: [109.314, 21.6211],
南京: [118.8062, 31.9208], 南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152], 南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633], 南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625], 南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478], 厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688], 台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581], 合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901], 呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706], 咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368], 哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826], 唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354], 嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035], 大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409], 大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189], 天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413], 太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393], 威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466], 宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433], 宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775], 宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582], 常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196], 广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509], 廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252], 延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527], 张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268], 徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107], 德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647], 惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617], 成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162], 扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075], 承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465], 拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527], 无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023], 日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663], 昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773], 杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926], 枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774], 柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319], 株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628], 武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405], 汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484], 江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216], 沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104], 沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722], 河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147], 泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516], 泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525], 泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701], 济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375], 济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516], 海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064], 淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039], 淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439], 深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292], 清远: [112.9175, 24.3292],
温州: [120.498, 27.8119], 温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299], 渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782], 湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075], 湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963], 滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524], 潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128], 烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898], 玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155], 珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577], 盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449], 盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006], 石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222], 福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232], 秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565], 绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032], 聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822], 肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234], 舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989], 苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714], 莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057], 菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297], 营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578], 葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161], 衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666], 衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207], 西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004], 西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682], 贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552], 连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821], 邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535], 邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234], 郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487], 鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904], 重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028], 金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947], 铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775], 银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702], 镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584], 长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568], 长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746], 长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951], 阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373], 青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028], 韶关: [113.7964, 24.7028],
}; };
// this.useCarCon = res.data // 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], // 宝安体育馆停车场: [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( this.XAData.push(
[{ name: "长沙" }, { name: res.data[i].parkName, value: res.data[i].useCarNum }] [{ name: "长沙" }, { name: res.data[i].parkName, value: res.data[i].useCarNum }]
) )
} }
console.log(this.geoCoordMap) console.log(this.geoCoordMap)
@ -542,7 +548,7 @@ export default {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
formatter: (params, ticket, callback) => { formatter: (params, ticket, callback) => {
if (params.seriesType == "effectScatter") { 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") { } else if (params.seriesType == "lines") {
return ( return (
params.data.fromName + params.data.fromName +
@ -817,19 +823,21 @@ export default {
span { span {
margin-top: 0.25rem; 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; width: 3.535rem;
text-align: center; text-align: right;
height: 0.725rem; height: 0.725rem;
line-height: 0.725rem; line-height: 0.725rem;
font-size: 0.45rem; font-size: 0.45rem;
color: #fff; color: #fff;
font-family: "LCD"; font-family: "LCD";
letter-spacing: 0.1rem; letter-spacing: 0.28rem;
text-shadow: 0.02rem 0.02rem 0.04rem #000; text-shadow: 0.02rem 0.02rem 0.04rem #000;
background: linear-gradient(180deg, box-sizing: border-box;
rgba(101, 172, 255, 0) 0%, padding-left: .1rem;
rgba(29, 104, 190, 0.78) 100%); background-image: url(../assets/img/brand/numberBg.png);
background-repeat: repeat-y space;
background-size: 0.6rem 0.725rem
} }
} }
} }

Write Preview
Loading…
Cancel
Save