新增展示所有五个中队的人员在线情况

Lvtianfang
吕天方 11 months ago
parent 4c2e94cb19
commit cc3bbaf377

@ -2,7 +2,7 @@
# @Author: 张涛 # @Author: 张涛
# @Date: 2023-11-09 18:29:41 # @Date: 2023-11-09 18:29:41
# @LastEditors: JC9527 # @LastEditors: JC9527
# @LastEditTime: 2024-03-07 20:51:13 # @LastEditTime: 2024-03-21 17:55:10
# @FilePath: \JiangningUrbanManagePc\.env.development # @FilePath: \JiangningUrbanManagePc\.env.development
### ###
# 页面标题 # 页面标题
@ -14,10 +14,10 @@ ENV = 'development'
# 若依管理系统/开发环境 # 若依管理系统/开发环境
# /dev-api # /dev-api
# VUE_APP_BASE_API = 'http://39.101.188.84:9037' # VUE_APP_BASE_API = 'http://39.101.188.84:9037'
VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com' # VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com' VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp' VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
# VUE_APP_BASE_API = 'http://192.168.0.110:9037' VUE_APP_BASE_API = 'http://192.168.0.112:9037'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

@ -226,4 +226,18 @@ export function getDept(id){
url: '/jn/department/getDept/' + id, url: '/jn/department/getDept/' + id,
method: 'get' method: 'get'
}) })
}
// 展开的部门加人员数结构
export function getUserCount(){
return request({
url:"/jn/department/getUserCount",
method:"get",
})
}
// 根据名字,手机号模糊查询人员
export function getImeiUserOnline(user){
return request({
url:"/jn/department/getImeiUserOnline/" + user,
method:"get",
})
} }

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 389 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 B

@ -4,101 +4,176 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-08-15 09:44:13 * @Date: 2023-08-15 09:44:13
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2024-03-08 08:56:50 * @LastEditTime: 2024-03-22 10:00:19
--> -->
<template> <template>
<div class="left-box"> <div class="left-wai-box">
<div class="item left-list-title" :style="itemTwo"> <div class="left-box" v-show="!isUnfold">
<title-box title="今日事件情况"></title-box> <div class="item left-list-title" :style="itemTwo">
<div class="item-main"> <title-box title="今日事件情况"></title-box>
<div class="lists"> <div class="item-main">
<div class="bgc"></div> <div class="lists">
<div class="list-text"> · 上报事件总数</div> <div class="bgc"></div>
<div class="list-bottom"> <div class="list-text"> · 上报事件总数</div>
<img src="@/assets/images/incident.png" alt=""> <div class="list-bottom">
<div class="list-num">{{ MYsummarystatdata.total || "0" }}</div> <img src="@/assets/images/incident.png" alt="">
<div class="list-num">{{ MYsummarystatdata.total || "0" }}</div>
</div>
</div> </div>
</div> <div class="lists">
<div class="lists"> <div class="bgc"></div>
<div class="bgc"></div> <div class="list-text"> · 已受理事件</div>
<div class="list-text"> · 已受理事件</div> <div class="list-bottom">
<div class="list-bottom"> <img src="@/assets/images/incident.png" alt="">
<img src="@/assets/images/incident.png" alt=""> <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
<div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item => item.status == 1) : []) }}</div>
item.status == 1) : []) }}</div> </div>
</div> </div>
</div> <div class="lists">
<div class="lists"> <div class="bgc"></div>
<div class="bgc"></div> <div class="list-text"> · 未受理事件</div>
<div class="list-text"> · 未受理事件</div> <div class="list-bottom">
<div class="list-bottom"> <img src="@/assets/images/incident.png" alt="">
<img src="@/assets/images/incident.png" alt=""> <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
<div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item => item.status == 0) : []) }}</div>
item.status == 0) : []) }}</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="item left-list-title" :style="itemTwo">
<div class="item left-list-title" :style="itemTwo"> <title-box title="今日任务情况"></title-box>
<title-box title="今日任务情况"></title-box> <div class="item-main">
<div class="item-main"> <div class="lists">
<div class="lists"> <div class="bgc"></div>
<div class="bgc"></div> <div class="list-text"> · 派发任务总数</div>
<div class="list-text"> · 派发任务总数</div> <div class="list-bottom">
<div class="list-bottom"> <img src="@/assets/images/task.png" alt="">
<img src="@/assets/images/task.png" alt=""> <div class="list-num">{{ tasksummarystatdata.total || '0' }}</div>
<div class="list-num">{{ tasksummarystatdata.total || '0' }}</div> </div>
</div> </div>
</div> <div class="lists">
<div class="lists"> <div class="bgc"></div>
<div class="bgc"></div> <div class="list-text"> · 已处理任务数量</div>
<div class="list-text"> · 已处理任务数量</div> <div class="list-bottom">
<div class="list-bottom"> <img src="@/assets/images/task.png" alt="">
<img src="@/assets/images/task.png" alt=""> <div class="list-num">{{ tasksummarystatdata.solved || '0' }}</div>
<div class="list-num">{{ tasksummarystatdata.solved || '0' }}</div> </div>
</div>
<div class="lists">
<div class="bgc"></div>
<div class="list-text"> · 未处理任务数量</div>
<div class="list-bottom">
<img src="@/assets/images/task.png" alt="">
<div class="list-num">{{ tasksummarystatdata.inProgress || "0" }}</div>
</div>
</div> </div>
</div> </div>
<div class="lists"> </div>
<div class="bgc"></div> <div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
<div class="list-text"> · 未处理任务数量</div> <title-box title="人员在线情况" :id="1"></title-box>
<div class="list-bottom"> <map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" @unfold="unfold" :numberArray="peopleArray"
<img src="@/assets/images/task.png" alt=""> :height="oneHeight" :id="1" v-on="$listeners"></map-number>
<div class="list-num">{{ tasksummarystatdata.inProgress || "0" }}</div> <div style="display:flex;justify-content:flex-end;">
<div class="pagesBtnChange">
<div @click="changePage(1)"><i class="el-icon-arrow-left"></i></div>
<div @click="changePage(2)"><i class="el-icon-arrow-right"></i></div>
</div> </div>
</div> </div>
</div> </div>
<div class="item lfet-list-two" :style="itemOne">
<title-box title="车辆在线情况"></title-box>
<map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"
:id="3" v-on="$listeners"></map-number>
</div>
</div> </div>
<div class="item lfet-list-one" id="parent-getHeight" :style="itemOne"> <div class="unfold-click" v-show="isUnfold" v-loading="mapLoading" element-loading-background="rgba(11, 34, 72, 0.8)">
<title-box title="人员在线情况"></title-box> <div class="unfold-header">
<map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" :numberArray="peopleArray" <div class="header-title">
:height="oneHeight" :id="1" v-on="$listeners"></map-number> <div class="t-left">
<div style="display:flex;justify-content:flex-end;"> <img src="@/assets/images/soundWave.png" alt="">
<div class="pagesBtnChange"> <span>组织人员</span>
<div @click="changePage(1)"><i class="el-icon-arrow-left"></i></div> </div>
<div @click="changePage(2)"><i class="el-icon-arrow-right"></i></div> <img class="t-right" @click="offUnfold" src="@/assets/images/dialogbg/close.png" alt="">
</div>
<!-- <el-autocomplete
prefix-icon="el-icon-search"
class="inline-input"
v-model="unfoldInput"
:fetch-suggestions="querySearch"
placeholder="请输入关键字进行搜索"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete> -->
<el-input
placeholder="请输入关键字进行搜索"
prefix-icon="el-icon-search"
v-model="unfoldInput"
@input="inputChange"
></el-input>
</div>
<div class="unfold-middle" v-show="isBreadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="item in breadcrumb" :key="item.id">
<div class="zhuzijiagou-list" @click="breadcrumbClick(item)">
<img :src="item.id == breadcrumb.length ? require('@/assets/images/organizationChart.png') : require('@/assets/images/organizationChartTwo.png')" alt="">
<span :class="item.name.length > 5 ? 'spanText':''">{{ item.name }}</span>
</div>
</el-breadcrumb-item>
<!-- <el-breadcrumb-item>
<div class="zhuzijiagou-list">
<img src="@/assets/images/organizationChart.png" alt="">
<span>江宁开发区</span>
</div>
</el-breadcrumb-item> -->
</el-breadcrumb>
</div>
<div class="unfold-foot" v-show="isPerson">
<ul>
<li @click="personInfo(item)" v-for="(item,index) in deptArr" :key="item.deptId">
<img src="@/assets/images/organizationChart.png" alt="">
<div>
{{ item.deptName }} <span v-if="item.zdsb"><span>{{ item.online }}</span>/{{ item.allNumber }}</span>
</div>
<i class="el-icon-arrow-right"></i>
</li>
</ul>
</div>
<div class="unfold-foot-two" v-show="!isPerson" v-loading="personLoading" element-loading-background="rgba(11, 34, 72, 0.8)">
<div class="main-lists" v-for="(item,index) in personList" :key="item.imei" :class="(index+1) % 2 == 0? 'main-lists2':''">
<div class="list-title">
{{ item.userName }}
</div>
<div class="list-right">
<div class="real-time-location" @click="realTimeLocation(item)">
<img src="@/assets/images/location1.png" alt="">
<span>实时定位</span>
</div>
<div class="route-track" @click="historicalRoute(item)">
<img src="@/assets/images/track.png" alt="">
<span>行程轨迹</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="item lfet-list-two" :style="itemOne"> <personage-track ref="personageTrack"></personage-track>
<title-box title="车辆在线情况"></title-box>
<map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"
:id="3" v-on="$listeners"></map-number>
</div>
</div> </div>
</template> </template>
<script> <script>
import titleBox from '../../components/title/index.vue' import titleBox from '../../components/title/index.vue'
import mapNumber from '../../components/mapLeftNumber/index.vue' import mapNumber from '../../components/mapLeftNumber/index.vue'
import { getTrend, summarystat, tasksummarystat } from '@/api/bigScreenApi/eventApi.js' import { getTrend, summarystat, tasksummarystat } from '@/api/bigScreenApi/eventApi.js'
import { getQueryViewListPage, onlinePeople, onlineNumSize } from "@/api/bigScreenApi/index.js" import { getQueryViewListPage, onlinePeople, onlineNumSize, getUserCount, getImeiUserOnline } from "@/api/bigScreenApi/index.js"
import personageTrack from "../../components/personagetrack/index.vue";
export default { export default {
name: 'mapLeftContent', name: 'mapLeftContent',
components: { titleBox, mapNumber }, components: { titleBox, mapNumber, personageTrack },
data() { data() {
return { return {
perpsonNum: 0, perpsonNum: 0,
personOnLine: 0, personOnLine: 0,
peopleArray: [], peopleArray: [],
peopleNewArray:[],
vehicleArray: [], vehicleArray: [],
itemOne: { itemOne: {
height: '', height: '',
@ -115,19 +190,21 @@ export default {
pageSize: "10" pageSize: "10"
}, },
page: 1, page: 1,
eventData: {
"queryValue": [
// {
// "colCode": "name",
// "queryValue": "111"
// },
],
"myInstanceClassify": "all"
},
MYsummarystatdata: { MYsummarystatdata: {
records: [] records: []
},// },//
tasksummarystatdata: {} // tasksummarystatdata: {}, //
isUnfold:false,
unfoldInput:"",
isPerson:true,
breadcrumb:[],
deptArr: null,
allDeptArr:null,
myId: 1,
personList:[],
mapLoading:false,
personLoading:false,
isBreadcrumb:true,
} }
}, },
props: ['personLine', 'carLine'], props: ['personLine', 'carLine'],
@ -176,13 +253,11 @@ export default {
}) })
}, },
getEvent() { getEvent() {
// getQueryViewListPage(this.eventList, this.eventData).then(res => {
// console.log(res, 'resres');
// })
onlinePeople({pageNum:1,pageSize:10}).then(res=>{ onlinePeople({pageNum:1,pageSize:10}).then(res=>{
this.perpsonNum = res.total; // console.log(res,"res");
this.peopleArray = res.rows; this.perpsonNum = res.data.length;
this.peopleNewArray = [...res.data];
this.peopleArray = res.data.slice(0,10);
}) })
}, },
@ -193,36 +268,33 @@ export default {
}, },
changePage(id){ changePage(id){
if(id == 1) { if(id == 1) {
if(this.page == 1) { if(this.page == 1) {
this.$modal.msgError("已到第一页"); this.$modal.msgError("已到第一页");
return; return;
} }
this.getOnline(); this.getOnline();
onlinePeople({pageNum:--this.page,pageSize:10}).then(res=>{ this.peopleArray = this.peopleNewArray.slice((this.page-2)*10,(this.page-1)*10);
// this.personOnLine = res.rows; this.page--;
this.peopleArray = res.rows; // onlinePeople({pageNum:--this.page,pageSize:10}).then(res=>{
}) // // this.personOnLine = res.rows;
// this.peopleArray = res.rows;
// })
} else if(id == 2) { } else if(id == 2) {
if(this.page == parseInt(this.perpsonNum / 10) + 1){ if(this.page == parseInt(this.perpsonNum / 10) + 1){
this.$modal.msgError("已到最后一页"); this.$modal.msgError("已到最后一页");
return; return;
} }
this.getOnline(); this.getOnline();
onlinePeople({pageNum:++this.page,pageSize:10}).then(res=>{ this.peopleArray = this.peopleNewArray.slice(this.page*10,(this.page+1)*10);
// this.personOnLine = res.rows; this.page++;
this.peopleArray = res.rows; // onlinePeople({pageNum:++this.page,pageSize:10}).then(res=>{
}) // // this.personOnLine = res.rows;
// this.peopleArray = res.rows;
// })
} }
}, },
//
pagesChange(pageNum){
//
console.log(pageNum,"pageNum");
},
MYsummarystat() { MYsummarystat() {
// //
summarystat().then(res => { summarystat().then(res => {
@ -237,6 +309,117 @@ export default {
Fnsummarystat(data) { Fnsummarystat(data) {
let mydata = data.length != 0 ? data[0].count : '0' let mydata = data.length != 0 ? data[0].count : '0'
return mydata return mydata
},
//
unfold(){
this.isUnfold = true;
this.mapLoading = true;
getUserCount().then(res=>{
if(res.code == 200){
let obj = {id:1,name:res.data[0].deptName}
this.breadcrumb.push(obj);
// console.log(res.data[0].children);
this.deptArr = res.data[0].children;
this.allDeptArr = [...res.data];
this.mapLoading = false;
}
})
},
//
offUnfold(){
this.isUnfold = false;
this.isPerson = true;
this.breadcrumb = [];
},
//
// querySearch(){},
// handleSelect(){},
//
personInfo(item){
if(item.children) {
this.deptArr = item.children;
this.isPerson = true;
} else {
this.isPerson = false;
this.personList = item.zdsb;
}
if(item.parentId == 0) return
let id = this.myId++;
let obj = {id:++id,name:item.deptName}
// console.log(obj,"obj");
this.breadcrumb.push(obj);
},
// TODO:
realTimeLocation(item){
this.$emit("realTimeLocationClick", item,1);
},
//
historicalRoute(item){
this.$refs.personageTrack.open("person", item);
},
//
breadcrumbClick(row){
// if(row.id == 2 && this.breadcrumb.length > 2) {
// this.breadcrumb = this.breadcrumb.slice(0,row.id);
// this.isPerson = true;
// }
this.recursion(this.allDeptArr,row.name)
this.myId = row.id;
this.breadcrumb = this.breadcrumb.slice(0,row.id);
this.isPerson = true;
},
//
recursion(item,name) {
// item.map(item => {
// if(item.deptName == name) {
// this.deptArr = item.children;
// } else {
// this.recursion(item.children,name);
// }
// })
for (let i = 0; i < item.length; i++) {
if (item[i].deptName === name) {
this.deptArr = item[i].children;
return;
} else {
let result = this.recursion(item[i].children,name);
if (result) {
return result;
}
}
}
},
//
inputChange(value){
if(value) {
this.isPerson = false;
this.personLoading = true;
this.isBreadcrumb = false;
const throttledSearch = this.throttle(()=>{
getImeiUserOnline(value).then(res=>{
this.personList = res.data;
this.personLoading = false;
})
},500)
throttledSearch(value)
} else {
this.isPerson = true;
this.isBreadcrumb = true;
}
},
//
throttle(fn, delay) {
let timer = null;
return () => {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
timer = null;
}, delay);
}
}
} }
}, },
mounted() { mounted() {
@ -247,11 +430,6 @@ export default {
this.getDomHeight(); this.getDomHeight();
this.getEvent(); this.getEvent();
this.getOnline(); this.getOnline();
// getTrend({ type: 1 }).then(res => {
// console.log(res, '');
// })
}, },
created() { created() {
this.MYsummarystat() this.MYsummarystat()
@ -260,6 +438,9 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left-wai-box {
height: 100%;
}
.left-box { .left-box {
display: grid; display: grid;
grid-column: 1fr; grid-column: 1fr;
@ -357,4 +538,163 @@ export default {
height: 100%; height: 100%;
} }
} }
.unfold-click {
height: 100%;
.unfold-header {
padding: 10px 20px;
.header-title {
display: flex;
align-items: center;
margin-bottom: 10px;
.t-left {
flex: 1;
display: flex;
align-items: center;
img {
width: 25px;
margin-right: 5px;
}
span {
color: #05eef5;
}
}
.t-right {
width: 20px;
cursor: pointer;
}
}
::v-deep .el-input {
background-image: url("../../../assets/images/bgtongyongTwo.png");
background-size: 100% 100%;
.el-input__inner {
background-color: transparent;
// width: 222px;
width: 100%;
height: 38px;
color: #fff;
border: none;
}
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
line-height: 20px;
}
}
.el-input__suffix {
line-height: 44px;
color: #d3eef2;
right: 10px;
cursor: pointer;
.el-icon-search:before {
font-size: 24px;
color: #d3eef2;
}
}
}
.unfold-middle {
padding: 10px 20px;
background: #2a67a4;
::v-deep .el-breadcrumb__item {
display: flex;
align-items: center;
.el-breadcrumb__inner {
display: inline-block;
.zhuzijiagou-list {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 15px;
margin-right: 5px;
}
span {
color: #b8cce1;
}
.spanText {
white-space:nowrap;/*强制单行显示*/
text-overflow:ellipsis;/*超出部分省略号表示*/
overflow:hidden;/*超出部分隐藏*/
width: 80px;/*设置显示的最大宽度*/
}
}
}
}
}
.unfold-foot {
padding: 10px 20px;
ul {
padding-left: 0;
li {
list-style: none;
display: flex;
align-items: center;
margin: 10px 0;
cursor: pointer;
img {
width: 15px;
margin-right: 10px;
}
div {
flex: 1;
color: #ebeff5;
span {
color: #02f7fb;
}
}
i {
color: #ebeff5;
}
}
}
}
.unfold-foot-two {
padding: 10px 0;
height: 100%;
overflow-y: auto;
.main-lists {
display: flex;
justify-content: space-between;
background: rgba(216,216,216,0.05);
height: 33px;
align-items: center;
padding: 0 20px;
.list-title {
flex: 1;
font-size: 14px;
font-family: 'Source Han Sans CN-Regular';
font-weight: 400;
color: #D3EEF2;
line-height: 20px;
// padding-left: 24px;
}
.list-right {
// flex: 1;
display: flex;
align-items: center;
font-size: 14px;
font-family: 'Source Han Sans CN-Regular';
font-weight: 400;
color: #52B1FF;
.real-time-location {
margin-right: 22px;
}
.real-time-location,.route-track {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 18px;
margin-right: 5px;
}
}
}
}
.main-lists2 {
background: rgba(187,220,255,0.2);
}
}
}
</style> </style>

@ -4,7 +4,7 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2024-01-09 23:08:15 * @Date: 2024-01-09 23:08:15
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2024-03-14 16:12:31 * @LastEditTime: 2024-03-20 13:15:38
--> -->
<template> <template>
<div class="map-main"> <div class="map-main">
@ -621,9 +621,31 @@ export default {
visible: false, // visible: false, //
onIcon:null, onIcon:null,
offIcon:null, offIcon:null,
videoPoint:[],
}; };
}, },
methods: { methods: {
// /
beforeunloadHandler(event){
if(this.destID && this.imei) {
this._beforeUnload_time = new Date().getTime();
videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
this.destID = "";
this.imei = "";
})
}
},
unloadHandler(e){
this._gap_time = new Date().getTime()-this._beforeUnload_time;
if(this._gap_time <= 5){
if(this.destID && this.imei) {
videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
this.destID = "";
this.imei = "";
})
}
}
},
init(map) { init(map) {
this.map = map; this.map = map;
// o.setMapStyle('amap://styles/darkblue') // o.setMapStyle('amap://styles/darkblue')
@ -958,7 +980,7 @@ export default {
imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png") imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
} }
var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`; var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
var offset = new AMap.Pixel(-30.5, -48.5); var offset = new AMap.Pixel(-32.5, -48.5);
context.marker.setContent(content); context.marker.setContent(content);
context.marker.setOffset(offset); context.marker.setOffset(offset);
context.marker.on('click',(ev)=>{ context.marker.on('click',(ev)=>{
@ -1064,7 +1086,7 @@ export default {
this.mapLoading = status ? false : true; this.mapLoading = status ? false : true;
if(id == 1) { if(id == 1) {
this.personLine = []; this.personLine = [];
let videoPoint = []; this.videoPoint = [];
// //
getDeviceList().then((res) => { getDeviceList().then((res) => {
this.mapLoading = false; this.mapLoading = false;
@ -1083,12 +1105,12 @@ export default {
obj.userId = element.userId; obj.userId = element.userId;
obj.info = element; obj.info = element;
// this.markers.push(obj) // this.markers.push(obj)
videoPoint.push(obj) this.videoPoint.push(obj)
} }
}) })
this.count = videoPoint.length; this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{ AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // gridSize: 60, //
styles: sts, styles: sts,
maxZoom: 15, maxZoom: 15,
@ -1117,7 +1139,7 @@ export default {
ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{ ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
this.mapLoading = false; this.mapLoading = false;
if(res.code == 200) { if(res.code == 200) {
let videoPoint = []; this.videoPoint = [];
res.result.records.forEach((element)=>{ res.result.records.forEach((element)=>{
let obj = {position:[]}; let obj = {position:[]};
let location = element.location?.split(','); let location = element.location?.split(',');
@ -1135,11 +1157,11 @@ export default {
obj.imgSrc = ico2; obj.imgSrc = ico2;
obj.info = element obj.info = element
// this.markers.push(obj) // this.markers.push(obj)
videoPoint.push(obj) this.videoPoint.push(obj)
}) })
this.count = videoPoint.length; this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{ AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // gridSize: 60, //
maxZoom: 17, maxZoom: 17,
styles: sts, styles: sts,
@ -1164,7 +1186,7 @@ export default {
getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{ getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
// console.log('',res); // console.log('',res);
this.carLine = res.rows this.carLine = res.rows
let videoPoint = []; this.videoPoint = [];
this.mapLoading = false; this.mapLoading = false;
res.rows.forEach((element)=>{ res.rows.forEach((element)=>{
// console.log(element); // console.log(element);
@ -1176,13 +1198,13 @@ export default {
obj.imgSrc = ico4; obj.imgSrc = ico4;
obj.info = element; obj.info = element;
// this.markers.push(obj) // this.markers.push(obj)
videoPoint.push(obj) this.videoPoint.push(obj)
}) })
this.count = videoPoint.length; this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{ AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // gridSize: 60, //
styles: sts, styles: sts,
maxZoom: 15, maxZoom: 15,
@ -1206,7 +1228,7 @@ export default {
getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{ getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
this.mapLoading = false; this.mapLoading = false;
// console.log(res,"res"); // console.log(res,"res");
let videoPoint = []; this.videoPoint = [];
res.data.forEach((element)=>{ res.data.forEach((element)=>{
let obj = {position:[]}; let obj = {position:[]};
let lonLat; let lonLat;
@ -1223,11 +1245,11 @@ export default {
obj.imgSrc = ico5; obj.imgSrc = ico5;
obj.info = element obj.info = element
// this.markers.push(obj) // this.markers.push(obj)
videoPoint.push(obj) this.videoPoint.push(obj)
}) })
this.count = videoPoint.length; this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{ AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // gridSize: 60, //
maxZoom: 15, maxZoom: 15,
styles: sts, styles: sts,
@ -1251,7 +1273,7 @@ export default {
// } // }
// }) // })
getStreetShopList({pageSize:500,pageNum:1}).then(res=>{ getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
let videoPoint = []; this.videoPoint = [];
this.mapLoading = false; this.mapLoading = false;
res.rows.forEach((element)=>{ res.rows.forEach((element)=>{
let obj = {position:[]}; let obj = {position:[]};
@ -1262,13 +1284,13 @@ export default {
obj.imgSrc = ico6; obj.imgSrc = ico6;
obj.info = element; obj.info = element;
// this.markers.push(obj) // this.markers.push(obj)
videoPoint.push(obj) this.videoPoint.push(obj)
}) })
this.count = videoPoint.length; this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{ AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{ this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // gridSize: 60, //
styles: sts, styles: sts,
maxZoom: 15, maxZoom: 15,
@ -1424,6 +1446,7 @@ export default {
this.player.detachMediaElement() this.player.detachMediaElement()
this.player.destroy() this.player.destroy()
this.player = null this.player = null
videoSurveillance({destId:this.personInfo.userId,imei:this.personInfo.info.imei,msgType:0})
if(this.timer) clearInterval(this.timer) if(this.timer) clearInterval(this.timer)
}, },
// //
@ -1789,8 +1812,6 @@ export default {
} }
}) })
} else if(id == 3 && this.actionMap == 3){ } else if(id == 3 && this.actionMap == 3){
// console.log("");
// console.log(this.carInfo);
this.carLine.forEach(car=>{ this.carLine.forEach(car=>{
if(item.id == car.id) { if(item.id == car.id) {
this.map.setZoomAndCenter(16,[car.longitude,car.latitude]); this.map.setZoomAndCenter(16,[car.longitude,car.latitude]);
@ -2455,7 +2476,7 @@ export default {
var restaurants = res.result.records; var restaurants = res.result.records;
let a = []; let a = [];
restaurants.forEach((per=>{ restaurants.forEach((per=>{
let item = { value: per.name, location: per.location ? per.location : "" }; let item = { value: per.name, location: per.location ? per.location : "" ,info: per };
a.push(item); a.push(item);
})) }))
cb(a); cb(a);
@ -2467,10 +2488,11 @@ export default {
} else if(this.actionMap == 5) { } else if(this.actionMap == 5) {
// //
getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{ getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{
// console.log(res,"")
var restaurants = res.rows; var restaurants = res.rows;
let a = []; let a = [];
restaurants.forEach((per=>{ restaurants.forEach((per=>{
let item = { value: per.shopName, imei: per.id, longitude:per.longitude, latitude:per.latitude }; let item = { value: per.shopName, info: per, longitude:per.longitude, latitude:per.latitude };
a.push(item); a.push(item);
})) }))
cb(a); cb(a);
@ -2480,19 +2502,41 @@ export default {
// //
handleSelect(item){ handleSelect(item){
// console.log(item,"item"); // console.log(item,"item");
// console.log(this.actionMap,"this.actionMap");
this.getMarkers(this.actionMap);
if(this.actionMap == 1) { if(this.actionMap == 1) {
if(item.imei) { if(item.imei) {
// imei // imei
getDeviceList({imei:item.imei}).then(res=>{ getDeviceList({imei:item.imei}).then(res=>{
if(res.code == 200 && res.data.msg == "操作成功") { if(res.code == 200 && res.data.msg == "操作成功") {
this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]); // if(this.cluster) {
// this.cluster.setMap(null)
// }
// this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
getUserByImei({imei:item.imei}).then(resTwo=>{
if(resTwo.code == 200) {
this.map.setZoomAndCenter(18,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
setTimeout(()=>{
this.personInfo.position = [res.data.obj[0].longitude,res.data.obj[0].latitude];
this.personInfo.info = res.data.obj[0];
this.personInfo.personinfo = resTwo.data[0];
this.personInfo.visible = true;
},1500)
}
})
return getUserByImei({imei:item.imei})
} }
}) })
} }
} else if (this.actionMap == 2) { } else if (this.actionMap == 2) {
if(item.location) { if(item.location) {
let location = item.location?.split(','); let location = item.location?.split(',');
this.map.setZoomAndCenter(16,[location[0],location[1]]); this.map.setZoomAndCenter(18,[location[0],location[1]]);
setTimeout(()=>{
this.eventInfo.position = [location[0],location[1]];
this.eventInfo.info = item.info;
this.eventInfo.visible = true;
},1500)
} }
} else if (this.actionMap == 3) { } else if (this.actionMap == 3) {
// //
@ -2501,9 +2545,18 @@ export default {
} else if(this.actionMap == 5) { } else if(this.actionMap == 5) {
// //
if(item.longitude && item.latitude) { if(item.longitude && item.latitude) {
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]); let longitude = item.longitude
let latitude = item.latitude
this.map.setZoomAndCenter(18,[longitude,latitude]);
setTimeout(()=>{
this.shopInfo.position = [longitude,latitude];
this.shopInfo.info = item.info;
this.shopInfo.visible = true;
},1500)
} }
} }
}, },
// //
createdTask() { createdTask() {
@ -2630,6 +2683,7 @@ export default {
} }
}) })
}, },
//
wgs84togcj02(lng, lat) { wgs84togcj02(lng, lat) {
// //
var PI = 3.1415926535897932384626; var PI = 3.1415926535897932384626;
@ -2676,9 +2730,14 @@ export default {
this.getPersonIcon(); this.getPersonIcon();
this.getCarList(); this.getCarList();
this.getrobotToken(); this.getrobotToken();
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
window.addEventListener('unload', e => this.unloadHandler(e));
// this.markerInterval(); // this.markerInterval();
}, },
destroyed(){
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e));
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

@ -1,18 +1,28 @@
<template> <template>
<div class="left-number" id="parent"> <div class="left-number" id="parent">
<div class="number-title"> <div class="number-title">
<div>· {{ title }}</div> <div class="title-left">
<div>· {{ title }}</div>
<div class="title-num" v-show="id == 1" @click="unfold">
展开
</div>
</div>
<div>{{ onLine }}/{{ sum }}{{ type }}</div> <div>{{ onLine }}/{{ sum }}{{ type }}</div>
</div> </div>
<div class="header-title"> <div class="header-title">
<div>{{ id == 1 ? "姓名" : "车牌号" }}</div> <div class="header-title-left" :class="id == 1 ? 'header-title-left-two' : ''">{{ id == 1 ? "姓名" : "车牌号" }}</div>
<div class="header-title-center" v-show="id == 1">线</div>
<div class="header-title-right">实时定位/行程轨迹</div> <div class="header-title-right">实时定位/行程轨迹</div>
</div> </div>
<!-- <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + 'px'}"> --> <!-- <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + 'px'}"> -->
<div class="left--lists" id="box" :style="{'height':(height - lists.height + 5) + 'px'}"> <div class="left--lists" id="box" :style="{'height':(height - lists.height + 5) + 'px'}">
<div class="main-lists" v-for="(item,index) in numberArray" :key="index" :class="(index+1) % 2 == 0? 'main-lists2':''"> <div class="main-lists" v-for="(item,index) in numberArray" :key="index" :class="(index+1) % 2 == 0? 'main-lists2':''">
<div class="list-title"> <div class="list-title" :class="id == 1 ? 'list-titleTwo' : 'list-title'">
{{ item.nickName || item.carCode}} {{ item.userName || item.carCode}}
</div>
<div class="list-isLine" v-show="id == 1">
{{ item.status == "1" ? '在线' : '离线'}}
</div> </div>
<div class="list-right"> <div class="list-right">
<div class="real-time-location" @click="realTimeLocation(item)"> <div class="real-time-location" @click="realTimeLocation(item)">
@ -86,6 +96,9 @@ export default {
} else if(this.id == 3) { } else if(this.id == 3) {
this.$refs.personageTrack.open("car", item); this.$refs.personageTrack.open("car", item);
} }
},
unfold(){
this.$emit("unfold")
} }
}, },
mounted(){ mounted(){
@ -128,6 +141,27 @@ export default {
color: #D3EEF2; color: #D3EEF2;
line-height: 23px; line-height: 23px;
} }
.title-left {
display: flex;
align-items: center;
}
.title-num {
font-size: 14px;
display: flex;
align-items: center;
padding: 0px 20px;
// color: #52B1FF;
color: #fff;
border: 1px solid #52B1FF;
cursor: pointer;
display: flex;
align-items: center;
font-size: 15px;
height: 30px;
// background-color: #077fff;
border-radius: 5px;
margin-left: 10px;
}
} }
.header-title { .header-title {
display: flex; display: flex;
@ -136,13 +170,26 @@ export default {
border: 1px solid #077FFF; border: 1px solid #077FFF;
height: 33px; height: 33px;
&>div { &>div {
flex: 1; // flex: 1;
width: 33%;
padding-left: 24px; padding-left: 24px;
font-size: 14px; font-size: 14px;
font-family: 'Source Han Sans CN-Bold'; font-family: 'Source Han Sans CN-Bold';
font-weight: bold; font-weight: bold;
color: #D3EEF2; color: #D3EEF2;
} }
.header-title-left {
flex: 1;
}
.header-title-left-two {
flex: .5;
}
.header-title-center {
flex: 1;
}
.header-title-right {
flex: 1;
}
} }
.left--lists { .left--lists {
// height: 120px; // height: 120px;
@ -163,6 +210,17 @@ export default {
line-height: 20px; line-height: 20px;
padding-left: 24px; padding-left: 24px;
} }
.list-isLine {
flex: .5;
font-size: 14px;
font-family: 'Source Han Sans CN-Regular';
font-weight: 400;
color: #D3EEF2;
line-height: 20px;
}
.list-titleTwo {
flex: .5;
}
.list-right { .list-right {
flex: 1; flex: 1;
display: flex; display: flex;

@ -4,15 +4,15 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-08-15 09:52:05 * @Date: 2023-08-15 09:52:05
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2024-01-12 23:50:11 * @LastEditTime: 2024-03-21 14:55:27
--> -->
<template> <template>
<div class="mytitle"> <div class="mytitle">
<div class="title-text" :text="title"> <div class="title-text" :text="title">
{{ title }} {{ title }}
</div> </div>
<!-- <div class="title-num" v-show="numShow > 0"> <!-- <div class="title-num" v-show="id == 1" @click="unfold">
{{ numShow }} <span></span> 展开
</div> --> </div> -->
</div> </div>
</template> </template>
@ -24,10 +24,15 @@ export default {
type: String, type: String,
default: '默认标题' default: '默认标题'
}, },
// numShow: { id: {
// type: Number, type: Number,
// default: 0 default: 0
// } }
},
methods:{
unfold(){
this.$emit("unfold")
}
} }
} }
</script> </script>
@ -42,6 +47,7 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
.title-text { .title-text {
font-size: vw(20); font-size: vw(20);
letter-spacing: vw(2); letter-spacing: vw(2);
@ -64,17 +70,20 @@ export default {
} }
} }
.title-num { .title-num {
margin-right: vw(15); font-size: 14px;
font-size: vw(20); display: flex;
font-family: 'DIN'; align-items: center;
font-weight: bold; padding: 0px 20px;
color: #32fcc5; // color: #52B1FF;
& span { color: #fff;
font-size: vw(14); border: 1px solid #52B1FF;
font-family: 'Regular'; cursor: pointer;
font-weight: 400; display: flex;
color: #c7cddb; align-items: center;
} font-size: 15px;
height: 35px;
background-color: #077fff;
border-radius: 5px;
} }
} }
</style> </style>

Loading…
Cancel
Save