沧州矿石地图展示
parent
6dbdc96268
commit
34bb3bce3c
|
|
@ -24,6 +24,7 @@
|
||||||
"js-cookie": "^2.2.1",
|
"js-cookie": "^2.2.1",
|
||||||
"jspdf": "^2.5.1",
|
"jspdf": "^2.5.1",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
"md5": "^2.3.0",
|
||||||
"moment": "^2.29.3",
|
"moment": "^2.29.3",
|
||||||
"motion": "^10.16.4",
|
"motion": "^10.16.4",
|
||||||
"mqtt": "^4.2.1",
|
"mqtt": "^4.2.1",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="fensongsi_index">
|
<div class="fensongsi_index">
|
||||||
<div class="block2">
|
<div class="block2">
|
||||||
<layout-title title="风险辨识管控"/>
|
<layout-title title="cfd风险辨识管控"/>
|
||||||
<div class="options">
|
<div class="options">
|
||||||
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
||||||
<img :src="item.img" class="img_top" alt="">
|
<img :src="item.img" class="img_top" alt="">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,587 @@
|
||||||
|
<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 block4OptionsList" :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="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: {},
|
||||||
|
personPositioningCount: {},
|
||||||
|
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.getPersonPositioningCount()
|
||||||
|
this.getRiskIdentificationCount()
|
||||||
|
this.getDoorManagement()
|
||||||
|
},
|
||||||
|
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) => {
|
||||||
|
data.riskList.forEach(item => {
|
||||||
|
if (item.TYPE == 'levelA') this.block4OptionsList[0].list[0].count = item.COUNT
|
||||||
|
if (item.TYPE == 'levelB') this.block4OptionsList[0].list[1].count = item.COUNT
|
||||||
|
if (item.TYPE == 'levelC') this.block4OptionsList[0].list[2].count = item.COUNT
|
||||||
|
if (item.TYPE == 'levelD') this.block4OptionsList[0].list[3].count = item.COUNT
|
||||||
|
})
|
||||||
|
this.block4OptionsList[1].list[0].count = data.czksCarToday.oreIn
|
||||||
|
this.block4OptionsList[1].list[1].count = data.czksCarToday.oreOut
|
||||||
|
this.block4OptionsList[1].list[2].count = data.czksCarToday.groceryIn
|
||||||
|
this.block4OptionsList[1].list[3].count = data.czksCarToday.groceryOut
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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.userCount
|
||||||
|
this.block3OptionsList[1].count = data.departCount
|
||||||
|
this.block3OptionsList[2].count = data.total
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,424 @@
|
||||||
|
<template>
|
||||||
|
<div class="menjin">
|
||||||
|
<div class="block1">
|
||||||
|
<layout-title title="设备在线情况"/>
|
||||||
|
<div class="options">
|
||||||
|
<div v-for="(item,index) in block1OptionsList" :key="index" class="option">
|
||||||
|
<div class="title active">{{ item.title }}</div>
|
||||||
|
<div class="circular">
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="label">
|
||||||
|
{{ item.label1 }}：
|
||||||
|
<count-to :start-val="0" :end-val="+item.count1" :duration="3600"/>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.label2" class="label">
|
||||||
|
{{ item.label2 }}：
|
||||||
|
<count-to :start-val="0" :end-val="+item.count2" :duration="3600"/>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.label3" class="label">
|
||||||
|
{{ item.label3 }}：
|
||||||
|
<count-to :start-val="0" :end-val="+item.count3" :duration="3600"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block2">
|
||||||
|
<layout-title title="口门进出数据"/>
|
||||||
|
<div class="options">
|
||||||
|
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
||||||
|
<div class="title active">{{ 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="item1.count" :duration="3600"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="block3">
|
||||||
|
<layout-title title="口门进出记录"/>
|
||||||
|
<div class="content">
|
||||||
|
<div class="options">
|
||||||
|
<div
|
||||||
|
v-for="(item,index) in block3OptionsList"
|
||||||
|
:key="index"
|
||||||
|
:class="['title', {active:index === block3OptionsIndex}]"
|
||||||
|
@click="block3OptionsClick(index)"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="tr">
|
||||||
|
<div class="td">卡口名称</div>
|
||||||
|
<div class="td">车牌</div>
|
||||||
|
<div class="td">时间</div>
|
||||||
|
<div class="td">状态</div>
|
||||||
|
</div>
|
||||||
|
<div v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="scroll">
|
||||||
|
<div v-for="(item,index) in block3List" :key="index" class="tr">
|
||||||
|
<div v-if="block3OptionsIndex == 0" class="td line1">{{ item.USERNAME }}</div>
|
||||||
|
<div v-if="block3OptionsIndex == 1" class="td">{{ item.LICENSE_PLATE }}</div>
|
||||||
|
<div class="td">{{ item.TIME }}</div>
|
||||||
|
<div v-if="block3OptionsIndex == 0" :class="['td',{green:item.STATE == '0'}]">
|
||||||
|
{{ item.STATE == '0' ? '进入' : '出港' }}
|
||||||
|
</div>
|
||||||
|
<div v-if="block3OptionsIndex == 0" :class="['td',{yellow:item.STATE == '0'}]">{{
|
||||||
|
item.EQUIPMENTNAME
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-if="block3OptionsIndex == 1" :class="['td',{green:item.STATE == '4'}]">
|
||||||
|
{{ item.STATE == '4' ? '进场' : '出场' }}
|
||||||
|
</div>
|
||||||
|
<div v-if="block3OptionsIndex == 1" :class="['td',{yellow:item.STATE == '4'}]">{{
|
||||||
|
item.COMING_REASON
|
||||||
|
}}
|
||||||
|
</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: ''
|
||||||
|
},
|
||||||
|
area: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
gangkou: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
block1OptionsList: [
|
||||||
|
{
|
||||||
|
title: '人员闸机',
|
||||||
|
img: require('../../../assets/map/menjin/ico1.png'),
|
||||||
|
label1: '今日进数',
|
||||||
|
count1: 0,
|
||||||
|
label2: '今日出数',
|
||||||
|
count2: 0,
|
||||||
|
label3: '今日剩余人数',
|
||||||
|
count3: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '车辆闸机',
|
||||||
|
img: require('../../../assets/map/menjin/ico2.png'),
|
||||||
|
label1: '今日进数',
|
||||||
|
count1: 0,
|
||||||
|
label2: '今日出数',
|
||||||
|
count2: 0,
|
||||||
|
label3: '今日剩余车数',
|
||||||
|
count3: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '摄像头数',
|
||||||
|
img: require('../../../assets/map/menjin/ico3.png'),
|
||||||
|
label1: '摄像头数',
|
||||||
|
count1: 0
|
||||||
|
}
|
||||||
|
],
|
||||||
|
block2OptionsList: [
|
||||||
|
{
|
||||||
|
title: '矿石作业区',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
label: '进矿石作业区车辆数',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '出矿石作业区车辆数',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '矿石作业区场内车辆数',
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '杂货作业区',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
label: '进杂货作业区车辆数',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '出杂货作业区车辆数',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '杂货作业区场内车辆数',
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
block3OptionsList: ['矿石作业区', '杂货作业区'],
|
||||||
|
block3OptionsIndex: 0,
|
||||||
|
loading: false,
|
||||||
|
currentPage: 1,
|
||||||
|
count: 0,
|
||||||
|
totalPage: 0,
|
||||||
|
block3List: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
noMore() {
|
||||||
|
return this.currentPage >= this.totalPage
|
||||||
|
},
|
||||||
|
disabled() {
|
||||||
|
return this.loading || this.noMore
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getDoorManagement()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
load() {
|
||||||
|
this.loading = true
|
||||||
|
this.currentPage += 1
|
||||||
|
this.loadRecord(this.block3OptionsIndex)
|
||||||
|
},
|
||||||
|
loadRecord(index) {
|
||||||
|
this.getDoorWayRecords(index)
|
||||||
|
},
|
||||||
|
getDoorManagement() {
|
||||||
|
requestFN(
|
||||||
|
'/map/getDoorManagement',
|
||||||
|
{
|
||||||
|
CORPINFO_ID: this.corpInfoId,
|
||||||
|
GANGKOU: this.gangkou
|
||||||
|
}
|
||||||
|
).then((data) => {
|
||||||
|
this.block2OptionsList[0].list[0].count = data.czksCarToday.oreInAll
|
||||||
|
this.block2OptionsList[0].list[1].count = data.czksCarToday.oreOutAll
|
||||||
|
this.block2OptionsList[0].list[2].count = data.czksCarToday.oreInAll - data.czksCarToday.oreOutAll
|
||||||
|
this.block2OptionsList[1].list[0].count = data.czksCarToday.groceryInAll
|
||||||
|
this.block2OptionsList[1].list[1].count = data.czksCarToday.groceryOutAll
|
||||||
|
this.block2OptionsList[1].list[2].count = data.czksCarToday.groceryInAll - data.czksCarToday.groceryOutAll
|
||||||
|
})
|
||||||
|
},
|
||||||
|
block3OptionsClick(index) {
|
||||||
|
this.block3List = []
|
||||||
|
this.block3OptionsIndex = index
|
||||||
|
this.getDoorWayRecords(index)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.menjin {
|
||||||
|
.title {
|
||||||
|
background-image: url("../../../assets/map/menjin/title_on.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 113px;
|
||||||
|
height: 26px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-image: url("../../../assets/map/menjin/title.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
.circular {
|
||||||
|
margin-top: 5px;
|
||||||
|
background-image: url("../../../assets/map/menjin/img1.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 13px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 26px;
|
||||||
|
animation: scale 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 {
|
||||||
|
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 {
|
||||||
|
.items {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
flex-basis: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block3 {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 410px;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||||
|
|
||||||
|
.content {
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||||||
|
border-top: none;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-top: 5px;
|
||||||
|
.scroll {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(2, 30, 81, 0.851);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tr {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: rgba(42, 86, 158, 0.53);
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
flex-basis: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
flex: none;
|
||||||
|
flex-basis: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
color: #7ccf41;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.yellow {
|
||||||
|
color: #ffcb05;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line1 {
|
||||||
|
width: 150px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,429 @@
|
||||||
|
<template>
|
||||||
|
<div class="renyuan">
|
||||||
|
<div class="block1">
|
||||||
|
<layout-title title="定位基础信息"/>
|
||||||
|
<div class="options">
|
||||||
|
<div v-for="(item,index) in block1OptionsList" :key="index" class="option">
|
||||||
|
<div class="imger">
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="label">{{ item.title }}</div>
|
||||||
|
<div class="text"><count-to :start-val="0" :end-val="item.count" :duration="3600"/></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block2">
|
||||||
|
<layout-title title="定位状态数据"/>
|
||||||
|
<div class="options">
|
||||||
|
<div class="bg"/>
|
||||||
|
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
||||||
|
<div class="label">{{ item.alarmTypeName }}：</div>
|
||||||
|
<div class="info">
|
||||||
|
<span class="count"><count-to :start-val="0" :end-val="item.alarmCount" :duration="3600"/></span>
|
||||||
|
<span class="company">条</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block3">
|
||||||
|
<layout-title title="定位标签状态"/>
|
||||||
|
<div class="content">
|
||||||
|
<div class="options">
|
||||||
|
<div
|
||||||
|
v-for="(item,index) in block3OptionsList"
|
||||||
|
:key="index"
|
||||||
|
:class="['title', {active:index === block3OptionsIndex}]"
|
||||||
|
@click="block3OptionsClick(index)"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="tr">
|
||||||
|
<div class="td">卡号</div>
|
||||||
|
<div class="td">姓名</div>
|
||||||
|
<div class="td">状态</div>
|
||||||
|
</div>
|
||||||
|
<div v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="scroll">
|
||||||
|
<div v-for="(item,index) in block3List" :key="index" class="tr">
|
||||||
|
<div class="td">{{ item.cardId }}</div>
|
||||||
|
<div class="td">{{ item.realName }}</div>
|
||||||
|
<div class="td">{{ item.online?'在线':'离线' }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="loading" class="tr">
|
||||||
|
<div class="td">加载中...</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: {
|
||||||
|
CountTo,
|
||||||
|
layoutTitle
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
block1OptionsList: [
|
||||||
|
{
|
||||||
|
title: '在线员工',
|
||||||
|
img: require('../../../assets/map/renyuan/img1ico1.png'),
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '外协人员',
|
||||||
|
img: require('../../../assets/map/renyuan/img1ico4.png'),
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '内部人员',
|
||||||
|
img: require('../../../assets/map/renyuan/img1ico3.png'),
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
// ,
|
||||||
|
// {
|
||||||
|
// title: '在线车辆',
|
||||||
|
// img: require('../../../assets/map/renyuan/img1ico2.png'),
|
||||||
|
// count: 0
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '临时人员',
|
||||||
|
// img: require('../../../assets/map/renyuan/img1ico5.png'),
|
||||||
|
// count: 0
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
block2OptionsList: [
|
||||||
|
{
|
||||||
|
title: '电子围栏告警',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '静超时告警',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '超员/缺员告警',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '离岗告警',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '车辆超速告警',
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SOS求救',
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
],
|
||||||
|
block3OptionsList: ['相关方员工', '普通员工'],
|
||||||
|
block3OptionsIndex: 0,
|
||||||
|
currentPage: 1,
|
||||||
|
loading: false,
|
||||||
|
count: 0,
|
||||||
|
totalPage: 0,
|
||||||
|
block3List: [],
|
||||||
|
block4List: [],
|
||||||
|
timer: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
noMore() {
|
||||||
|
return this.currentPage >= this.totalPage
|
||||||
|
},
|
||||||
|
disabled() {
|
||||||
|
return this.loading || this.noMore
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getCzksBasicLocationInfoData()
|
||||||
|
this.getAlarmNum()
|
||||||
|
this.getCzksPersonStaffListPage()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
load() {
|
||||||
|
this.loading = true
|
||||||
|
this.currentPage += 1
|
||||||
|
this.getCzksPersonStaffListPage()
|
||||||
|
},
|
||||||
|
// 定时五分钟执行一次
|
||||||
|
// startPersonnelDataTimer() {
|
||||||
|
// this.timer = setInterval(() => {
|
||||||
|
// this.obtainPersonnelData()
|
||||||
|
// this.personPositioningStatistics()
|
||||||
|
// }, 300000)
|
||||||
|
// },
|
||||||
|
// 告警
|
||||||
|
getAlarmNum() {
|
||||||
|
requestFN(
|
||||||
|
'/czks/map/getAlarmData',
|
||||||
|
{}
|
||||||
|
).then((data) => {
|
||||||
|
this.block2OptionsList = data.data
|
||||||
|
}).catch((e) => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCzksBasicLocationInfoData() {
|
||||||
|
requestFN(
|
||||||
|
'/czks/map/getCzksBasicLocationInfoData',
|
||||||
|
{}
|
||||||
|
).then((data) => {
|
||||||
|
let baseData = []
|
||||||
|
baseData = data.data
|
||||||
|
for (let i = 0; i < baseData.length; i++) {
|
||||||
|
this.block1OptionsList[i].title = baseData[i].personTypeName
|
||||||
|
this.block1OptionsList[i].count = baseData[i].personCount
|
||||||
|
}
|
||||||
|
}).catch((e) => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCzksPersonStaffListPage() {
|
||||||
|
requestFN(
|
||||||
|
'/czks/map/personStaffList',
|
||||||
|
{
|
||||||
|
pageNum: this.currentPage,
|
||||||
|
type: this.block3OptionsIndex,
|
||||||
|
pageSize: 20
|
||||||
|
}
|
||||||
|
).then((data) => {
|
||||||
|
this.block3List = this.block3List.concat(data.data)
|
||||||
|
this.totalPage = data.total
|
||||||
|
this.loading = false
|
||||||
|
}).catch((e) => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
block3OptionsClick(index) {
|
||||||
|
this.currentPage = 1
|
||||||
|
this.block3List = []
|
||||||
|
this.block3OptionsIndex = index
|
||||||
|
this.getCzksPersonStaffListPage()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.renyuan {
|
||||||
|
.title {
|
||||||
|
background-image: url("../../../assets/map/menjin/title_on.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 113px;
|
||||||
|
height: 26px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-image: url("../../../assets/map/menjin/title.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block1 {
|
||||||
|
width: 410px;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||||
|
|
||||||
|
.options {
|
||||||
|
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;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.option {
|
||||||
|
display: flex;
|
||||||
|
width: 50%;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
&:nth-child(-n+2) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imger {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-image: url("../../../assets/map/menjin/img1.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
animation: scale 2s infinite;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 24px;
|
||||||
|
background: linear-gradient(to top, #48bbf0, #ffffff);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block2 {
|
||||||
|
width: 410px;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.options {
|
||||||
|
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;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
height: 244px;
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
background-image: url("../../../assets/map/renyuan/img2.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 287px;
|
||||||
|
height: 244px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option {
|
||||||
|
flex-basis: 35%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
.count {
|
||||||
|
font-size: 24px;
|
||||||
|
background: linear-gradient(to top, #48bbf0, #ffffff);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block3 {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 400px;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||||
|
|
||||||
|
.content {
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||||||
|
border-top: none;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-top: 5px;
|
||||||
|
.scroll {
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(2, 30, 81, 0.851);
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tr {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: rgba(42, 86, 158, 0.53);
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<zhong_da_info v-if="type === 'majordangersource'" :id="id" :type="type" :gangkou="gangkou"/>
|
<zhong_da_info v-if="type === 'majordangersource'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||||
<video-play v-if="type === 'video'" :id="id" :type="type" :gangkou="gangkou" request-url="/api/homemajor/getVideoInfo"/>
|
<video-play v-if="type === 'video'" :id="id" :type="type" :gangkou="gangkou" request-url="/api/homemajor/getVideoInfo"/>
|
||||||
<video-play-cfd v-if="type === 'CAMERA00004' || type === 'platcamera00004'" :id="id" :type="type" :gangkou="gangkou"/>
|
<video-play-cfd v-if="type === 'CAMERA00004' || type === 'platcamera00004'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||||
<video-play-plat v-if="type === 'platcamera'" :id="id" :type="type" :gangkou="gangkou"/>
|
<video-play-plat v-if="type === 'platcamera'" :id="id" :type="type" :gangkou="gangkou" :corp-info-id="corpInfoId"/>
|
||||||
<!--秦港一公司 边界入侵 详细页面 start-->
|
<!--秦港一公司 边界入侵 详细页面 start-->
|
||||||
<video-play-bianjieruqin v-if="type === 'bianjieruqin'" :id="id" :type="type" :gangkou="gangkou"/>
|
<video-play-bianjieruqin v-if="type === 'bianjieruqin'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||||
<!--秦港一公司 边界入侵 详细页面 end-->
|
<!--秦港一公司 边界入侵 详细页面 end-->
|
||||||
|
|
@ -129,7 +129,6 @@ export default {
|
||||||
videoPlayBianjieruqin,
|
videoPlayBianjieruqin,
|
||||||
peoplePositionOne,
|
peoplePositionOne,
|
||||||
hotworkFirst,
|
hotworkFirst,
|
||||||
peoplePositionOne,
|
|
||||||
peoplePositionYGS,
|
peoplePositionYGS,
|
||||||
outSourceInfo,
|
outSourceInfo,
|
||||||
outSourceVideoInfo
|
outSourceVideoInfo
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,10 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
corpInfoId: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
requestUrl: {
|
requestUrl: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '/platformvideomanagement/getHlsPathById'
|
default: '/platformvideomanagement/getHlsPathById'
|
||||||
|
|
@ -80,18 +84,31 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
showVideo() {
|
showVideo() {
|
||||||
|
let url = this.requestUrl
|
||||||
|
console.log(this.corpInfoId)
|
||||||
|
console.log(this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284')
|
||||||
|
if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
|
||||||
|
url = '/czks/map/getCameraHlsPath'
|
||||||
|
}
|
||||||
requestFN(
|
requestFN(
|
||||||
this.requestUrl,
|
url,
|
||||||
{
|
{
|
||||||
PLATFORMVIDEOMANAGEMENT_ID: this.id
|
PLATFORMVIDEOMANAGEMENT_ID: this.id,
|
||||||
|
CORPINFO_ID: this.corpInfoId
|
||||||
}
|
}
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
this.info = res.pd
|
this.info = res.pd
|
||||||
|
let hlsPath = ''
|
||||||
|
if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
|
||||||
|
hlsPath = res.hlsPath
|
||||||
|
} else {
|
||||||
|
hlsPath = res.data.url
|
||||||
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
this.player = new Aliplayer({
|
this.player = new Aliplayer({
|
||||||
'id': 'aLiVideoPlayer',
|
'id': 'aLiVideoPlayer',
|
||||||
'source': res.data.url,
|
'source': hlsPath,
|
||||||
'width': '100%',
|
'width': '100%',
|
||||||
'height': '380px',
|
'height': '380px',
|
||||||
'autoplay': true,
|
'autoplay': true,
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
<info v-if="!gangkouActive"/>
|
<info v-if="!gangkouActive"/>
|
||||||
<gangkou-index v-if="gangkouActive === '00003' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && !CORP_INFO_ID" :area="area"/>
|
<gangkou-index v-if="gangkouActive === '00003' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && !CORP_INFO_ID" :area="area"/>
|
||||||
<fengongsi-index
|
<fengongsi-index
|
||||||
v-if="gangkouActive && gangkouActive !== '00004' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && CORP_INFO_ID"
|
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && CORP_INFO_ID"
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:gangkou="gangkouActive"
|
:gangkou="gangkouActive"
|
||||||
/>
|
/>
|
||||||
|
|
@ -34,8 +34,12 @@
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:gangkou="gangkouActive"
|
:gangkou="gangkouActive"
|
||||||
/>
|
/>
|
||||||
|
<czksIndex
|
||||||
|
v-if="gangkouActive && gangkouActive === '00002' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && CORP_INFO_ID"
|
||||||
|
:corp-info-id="CORP_INFO_ID"
|
||||||
|
:gangkou="gangkouActive"/>
|
||||||
<menjin
|
<menjin
|
||||||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 0"
|
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 0"
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
|
|
@ -44,6 +48,16 @@
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
|
<menjin-czks
|
||||||
|
v-if="gangkouActive && gangkouActive === '00002' && bottomOptionsIndex === 0"
|
||||||
|
:corp-info-id="CORP_INFO_ID"
|
||||||
|
:area="area"
|
||||||
|
:gangkou="gangkouActive"/>
|
||||||
|
<zhongdian
|
||||||
|
v-if="gangkouActive && gangkouActive === '00002' && bottomOptionsIndex === 6"
|
||||||
|
:corp-info-id="CORP_INFO_ID"
|
||||||
|
:area="area"
|
||||||
|
:gangkou="gangkouActive"/>
|
||||||
<xiaofang
|
<xiaofang
|
||||||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 1"
|
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 1"
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
|
|
@ -65,7 +79,7 @@
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
<renyuan
|
<renyuan
|
||||||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 4"
|
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 4"
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
|
|
@ -74,8 +88,13 @@
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
|
<renyuanCzks
|
||||||
|
v-if="gangkouActive && gangkouActive === '00002' && bottomOptionsIndex === 4"
|
||||||
|
:corp-info-id="CORP_INFO_ID"
|
||||||
|
:area="area"
|
||||||
|
:gangkou="gangkouActive"/>
|
||||||
<bianjieruqin
|
<bianjieruqin
|
||||||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 6"
|
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 6"
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
|
|
@ -85,7 +104,7 @@
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
<zhongda
|
<zhongda
|
||||||
v-if="gangkouActive && bottomOptionsIndex === 8"
|
v-if="gangkouActive && bottomOptionsIndex === 8 && gangkouActive !== '00002'"
|
||||||
:corp-info-id="CORP_INFO_ID"
|
:corp-info-id="CORP_INFO_ID"
|
||||||
:area="area"
|
:area="area"
|
||||||
:gangkou="gangkouActive"/>
|
:gangkou="gangkouActive"/>
|
||||||
|
|
@ -217,6 +236,9 @@ import { requestFN } from '@/utils/request'
|
||||||
import gangkouIndex from './components/gangkou_index.vue'
|
import gangkouIndex from './components/gangkou_index.vue'
|
||||||
import fengongsiIndex from './components/fengongsi_index.vue'
|
import fengongsiIndex from './components/fengongsi_index.vue'
|
||||||
import caofeidianIndex from './components/caofeidian_index.vue'
|
import caofeidianIndex from './components/caofeidian_index.vue'
|
||||||
|
import czksIndex from './components/czks_index.vue'
|
||||||
|
import menjinCzks from './components/menjinCzks.vue'
|
||||||
|
import renyuanCzks from './components/renyuanCzks.vue'
|
||||||
import menjin from './components/menjin.vue'
|
import menjin from './components/menjin.vue'
|
||||||
import menjinCfd from './components/menjinCfd.vue'
|
import menjinCfd from './components/menjinCfd.vue'
|
||||||
import xiaofang from './components/xiaofang.vue'
|
import xiaofang from './components/xiaofang.vue'
|
||||||
|
|
@ -236,18 +258,17 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||||
import fullScreenMixins from '@/assets/mixins/fullScreen'
|
import fullScreenMixins from '@/assets/mixins/fullScreen'
|
||||||
import { animate } from 'motion'
|
import { animate } from 'motion'
|
||||||
import loadMapBoxCfd from './js/mapboxCfd'
|
import loadMapBoxCfd from './js/mapboxCfd'
|
||||||
|
import loadMapBoxCzks from './js/mapboxCzks'
|
||||||
import loadMapBox from './js/mapbox'
|
import loadMapBox from './js/mapbox'
|
||||||
import AnquanCfd from './components/anquanCfd'
|
import AnquanCfd from './components/anquanCfd'
|
||||||
import mqtt from 'mqtt'
|
import mqtt from 'mqtt'
|
||||||
import img4_0_1 from '../../assets/map/gangkou_index/point/icon27.png'
|
|
||||||
import img4_0_2 from '../../assets/map/gangkou_index/point/icon28.png'
|
|
||||||
import img4_0_3 from '../../assets/map/gangkou_index/point/icon29.png'
|
|
||||||
import img4_0 from '../../assets/map/gangkou_index/point/ico21.png'
|
|
||||||
let viewer = null
|
let viewer = null
|
||||||
let drag = null
|
let drag = null
|
||||||
let ry_drag = null
|
let ry_drag = null
|
||||||
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
|
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
|
||||||
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
||||||
|
// 沧州矿石人员定位数组
|
||||||
|
let czksPerLocArr = []
|
||||||
const Cesium = window.Cesium
|
const Cesium = window.Cesium
|
||||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
|
||||||
// ys使用
|
// ys使用
|
||||||
|
|
@ -261,6 +282,9 @@ const iframeObj = null
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
AnquanCfd,
|
AnquanCfd,
|
||||||
|
czksIndex,
|
||||||
|
menjinCzks,
|
||||||
|
renyuanCzks,
|
||||||
// navigation,
|
// navigation,
|
||||||
gangkouIndex,
|
gangkouIndex,
|
||||||
fengongsiIndex,
|
fengongsiIndex,
|
||||||
|
|
@ -282,6 +306,8 @@ export default {
|
||||||
mixins: [fullScreenMixins],
|
mixins: [fullScreenMixins],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 沧州矿石
|
||||||
|
czkswebsocket: {},
|
||||||
initCenter: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
initCenter: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||||||
parentCenter: {},
|
parentCenter: {},
|
||||||
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||||||
|
|
@ -289,8 +315,8 @@ export default {
|
||||||
{
|
{
|
||||||
'id': '00002',
|
'id': '00002',
|
||||||
'data_id': '00002',
|
'data_id': '00002',
|
||||||
'MAP_POINT_NAME': '沧州矿石港务',
|
'MAP_POINT_NAME': '沧州黄骅港矿石港务有限公司',
|
||||||
'name': '沧州矿石港务',
|
'name': '沧州黄骅港矿石港务有限公司',
|
||||||
'point_type': '港口',
|
'point_type': '港口',
|
||||||
'type': '港口',
|
'type': '港口',
|
||||||
'descr': '公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。',
|
'descr': '公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。',
|
||||||
|
|
@ -298,7 +324,6 @@ export default {
|
||||||
'x': 117.91412,
|
'x': 117.91412,
|
||||||
'y': 38.35902
|
'y': 38.35902
|
||||||
},
|
},
|
||||||
// CORP_INFO_ID: '016d19225e9d4ece863cce8a256a3e72'
|
|
||||||
CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
|
CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -385,6 +410,7 @@ export default {
|
||||||
myEntityCollection: {},
|
myEntityCollection: {},
|
||||||
poinEntity: {},
|
poinEntity: {},
|
||||||
mqttPoint: {},
|
mqttPoint: {},
|
||||||
|
allOrientationPoint: [],
|
||||||
gangkouActive: '',
|
gangkouActive: '',
|
||||||
centerOptionsList: [
|
centerOptionsList: [
|
||||||
{ label: '秦皇岛西', AREA: '2' },
|
{ label: '秦皇岛西', AREA: '2' },
|
||||||
|
|
@ -819,6 +845,7 @@ export default {
|
||||||
carLocArr: [],
|
carLocArr: [],
|
||||||
pointBoxCfd: [],
|
pointBoxCfd: [],
|
||||||
pointBox: [],
|
pointBox: [],
|
||||||
|
pointBoxCzks: [],
|
||||||
fwebsocket: {},
|
fwebsocket: {},
|
||||||
redList: [],
|
redList: [],
|
||||||
orangeList: [],
|
orangeList: [],
|
||||||
|
|
@ -1097,6 +1124,7 @@ export default {
|
||||||
this.initMap()
|
this.initMap()
|
||||||
this.pointBoxCfd = loadMapBoxCfd()
|
this.pointBoxCfd = loadMapBoxCfd()
|
||||||
this.pointBox = loadMapBox()
|
this.pointBox = loadMapBox()
|
||||||
|
this.pointBoxCzks = loadMapBoxCzks()
|
||||||
this.ysVideoInit()
|
this.ysVideoInit()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -1871,6 +1899,16 @@ export default {
|
||||||
|
|
||||||
bottomOptionsItemsClick(pindex, index, label, urlType, pointUrl, dialog_width) {
|
bottomOptionsItemsClick(pindex, index, label, urlType, pointUrl, dialog_width) {
|
||||||
if (this.bottomOptionsList[pindex].list[index].check || this.gangkouActive === '00004' && this.cfdBottomOptionsList[pindex].list[index].check) {
|
if (this.bottomOptionsList[pindex].list[index].check || this.gangkouActive === '00004' && this.cfdBottomOptionsList[pindex].list[index].check) {
|
||||||
|
// 取消选中
|
||||||
|
// 沧州矿石人员定位关闭
|
||||||
|
if (this.gangkouActive === '00002' && urlType === 'peoplePosition') {
|
||||||
|
if (this.czkswebsocket && this.czkswebsocket.url) {
|
||||||
|
this.czkswebsocket.close()
|
||||||
|
this.czkswebsocket = {}
|
||||||
|
czksPerLocArr = []
|
||||||
|
this.clearMqttPoint('czksperson')
|
||||||
|
}
|
||||||
|
}
|
||||||
// 人员定位关闭实时获取定位websocket 并关闭人员对比定时器（曹妃甸使用）
|
// 人员定位关闭实时获取定位websocket 并关闭人员对比定时器（曹妃甸使用）
|
||||||
if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
|
if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
|
||||||
// if (this.fwebsocket) {
|
// if (this.fwebsocket) {
|
||||||
|
|
@ -1907,12 +1945,16 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
// 选中
|
||||||
this.bottomOptionsList[pindex].list[index].check = true
|
this.bottomOptionsList[pindex].list[index].check = true
|
||||||
if (this.gangkouActive === '00004') {
|
if (this.gangkouActive === '00004') {
|
||||||
this.cfdBottomOptionsList[pindex].list[index].check = true
|
this.cfdBottomOptionsList[pindex].list[index].check = true
|
||||||
this.bottomOptionsList[pindex].list[index].check = false
|
this.bottomOptionsList[pindex].list[index].check = false
|
||||||
}
|
}
|
||||||
|
if (this.gangkouActive === '00002' && urlType === 'peoplePosition') {
|
||||||
|
this.czksPeoplePosition()
|
||||||
|
return
|
||||||
|
}
|
||||||
if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
|
if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
|
||||||
!this.connecting ? this.createConnection(this.CORP_INFO_ID) : this.doSubscribe()
|
!this.connecting ? this.createConnection(this.CORP_INFO_ID) : this.doSubscribe()
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -2188,6 +2230,81 @@ export default {
|
||||||
this.connecting = false
|
this.connecting = false
|
||||||
this.subscribeSuccess = false
|
this.subscribeSuccess = false
|
||||||
},
|
},
|
||||||
|
// 沧州矿石人员定位
|
||||||
|
czksPeoplePosition() {
|
||||||
|
const _this = this
|
||||||
|
if (window.WebSocket) {
|
||||||
|
// 线上
|
||||||
|
// const wsUrl = 'ws://172.16.130.86/gateway-service/websocket/ws'
|
||||||
|
// 测试
|
||||||
|
const wsUrl = 'ws://221.195.199.13:7811/ws'
|
||||||
|
this.czkswebsocket = new WebSocket(encodeURI(wsUrl + '/XR_' + new Date().getTime() + '_98')) // oladress在main.jsp页面定义
|
||||||
|
console.info(wsUrl + '/XR_' + new Date().getTime() + '_98')
|
||||||
|
this.czkswebsocket.onopen = () => {
|
||||||
|
setInterval(() => {
|
||||||
|
if (this.czkswebsocket.readyState === 1) {
|
||||||
|
this.czkswebsocket.send('ok')
|
||||||
|
}
|
||||||
|
}, 10000)
|
||||||
|
this.czkswebsocket.send('ok')
|
||||||
|
// console.info(this.fwebsocket.readyState + '-----------------------------')
|
||||||
|
console.info('链接成功')
|
||||||
|
}
|
||||||
|
this.czkswebsocket.onerror = function() {
|
||||||
|
console.info('连接失败')
|
||||||
|
// 连接失败
|
||||||
|
}
|
||||||
|
this.czkswebsocket.onclose = function() {
|
||||||
|
console.info('onclose')
|
||||||
|
}
|
||||||
|
this.czkswebsocket.onmessage = function(message) {
|
||||||
|
console.info('沧州矿石人员定位接收消息')
|
||||||
|
const mockData = JSON.parse(message.data)
|
||||||
|
if (mockData.msgType === 'currentPersonLocation') {
|
||||||
|
// 将地图上的点与最新的定位人员点进行对比 删除地图上多的点
|
||||||
|
const czksPerLoc = czksPerLocArr.filter(item => {
|
||||||
|
const index = mockData.data.findIndex(item1 => {
|
||||||
|
return item.id.toString() === item1.cardId.toString()
|
||||||
|
})
|
||||||
|
return index !== -1
|
||||||
|
})
|
||||||
|
// 将地图上剩余的点与最新的定位人员点进行对比 更新地图上已存在的点 新增地图上之前没有的点
|
||||||
|
for (const item of mockData.data) {
|
||||||
|
const index = czksPerLoc.findIndex(item1 => {
|
||||||
|
return item1.id.toString() === item.cardId.toString()
|
||||||
|
})
|
||||||
|
_this.isPointWithinTheArea(_this.pointBox, { x: item.longitude, y: item.latitude })
|
||||||
|
if (index !== -1) {
|
||||||
|
czksPerLoc[index].x = item.longitude
|
||||||
|
czksPerLoc[index].y = item.latitude
|
||||||
|
czksPerLoc[index].icon_type = 'img4_0_2'
|
||||||
|
ry_drag.getPosition(czksPerLoc[index])
|
||||||
|
} else {
|
||||||
|
const perLoc = {
|
||||||
|
id: item.cardId,
|
||||||
|
name: item.realName,
|
||||||
|
idNumber: item.idNumber,
|
||||||
|
x: item.longitude,
|
||||||
|
y: item.latitude,
|
||||||
|
icon_type: 'img4_0_1',
|
||||||
|
infoname: item.realName,
|
||||||
|
personPhoto: item.personPhoto,
|
||||||
|
data_id: item.cardId + '',
|
||||||
|
point_type: 'peoplePositionCzks',
|
||||||
|
label: item.realName
|
||||||
|
}
|
||||||
|
czksPerLoc.push(perLoc)
|
||||||
|
ry_drag.addEntity(perLoc)
|
||||||
|
var qianzhui = 'czksperson'
|
||||||
|
_this.mqttPoint[qianzhui + item.cardId] = item.cardId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 最后更新ninePerLocArr
|
||||||
|
czksPerLocArr = czksPerLoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
// 创建连接
|
// 创建连接
|
||||||
createConnection(CORP_INFO_ID) {
|
createConnection(CORP_INFO_ID) {
|
||||||
try {
|
try {
|
||||||
|
|
|
||||||
|
|
@ -68,9 +68,11 @@ export { imgMap }
|
||||||
import './PolylineTrailLinkMaterialProperty'
|
import './PolylineTrailLinkMaterialProperty'
|
||||||
import loadMapBox from './mapbox'
|
import loadMapBox from './mapbox'
|
||||||
import loadMapBoxCfd from './mapboxCfd'
|
import loadMapBoxCfd from './mapboxCfd'
|
||||||
|
import loadMapBoxCzks from './mapboxCzks'
|
||||||
|
|
||||||
const polygonMap = {
|
const polygonMap = {
|
||||||
'00003': loadMapBox,
|
'00003': loadMapBox,
|
||||||
|
'00002': loadMapBoxCzks,
|
||||||
'00004': loadMapBoxCfd
|
'00004': loadMapBoxCfd
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,7 @@
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
const config = {
|
const config = {
|
||||||
weburl: 'http://192.168.0.45:8082/', // 前台地址
|
weburl: 'http://192.168.0.45:8082/', // 前台地址
|
||||||
httpurl: 'http://192.168.151.56:8092/', // 后台地址
|
httpurl: 'http://192.168.0.79:8092/', // 后台地址
|
||||||
qyurl: 'http://192.168.0.45:8080/', // 企业前台
|
qyurl: 'http://192.168.0.45:8080/', // 企业前台
|
||||||
fileUrl: 'http://192.168.192.201:8991/file/', // 附件服务器地址
|
fileUrl: 'http://192.168.192.201:8991/file/', // 附件服务器地址
|
||||||
publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC2zCyUYSD0pNrbtaYdvGfHfWoRV+fo/2N9O2PLLz/jZvMkigkq4eAq4JO+Ek0wDHI9WxP6iTSLYCHhIOs9CQTPvyldJFm8riZtQZlBTD8Plkb3rjrgwTqbBi3w3+HKYdkSvGFXJIdSOPbpXnj5BzN8vlVaybs24R/vpUzG9178lwIDAQAB',
|
publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC2zCyUYSD0pNrbtaYdvGfHfWoRV+fo/2N9O2PLLz/jZvMkigkq4eAq4JO+Ek0wDHI9WxP6iTSLYCHhIOs9CQTPvyldJFm8riZtQZlBTD8Plkb3rjrgwTqbBi3w3+HKYdkSvGFXJIdSOPbpXnj5BzN8vlVaybs24R/vpUzG9178lwIDAQAB',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue