580 lines
14 KiB
Vue
580 lines
14 KiB
Vue
<template>
|
||
<div class="fensongsi_index">
|
||
<div class="block1">
|
||
<layout-title title="气象监测数据"/>
|
||
<div class="options">
|
||
<div v-for="(item,index) in block1OptionsList" :key="index" class="option">
|
||
<div class="title">{{ item.title }}</div>
|
||
<div class="circular">
|
||
<img :src="item.img" alt="">
|
||
</div>
|
||
<div class="label">
|
||
{{ item.count }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block2">
|
||
<layout-title title="风险辨识管控"/>
|
||
<div class="options">
|
||
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
||
<img :src="item.img" class="img_top" alt="">
|
||
<img class="img_bottom" src="../../../assets/map/gangkou_index/bg1.png" alt="">
|
||
<div class="label">{{ item.label }}</div>
|
||
<div class="count">
|
||
<count-to :start-val="0" :end-val="+riskIdentificationCount[index]" :duration="3600"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block3">
|
||
<layout-title title="人员定位信息"/>
|
||
<div class="options">
|
||
<div v-for="(item,index) in block3OptionsList" :key="index" class="option">
|
||
<img :src="item.img" class="img_top" alt="">
|
||
<img class="img_bottom" src="../../../assets/map/gangkou_index/img1.png" alt="">
|
||
<div class="label">{{ item.label }}</div>
|
||
<div class="count">
|
||
<count-to :start-val="0" :end-val="item.count" :duration="3600"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block4">
|
||
<layout-title title="口门管理"/>
|
||
<div class="options">
|
||
<div v-for="(item,index) in doorManagementList" :key="index" class="option">
|
||
<div class="title">{{ item.title }}</div>
|
||
<div class="items">
|
||
<div v-for="(item1,index1) in item.list" :key="index1" class="item">
|
||
<div class="label">
|
||
{{ item1.label }}：<count-to :start-val="0" :end-val="item.title == '今日情况' ? +item1.count : +item1.COUNT" :duration="3600"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import layoutTitle from './title.vue'
|
||
import CountTo from 'vue-count-to'
|
||
import { requestFN } from '@/utils/request'
|
||
|
||
export default {
|
||
components: {
|
||
layoutTitle,
|
||
CountTo
|
||
},
|
||
props: {
|
||
corpInfoId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
gangkou: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
timer: '',
|
||
value: 0,
|
||
riskIdentificationCount: {},
|
||
doorManagementList: [],
|
||
block1OptionsList: [
|
||
{
|
||
title: '风速监测',
|
||
img: require('../../../assets/map/qixiang/ico1.png'),
|
||
count: '-'
|
||
},
|
||
{
|
||
title: '温度监测',
|
||
img: require('../../../assets/map/qixiang/ico2.png'),
|
||
count: '-'
|
||
},
|
||
{
|
||
title: '风向监测',
|
||
img: require('../../../assets/map/qixiang/ico3.png'),
|
||
count: '-'
|
||
}
|
||
],
|
||
block2OptionsList: [
|
||
{
|
||
label: '风险单元数',
|
||
img: require('../../../assets/map/gangkou_index/ico1.png'),
|
||
count: 0
|
||
},
|
||
{
|
||
label: '辨识部位数',
|
||
img: require('../../../assets/map/gangkou_index/ico2.png'),
|
||
count: 0
|
||
},
|
||
{
|
||
label: '风险因素数',
|
||
img: require('../../../assets/map/gangkou_index/ico3.png'),
|
||
count: 0
|
||
}
|
||
],
|
||
block3OptionsList: [
|
||
{
|
||
label: '企业人员数',
|
||
img: require('../../../assets/map/gangkou_index/img1_on.png'),
|
||
count: 0
|
||
},
|
||
{
|
||
label: '部门数',
|
||
img: require('../../../assets/map/gangkou_index/img2_on.png'),
|
||
count: 0
|
||
},
|
||
{
|
||
label: '定位在线人员数',
|
||
img: require('../../../assets/map/gangkou_index/img3_on.png'),
|
||
count: 0
|
||
}
|
||
],
|
||
block4OptionsList: [
|
||
{
|
||
title: '风险指数',
|
||
list: [
|
||
{
|
||
label: '重大风险点数',
|
||
count: '9'
|
||
},
|
||
{
|
||
label: '较大风险点数',
|
||
count: '20'
|
||
},
|
||
{
|
||
label: '一般风险点数',
|
||
count: '13'
|
||
},
|
||
{
|
||
label: '低风险性点数',
|
||
count: '3'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '今日情况',
|
||
list: [
|
||
{
|
||
label: '今日进港人员数',
|
||
count: '-'
|
||
},
|
||
{
|
||
label: '今日出港人员数',
|
||
count: '-'
|
||
},
|
||
{
|
||
label: '今日进港车辆数',
|
||
count: '-'
|
||
},
|
||
{
|
||
label: '今日出港车辆数',
|
||
count: '-'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
watch: {
|
||
// 'corpInfoId': {
|
||
// handler(newVal, oldVal) {
|
||
// console.log('newVal')
|
||
// console.log(newVal)
|
||
// console.log('oldVal')
|
||
// console.log(oldVal)
|
||
// },
|
||
// immediate: false
|
||
// }
|
||
},
|
||
created() {
|
||
this.getRiskIdentificationCount()
|
||
this.getPersonPositioningCount()
|
||
this.getDoorManagement()
|
||
this.start()
|
||
this.getMeteorologicalinfo()
|
||
},
|
||
beforeDestroy() {
|
||
console.log('定时器关闭')
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
// 天气数据
|
||
getMeteorologicalinfo() {
|
||
this.listLoading = true
|
||
requestFN(
|
||
'/map/listbymeteorological',
|
||
{
|
||
CORPINFO_ID: this.corpInfoId,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.listLoading = false
|
||
this.block1OptionsList[0].count = data.pd.WINDSPEED || '-'
|
||
this.block1OptionsList[1].count = data.pd.TEMPERATURE || '-'
|
||
this.block1OptionsList[2].count = this.calculateWindDirection(data.pd.WINDDIRECTION)
|
||
// this.block1OptionsList[3].count = data.pd.HUMIDITY || '-'
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
calculateWindDirection(angle) {
|
||
const arr = [
|
||
{
|
||
directions: '北',
|
||
minAngle: '348.76',
|
||
maxAngle: '11.25'
|
||
},
|
||
{
|
||
directions: '北东北',
|
||
minAngle: '11.26',
|
||
maxAngle: '33.75'
|
||
},
|
||
{
|
||
directions: '东北',
|
||
minAngle: '33.76',
|
||
maxAngle: '56.25'
|
||
},
|
||
{
|
||
directions: '东东北',
|
||
minAngle: '56.26',
|
||
maxAngle: '78.75'
|
||
},
|
||
{
|
||
directions: '东',
|
||
minAngle: '78.76',
|
||
maxAngle: '101.25'
|
||
},
|
||
{
|
||
directions: '东东南',
|
||
minAngle: '101.26',
|
||
maxAngle: '123.75'
|
||
},
|
||
{
|
||
directions: '东南',
|
||
minAngle: '123.76',
|
||
maxAngle: '146.25'
|
||
},
|
||
{
|
||
directions: '南东南',
|
||
minAngle: '146.26',
|
||
maxAngle: '168.75'
|
||
},
|
||
{
|
||
directions: '南',
|
||
minAngle: '168.76',
|
||
maxAngle: '191.25'
|
||
},
|
||
{
|
||
directions: '南西南',
|
||
minAngle: '191.26',
|
||
maxAngle: '213.75'
|
||
},
|
||
{
|
||
directions: '西南',
|
||
minAngle: '213.76',
|
||
maxAngle: '236.25'
|
||
},
|
||
{
|
||
directions: '西西南',
|
||
minAngle: '236.26',
|
||
maxAngle: '258.75'
|
||
},
|
||
{
|
||
directions: '西',
|
||
minAngle: '258.76',
|
||
maxAngle: '281.25'
|
||
},
|
||
{
|
||
directions: '西西北',
|
||
minAngle: '281.26',
|
||
maxAngle: '303.75'
|
||
},
|
||
{
|
||
directions: '西北',
|
||
minAngle: '303.76',
|
||
maxAngle: '326.25'
|
||
},
|
||
{
|
||
directions: '北西北',
|
||
minAngle: '326.26',
|
||
maxAngle: '348.75'
|
||
}
|
||
]
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (+angle >= +arr[i].minAngle && +angle <= +arr[i].maxAngle) {
|
||
return arr[i].directions + '风'
|
||
}
|
||
}
|
||
return '静风'
|
||
},
|
||
// 定时器
|
||
start() {
|
||
console.log('定时器开启')
|
||
this.timer = setInterval(this.getMeteorologicalinfo, 10000) // 注意: 第一个参数为方法名的时候不要加括号;
|
||
},
|
||
over() {
|
||
clearInterval(this.timer)
|
||
},
|
||
|
||
getDoorManagement() {
|
||
requestFN(
|
||
'/map/getDoorManagement',
|
||
{
|
||
CORPINFO_ID: this.corpInfoId,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.doorManagementList = data.varList
|
||
})
|
||
},
|
||
getRiskIdentificationCount() {
|
||
requestFN(
|
||
'/map/getRiskIdentificationCount',
|
||
{
|
||
CORPINFO_ID: this.corpInfoId,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.riskIdentificationCount = data.riskIdentificationCount
|
||
})
|
||
},
|
||
getPersonPositioningCount() {
|
||
requestFN(
|
||
'/map/getPersonPositioningCount',
|
||
{
|
||
CORPINFO_ID: this.corpInfoId,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.block3OptionsList[0].count = data.personPositioningCount[0]
|
||
this.block3OptionsList[1].count = data.personPositioningCount[1]
|
||
this.block3OptionsList[2].count = data.personPositioningCount[2]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fensongsi_index {
|
||
.block1 {
|
||
width: 410px;
|
||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||
|
||
.options {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 15px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||
border-top: none;
|
||
|
||
.option {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
background-image: url("../../../assets/map/qixiang/label.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 88px;
|
||
height: 25px;
|
||
font-size: 12px;
|
||
line-height: 25px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.circular {
|
||
margin-top: 15px;
|
||
background-image: url("../../../assets/map/qixiang/imgbg.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 67px;
|
||
height: 48px;
|
||
text-align: center;
|
||
padding-top: 13px;
|
||
|
||
img {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-top: -20px;
|
||
animation: slideY 2s infinite;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.block2 {
|
||
margin-top: 10px;
|
||
width: 410px;
|
||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||
|
||
.options {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 40px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||
border-top: none;
|
||
|
||
.option {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.img_top {
|
||
position: absolute;
|
||
width: 25px;
|
||
height: 25px;
|
||
margin-top: 11px;
|
||
animation: slideY 2s infinite;
|
||
}
|
||
|
||
.img_bottom {
|
||
position: absolute;
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.label {
|
||
margin-top: 60px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.count {
|
||
background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-weight: bold;
|
||
font-size: 26px;
|
||
margin-top: 0px;
|
||
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.block3 {
|
||
margin-top: 10px;
|
||
width: 410px;
|
||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||
|
||
.options {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 40px 10px 40px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||
border-top: none;
|
||
|
||
.option {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.img_top {
|
||
position: absolute;
|
||
width: 75px;
|
||
height: 75px;
|
||
animation: slideY 2s infinite;
|
||
}
|
||
|
||
.img_bottom {
|
||
position: absolute;
|
||
width: 75px;
|
||
height: 75px;
|
||
top: 5px;
|
||
}
|
||
|
||
.label {
|
||
margin-top: 80px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.count {
|
||
background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-weight: bold;
|
||
font-size: 26px;
|
||
margin-top: 0px;
|
||
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.block4 {
|
||
margin-top: 10px;
|
||
width: 410px;
|
||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||
|
||
.options {
|
||
padding: 10px 15px 10px 15px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||
border-top: none;
|
||
|
||
.option {
|
||
.title {
|
||
background-image: url("../../../assets/map/menjin/title.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 113px;
|
||
height: 26px;
|
||
font-size: 14px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.items {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 10px;
|
||
|
||
.item {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
flex-basis: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes slideY {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(5px);
|
||
}
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|