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

地图/门口门禁

liujun-2024-06-13-一公司人员定位新需求^2
1261008090@qq.com 2024-06-25 10:21:35 +08:00
parent 0d6b60b245
commit 1acf73d2cd
7 changed files with 727 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/map/gangkou_index/buttom/ico29.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/map/gangkou_index/buttom/ico29_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/map/menjin/img3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/map/menjin/img4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

323
src/views/map/components/menjin.vue
View File

@ -4,38 +4,23 @@
<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">
<div class="img">
<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 class="info">
<div>{{ item.label1 }}：{{ item.count1 }}</div>
<div>{{ item.label2 }}：{{ item.count2 }}</div>
<div>{{ item.label3 }}：{{ item.count3 }}</div>
</div>
</div>
</div>
</div>
<!-- <div class="block2">
<layout-title title="口门区域"/>
<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.title }}：</div>
<div class="info">
<span class="count"><count-to :start-val="0" :end-val="+item.count" :duration="3600"/></span>
<span class="company">{{ item.company }}</span>
</div>
</div>
<div id="main1"/>
</div>
</div> -->
</div>
<div class="block3">
<layout-title title="口门进出记录"/>
<div class="content">
@ -56,8 +41,6 @@
<div class="td">时间</div>
<div class="td">状态</div>
<div class="td">闸机名称</div>
<!--<div v-if="block3OptionsIndex == 0" class="td">闸机名称</div>
<div v-if="block3OptionsIndex == 1" 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">
@ -90,7 +73,9 @@
import layoutTitle from './title.vue'
import CountTo from 'vue-count-to'
import { requestFN } from '@/utils/request'
import * as echarts from 'echarts'
let Echarts1
export default {
components: {
layoutTitle,
@ -114,62 +99,22 @@ export default {
return {
block1OptionsList: [
{
title: '人员闸机',
img: require('../../../assets/map/menjin/ico1.png'),
label1: '今日进数',
img: require('../../../assets/map/menjin/img3.png'),
label1: '口门数',
count1: 0,
label2: '今日出数',
label2: '车门数',
count2: 0,
label3: '今日剩余人数',
label3: '人门数',
count3: 0
},
{
title: '车辆闸机',
img: require('../../../assets/map/menjin/ico2.png'),
label1: '今日进数',
img: require('../../../assets/map/menjin/img4.png'),
label1: '口门数',
count1: 0,
label2: '今日出数',
label2: '车门数',
count2: 0,
label3: '今日剩余车数',
label3: '人门数',
count3: 0
},
{
title: '摄像头数',
img: require('../../../assets/map/menjin/ico3.png'),
label1: '摄像头数',
count1: 0
}
],
block2OptionsList: [
{
title: '临时人员',
count: '2365',
company: '条'
},
{
title: '超员警告',
count: '2365',
company: '条'
},
{
title: 'SOS求救',
count: '2365',
company: '条'
},
{
title: '离岗告警',
count: '2365',
company: '条'
},
{
title: '禁止超时',
count: '2365',
company: '条'
},
{
title: '车辆超速',
count: '2365',
company: '条'
}
],
block3OptionsList: ['人员闸机', '车辆闸机'],
@ -195,31 +140,145 @@ export default {
this.getMachineTodayInOutCount()
// this.getDoorManagement()
},
mounted() {
window.onresize = function() {
Echarts1 && Echarts1.resize()
}
this.initEcharts1()
},
beforeDestroy() {
Echarts1 = null
},
methods: {
initEcharts1(data) {
const XaxisData = ['1号门', '2号门', '3号门', '4号门']
const seriesData1 = [10, 20, 30, 40]
const seriesData2 = [10, 20, 30, 40]
Echarts1 = echarts.init(document.querySelector('#main1'))
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '5%',
top: '10%',
containLabel: true
},
legend: {
top: '0%',
right: '0%',
textStyle: {
color: '#fff',
fontSize: 14
},
itemWidth: 12,
itemHeight: 10
},
xAxis: {
type: 'category',
data: XaxisData,
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
textStyle: {
fontSize: 14
}
}
},
yAxis: {
type: 'value',
max: '150',
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#8c9493'
}
},
axisLabel: {
textStyle: {
fontSize: 14
}
}
},
series: [
{
name: '人员',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#00f0ff'
},
{
offset: 1,
color: '#0066ff'
}
],
false
)
}
},
data: seriesData1
},
{
name: '车辆',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#003cff'
},
{
offset: 1,
color: '#00ff9c'
}
],
false
)
}
},
data: seriesData2
}
]
}
Echarts1.setOption(option)
},
load() {
this.loading = true
this.currentPage += 1
this.loadRecord(this.block3OptionsIndex)
},
getOnlineGateMachine() {
requestFN(
'/map/getOnlineGateEquipment', {
AREA: this.area,
CORP_INFO_ID: this.corpInfoId,
GANGKOU: this.gangkou
}
).then((data) => {
this.block1OptionsList[0].count1 = data.pd.PERSON_IN
this.block1OptionsList[0].count2 = data.pd.PERSON_OUT
this.block1OptionsList[0].count3 = data.pd.PERSON_IN - data.pd.PERSON_OUT
this.block1OptionsList[1].count1 = data.pd.CAR_IN
this.block1OptionsList[1].count2 = data.pd.CAR_OUT
this.block1OptionsList[1].count3 = data.pd.CAR_IN - data.pd.CAR_OUT
this.block1OptionsList[2].count1 = data.pd.CAMERA
}).catch((e) => {
console.log(e)
})
},
getMachineTodayInOutCount() {
requestFN(
'/map/getMachineTodayInOutCount', {
@ -356,30 +415,22 @@ export default {
.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;
.img{
width: 81px;
height: 93px;
img{
width: 100%;
height: 100%;
}
}
.label {
margin-top: 5px;
font-size: 12px;
.info{
margin-left: 10px;
font-size: 14px;
color: #fff;
div{
margin-top: 5px;
}
}
}
}
@ -395,49 +446,9 @@ export default {
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/menjin/img2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 310px;
height: 264px;
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;
}
}
#main1{
width: 100%;
height: 300px;
}
}
}

546
src/views/map/components/menjin_old.vue Normal file
View File

@ -0,0 +1,546 @@
<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 class="bg"/>
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
<div class="label">{{ item.title }}：</div>
<div class="info">
<span class="count"><count-to :start-val="0" :end-val="+item.count" :duration="3600"/></span>
<span class="company">{{ item.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 v-if="block3OptionsIndex == 0" class="td">人员</div>
<div v-if="block3OptionsIndex == 1" class="td">车牌</div>
<div class="td">时间</div>
<div class="td">状态</div>
<div class="td">闸机名称</div>
<!--<div v-if="block3OptionsIndex == 0" class="td">闸机名称</div>
<div v-if="block3OptionsIndex == 1" 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 == '0' ? '进场' : '出场' }}
</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: '临时人员',
count: '2365',
company: '条'
},
{
title: '超员警告',
count: '2365',
company: '条'
},
{
title: 'SOS求救',
count: '2365',
company: '条'
},
{
title: '离岗告警',
count: '2365',
company: '条'
},
{
title: '禁止超时',
count: '2365',
company: '条'
},
{
title: '车辆超速',
count: '2365',
company: '条'
}
],
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.getDoorWayRecords(0)
this.getOnlineGateMachine()
this.getMachineTodayInOutCount()
// this.getDoorManagement()
},
methods: {
load() {
this.loading = true
this.currentPage += 1
this.loadRecord(this.block3OptionsIndex)
},
getOnlineGateMachine() {
requestFN(
'/map/getOnlineGateEquipment', {
AREA: this.area,
CORP_INFO_ID: this.corpInfoId,
GANGKOU: this.gangkou
}
).then((data) => {
this.block1OptionsList[0].count1 = data.pd.PERSON_IN
this.block1OptionsList[0].count2 = data.pd.PERSON_OUT
this.block1OptionsList[0].count3 = data.pd.PERSON_IN - data.pd.PERSON_OUT
this.block1OptionsList[1].count1 = data.pd.CAR_IN
this.block1OptionsList[1].count2 = data.pd.CAR_OUT
this.block1OptionsList[1].count3 = data.pd.CAR_IN - data.pd.CAR_OUT
this.block1OptionsList[2].count1 = data.pd.CAMERA
}).catch((e) => {
console.log(e)
})
},
getMachineTodayInOutCount() {
requestFN(
'/map/getMachineTodayInOutCount', {
AREA: this.area,
CORPINFO_ID: this.corpInfoId,
GANGKOU: this.gangkou,
id: '7'
}
).then((data) => {
if (this.gangkou === '00004') {
} else {
this.block2OptionsList = data.varList
}
})
},
getDoorManagement() {
requestFN(
'/map/getDoorManagement', {
AREA: this.area,
CORPINFO_ID: this.corpInfoId,
GANGKOU: this.gangkou,
id: '7'
}
).then((data) => {
var carin = 0
var carout = 0
var peosonout = 0
var peosonin = 0
for (let i = 0; i < data.varList[1].list.length; i++) {
if (data.varList[1].list[i].TYPE == 'PERSON_OUT') {
// this.block2OptionsList[1].list[1].count = data.varList[1].list[i].count
peosonout = data.varList[1].list[i].count
}
if (data.varList[1].list[i].TYPE == 'PERSON_IN') {
// this.block2OptionsList[1].list[0].count = data.varList[1].list[i].count
peosonin = data.varList[1].list[i].count
}
if (data.varList[1].list[i].TYPE == 'CAR_OUT') {
// this.block2OptionsList[1].list[4].count = data.varList[1].list[i].count
carout = data.varList[1].list[i].count
}
if (data.varList[1].list[i].TYPE == 'CAR_IN') {
// this.block2OptionsList[1].list[3].count = data.varList[1].list[i].count
carin = data.varList[1].list[i].count
}
}
for (let i = 0; i < this.block2OptionsList.length; i++) {
this.block2OptionsList[i].list[0].count = peosonin
this.block2OptionsList[i].list[1].count = peosonout
this.block2OptionsList[i].list[2].count = peosonin - peosonout
this.block2OptionsList[i].list[3].count = carin
this.block2OptionsList[i].list[4].count = carout
this.block2OptionsList[i].list[5].count = carin - carout
}
this.$forceUpdate()
}).catch((e) => {
console.log(e)
})
},
loadRecord(index) {
this.getDoorWayRecords(index)
},
block3OptionsClick(index) {
this.block3List = []
this.block3OptionsIndex = index
this.getDoorWayRecords(index)
},
listPerpleCarGateMachine(type) {
requestFN(
'/map/getCfdDoorWayRecords',
{
id: '7',
TYPE: type
}
).then((data) => {
this.block3List = data.data
}).catch((e) => {
})
},
getDoorWayRecords(index) {
requestFN(
'/map/getDoorWayRecords?showCount=20&currentPage=' + this.currentPage, {
AREA: this.area,
CORPINFO_ID: this.corpInfoId,
GANGKOU: this.gangkou,
INDEX: index
}
).then((data) => {
this.block3List = this.block3List.concat(data.varList)
this.totalPage = data.page.totalPage
this.currentPage = data.page.currentPage
this.loading = false
this.$forceUpdate()
}).catch((e) => {
console.log(e)
this.loading = false
})
}
}
}
</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 {
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/menjin/img2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 310px;
height: 264px;
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: 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>

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

@ -725,6 +725,16 @@ export default {
checkImg: require('../../assets/map/gangkou_index/buttom/ico21_on.png'),
containAuthorization: [],
eliminateAuthorization: []
},
{
label: '人员轨迹',
dialog_width: '1200px',
check: false,
type: 'peopleTrajectory',
img: require('../../assets/map/gangkou_index/buttom/ico29.png'),
checkImg: require('../../assets/map/gangkou_index/buttom/ico29_on.png'),
containAuthorization: [],
eliminateAuthorization: []
}
// {
// label: '车辆定位',
@ -1502,7 +1512,7 @@ export default {
}
const entity = new Cesium.Entity({
id: 'trajectory',
polyline: { positions, width: 5.0, material: Cesium.Color.RED }
polyline: { positions, width: 5.0, material: Cesium.Color.RED, clampToGround: true }
})
const collection = new Cesium.CustomDataSource('trajectoryEntityCollection')
collection.entities.add(entity)
@ -1755,6 +1765,9 @@ export default {
cluster.billboard.show = true
cluster.billboard.id = cluster.label.id
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
cluster.billboard.horizontalOrigin = Cesium.HorizontalOrigin.CENTER
cluster.billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND
cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY
if (clusteredEntities.length >= 100) {
cluster.billboard.image = pin100
} else if (clusteredEntities.length >= 50) {