|
|
|
@ -2,19 +2,18 @@ |
|
|
|
<div class="brand-container"> |
|
|
|
<div class="wrap"> |
|
|
|
<header> |
|
|
|
<div class="weather"> |
|
|
|
<img :src="imgSrc"> |
|
|
|
<span class="tem">{{ weatcherData.tem }}°C</span> |
|
|
|
<span class="wea">{{ weatcherData.wea }}</span> |
|
|
|
</div> |
|
|
|
<h2>智慧云停车大数据平台</h2> |
|
|
|
<div class="showTime"> |
|
|
|
<span class="time">{{ nowTime }}</span> |
|
|
|
<span class="date"> |
|
|
|
<span>{{ week }}</span> |
|
|
|
<span>{{ date }}</span> |
|
|
|
<span>{{ week }}</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<h2>智慧云停车大数据平台</h2> |
|
|
|
<div class="welcome"> |
|
|
|
欢迎使用本系统 |
|
|
|
</div> |
|
|
|
|
|
|
|
</header> |
|
|
|
|
|
|
|
<section class="mainbox"> |
|
|
|
@ -37,28 +36,18 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item center"> |
|
|
|
|
|
|
|
<div class="resume"> |
|
|
|
<div class="resume-hd"> |
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<countTo :startVal='startVal' :endVal='490' :duration='6000' separator=""></countTo> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<countTo :startVal='startVal' :endVal='75' :duration='6000' separator=""></countTo> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<countTo :startVal='startVal' :endVal='3000' :duration='6000' separator=""></countTo> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<span>今日交易笔数</span> |
|
|
|
<span>今日交易金额</span> |
|
|
|
</div> |
|
|
|
<div class="resume-bd"> |
|
|
|
<ul> |
|
|
|
<li>公司总人数（单位：人）</li> |
|
|
|
<li>技术人员占比（单位：%）</li> |
|
|
|
<li>产品投资额（单位：万元）</li> |
|
|
|
</ul> |
|
|
|
<countTo :startVal='startVal' :endVal='82388888' :duration='1500' separator=""></countTo> |
|
|
|
<countTo :startVal='startVal' :endVal='65488888' :duration='1500' separator=""></countTo> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="map"> |
|
|
|
<div class="chart" id="chart_map"></div> |
|
|
|
<div class="map1"></div> |
|
|
|
@ -107,8 +96,6 @@ export default { |
|
|
|
week: '', |
|
|
|
date: '', |
|
|
|
timer: null, |
|
|
|
imgSrc: '', |
|
|
|
weatcherData: {}, |
|
|
|
startVal: 0, |
|
|
|
geoCoordMap: {}, |
|
|
|
XAData: [ |
|
|
|
@ -139,71 +126,25 @@ export default { |
|
|
|
created() { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getWeather(); |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.getWeather(); |
|
|
|
}, 1000 * 60 * 60) |
|
|
|
|
|
|
|
this.nowTimes(); |
|
|
|
this.getEchart(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
timeFormate(timeStamp) { //显示当前时间 |
|
|
|
let newDate = new Date(timeStamp); |
|
|
|
let year = newDate.getFullYear(); |
|
|
|
let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1; |
|
|
|
let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate(); |
|
|
|
let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours(); |
|
|
|
let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes(); |
|
|
|
let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds(); |
|
|
|
let week = newDate.getDay(); |
|
|
|
let weeks = ['日', '一', '二', '三', '四', '五', '六']; |
|
|
|
let getWeek = '星期' + weeks[week]; |
|
|
|
this.week = getWeek; |
|
|
|
this.date = year + '.' + month + '.' + date; |
|
|
|
this.nowTime = hh + ':' + mm + ':' + ss; |
|
|
|
}, |
|
|
|
nowTimes() { |
|
|
|
this.timeFormate(new Date()); |
|
|
|
setInterval(this.nowTimes, 1000); |
|
|
|
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); |
|
|
|
|
|
|
|
}, |
|
|
|
clear() { |
|
|
|
clearInterval(this.nowTimes) |
|
|
|
this.nowTimes = null; |
|
|
|
}, |
|
|
|
getWeather() { // 第三方天气api接口 |
|
|
|
this.axios.get('https://www.tianqiapi.com/api/', { |
|
|
|
params: { |
|
|
|
appid: '26148275', |
|
|
|
appsecret: '2id6H48Y', |
|
|
|
version: 'v6' |
|
|
|
} |
|
|
|
}).then(res => { |
|
|
|
if (res.data) { |
|
|
|
if (res.data.wea_img == 'xue') { |
|
|
|
this.imgSrc = require('../assets/img/brand/xue.png'); |
|
|
|
} else if (res.data.wea_img == 'yin') { |
|
|
|
this.imgSrc = require('../assets/img/brand/yin.png'); |
|
|
|
} else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') { |
|
|
|
this.imgSrc = require('../assets/img/brand/yu.png'); |
|
|
|
} else if (res.data.wea_img == 'yun') { |
|
|
|
this.imgSrc = require('../assets/img/brand/yun.png'); |
|
|
|
} else if (res.data.wea_img == 'wu') { |
|
|
|
this.imgSrc = require('../assets/img/brand/wu.png'); |
|
|
|
} else if (res.data.wea_img == 'shachen') { |
|
|
|
this.imgSrc = require('../assets/img/brand/shachen.png'); |
|
|
|
} else if (res.data.wea_img == 'lei') { |
|
|
|
this.imgSrc = require('../assets/img/brand/lei.png'); |
|
|
|
} else { |
|
|
|
this.imgSrc = require('../assets/img/brand/qing.png'); |
|
|
|
} |
|
|
|
this.weatcherData = res.data; |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
clearInterval(this.timer) |
|
|
|
this.timer = null; |
|
|
|
}, |
|
|
|
|
|
|
|
convertData(data) { // 地图数据转换 |
|
|
|
let res = []; |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
@ -485,7 +426,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
clearInterval(this.timer); |
|
|
|
this.clear(); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -498,77 +439,67 @@ export default { |
|
|
|
background: #000; |
|
|
|
|
|
|
|
.wrap { |
|
|
|
background: url(../assets/img/brand/bg.jpg) no-repeat #000; |
|
|
|
background: url(../assets/img/brand/bg.png) no-repeat #000; |
|
|
|
background-size: cover; |
|
|
|
line-height: 1.15; |
|
|
|
|
|
|
|
header { |
|
|
|
position: relative; |
|
|
|
height: 1rem; |
|
|
|
height: 1.35rem; |
|
|
|
background: url(../assets/img/brand/head_bg.png) no-repeat top center; |
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
h2 { |
|
|
|
color: #7ef0ff; |
|
|
|
height: 1.175rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.475rem; |
|
|
|
text-align: center; |
|
|
|
line-height: 0.75rem; |
|
|
|
letter-spacing: 1px; |
|
|
|
} |
|
|
|
|
|
|
|
.weather { |
|
|
|
position: absolute; |
|
|
|
left: 1.375rem; |
|
|
|
top: 0.35rem; |
|
|
|
font-size: 0.25rem; |
|
|
|
color: rgba(126, 240, 255, .7); |
|
|
|
|
|
|
|
img { |
|
|
|
width: .45rem; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
.tem { |
|
|
|
margin: 0 .1rem 0 .2rem; |
|
|
|
} |
|
|
|
line-height: 1.175rem; |
|
|
|
letter-spacing: 0.05rem; |
|
|
|
padding-top: 0.175rem; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
|
|
|
|
.showTime { |
|
|
|
position: absolute; |
|
|
|
right: 1.375rem; |
|
|
|
top: 0.5rem; |
|
|
|
color: rgba(126, 240, 255, .7); |
|
|
|
left: 0.625rem; |
|
|
|
top: 0.45rem; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.time { |
|
|
|
font-size: .28rem; |
|
|
|
top: 0.45rem; |
|
|
|
font-size: .4rem; |
|
|
|
margin-right: .18rem; |
|
|
|
} |
|
|
|
|
|
|
|
.date { |
|
|
|
span { |
|
|
|
display: block; |
|
|
|
top: 0.45rem; |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
font-size: .12rem; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
font-size: .14rem; |
|
|
|
} |
|
|
|
span { |
|
|
|
line-height: 0.45rem; |
|
|
|
font-size: .2rem; |
|
|
|
padding-right: 0.1rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.welcome { |
|
|
|
position: absolute; |
|
|
|
right: 0.625rem; |
|
|
|
top: 0.45rem; |
|
|
|
height: .35rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.25rem; |
|
|
|
text-align: center; |
|
|
|
line-height: .35rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mainbox { |
|
|
|
min-width: 1024px; |
|
|
|
max-width: 1920px; |
|
|
|
padding: 0.125rem 0.125rem 0; |
|
|
|
padding: 0.47rem 0.125rem 0; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.item { |
|
|
|
@ -580,89 +511,48 @@ export default { |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.resume { |
|
|
|
background: rgba(101, 132, 226, 0.1); |
|
|
|
padding: 0.1875rem; |
|
|
|
|
|
|
|
.resume-hd { |
|
|
|
position: relative; |
|
|
|
border: 1px solid rgba(25, 186, 139, 0.17); |
|
|
|
|
|
|
|
ul { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
%li-line { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
height: 50%; |
|
|
|
width: 1px; |
|
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
|
top: 25%; |
|
|
|
} |
|
|
|
|
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
height: 1.2rem; |
|
|
|
line-height: 1.2rem; |
|
|
|
font-size: 0.65rem; |
|
|
|
color: #ffeb7b; |
|
|
|
padding: 0.05rem 0; |
|
|
|
font-family: 'DIGITALDREAMFAT'; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
&:after { |
|
|
|
@extend %li-line; |
|
|
|
right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&:before { |
|
|
|
@extend %li-line; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
span { |
|
|
|
display: block; |
|
|
|
box-sizing: border-box; |
|
|
|
width: 3.535rem; |
|
|
|
background: url(../assets/img/brand/resume-hd-item.png) no-repeat; |
|
|
|
height: 0.3125rem; |
|
|
|
line-height: 0.5rem; |
|
|
|
text-align: left; |
|
|
|
font-size: 0.1625rem; |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
padding-left: .3rem; |
|
|
|
} |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
width: 30px; |
|
|
|
height: 10px; |
|
|
|
border-top: 2px solid #02a6b5; |
|
|
|
border-left: 2px solid #02a6b5; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
width: 30px; |
|
|
|
height: 10px; |
|
|
|
border-bottom: 2px solid #02a6b5; |
|
|
|
border-right: 2px solid #02a6b5; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.resume-bd { |
|
|
|
ul { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
li { |
|
|
|
flex: 1; |
|
|
|
height: 0.5rem; |
|
|
|
line-height: 0.5rem; |
|
|
|
text-align: center; |
|
|
|
font-size: 0.225rem; |
|
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
|
padding-top: 0.125rem; |
|
|
|
} |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
span { |
|
|
|
margin-top: .25rem; |
|
|
|
// border: .03rem solid rgba(63, 124, 163, 0.7); |
|
|
|
box-shadow: 0rem .02rem .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'; |
|
|
|
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%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
[liang]
3 years ago
