guoyuepeng
/
qa-regulatory-gwj-vue
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

沧州矿石地图展示

2024年1月19日V01.00.51
dearlin 2024-01-17 15:47:21 +08:00
parent 6dbdc96268
commit 34bb3bce3c
11 changed files with 4102 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -24,6 +24,7 @@
"js-cookie": "^2.2.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"moment": "^2.29.3",
"motion": "^10.16.4",
"mqtt": "^4.2.1",

2
src/views/map/components/caofeidian_index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="fensongsi_index">
<div class="block2">
<layout-title title="风险辨识管控"/>
<layout-title title="cfd风险辨识管控"/>
<div class="options">
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
<img :src="item.img" class="img_top" alt="">

587
src/views/map/components/czks_index.vue Normal file
View File

@ -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>

424
src/views/map/components/menjinCzks.vue Normal file
View File

@ -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>

429
src/views/map/components/renyuanCzks.vue Normal file
View File

@ -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>

3
src/views/map/dialog/index.vue
View File

@ -14,7 +14,7 @@
<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-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-->
<video-play-bianjieruqin v-if="type === 'bianjieruqin'" :id="id" :type="type" :gangkou="gangkou"/>
<!--秦港一公司 边界入侵 详细页面 end-->
@ -129,7 +129,6 @@ export default {
videoPlayBianjieruqin,
peoplePositionOne,
hotworkFirst,
peoplePositionOne,
peoplePositionYGS,
outSourceInfo,
outSourceVideoInfo

23
src/views/map/dialog/video_play_plat.vue
View File

@ -37,6 +37,10 @@ export default {
type: String,
default: ''
},
corpInfoId: {
type: String,
default: ''
},
requestUrl: {
type: String,
default: '/platformvideomanagement/getHlsPathById'
@ -80,18 +84,31 @@ export default {
})
},
showVideo() {
let url = this.requestUrl
console.log(this.corpInfoId)
console.log(this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284')
if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
url = '/czks/map/getCameraHlsPath'
}
requestFN(
this.requestUrl,
url,
{
PLATFORMVIDEOMANAGEMENT_ID: this.id
PLATFORMVIDEOMANAGEMENT_ID: this.id,
CORPINFO_ID: this.corpInfoId
}
).then((res) => {
this.info = res.pd
let hlsPath = ''
if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
hlsPath = res.hlsPath
} else {
hlsPath = res.data.url
}
this.$nextTick(() => {
// eslint-disable-next-line no-undef
this.player = new Aliplayer({
'id': 'aLiVideoPlayer',
'source': res.data.url,
'source': hlsPath,
'width': '100%',
'height': '380px',
'autoplay': true,

143
src/views/map/index.vue
View File

@ -25,7 +25,7 @@
<info v-if="!gangkouActive"/>
<gangkou-index v-if="gangkouActive === '00003' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && !CORP_INFO_ID" :area="area"/>
<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"
:gangkou="gangkouActive"
/>
@ -34,8 +34,12 @@
:corp-info-id="CORP_INFO_ID"
:gangkou="gangkouActive"
/>
<czksIndex
v-if="gangkouActive && gangkouActive === '00002' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && CORP_INFO_ID"
:corp-info-id="CORP_INFO_ID"
:gangkou="gangkouActive"/>
<menjin
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 0"
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 0"
:corp-info-id="CORP_INFO_ID"
:area="area"
:gangkou="gangkouActive"/>
@ -44,6 +48,16 @@
:corp-info-id="CORP_INFO_ID"
:area="area"
: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
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 1"
:corp-info-id="CORP_INFO_ID"
@ -65,7 +79,7 @@
:area="area"
:gangkou="gangkouActive"/>
<renyuan
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 4"
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 4"
:corp-info-id="CORP_INFO_ID"
:area="area"
:gangkou="gangkouActive"/>
@ -74,8 +88,13 @@
:corp-info-id="CORP_INFO_ID"
:area="area"
:gangkou="gangkouActive"/>
<renyuanCzks
v-if="gangkouActive && gangkouActive === '00002' && bottomOptionsIndex === 4"
:corp-info-id="CORP_INFO_ID"
:area="area"
:gangkou="gangkouActive"/>
<bianjieruqin
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 6"
v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 6"
:corp-info-id="CORP_INFO_ID"
:area="area"
:gangkou="gangkouActive"/>
@ -85,7 +104,7 @@
:area="area"
:gangkou="gangkouActive"/>
<zhongda
v-if="gangkouActive && bottomOptionsIndex === 8"
v-if="gangkouActive && bottomOptionsIndex === 8 && gangkouActive !== '00002'"
:corp-info-id="CORP_INFO_ID"
:area="area"
:gangkou="gangkouActive"/>
@ -217,6 +236,9 @@ import { requestFN } from '@/utils/request'
import gangkouIndex from './components/gangkou_index.vue'
import fengongsiIndex from './components/fengongsi_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 menjinCfd from './components/menjinCfd.vue'
import xiaofang from './components/xiaofang.vue'
@ -236,18 +258,17 @@ import cloneDeep from 'lodash/cloneDeep'
import fullScreenMixins from '@/assets/mixins/fullScreen'
import { animate } from 'motion'
import loadMapBoxCfd from './js/mapboxCfd'
import loadMapBoxCzks from './js/mapboxCzks'
import loadMapBox from './js/mapbox'
import AnquanCfd from './components/anquanCfd'
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 drag = null
let ry_drag = null
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
// 沧州矿石人员定位数组
let czksPerLocArr = []
const Cesium = window.Cesium
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
// ys使用
@ -261,6 +282,9 @@ const iframeObj = null
export default {
components: {
AnquanCfd,
czksIndex,
menjinCzks,
renyuanCzks,
// navigation,
gangkouIndex,
fengongsiIndex,
@ -282,6 +306,8 @@ export default {
mixins: [fullScreenMixins],
data() {
return {
// 沧州矿石
czkswebsocket: {},
initCenter: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
parentCenter: {},
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
@ -289,8 +315,8 @@ export default {
{
'id': '00002',
'data_id': '00002',
'MAP_POINT_NAME': '沧州矿石港务',
'name': '沧州矿石港务',
'MAP_POINT_NAME': '沧州黄骅港矿石港务有限公司',
'name': '沧州黄骅港矿石港务有限公司',
'point_type': '港口',
'type': '港口',
'descr': '公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。',
@ -298,7 +324,6 @@ export default {
'x': 117.91412,
'y': 38.35902
},
// CORP_INFO_ID: '016d19225e9d4ece863cce8a256a3e72'
CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
},
{
@ -385,6 +410,7 @@ export default {
myEntityCollection: {},
poinEntity: {},
mqttPoint: {},
allOrientationPoint: [],
gangkouActive: '',
centerOptionsList: [
{ label: '秦皇岛西', AREA: '2' },
@ -819,6 +845,7 @@ export default {
carLocArr: [],
pointBoxCfd: [],
pointBox: [],
pointBoxCzks: [],
fwebsocket: {},
redList: [],
orangeList: [],
@ -1097,6 +1124,7 @@ export default {
this.initMap()
this.pointBoxCfd = loadMapBoxCfd()
this.pointBox = loadMapBox()
this.pointBoxCzks = loadMapBoxCzks()
this.ysVideoInit()
},
methods: {
@ -1871,6 +1899,16 @@ export default {
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.gangkouActive === '00002' && urlType === 'peoplePosition') {
if (this.czkswebsocket && this.czkswebsocket.url) {
this.czkswebsocket.close()
this.czkswebsocket = {}
czksPerLocArr = []
this.clearMqttPoint('czksperson')
}
}
// 人员定位关闭实时获取定位websocket 并关闭人员对比定时器（曹妃甸使用）
if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
// if (this.fwebsocket) {
@ -1907,12 +1945,16 @@ export default {
}
})
} else {
// 选中
this.bottomOptionsList[pindex].list[index].check = true
if (this.gangkouActive === '00004') {
this.cfdBottomOptionsList[pindex].list[index].check = true
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') {
!this.connecting ? this.createConnection(this.CORP_INFO_ID) : this.doSubscribe()
} else {
@ -2188,6 +2230,81 @@ export default {
this.connecting = 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) {
try {

2
src/views/map/js/dragentity.js
View File

@ -68,9 +68,11 @@ export { imgMap }
import './PolylineTrailLinkMaterialProperty'
import loadMapBox from './mapbox'
import loadMapBoxCfd from './mapboxCfd'
import loadMapBoxCzks from './mapboxCzks'
const polygonMap = {
'00003': loadMapBox,
'00002': loadMapBoxCzks,
'00004': loadMapBoxCfd
}

2505
src/views/map/js/mapboxCzks.js Normal file
View File

File diff suppressed because it is too large Load Diff

3
static/config.js
View File

@ -1,6 +1,7 @@
// eslint-disable-next-line no-unused-vars
const config = {
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/', // 企业前台
fileUrl: 'http://192.168.192.201:8991/file/', // 附件服务器地址
publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC2zCyUYSD0pNrbtaYdvGfHfWoRV+fo/2N9O2PLLz/jZvMkigkq4eAq4JO+Ek0wDHI9WxP6iTSLYCHhIOs9CQTPvyldJFm8riZtQZlBTD8Plkb3rjrgwTqbBi3w3+HKYdkSvGFXJIdSOPbpXnj5BzN8vlVaybs24R/vpUzG9178lwIDAQAB',