jinna
3 years ago
@ -0,0 +1,38 @@ |
|||||||
|
import request from "@/util/axios"; |
||||||
|
|
||||||
|
// 获取天气
|
||||||
|
export const queryWeath = () => |
||||||
|
request({ |
||||||
|
url: "/weather/v1/?district_id=370600&data_type=all&ak=YtoEHZgdNk1iyWzsU8Hj11YChF2fbaDD", |
||||||
|
method: "get", |
||||||
|
}); |
||||||
|
|
||||||
|
// 获取车牌号
|
||||||
|
export const getCarNum = () => |
||||||
|
request({ |
||||||
|
url: "/api/blade-business/common-api/get-car-no", |
||||||
|
method: "get", |
||||||
|
}); |
||||||
|
|
||||||
|
// 获取车速
|
||||||
|
export const getCarSpeed = (query) => |
||||||
|
request({ |
||||||
|
url: "/api/blade-business/common-api/get-car-speed", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
|
||||||
|
// 获取早晚高峰
|
||||||
|
export const getPeak = () => |
||||||
|
request({ |
||||||
|
url: "/api/blade-business/common-api/get-rush-hour", |
||||||
|
method: "get", |
||||||
|
}); |
||||||
|
|
||||||
|
// 获取车站及相关信息
|
||||||
|
export const getSiteInfo = (query) => |
||||||
|
request({ |
||||||
|
url: "/api/blade-business/common-api/get-site", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 616 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 945 B |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 777 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 418 B |
@ -0,0 +1,52 @@ |
|||||||
|
import axios from "axios"; |
||||||
|
|
||||||
|
//默认超时时间
|
||||||
|
// axios.defaults.timeout = 1000 * 60 *;
|
||||||
|
//跨域请求，允许保存cookie
|
||||||
|
axios.defaults.withCredentials = true; |
||||||
|
|
||||||
|
//返回其他状态码
|
||||||
|
axios.defaults.validateStatus = function (status) { |
||||||
|
return status >= 200 && status <= 500; |
||||||
|
}; |
||||||
|
|
||||||
|
//HTTP Request拦截
|
||||||
|
axios.interceptors.request.use( |
||||||
|
(config) => { |
||||||
|
if (config.headers["Content-Type"] != undefined) { |
||||||
|
config.headers["Content-Type"] = "application/x-www-form-urlencoded"; |
||||||
|
} else { |
||||||
|
config.headers["Content-Type"] = "application/json"; |
||||||
|
} |
||||||
|
return config; |
||||||
|
}, |
||||||
|
(error) => { |
||||||
|
console.error("Request interceptors:", error); |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
//HTTP Response拦截
|
||||||
|
axios.interceptors.response.use( |
||||||
|
(res) => { |
||||||
|
const ok = res.data.Success || res.data.status == "200" || false, |
||||||
|
status = res.status || 200, |
||||||
|
message = |
||||||
|
res.data.AllMessages || |
||||||
|
res.data.errorMessage || |
||||||
|
res.data.message || |
||||||
|
"Internal Server Error!"; |
||||||
|
|
||||||
|
if (!ok && !status) { |
||||||
|
return Promise.reject(new Error(message)); |
||||||
|
} |
||||||
|
|
||||||
|
return res.data; |
||||||
|
}, |
||||||
|
(error) => { |
||||||
|
console.error("Response interceptors:", error); |
||||||
|
return Promise.reject(error); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
export default axios; |
||||||
@ -1,18 +1,242 @@ |
|||||||
<template> |
<template> |
||||||
<div class="home"> |
<div class="container"> |
||||||
<img alt="Vue logo" src="../assets/logo.png"> |
<div class="top_box"> |
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
<div class="left_top"> |
||||||
|
<img style="margin-left:10px" src="@/assets/img/car.png" alt=""> |
||||||
|
<div class="time_txt">{{date}} {{time}}</div> |
||||||
|
<div class="traffic_txt">拥堵</div> |
||||||
|
<div class="speed_txt">{{speed}}KM/H</div> |
||||||
|
</div> |
||||||
|
<div class="right_top"> |
||||||
|
<img src="@/assets/img/weather.png" alt=""> |
||||||
|
<div style="margin: 0 20px">5~20℃</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="bag"> |
||||||
|
<img src="@/assets/img/scenery.png" alt=""> |
||||||
|
</div> --> |
||||||
|
<div class="bottom_box"> |
||||||
|
<div class="top_bottom"> |
||||||
|
<div class="box_left">下一站：山东商务职业技术学院</div> |
||||||
|
<div class="box_right">施工中，路不拥堵，心情随意逛</div> |
||||||
|
</div> |
||||||
|
<div class="bot"> |
||||||
|
<div class="top_bot"> |
||||||
|
<div class="left_bot"> |
||||||
|
<img class="img" src="@/assets/img/fire.png" alt=""> |
||||||
|
<div>{{tips}}</div> |
||||||
|
</div> |
||||||
|
<div class="left_bot"> |
||||||
|
<img class="img" src="@/assets/img/notice.png" alt=""> |
||||||
|
<div class="txt">{{tip}}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bot_box"> |
||||||
|
<div class="point_box">景点</div> |
||||||
|
<div>烟台世界设计公园就在附近，艺展公园、烽火公园、逐浪公园等主题公园应有尽有</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
// @ is an alias to /src |
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'; |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'HomeView', |
data() { |
||||||
components: { |
return { |
||||||
HelloWorld, |
time:'', |
||||||
|
timer:null, |
||||||
|
timer1:null, |
||||||
|
date:'', |
||||||
|
speed:'32', |
||||||
|
tips:'向前跑，带着赤子的骄傲，生命的闪耀不坚持怎能看到', |
||||||
|
tip:'4.13-17烟台春季车站在国际博览中心！', |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getTime(); |
||||||
|
this.getText() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getTime() { |
||||||
|
//获取当前时间 |
||||||
|
this.timer = setInterval(() => { |
||||||
|
var date = new Date(); |
||||||
|
var year = date.getFullYear(); //当前年份 |
||||||
|
var month = date.getMonth(); //当前月份 |
||||||
|
var data = date.getDate(); //天 |
||||||
|
var hours = date.getHours(); //小时 |
||||||
|
var minute = date.getMinutes(); //分 |
||||||
|
var second = date.getSeconds(); //秒 |
||||||
|
this.day = date.getDay(); //获取当前星期几 |
||||||
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
||||||
|
this.date = year + "/" + (month + 1) + "/" + data; |
||||||
|
this.speed = Math.floor(Math.random() * 90) + 10; |
||||||
|
}, 1000); |
||||||
|
}, |
||||||
|
fn(str) { |
||||||
|
let num = null; |
||||||
|
str >= 10 ? (num = str) : (num = "0" + str); |
||||||
|
return num; |
||||||
|
}, |
||||||
|
|
||||||
|
getText(){ |
||||||
|
this.timer1 = setInterval(() => { |
||||||
|
|
||||||
|
if(this.tips == "向前跑，带着赤子的骄傲，生命的闪耀不坚持怎能看到"){ |
||||||
|
this.tips = "探索自然奥秘，感受地质瑰丽" |
||||||
|
}else{ |
||||||
|
this.tips = '向前跑，带着赤子的骄傲，生命的闪耀不坚持怎能看到' |
||||||
|
} |
||||||
|
|
||||||
|
if(this.tip == "4.13-17烟台春季车站在国际博览中心！"){ |
||||||
|
this.tip = '4.13-17烟台地质博物馆所有展览全年免费向公众开放' |
||||||
|
}else{ |
||||||
|
this.tip = "4.13-17烟台春季车站在国际博览中心！" |
||||||
|
} |
||||||
|
}, 5000); |
||||||
|
}, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.container{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
|
||||||
|
.top_box{ |
||||||
|
width: 100%; |
||||||
|
height: 6%; |
||||||
|
background: #333; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
color: #fff; |
||||||
|
font-size: 18px; |
||||||
|
|
||||||
|
.left_top{ |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.time_txt{ |
||||||
|
margin: 0 20px; |
||||||
|
} |
||||||
|
.traffic_txt{ |
||||||
|
width: 60px; |
||||||
|
height: 65%; |
||||||
|
background: #c00000; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.speed_txt{ |
||||||
|
width: 100px; |
||||||
|
height: 65%; |
||||||
|
background: #548235; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.right_top{ |
||||||
|
display: flex; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bag{ |
||||||
|
position: absolute; |
||||||
|
bottom: 16%; |
||||||
|
} |
||||||
|
|
||||||
|
.bottom_box{ |
||||||
|
width: 100%; |
||||||
|
height: 15%; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
|
||||||
|
.top_bottom{ |
||||||
|
width: 100%; |
||||||
|
height: 30%; |
||||||
|
display: flex; |
||||||
|
color: #fff; |
||||||
|
font-size: 18px; |
||||||
|
|
||||||
|
.box_left{ |
||||||
|
width: 25%; |
||||||
|
height: 100%; |
||||||
|
background: #2baaf7; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.box_right{ |
||||||
|
width: 75%; |
||||||
|
height: 100%; |
||||||
|
background: #f04840; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bot{ |
||||||
|
width: 100%; |
||||||
|
height: 70%; |
||||||
|
background: #333; |
||||||
|
font-size: 18px; |
||||||
|
color: #fff; |
||||||
|
|
||||||
|
.top_bot{ |
||||||
|
width: 100%; |
||||||
|
height: 50%; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.left_bot{ |
||||||
|
width: 50%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
letter-spacing: 2px; |
||||||
|
font-size: 22px; |
||||||
|
|
||||||
|
.txt{ |
||||||
|
color: #f3b700; |
||||||
|
} |
||||||
|
|
||||||
|
.img{ |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bot_box{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 50%; |
||||||
|
width: 100%; |
||||||
|
font-size: 22px; |
||||||
|
letter-spacing: 2px; |
||||||
|
color: rgb(126,126,119); |
||||||
|
|
||||||
|
.point_box{ |
||||||
|
width: 100px; |
||||||
|
height: 75%; |
||||||
|
background: #ffc000; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin: 0 10px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>Document</title> |
||||||
|
</head> |
||||||
|
<style> |
||||||
|
.container { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
margin: -8px; |
||||||
|
background-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
.top_box { |
||||||
|
width: 100%; |
||||||
|
height: 6%; |
||||||
|
background: #333; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
color: #fff; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.left_top { |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.time_txt { |
||||||
|
margin: 0 20px; |
||||||
|
} |
||||||
|
.traffic_txt { |
||||||
|
width: 60px; |
||||||
|
height: 65%; |
||||||
|
background: #c00000; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.speed_txt { |
||||||
|
width: 100px; |
||||||
|
height: 65%; |
||||||
|
background: #548235; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.right_top { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
</style> |
||||||
|
<body> |
||||||
|
<div class="container"> |
||||||
|
<div class="top_box"> |
||||||
|
<div class="left_top"> |
||||||
|
<img style="margin-left: 10px" src="@/assets/img/car.png" alt="" /> |
||||||
|
<div class="time_txt">2023-03-28 14:05:40</div> |
||||||
|
<div class="traffic_txt">拥堵</div> |
||||||
|
<div class="speed_txt">37KM/H</div> |
||||||
|
</div> |
||||||
|
<div class="right_top"> |
||||||
|
<img src="@/assets/img/weather.png" alt="" /> |
||||||
|
<div style="margin: 0 20px">5~20℃</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="center_box"> |
||||||
|
<div class="top_box"> |
||||||
|
<div class="top_txt">车辆正在休息</div> |
||||||
|
<div class="bot_txt">请稍等片刻</div> |
||||||
|
</div> |
||||||
|
<div class="bot_box"><span class="txt">{{date}} {{time}}</span></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
date:'', |
||||||
|
time:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getTime() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getTime() { |
||||||
|
//获取当前时间 |
||||||
|
this.timer = setInterval(() => { |
||||||
|
var date = new Date(); |
||||||
|
var year = date.getFullYear(); //当前年份 |
||||||
|
var month = date.getMonth(); //当前月份 |
||||||
|
var data = date.getDate(); //天 |
||||||
|
var hours = date.getHours(); //小时 |
||||||
|
var minute = date.getMinutes(); //分 |
||||||
|
var second = date.getSeconds(); //秒 |
||||||
|
this.day = date.getDay(); //获取当前星期几 |
||||||
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
||||||
|
this.date = year + "/" + (month + 1) + "/" + data; |
||||||
|
// this.speedValue = Math.floor(Math.random() * 90) + 10; |
||||||
|
}, 1000); |
||||||
|
}, |
||||||
|
fn(str) { |
||||||
|
let num = null; |
||||||
|
str >= 10 ? (num = str) : (num = "0" + str); |
||||||
|
return num; |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
background: url("@/assets/img/stop_bag.png"); |
||||||
|
background-size: 100% 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
|
||||||
|
.center_box{ |
||||||
|
width: 529px; |
||||||
|
height: 642px; |
||||||
|
background: url("@/assets/img/center_bag.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.top_box{ |
||||||
|
margin-top: 25%; |
||||||
|
} |
||||||
|
|
||||||
|
.top_txt{ |
||||||
|
font-size: 48px; |
||||||
|
color: #0a8b56; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.bot_txt{ |
||||||
|
font-size: 28px; |
||||||
|
color: #0a8b56; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.bot_box{ |
||||||
|
width: 100%; |
||||||
|
height: 17%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 32px; |
||||||
|
color: #fff7cc; |
||||||
|
font-weight: 300; |
||||||
|
.txt{ |
||||||
|
text-shadow: 2px 2px 4px #390910; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="map_box" id="map"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initMap() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initMap(){ |
||||||
|
AMapLoader.load({ |
||||||
|
key:"af4c1cf82cc9aacefbadb4fc91d76ef9", // 申请好的Web端开发者Key，首次调用 load 时必填 |
||||||
|
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 |
||||||
|
plugins:['AMap.LineSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 |
||||||
|
|
||||||
|
}).then((AMap)=>{ |
||||||
|
this.map = new AMap.Map("map",{ //设置地图容器id |
||||||
|
viewMode:"2D", //是否为3D地图模式 |
||||||
|
zoom:15, //初始化地图级别 |
||||||
|
center: [121.39975,37.542694], //初始化地图中心点位置 |
||||||
|
// mapStyle: "amap://styles/blue", |
||||||
|
}); |
||||||
|
|
||||||
|
this.map.panBy(300,120,0) |
||||||
|
var marker = new AMap.Marker({ |
||||||
|
position: new AMap.LngLat(121.39975, 37.542694), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] |
||||||
|
title: '' |
||||||
|
}); |
||||||
|
|
||||||
|
// 将创建的点标记添加到已有的地图实例： |
||||||
|
|
||||||
|
|
||||||
|
// console.log(traffic) |
||||||
|
// this.getLine(); |
||||||
|
|
||||||
|
//实例化公交线路查询类 |
||||||
|
this.map.plugin(["AMap.LineSearch"], () => { |
||||||
|
|
||||||
|
|
||||||
|
var linesearch = new AMap.LineSearch({ |
||||||
|
pageIndex: 1, //页码，默认值为1 |
||||||
|
pageSize: 1, //单页显示结果条数，默认值为20，最大值为50 |
||||||
|
city: "烟台", //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』 |
||||||
|
extensions: "all" //是否返回公交线路详细信息，默认值为『base』 |
||||||
|
}); |
||||||
|
console.log(linesearch) |
||||||
|
|
||||||
|
//执行公交路线关键字查询 |
||||||
|
linesearch.search('17', (status, result)=> { |
||||||
|
//打印状态信息status和结果信息result |
||||||
|
console.log(status, result); |
||||||
|
if (status === 'complete' && result.info === 'OK') { |
||||||
|
console.log('result', result) |
||||||
|
this.lineSearchData(result); |
||||||
|
} else { |
||||||
|
alert(result); |
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
this.map.add(marker); |
||||||
|
|
||||||
|
}).catch(e=>{ |
||||||
|
console.log(e); |
||||||
|
}) |
||||||
|
}, |
||||||
|
lineSearchData(data) { |
||||||
|
var lineArr = data.lineInfo; |
||||||
|
var lineNum = data.lineInfo.length; |
||||||
|
if (lineNum == 0) { |
||||||
|
} else { |
||||||
|
for (var i = 0; i < lineNum; i++) { |
||||||
|
var pathArr = lineArr[i].path; |
||||||
|
var stops = lineArr[i].via_stops; |
||||||
|
var startPot = stops[0].location; |
||||||
|
var endPot = stops[stops.length - 1].location; |
||||||
|
if (i == 0) //作为示例，只绘制一条线路 |
||||||
|
this.drawbusLine(startPot, endPot, pathArr); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
drawbusLine(startPot, endPot, BusArr) { |
||||||
|
//绘制起点，终点 |
||||||
|
// new AMap.Marker({ |
||||||
|
// map: this.map, |
||||||
|
// position: startPot, //基点位置 |
||||||
|
// icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png", |
||||||
|
// zIndex: 10 |
||||||
|
// }); |
||||||
|
// new AMap.Marker({ |
||||||
|
// map: this.map, |
||||||
|
// position: endPot, //基点位置 |
||||||
|
// icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png", |
||||||
|
// zIndex: 10 |
||||||
|
// }); |
||||||
|
//绘制乘车的路线 |
||||||
|
var busPolyline = null; |
||||||
|
busPolyline = new AMap.Polyline({ |
||||||
|
map: this.map, |
||||||
|
path: BusArr, |
||||||
|
|
||||||
|
strokeColor: "#ff3c00",//线颜色 |
||||||
|
strokeOpacity: 0.4,//线透明度 |
||||||
|
isOutline:true, |
||||||
|
outlineColor:'white', |
||||||
|
strokeWeight: 8//线宽 |
||||||
|
}); |
||||||
|
// this.map.setFitView(); |
||||||
|
var traffic = new AMap.TileLayer.Traffic({ |
||||||
|
'autoRefresh': true, //是否自动刷新,默认为false |
||||||
|
'interval': 180, //刷新间隔,默认180s |
||||||
|
}); |
||||||
|
this.map.add(traffic) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
|
||||||
|
.map_box{ |
||||||
|
margin: 10px 0 0 10px; |
||||||
|
width: 680px; |
||||||
|
height: 310px; |
||||||
|
// background: red; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="center_box" v-loading="loading" element-loading-spinner="el-icon-loading" |
||||||
|
element-loading-background="rgba(255, 255, 255, 0)"> |
||||||
|
<div class="top_box"> |
||||||
|
<div class="top_txt">加载中...</div> |
||||||
|
<div class="bot_txt">请耐心等待</div> |
||||||
|
</div> |
||||||
|
<div class="bot_box"><span class="txt">{{date}} {{time}}</span></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
date:'', |
||||||
|
time:'', |
||||||
|
loading:true |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getTime() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getTime() { |
||||||
|
//获取当前时间 |
||||||
|
this.timer = setInterval(() => { |
||||||
|
var date = new Date(); |
||||||
|
var year = date.getFullYear(); //当前年份 |
||||||
|
var month = date.getMonth(); //当前月份 |
||||||
|
var data = date.getDate(); //天 |
||||||
|
var hours = date.getHours(); //小时 |
||||||
|
var minute = date.getMinutes(); //分 |
||||||
|
var second = date.getSeconds(); //秒 |
||||||
|
this.day = date.getDay(); //获取当前星期几 |
||||||
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
||||||
|
this.date = year + "/" + (month + 1) + "/" + data; |
||||||
|
// this.speedValue = Math.floor(Math.random() * 90) + 10; |
||||||
|
}, 1000); |
||||||
|
}, |
||||||
|
fn(str) { |
||||||
|
let num = null; |
||||||
|
str >= 10 ? (num = str) : (num = "0" + str); |
||||||
|
return num; |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
background: url("@/assets/img/stop_bag.png"); |
||||||
|
background-size: 100% 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
|
||||||
|
.center_box{ |
||||||
|
width: 529px; |
||||||
|
height: 642px; |
||||||
|
background: url("@/assets/img/wait_bag.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.top_box{ |
||||||
|
margin-top: 25%; |
||||||
|
} |
||||||
|
|
||||||
|
.top_txt{ |
||||||
|
font-size: 48px; |
||||||
|
color: #c47516; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.bot_txt{ |
||||||
|
font-size: 28px; |
||||||
|
color: #c47516; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.bot_box{ |
||||||
|
width: 100%; |
||||||
|
height: 17%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 32px; |
||||||
|
color: #fff7cc; |
||||||
|
font-weight: 300; |
||||||
|
.txt{ |
||||||
|
text-shadow: 2px 2px 4px #390910; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep .el-loading-spinner{ |
||||||
|
top: 5% !important; |
||||||
|
i{ |
||||||
|
color: #fff; |
||||||
|
font-size: 85px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,5 +1,55 @@ |
|||||||
const { defineConfig } = require('@vue/cli-service'); |
const { defineConfig } = require("@vue/cli-service"); |
||||||
|
|
||||||
module.exports = defineConfig({ |
module.exports = defineConfig({ |
||||||
transpileDependencies: true, |
transpileDependencies: true, |
||||||
|
lintOnSave: false, |
||||||
|
publicPath: "/", |
||||||
|
productionSourceMap: false, |
||||||
|
devServer: { |
||||||
|
port: 8080, |
||||||
|
proxy: { |
||||||
|
"/api": { |
||||||
|
// target: "http://192.168.3.81:8002",
|
||||||
|
target: "http://42.192.165.208:8002", |
||||||
|
changeOrigin: true, |
||||||
|
ws: true, |
||||||
|
pathRewrite: { |
||||||
|
"/api": "", |
||||||
|
}, |
||||||
|
}, |
||||||
|
// '/gatewayapi': {
|
||||||
|
// target: 'https://gatewayapi.lunz.cn/api',
|
||||||
|
// changeOrigin: true,
|
||||||
|
// ws: true,
|
||||||
|
// pathRewrite: {
|
||||||
|
// '/gatewayapi': ''
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
"/weather": { |
||||||
|
target: "https://api.map.baidu.com", |
||||||
|
changeOrigin: true, |
||||||
|
ws: true, |
||||||
|
// pathRewrite: {
|
||||||
|
// "/weather": "",
|
||||||
|
// },
|
||||||
|
}, |
||||||
|
// '/sjapi': {
|
||||||
|
// target: 'http://192.168.1.38:8210',
|
||||||
|
// // target: 'http://127.0.0.1:8210',
|
||||||
|
// changeOrigin: true,
|
||||||
|
// ws: true,
|
||||||
|
// pathRewrite: {
|
||||||
|
// '/sjapi': ''
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// '/pollapi': {
|
||||||
|
// target: 'https://poll.kuaidi100.com',
|
||||||
|
// changeOrigin: true,
|
||||||
|
// ws: true,
|
||||||
|
// pathRewrite: {
|
||||||
|
// '/pollapi': ''
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
}, |
||||||
|
}, |
||||||
}); |
}); |
||||||
|
|||||||