实现顶部信息展示
1、App 组件 修改
/App.vue
<template>
<div class="castle side-r-wrap">
<TopSide :title="title"></TopSide>
<TopMid></TopMid>
</div>
</template>
<script>
import TopSide from '@/components/TopSide'
import TopMid from '@/components/TopMid'
export default {
name: 'Castle',
data () {
return {
title: '公安警情可视化'
}
},
components: {
TopSide,
TopMid
}
}
</script>
<style scoped>
</style>
2、构建TopSide.vue
/src/components/TopSide.vue
Mock模块已经安装
<template>
<div class="top-side">
<div class="title">{{title}}</div>
<div class="time">{{yyyyMMdd}}
<strong>{{HHmm}}</strong>
</div>
</div>
</template>
<script>
import Mock from 'mockjs'
export default {
props: ['title'],
name: 'topSide',
data () {
return {
yyyyMMdd: '',
HHmm: ''
}
},
mounted () {
const date = Mock.Random.now('yyyyMMddHHmm')
const year = date.substring(0, 4)
const month = date.substring(4, 6)
const day = date.substring(6, 8)
const hour = date.substring(8, 10)
const minute = date.substring(10, 12)
this.yyyyMMdd = `${year}.${month}.${day}`
this.HHmm = `${hour}:${minute}`
}
}
</script>
<style>
.top-side {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.title {
font-size: 58px;
color: #fdfeff;
position: absolute;
left: 62px;
top: 30px;
text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
}
.time {
position: absolute;
top: 30px;
right: 55px;
color: #fdfeff;
font-size: 36px;
text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
}
.time strong {
font-size: 60px;
}
</style>
3、构建 TopMid.vue
/src/components/TopSide.vue
<template>
<div class="top-mid">
<div class="item" v-for="item in dataset" :key="item.id">
<span class="name">{{item.name}}
<strong>{{item.value}}</strong>
</span>
<span class="huanbi">环比
<strong :data-state="item.state">{{item.huanbi}}
<em>%</em>
</strong>
</span>
</div>
</div>
</template>
<script>
import axios from 'axios'
import api from '../assets/scripts/tool/api'
import Data from '../data/fantasy/castle/top'
Data()
export default {
name: 'topMid',
data () {
return {
dataset: []
}
},
mounted () {
const self = this
axios.get(api.castleTop)
.then(response => {
const data = response.data.result.top
data.map(item => {
let state
let huanbi
if (item.huanbi > 0) {
state = 'up'
huanbi = item.huanbi
} else if (item.huanbi === 0) {
state = 'level'
huanbi = item.huanbi
} else if (item.huanbi < 0) {
state = 'down'
huanbi = Math.abs(item.huanbi)
}
self.dataset.push({
name: item.name,
value: item.value,
huanbi: huanbi,
state: state
})
})
})
.catch(error => {
console.error(error)
})
}
}
</script>
<style>
.top-mid {
position: absolute;
left: 50%;
top: 30px;
width: 1650px;
display: flex;
justify-content: space-around;
box-sizing: border-box;
padding: 24px 20px 0;
background: url(../assets/images/common/top-center-bg.png) no-repeat top center;
background-size: 100% 100%;
transform: translate(-50%, 0);
margin-left: -20px;
}
.item {
max-width: 33.33%;
overflow: hidden;
white-space: nowrap;
}
.name {
font-size: 40px;
color: #b4c7f9;
}
.name strong {
font-size: 50px;
color: #ff8244;
font-weight: normal;
margin: 0 10px;
}
.huanbi {
font-size: 30px;
color: #b4c7f9;
}
.huanbi strong {
font-size: 40px;
margin: 0 10px 0 36px;
position: relative;
display: inline-block;
}
.huanbi em {
font-size: 30px;
}
.huanbi strong[data-state]:after {
content: "";
display: inline-block;
position: absolute;
width: 25px;
height: 26px;
top: 14px;
left: -30px;
}
.huanbi strong[data-state="up"] {
color: #ff4444;
}
.huanbi strong[data-state="level"] {
color: #b4c7f9;
}
.huanbi strong[data-state="down"] {
color: #44ff86;
}
.huanbi strong[data-state="up"]:after {
background: url(../assets/images/common/huanbi-up.png) no-repeat;
}
.huanbi strong[data-state="down"]:after {
background: url(../assets/images/common/huanbi-down.png) no-repeat;
}
</style>
/src/assets/scripts/tool/api
const isOnline = false
const onlineApiHost = isOnline ? 'http://88.888.88.88:8888/project/' : 'http://localhost:8080/'
export default {
castleTop: onlineApiHost + 'fantasy/castle/top',
iotalarm: onlineApiHost + 'iot/overview/alarm',
iottop5: onlineApiHost + 'iot/overview/top5',
iottrend: onlineApiHost + 'iot/overview/trend',
district: onlineApiHost + 'stride/fireworks/city',
list: onlineApiHost + 'stride/fireworks/list',
dotemap: onlineApiHost + 'fantasy/castle/dotemap'
}
/src/data/fantasy/castle/top
import {
urlReg
} from '../../../assets/scripts/tool/utils'
import Mock from 'mockjs'
const data = () => {
Mock.mock(urlReg('fantasy/castle/top'), {
'code': 1,
'msg': 'success',
'result': {
'top|3': [{
'name|+1': ['本周', '本月', '本年'],
'value': '@natural(100,10000)',
'huanbi': '@integer(-100,100)'
}]
}
})
}
export default data
/src/assets/scripts/tool/utils
import $ from 'jquery'
export const urlReg = (name) => {
const protocols = '((https?|s?ftp|irc[6s]?|git|afp|telnet|smb):\\/\\/)?'
const userInfo = '([a-z0-9]\\w*(\\:[\\S]+)?\\@)?'
const domain = '([a-z0-9]([\\w]*[a-z0-9])*\\.)?[a-z0-9]\\w*\\.[a-z]{2,}(\\.[a-z]{2,})?'
const port = '(:\\d{1,5})?'
const ip = '\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}'
const address = '(\\/\\S*)?'
const domainType = [protocols, userInfo, domain, port, address, name, address]
const ipType = [protocols, userInfo, ip, port, address, name, address]
return new RegExp('^' + domainType.join('') + '$', 'i') || new RegExp('^' + ipType.join('') + '$', 'i')
}
export const tooltip = (option) => {
const el = option.el
let location = option.location
const data = option.data
const length = data.length
let text = ''
for (let i = 0; i < length; i++) {
if (data[i].color) {
text += `<span style="color:${data[i].color}">${data[i].name} : ${data[i].value}</span><br>`
} else {
text += `<span>${data[i].name} : ${data[i].value}</span><br>`
}
}
$(el).html(text)
const globalWidth = $('body').outerWidth()
const elWidth = $(el).outerWidth()
const elHeight = $(el).outerHeight()
location.x = location.x - elWidth / 2
location.y = location.y - elHeight - 10
if (location.x + elWidth / 2 > globalWidth) {
location.x = globalWidth - elWidth
}
$(el).css({
left: location.x,
top: location.y
})
return $(el)
}