Browse Source

对接接口

master
[liang] 3 years ago
parent
commit
28c3ea3a58
  1. 35
      src/api/form.js
  2. 2
      src/api/request.js
  3. 76
      src/components/seamless/index.vue
  4. 348
      src/views/Brand.vue

35
src/api/form.js

@ -13,37 +13,22 @@ export const BiApi = {
})
},
// 广告位-id查询
getInfo: (id) => {
// 今日交易金额-笔数
getTodayTrade: (query) => {
return request({
url: '/pk/ad/PkAdPosition/getInfo/' + id,
method: 'get'
url: '/pk/openup/OpenStatisticsController/todayTrade',
method: 'get',
params: query
})
},
// 新增广告位
addInfo: (data) => {
// 实时进出信息
getRealTimeInOutRecord: (query) => {
return request({
url: '/pk/ad/PkAdPosition/add',
method: 'post',
data: data
url: '/pk/openup/OpenStatisticsController/realTimeInOutRecord',
method: 'get',
params: query
})
},
// 编辑广告位
updateInfo: (data) => {
return request({
url: '/pk/ad/PkAdPosition/edit',
method: 'put',
data: data
})
},
// 删除广告位
delInfo: (id) => {
return request({
url: '/pk/ad/PkAdPosition/remove/' + id,
method: 'delete'
})
}
}

2
src/api/request.js

@ -70,7 +70,7 @@ service.interceptors.response.use(res => {
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
alert(message)
console.log(message)
return Promise.reject(error)
}
)

76
src/components/seamless/index.vue

@ -32,85 +32,13 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: "seamless",
props: ['listData'],
components: {
vueSeamlessScroll
},
data() {
return {
rowColor: '/',
listData: [{
"accessType": "出场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 18:01:59",
"plateNumber": "粤C3868Z",
"entranceChannel": "前岗入口",
"orderRealPaidAmout": 0
},
{
"accessType": "出场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 18:01:54",
"plateNumber": "粤C2R537",
"entranceChannel": "后岗入口",
"orderRealPaidAmout": 0
},
{
"accessType": "入场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 18:01:30",
"plateNumber": "粤C11R24",
"entranceChannel": "后岗入口",
"orderRealPaidAmout": 0.0
},
{
"accessType": "出场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 18:00:32",
"plateNumber": "粤CSP065",
"entranceChannel": "前岗入口",
"orderRealPaidAmout": 0
},
{
"accessType": "入场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 18:00:19",
"plateNumber": "浙G16N8Z",
"entranceChannel": "前岗入口",
"orderRealPaidAmout": 0.0
},
{
"accessType": "出场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 17:58:55",
"plateNumber": "粤CYG167",
"entranceChannel": "后岗入口",
"orderRealPaidAmout": 0
},
{
"accessType": "入场",
"carType": "临时车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 17:58:38",
"plateNumber": "粤CYG167",
"entranceChannel": "后岗入口",
"orderRealPaidAmout": 6.0
},
{
"accessType": "入场",
"carType": "免费车",
"parkName": "深圳宝安体育馆停车场",
"createTime": "2022-08-03 17:57:55",
"plateNumber": "粤C5N501",
"entranceChannel": "前岗入口",
"orderRealPaidAmout": 0.0
},
]
}
},
computed: {

348
src/views/Brand.vue

@ -10,10 +10,7 @@
</span>
</div>
<h2>智慧云停车大数据平台</h2>
<div class="welcome">
欢迎使用本系统
</div>
<div class="welcome">欢迎使用本系统</div>
</header>
<section class="mainbox">
@ -24,9 +21,7 @@
<div class="panel-footer"></div>
</div> -->
<div class="left-top">
<div class="topBg">
今日收费TOP5
</div>
<div class="topBg">今日收费TOP5</div>
<table class="table">
<thead class="thead">
<td class="td">排行</td>
@ -35,27 +30,27 @@
</thead>
<tbody class="tbody">
<tr class="tr">
<td class="td"><img src="/img/img3.png" alt=""></td>
<td class="td"><img src="/img/img3.png" alt="" /></td>
<td class="td">深圳宝安中心大厦</td>
<td class="td">6890.38</td>
</tr>
<tr class="tr">
<td class="td"><img src="/img/img4.png" alt=""></td>
<td class="td"><img src="/img/img4.png" alt="" /></td>
<td class="td">深圳宝安中心大厦</td>
<td class="td">6890.38</td>
</tr>
<tr class="tr">
<td class="td"><img src="/img/img4.png" alt=""></td>
<td class="td"><img src="/img/img4.png" alt="" /></td>
<td class="td">深圳宝安中心大厦</td>
<td class="td">6890.38</td>
</tr>
<tr class="tr">
<td class="td"><img src="/img/img4.png" alt=""></td>
<td class="td"><img src="/img/img4.png" alt="" /></td>
<td class="td">深圳宝安中心大厦</td>
<td class="td">6890.38</td>
</tr>
<tr class="tr">
<td class="td"><img src="/img/img4.png" alt=""></td>
<td class="td"><img src="/img/img4.png" alt="" /></td>
<td class="td">深圳宝安中心大厦</td>
<td class="td">6890.38</td>
</tr>
@ -63,35 +58,28 @@
</table>
</div>
<div class="left-top">
<div class="topBg">
支付统计
</div>
<div class="topBg">支付统计</div>
<talent />
<div class="panel-footer"></div>
</div>
<div class="left-top">
<div class="topBg">
收费车辆统计
</div>
<div class="topBg">收费车辆统计</div>
<business />
<div class="panel-footer"></div>
</div>
</div>
<div class="item center">
<div class="resume">
<div class="resume-hd">
<span>今日交易笔数</span>
<span>今日交易金额</span>
</div>
<div class="resume-bd">
<countTo :startVal='startVal' :endVal='8388888' :duration='1500' separator=""></countTo>
<countTo :startVal='startVal' :endVal='6488888' :duration='1500' separator=""></countTo>
<countTo :startVal="startNumber" :endVal="endNumber" :duration="1500" separator=""></countTo>
<countTo :startVal="startAmount" :endVal="endAmount" :duration="1500" separator=""></countTo>
</div>
</div>
@ -103,23 +91,19 @@
</div>
<div class="parkInfo">
<seamless />
<seamless :listData="realTimeInOutRecord" />
</div>
</div>
<div class="item right">
<div class="left-top">
<div class="topBg2">
24小时车流统计
</div>
<div class="topBg2">24小时车流统计</div>
<scrollArc />
<div class="panel-footer"></div>
</div>
<div class="left-top">
<div class="topBg">
车辆使用统计
</div>
<div class="topBg">车辆使用统计</div>
<div class="carFlex">
<div class="let">
<div class="item">
@ -148,128 +132,143 @@
</div>
<div class="left-top">
<div class="topBg">
24小时车位使用统计
</div>
<div class="topBg">24小时车位使用统计</div>
<szBar />
<div class="panel-footer"></div>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
import { BiApi } from "@/api/form";
import '@/assets/js/flexible'
import '@/assets/js/china'
import countTo from 'vue-count-to'
import "@/assets/js/flexible";
import "@/assets/js/china";
import countTo from "vue-count-to";
// console.log(window.location.href);
const authCode = "712110694685872129";
export default {
name: 'Brand',
name: "Brand",
components: {
countTo
countTo,
},
data() {
return {
nowTime: '',
week: '',
date: '',
nowTime: "",
week: "",
date: "",
timer: null,
startVal: 0,
startNumber: 0,
startAmount: 0,
endNumber: 0,
endAmount: 0,
realTimeInOutRecord: [],//
heartTimes: 0, //
geoCoordMap: {},
XAData: [
[{ name: "长沙" }, { name: "北京", value: 100 }],
[{ name: "长沙" }, { name: "上海", value: 100 }],
[{ name: "长沙" }, { name: "广州", value: 100 }],
[{ name: "长沙" }, { name: "深圳", value: 100 }],
[{ name: "长沙" }, { name: "西安", value: 100 }]
[{ name: "长沙" }, { name: "西安", value: 100 }],
],
XNData: [
[{ name: "长沙" }, { name: "西宁", value: 100 }],
[{ name: "长沙" }, { name: "拉萨", value: 100 }],
[{ name: "长沙" }, { name: "哈尔滨", value: 100 }],
[{ name: "长沙" }, { name: "成都", value: 100 }],
[{ name: "长沙" }, { name: "重庆", value: 100 }]
[{ name: "长沙" }, { name: "重庆", value: 100 }],
],
YCData: [
[{ name: "北京" }, { name: "长沙", value: 100 }],
[{ name: "北京" }, { name: "贵阳", value: 100 }],
[{ name: "北京" }, { name: "杭州", value: 100 }]
]
}
},
computed: {
[{ name: "北京" }, { name: "杭州", value: 100 }],
],
};
},
computed: {},
created() {
const authCode = '712110694681677824'
BiApi.getParkingRanking({authCode}).then((res)=>{
console.log(res);
})
// BiApi.getParkingRanking({ authCode }).then((res) => {
// console.log(res);
// })
},
mounted() {
this.nowTimes();
this.heart();
this.getEchart();
this.ajax2();
},
methods: {
ajax2() {
//jquery get
$.ajax({
type:"GET",
url:"http://192.168.31.128:8866/pk/openup/OpenStatisticsController/parkingRanking",
data:{"authCode":"712110694681677824"},
async:true,
cache:true,
dataType:"text",
success:function (backdata,status,xmlHttpRequest) {
console.log(backdata)
},
error:function (msg) {
console.log(msg)
}
});
//jquery get
$.ajax({
type:"GET",
url:"http://192.168.31.128:8866/pk/openup/OpenStatisticsController/todayTrafficStatistics",
data:{"authCode":"712110694681677824"},
async:true,
cache:true,
dataType:"text",
success:function (backdata,status,xmlHttpRequest) {
console.log(backdata)
/**
* 格式化时钟函数
*/
formatNowTimes() {
let dayjs = this.dayjs();
let weeks = ["日", "一", "二", "三", "四", "五", "六"];
this.week = `星期${weeks[dayjs.day()]}`;
this.date = dayjs.format("YYYY-MM-DD");
this.nowTime = dayjs.format("HH:mm:ss");
},
error:function (msg) {
console.log(msg)
/**
* 心跳回调函数,获取数据的函数可以放这里
*/
heartCallBack() {
this.heartTimes += 1;
this.formatNowTimes(); //
if (this.heartTimes === 1 || this.heartTimes % 10 === 0) { // 10
this.getTodayTrade();
this.getRealTimeInOutRecord();
}
});
},
nowTimes() {
/**
* 心跳函数,每秒执行一次
*/
heart() {
this.clear();
let dayjs = this.dayjs()
let weeks = ['日', '一', '二', '三', '四', '五', '六'];
this.week = `星期${weeks[dayjs.day()]}`
this.date = dayjs.format('YYYY-MM-DD')
this.nowTime = dayjs.format('HH:mm:ss')
this.timer = setInterval(this.nowTimes, 1000);
this.heartCallBack() //
this.timer = setInterval(this.heartCallBack, 1000);
},
clear() {
clearInterval(this.timer)
clearInterval(this.timer);
this.timer = null;
this.heartTimes = 0;
},
/**
* 今日交易金额-笔数数据
* */
getTodayTrade() {
BiApi.getTodayTrade({ authCode }).then((res) => {
// console.log(res);
if (res.code === 200) {
const { totalAmount, totalNum } = res.data
this.startNumber = this.endNumber;
this.startAmount = this.endAmount;
this.endNumber = +totalNum;
this.endAmount = +totalAmount;
}
});
convertData(data) { //
},
/**
* 实时进出信息
* */
getRealTimeInOutRecord() {
const query = {
authCode,
pageNum: 1,
pageSize: 10,
}
BiApi.getRealTimeInOutRecord(query).then((res) => {
if (res.code === 200) {
this.realTimeInOutRecord = res.rows
}
});
},
convertData(data) {
//
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
@ -280,15 +279,16 @@ export default {
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
value: dataItem[1].value,
});
}
}
return res;
},
getEchart() { //
getEchart() {
//
// eslint-disable-next-line no-undef
let myChart = echarts.init(document.getElementById('chart_map'));
let myChart = echarts.init(document.getElementById("chart_map"));
this.geoCoordMap = {
上海: [121.4648, 31.2891],
@ -404,18 +404,19 @@ export default {
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
韶关: [113.7964, 24.7028],
};
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";
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";
let color = ["#fff", "#fff", "#fff"]; //线
let series = [];
[
["长沙", this.XAData],
["长沙", this.XNData],
["北京", this.YCData]
// ["", this.XNData],
// ["", this.YCData],
].forEach((item, i) => {
series.push(
// {
@ -467,32 +468,34 @@ export default {
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
brushType: "stroke",
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
formatter: "{b}",
},
},
symbolSize: (val) => {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
color: color[i],
},
emphasis: {
areaColor: "#2B91B7"
}
areaColor: "#2B91B7",
},
},
data: item[1].map((dataItem) => {
return {
name: dataItem[1].name,
value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
value: this.geoCoordMap[dataItem[1].name].concat([
dataItem[1].value,
]),
};
})
}),
}
);
});
@ -515,15 +518,15 @@ export default {
} else {
return params.name;
}
}
},
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
color: "#fff",
},
},
roam: false,
//
@ -532,19 +535,18 @@ export default {
normal: {
areaColor: "rgba(43, 196, 243, 0.42)",
borderColor: "rgba(43, 196, 243, 1)",
borderWidth: 1
borderWidth: 1,
},
emphasis: {
areaColor: "#2B91B7"
}
}
areaColor: "#2B91B7",
},
series: series
}
},
},
series: series,
};
myChart.setOption(option, true);
var that = this;
var dataList = echarts.getMap("china").geoJson.features;
// console.log("dataList:", dataList);
//
@ -561,14 +563,12 @@ export default {
myChart.resize();
});
},
clickGoNext() {
},
clickGoNext() { },
},
beforeDestroy() {
this.clear();
}
}
},
};
</script>
<style lang="scss" scoped>
@ -587,40 +587,39 @@ export default {
height: 1.3rem;
background: url(/img/img12.png) no-repeat;
background-size: contain;
margin-top: .3rem;
margin-top: 0.3rem;
.p1 {
font-size: .2rem;
margin-bottom: .1rem;
font-size: 0.2rem;
margin-bottom: 0.1rem;
}
.p2 {
font-size: .3rem;
font-size: 0.3rem;
}
}
}
.topBg {
height: .7rem;
height: 0.7rem;
background: url(/img/img1.png) no-repeat;
background-size: contain;
display: flex;
align-items: center;
padding-left: .5rem;
color: #AECEFF;
font-size: .21rem;
padding-left: 0.5rem;
color: #aeceff;
font-size: 0.21rem;
}
.topBg2 {
height: .7rem;
height: 0.7rem;
background: url(/img/img11.png) no-repeat;
background-size: contain;
display: flex;
align-items: center;
padding-left: .5rem;
color: #AECEFF;
font-size: .21rem;
padding-left: 0.5rem;
color: #aeceff;
font-size: 0.21rem;
}
.left-top {
@ -628,11 +627,11 @@ export default {
position: relative;
background: url(/img/img2.png) no-repeat;
background-size: cover;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.tbody .tr:nth-child(odd) {
background: #06184B;
background: #06184b;
}
//
@ -645,15 +644,15 @@ export default {
.thead {
background: #061131;
width: 100%;
height: .575rem;
line-height: .575rem;
font-size: .2rem;
height: 0.575rem;
line-height: 0.575rem;
font-size: 0.2rem;
.td {
color: #6FA8FF;
color: #6fa8ff;
text-align: center;
border: none;
font-size: .2rem;
font-size: 0.2rem;
}
}
@ -662,19 +661,19 @@ export default {
color: #fff;
text-align: center;
border: none;
font-size: .14rem;
font-size: 0.14rem;
img {
width: .4rem;
width: 0.4rem;
display: block;
margin: 0 auto;
height: .4rem;
height: 0.4rem;
}
}
.tr {
height: .5rem;
line-height: .5rem;
height: 0.5rem;
line-height: 0.5rem;
}
}
}
@ -715,8 +714,8 @@ export default {
.time {
top: 0.45rem;
font-size: .4rem;
margin-right: .18rem;
font-size: 0.4rem;
margin-right: 0.18rem;
}
.date {
@ -724,7 +723,7 @@ export default {
span {
line-height: 0.45rem;
font-size: .2rem;
font-size: 0.2rem;
padding-right: 0.1rem;
}
}
@ -734,11 +733,11 @@ export default {
position: absolute;
right: 0.625rem;
top: 0.45rem;
height: .35rem;
height: 0.35rem;
color: #fff;
font-size: 0.25rem;
text-align: center;
line-height: .35rem;
line-height: 0.35rem;
}
}
@ -756,7 +755,6 @@ export default {
overflow: hidden;
.resume {
.resume-hd {
display: flex;
justify-content: space-around;
@ -771,9 +769,8 @@ export default {
text-align: left;
font-size: 0.1625rem;
color: rgba(255, 255, 255, 0.9);
padding-left: .3rem;
padding-left: 0.3rem;
}
}
.resume-bd {
@ -781,22 +778,22 @@ export default {
justify-content: space-around;
span {
margin-top: .25rem;
box-shadow: 0rem .02rem .08rem rgba(38, 228, 245, 0.7);
margin-top: 0.25rem;
box-shadow: 0rem 0.02rem 0.08rem rgba(38, 228, 245, 0.7);
width: 3.535rem;
text-align: center;
height: 0.725rem;
line-height: 0.725rem;
font-size: 0.45rem;
color: #fff;
font-family: 'LCD';
font-family: "LCD";
letter-spacing: 0.1rem;
text-shadow: .02rem .02rem .04rem #000;
background: linear-gradient(180deg, rgba(101, 172, 255, 0) 0%, rgba(29, 104, 190, 0.78) 100%);
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%);
}
}
}
}
@ -814,14 +811,14 @@ export default {
.map {
position: relative;
height: 8.4rem;
height: 8rem;
.chart {
position: absolute;
top: 0;
top: -0.5rem;
left: 0;
z-index: 5;
height: 8.4rem;
height: 8rem;
width: 100%;
}
@ -929,11 +926,8 @@ export default {
}
}
}
}
}
}
@-webkit-keyframes rotate {

Loading…
Cancel
Save