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
Split 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. 280
      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">
<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 {

280
src/views/Brand.vue
View File

@ -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,11 +176,13 @@ export default {
startAmount: 0,
endNumber: 0,
endAmount: 0,
numberPrefix: '00000', // 前面补零
amountPrefix: '00000', // 前面补零
realTimeInOutRecord: [],//实时进出信息
heartTimes: 0, //心跳次数
geoCoordMap: {},
XAData: [
],
XNData: [
[{ name: "长沙" }, { name: "西宁", value: 100 }],
@ -200,9 +204,9 @@ export default {
mounted() {
if (authCode && typeof +authCode === 'number') {
this.heart();
setTimeout(() => {
this.getEchart();
}, 800);
setTimeout(() => {
this.getEchart();
}, 800);
} else {
// console.log('授权码为空', authCode);
alert('授权码为空,请从系统调用页面!')
@ -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));
}
});
// 实时进出信息
@ -276,129 +282,129 @@ export default {
if (res && res.code === 200) this.useCarCon = res.data
})
BiApi.parkingCarNum({ authCode }).then((res) => {
this.geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028],
};
this.geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028],
};
// 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 }]
[{ name: "长沙" }, { name: res.data[i].parkName, value: res.data[i].useCarNum }]
)
}
console.log(this.geoCoordMap)
@ -442,7 +448,7 @@ export default {
// eslint-disable-next-line no-undef
let myChart = echarts.init(document.getElementById("chart_map"));
// let planePath =
// "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
@ -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
}
}
}

Write Preview
Loading…
Cancel
Save