|
|
@@ -1,72 +1,87 @@
|
|
|
<template>
|
|
|
- <view class="page" :style="{ height: pageHeight + 'px', flexDirection: flexDirection }">
|
|
|
- <view id="map" :style="{ height: pageHeight + 'px' }" class='map' />
|
|
|
-
|
|
|
- <!-- <view class="fab">
|
|
|
- <uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
|
|
|
- :vertical="fab.vertical" :direction="fab.direction" @trigger="trigger" @fabClick="fabClick" />
|
|
|
- </view> -->
|
|
|
-
|
|
|
- <view v-show="popupShow" :style="extraIcon" class="popup">
|
|
|
- <scroll-view :scroll-top="0" scroll-y="true"
|
|
|
- :style="{ height: popupHeight + 'px', width: popupWidth + 'px' }" class="scroll-Y">
|
|
|
- <uni-list v-for="(item, index) in players" :key="index" :border="true" class="list">
|
|
|
- <uni-list-item :clickable="true" @click="onPlayerListItemClick(item)" class="list-item" :class="{
|
|
|
+ <view class="page" :style="{ height: windowHeight + 'px', flexDirection: flexDirection }">
|
|
|
+ <view id="map" :style="{ height: mapHeight + 'px', width: mapWidth + 'px' }" class='map' />
|
|
|
+
|
|
|
+ <view v-show="popupShow" class="popup" :style="{ height: popupHeight + 'px', width: popupWidth + 'px' }">
|
|
|
+ <!-- <uni-section title="活动路线列表" type="line"> -->
|
|
|
+ <uni-data-picker class="actionsTree" placeholder="请选择活动" popup-title="请选择活动路线" :localdata="actionsTree"
|
|
|
+ v-model="sltActRoute" @change="onActionChange" @popupopened="onActionsTreePopupOpened" @popupclosed="onActionsTreePopupClosed"></uni-data-picker>
|
|
|
+ <!-- </uni-section> -->
|
|
|
+
|
|
|
+ <!-- <uni-section title="玩家列表" type="line"> -->
|
|
|
+ <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" :style="{ height: popupHeight - 35 + 'px'}">
|
|
|
+ <uni-list v-for="(item, index) in players" :key="index" :border="true" class="list">
|
|
|
+ <uni-list-item :clickable="true" @click="onPlayerListItemClick(item)" class="list-item" :class="{
|
|
|
'list-item-focus': focusPlayerId == item.id
|
|
|
}">
|
|
|
- <template v-slot:header>
|
|
|
- <!-- <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> -->
|
|
|
- <div class="slot-image" :style="'background-color:' + getPlayerColor(item.id)"></div>
|
|
|
- </template>
|
|
|
- <template v-slot:body>
|
|
|
- <view class="slot-box">
|
|
|
- <view class="slot-title">
|
|
|
- [{{index+1}}] <span class="slot-phone" @click="onPhoneClick(item.phone)">
|
|
|
- {{item.name}} </span>
|
|
|
- 打点 {{item.effectivenum}}/{{item.totalcontrolnum}} 距离
|
|
|
- {{item.distance}}米 配速 {{item.pace}}
|
|
|
+ <template v-slot:header>
|
|
|
+ <!-- <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> -->
|
|
|
+ <div class="slot-image" :style="'background-color:' + getPlayerColor(item.id)"></div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:body>
|
|
|
+ <view class="slot-box">
|
|
|
+ <view class="slot-title">
|
|
|
+ [{{index+1}}] <span class="slot-phone" @click="onPhoneClick(item.phone)">
|
|
|
+ {{item.name}} </span>
|
|
|
+ 打点 {{item.effectivenum}}/{{item.totalcontrolnum}} 距离
|
|
|
+ {{item.distance}}米 配速 {{formatTime(item.pace, false)}}
|
|
|
+ </view>
|
|
|
+ <view class="slot-note">
|
|
|
+ 心率 {{item.lasthr}} 平均 {{item.avghr}} 最大 {{item.maxhr}} | CAL
|
|
|
+ {{Math.round(item.calorie/1000)}} Ck {{Math.round(item.ck/1000)}} Ei
|
|
|
+ {{Math.round(item.ei*100)/100}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="slot-note">
|
|
|
- 心率 {{item.lasthr}} 平均 {{item.avghr}} 最大 {{item.maxhr}} | CAL
|
|
|
- {{Math.round(item.calorie/1000)}} Ck {{Math.round(item.ck/1000)}} Ei {{Math.round(item.ei*100)/100}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <!-- <template v-slot:footer>
|
|
|
+ </template>
|
|
|
+ <!-- <template v-slot:footer>
|
|
|
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
|
|
|
</template> -->
|
|
|
- </uni-list-item>
|
|
|
- </uni-list>
|
|
|
- </scroll-view>
|
|
|
+ </uni-list-item>
|
|
|
+ </uni-list>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- </uni-section> -->
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { mapState, mapGetters } from 'vuex'
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex'
|
|
|
+
|
|
|
import {
|
|
|
DefaultRequest,
|
|
|
- IdRequest
|
|
|
+ IdRequest,
|
|
|
} from "@/grpc/base_pb.js"
|
|
|
|
|
|
+ import {
|
|
|
+ ToActionIdAndCourseIdRequest
|
|
|
+ } from "@/grpc/track_offical_pb.js"
|
|
|
+
|
|
|
+ import {
|
|
|
+ formatTime
|
|
|
+ } from "@/utils/util.js"
|
|
|
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- interval: null,
|
|
|
+ interval_loadActionsTree: null,
|
|
|
+ interval_loadData: null,
|
|
|
+ actionsTreePopup: false,
|
|
|
|
|
|
systemInfo: null,
|
|
|
- deviceOrientation: 'portrait', // 设备方向(竖屏 portrait | 横屏 landscape)
|
|
|
flexDirection: 'column',
|
|
|
- pageHeight: 0,
|
|
|
- pageWidth: 0,
|
|
|
- // mapHeight: 0,
|
|
|
+ windowHeight: 0,
|
|
|
+ windowWidth: 0,
|
|
|
+ mapHeight: 0,
|
|
|
+ mapWidth: 0,
|
|
|
popupHeight: 0,
|
|
|
popupWidth: 0,
|
|
|
- popupHeightPortrait: 300, // 竖屏状态下的底部弹框高度
|
|
|
- popupWidthlandscape: 390, // 横屏状态下的右侧弹框宽度
|
|
|
+ popupHeightPortrait: 360, // 竖屏状态下的底部弹框高度
|
|
|
+ popupWidthlandscape: 330, // 横屏状态下的右侧弹框宽度
|
|
|
popupType: 'bottom',
|
|
|
popupShow: false,
|
|
|
extraIcon: {
|
|
|
@@ -75,179 +90,248 @@
|
|
|
// type: 'gear-filled'
|
|
|
},
|
|
|
|
|
|
- actionId: 2,
|
|
|
- actionDetail: {},
|
|
|
+ mapId: 0,
|
|
|
+ mapDetail: {},
|
|
|
mapUrl: null,
|
|
|
mapInfo: {},
|
|
|
|
|
|
- map: null,
|
|
|
- checkPoints: [],
|
|
|
+ actionId: 0,
|
|
|
+ actionDetail: {},
|
|
|
+
|
|
|
+ routeId: 0,
|
|
|
+ routeDetail: {},
|
|
|
+
|
|
|
+ // checkPoints: [],
|
|
|
+ nextCP: [], // 用户即将到达控制点列表
|
|
|
players: [],
|
|
|
players_position: [],
|
|
|
focusPlayerId: 0,
|
|
|
- trailTime: 90000,
|
|
|
+ trailTime: 0,
|
|
|
+
|
|
|
+ sltActRoute: '',
|
|
|
+ actionsTree: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState([
|
|
|
- 'username', // 映射 this.username 为 store.state.username
|
|
|
+ 'username', // 映射 this.username 为 store.state.username
|
|
|
]),
|
|
|
...mapGetters([
|
|
|
'metadata'
|
|
|
]),
|
|
|
},
|
|
|
- mounted() {},
|
|
|
- onLoad(option) {
|
|
|
- // console.log('[mapShow] onLoad')
|
|
|
- // console.log(option.actionId)
|
|
|
- if (option.actionId > 0) {
|
|
|
- this.actionId = option.actionId
|
|
|
- this.loadData(this.actionId)
|
|
|
- }
|
|
|
- // 逻辑层中触发自定义事件
|
|
|
- // uni.$emit('myEvent', {
|
|
|
- // name: 'Uniapp',
|
|
|
- // version: '2.0.0'
|
|
|
- // })
|
|
|
- },
|
|
|
- onReady() {
|
|
|
+ mounted() {
|
|
|
+ this.$global.getWindowInfo()
|
|
|
+ uni.$on('windowResize', this.reLoad)
|
|
|
+ this.popupShow = this.$store.state.mapPopupShow
|
|
|
this.layoutInit()
|
|
|
},
|
|
|
- onShow() {
|
|
|
- // console.log('[onShow]')
|
|
|
- uni.onWindowResize(res => {
|
|
|
- // console.log('[onWindowResize]', res)
|
|
|
- this.layoutInit(res.size)
|
|
|
- });
|
|
|
+ onLoad(option) {
|
|
|
+ console.log('[onLoad] mapId:' + option.mapId)
|
|
|
+ if (option.mapId > 0) {
|
|
|
+ this.mapId = option.mapId
|
|
|
+ this.loadMap(this.mapId)
|
|
|
+
|
|
|
+ if (this.mapId == this.$store.state.mapSltMapId) { // 页面重载
|
|
|
+ this.sltActRoute = this.$store.state.mapSltActRoute
|
|
|
+ this.loadData(this.sltActRoute)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.interval_loadActionsTree != null) {
|
|
|
+ clearInterval(this.interval_loadActionsTree)
|
|
|
+ }
|
|
|
+
|
|
|
+ let that = this
|
|
|
+ this.interval_loadActionsTree = setInterval(async function() {
|
|
|
+ if (!that.actionsTreePopup) {
|
|
|
+ await that.loadActionsTree()
|
|
|
+ }
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- // console.log("beforeDestroy")
|
|
|
- clearInterval(this.interval)
|
|
|
+ console.log("[beforeDestroy]")
|
|
|
+ clearInterval(this.interval_loadActionsTree)
|
|
|
+ clearInterval(this.interval_loadData)
|
|
|
// leafletHelper.free()
|
|
|
+ uni.$off('windowResize', this.reLoad)
|
|
|
},
|
|
|
methods: {
|
|
|
- // 全屏展示
|
|
|
- fullscreen() {
|
|
|
- if (document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement ||
|
|
|
- document.msFullScreenElement) {
|
|
|
- // alert('当前是全屏')
|
|
|
- if (document.webkitCancelFullScreen) {
|
|
|
- document.webkitCancelFullScreen();
|
|
|
- } else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen();
|
|
|
- } else if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen();
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '浏览器不支持全屏API或已被禁用',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- let elem = document.body;
|
|
|
- if (elem.webkitRequestFullScreen) {
|
|
|
- elem.webkitRequestFullScreen();
|
|
|
- } else if (elem.mozRequestFullScreen) {
|
|
|
- elem.mozRequestFullScreen();
|
|
|
- } else if (elem.requestFullScreen) {
|
|
|
- elem.requestFullscreen();
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '浏览器不支持全屏API或已被禁用',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ formatTime,
|
|
|
+ reLoad() {
|
|
|
+ this.$store.commit('setMapSltMapId', this.mapId)
|
|
|
+ this.savePlayersData()
|
|
|
+
|
|
|
+ var fullPath = this.$route.fullPath
|
|
|
+ console.log("[windowResize] reLaunch: " + fullPath)
|
|
|
+ uni.redirectTo({
|
|
|
+ url: fullPath
|
|
|
+ });
|
|
|
},
|
|
|
// 布局初始化 设置地图高度
|
|
|
- layoutInit(windowSize = '') {
|
|
|
- var windowHeight, windowWidth
|
|
|
-
|
|
|
- if (windowSize == '') {
|
|
|
- this.systemInfo = uni.getSystemInfoSync()
|
|
|
- // console.log('[layoutInit] systemInfo', this.systemInfo)
|
|
|
- windowHeight = this.systemInfo.windowHeight
|
|
|
- windowWidth = this.systemInfo.windowWidth
|
|
|
- } else {
|
|
|
- windowHeight = windowSize.windowHeight
|
|
|
- windowWidth = windowSize.windowWidth
|
|
|
- }
|
|
|
- this.pageHeight = windowHeight
|
|
|
- this.pageWidth = windowWidth
|
|
|
-
|
|
|
- if (windowHeight > windowWidth) {
|
|
|
- console.log('[layoutInit] 竖屏')
|
|
|
- this.deviceOrientation = 'portrait'
|
|
|
+ layoutInit() {
|
|
|
+ this.windowHeight = this.$global.windowHeight
|
|
|
+ this.windowWidth = this.$global.windowWidth
|
|
|
+ if (this.$global.deviceOrientation == 'portrait') { // 竖屏
|
|
|
this.flexDirection = 'column'
|
|
|
- this.popupHeight = this.popupHeightPortrait
|
|
|
- this.popupWidth = this.pageWidth
|
|
|
+ this.mapWidth = this.$global.windowWidth
|
|
|
+ this.mapHeight = this.$global.windowHeight
|
|
|
// if (this.popupShow) {
|
|
|
- // this.mapHeight = this.pageHeight - this.popupHeight
|
|
|
+ // this.mapHeight = this.$global.windowHeight - this.popupHeightPortrait
|
|
|
// } else {
|
|
|
- // this.mapHeight = this.pageHeight
|
|
|
+ // this.mapHeight = this.$global.windowHeight
|
|
|
// }
|
|
|
+ // console.log("竖屏", this.mapHeight)
|
|
|
+ this.popupHeight = this.popupHeightPortrait
|
|
|
+ this.popupWidth = this.$global.windowWidth
|
|
|
} else { // 横屏
|
|
|
- console.log('[layoutInit] 横屏')
|
|
|
- this.deviceOrientation = 'landscape'
|
|
|
this.flexDirection = 'row'
|
|
|
- this.popupHeight = this.pageHeight
|
|
|
+ this.mapHeight = this.$global.windowHeight
|
|
|
+ this.mapWidth = this.$global.windowWidth
|
|
|
+ // if (this.popupShow) {
|
|
|
+ // this.mapWidth = this.$global.windowWidth - this.popupWidthlandscape
|
|
|
+ // } else {
|
|
|
+ // this.mapWidth = this.$global.windowWidth
|
|
|
+ // }
|
|
|
+ // console.log("横屏", this.mapWidth)
|
|
|
+ this.popupHeight = this.$global.windowHeight
|
|
|
this.popupWidth = this.popupWidthlandscape
|
|
|
- // this.mapHeight = this.pageHeight
|
|
|
+ // console.log("横屏 popupHeight", this.popupHeight)
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
popupToggle() {
|
|
|
this.popupShow = !this.popupShow
|
|
|
- window.focus()
|
|
|
+ this.$store.commit('setMapPopupShow', this.popupShow)
|
|
|
+ // this.layoutInit()
|
|
|
},
|
|
|
fullScreenToggle() {
|
|
|
- this.fullscreen()
|
|
|
+ this.$global.fullscreen()
|
|
|
+ this.$global.getWindowInfo()
|
|
|
this.layoutInit()
|
|
|
},
|
|
|
- async loadData() {
|
|
|
- this.actionDetail = await this.getToActionDetail(this.actionId)
|
|
|
+ makeActionsTree(actselectrsList) {
|
|
|
+ this.actionsTree.length = 0 // 先清空数组
|
|
|
+ for (let i = 0; i < actselectrsList.length; i++) {
|
|
|
+ var act = actselectrsList[i]
|
|
|
+ var pushData = {
|
|
|
+ text: act.actname,
|
|
|
+ value: act.actid,
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+
|
|
|
+ var actUserNum = 0
|
|
|
+ for (let j = 0; j < act.courseselectrsList.length; j++) {
|
|
|
+ var course = act.courseselectrsList[j]
|
|
|
+ actUserNum += course.courseusernum
|
|
|
+ pushData.children.push({
|
|
|
+ text: course.coursename + ' (' + course.courseusernum + '人)',
|
|
|
+ value: act.actid + '-' + course.courseid
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (actUserNum > 0) {
|
|
|
+ pushData.children.unshift({
|
|
|
+ text: '全部 (' + actUserNum + '人)',
|
|
|
+ value: act.actid + '-' + 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ pushData.text += ' (' + actUserNum + '人)'
|
|
|
+ this.actionsTree.push(pushData)
|
|
|
+ }
|
|
|
+ // console.log("[makeActionsTree]" + JSON.stringify(this.actionsTree))
|
|
|
+ },
|
|
|
+ async loadMap() {
|
|
|
+ await this.loadActionsTree()
|
|
|
uni.setNavigationBarTitle({
|
|
|
- title: this.actionDetail.name
|
|
|
+ title: this.mapDetail.mapinfo.mapname
|
|
|
});
|
|
|
// console.log(this.actionDetail)
|
|
|
|
|
|
this.initMap()
|
|
|
- this.handleMapDrawRoute()
|
|
|
+ this.handleMapToggle()
|
|
|
+ },
|
|
|
+ async loadActionsTree() {
|
|
|
+ this.mapDetail = await this.getToMapDetail(this.mapId)
|
|
|
+ this.makeActionsTree(this.mapDetail.actselectrsList)
|
|
|
+ },
|
|
|
+ async loadData(sltActRoute) {
|
|
|
+ console.log("[loadData] sltActRoute: ", sltActRoute)
|
|
|
+ if (sltActRoute == null || sltActRoute.length == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval)
|
|
|
+ var actRouteArr = sltActRoute[1].value.split('-')
|
|
|
+ this.actionId = actRouteArr[0]
|
|
|
+ this.routeId = actRouteArr[1]
|
|
|
+
|
|
|
+ this.actionDetail = await this.getToActionDetail(this.actionId, this.routeId)
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: this.mapDetail.mapinfo.mapname + ' - ' + this.actionDetail.name
|
|
|
+ });
|
|
|
+ // console.log(this.actionDetail)
|
|
|
+
|
|
|
+ if (this.interval_loadData != null) {
|
|
|
+ clearInterval(this.interval_loadData)
|
|
|
}
|
|
|
|
|
|
- let that = this
|
|
|
- that.players = await that.getToUsersInGameDetail(that.actionId)
|
|
|
+ this.players = await this.getToUsersInGameDetail(this.actionId, this.routeId)
|
|
|
// console.log('players', that.players)
|
|
|
// leafletHelper.global.setPlayers(this.players)
|
|
|
|
|
|
- that.players_position = await that.getToUsersInGameGpsQuery(that.actionId)
|
|
|
+ this.players_position = await this.getToUsersInGameGpsQuery(this.actionId, this.routeId)
|
|
|
// leafletHelper.global.setPlayersPosition(this.players_position)
|
|
|
+
|
|
|
+ this.nextCP = await this.getToNextControlPointInGame(this.actionId, this.routeId)
|
|
|
+
|
|
|
+ this.handleMapDrawRoute()
|
|
|
+ this.handleMapDrawPlayer()
|
|
|
+ this.handleMapDrawTrail()
|
|
|
|
|
|
- that.handleMapDrawPlayer()
|
|
|
- that.handleMapDrawTrail()
|
|
|
-
|
|
|
- this.interval = setInterval(async function() {
|
|
|
- that.players = await that.getToUsersInGameDetail(that.actionId)
|
|
|
- that.players_position = await that.getToUsersInGameGpsQuery(that.actionId)
|
|
|
+ let that = this
|
|
|
+ this.interval_loadData = setInterval(async function() {
|
|
|
+ that.players = await that.getToUsersInGameDetail(that.actionId, that.routeId)
|
|
|
+ that.players_position = await that.getToUsersInGameGpsQuery(that.actionId, that
|
|
|
+ .routeId)
|
|
|
+ that.nextCP = await that.getToNextControlPointInGame(that.actionId, that.routeId)
|
|
|
//// leaflet.leafletHelper.global.setPlayers(that.players)
|
|
|
// leafletHelper.global.setPlayersPosition(that.players_position)
|
|
|
that.handleMapDrawPlayer()
|
|
|
that.handleMapDrawTrail()
|
|
|
}, 1000);
|
|
|
-
|
|
|
- // await mapHelper.handleMapInfo(this, this.mapInfo)
|
|
|
- this.handleMapToggle()
|
|
|
},
|
|
|
- //场控端_活动详情
|
|
|
- async getToActionDetail(actId) {
|
|
|
+ //场控端_地图详情
|
|
|
+ async getToMapDetail(mapId) {
|
|
|
try {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
// 创建请求参数并赋值
|
|
|
var request = new IdRequest()
|
|
|
- request.setId(actId)
|
|
|
+ request.setId(mapId)
|
|
|
+ // 调用客户端相应的grpc方法,发送grpc请求,并接受后台发送回来的返回值
|
|
|
+ this.$client.toMapDetail(request, this.metadata, (err, response) => {
|
|
|
+ if (err) {
|
|
|
+ console.warn(`[toMapDetail] err: code = ${err.code}` +
|
|
|
+ `, message = "${err.message}"`)
|
|
|
+ reject(err)
|
|
|
+ } else {
|
|
|
+ let res = response.toObject()
|
|
|
+ // console.log('[toMapDetail]', res)
|
|
|
+ resolve(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.log('[getToMapDetail] err', e)
|
|
|
+ reject(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //场控端_活动详情
|
|
|
+ async getToActionDetail(actId, routeId = 0) {
|
|
|
+ try {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // 创建请求参数并赋值
|
|
|
+ var request = new ToActionIdAndCourseIdRequest()
|
|
|
+ request.setActid(actId)
|
|
|
+ request.setCourseid(routeId)
|
|
|
// 调用客户端相应的grpc方法,发送grpc请求,并接受后台发送回来的返回值
|
|
|
this.$client.toActionDetail(request, this.metadata, (err, response) => {
|
|
|
if (err) {
|
|
|
@@ -267,25 +351,26 @@
|
|
|
}
|
|
|
},
|
|
|
//场控端_正在进行中所有用户实时信息
|
|
|
- async getToUsersInGameDetail(actId) {
|
|
|
+ async getToUsersInGameDetail(actId, routeId = 0) {
|
|
|
try {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
// 创建请求参数并赋值
|
|
|
- var request = new IdRequest()
|
|
|
- request.setId(actId)
|
|
|
+ var request = new ToActionIdAndCourseIdRequest()
|
|
|
+ request.setActid(actId)
|
|
|
+ request.setCourseid(routeId)
|
|
|
// 调用客户端相应的grpc方法,发送grpc请求,并接受后台发送回来的返回值
|
|
|
this.$client.toUsersInGameDetail(request, this.metadata, (err,
|
|
|
response) => {
|
|
|
- if (err) {
|
|
|
- console.warn(`[toUsersInGameDetail] err: code = ${err.code}` +
|
|
|
- `, message = "${err.message}"`)
|
|
|
- reject(err)
|
|
|
- } else {
|
|
|
- let res = response.toObject()
|
|
|
- // console.log('[toUsersInGameDetail]', res)
|
|
|
- resolve(res.usersList)
|
|
|
- }
|
|
|
- })
|
|
|
+ if (err) {
|
|
|
+ console.warn(`[toUsersInGameDetail] err: code = ${err.code}` +
|
|
|
+ `, message = "${err.message}"`)
|
|
|
+ reject(err)
|
|
|
+ } else {
|
|
|
+ let res = response.toObject()
|
|
|
+ // console.log('[toUsersInGameDetail]', res)
|
|
|
+ resolve(res.usersList)
|
|
|
+ }
|
|
|
+ })
|
|
|
});
|
|
|
} catch (e) {
|
|
|
console.log('[getToUsersInGameDetail] err', e)
|
|
|
@@ -293,31 +378,78 @@
|
|
|
}
|
|
|
},
|
|
|
//场控端_正在进行中所有用户实时gps查询
|
|
|
- async getToUsersInGameGpsQuery(actId) {
|
|
|
+ async getToUsersInGameGpsQuery(actId, routeId = 0) {
|
|
|
try {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
// 创建请求参数并赋值
|
|
|
- var request = new IdRequest()
|
|
|
- request.setId(actId)
|
|
|
+ var request = new ToActionIdAndCourseIdRequest()
|
|
|
+ request.setActid(actId)
|
|
|
+ request.setCourseid(routeId)
|
|
|
// 调用客户端相应的grpc方法,发送grpc请求,并接受后台发送回来的返回值
|
|
|
this.$client.toUsersInGameGpsQuery(request, this.metadata, (err,
|
|
|
response) => {
|
|
|
- if (err) {
|
|
|
- console.warn(`[toUsersInGameGpsQuery] err: code = ${err.code}` +
|
|
|
- `, message = "${err.message}"`)
|
|
|
- reject(err)
|
|
|
- } else {
|
|
|
- let res = response.toObject()
|
|
|
- // console.log('[toUsersInGameGpsQuery]', res)
|
|
|
- resolve(res.gpsinfoList)
|
|
|
- }
|
|
|
- })
|
|
|
+ if (err) {
|
|
|
+ console.warn(`[toUsersInGameGpsQuery] err: code = ${err.code}` +
|
|
|
+ `, message = "${err.message}"`)
|
|
|
+ reject(err)
|
|
|
+ } else {
|
|
|
+ let res = response.toObject()
|
|
|
+ // console.log('[toUsersInGameGpsQuery]', res)
|
|
|
+ resolve(res.gpsinfoList)
|
|
|
+ }
|
|
|
+ })
|
|
|
});
|
|
|
} catch (e) {
|
|
|
console.log('[getToUsersInGameGpsQuery] err', e)
|
|
|
reject(e)
|
|
|
}
|
|
|
},
|
|
|
+ //场控端_正在进行中所有用户即将到达控制点列表,结果去重
|
|
|
+ async getToNextControlPointInGame(actId, routeId = 0) {
|
|
|
+ try {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // 创建请求参数并赋值
|
|
|
+ var request = new ToActionIdAndCourseIdRequest()
|
|
|
+ request.setActid(actId)
|
|
|
+ request.setCourseid(routeId)
|
|
|
+ // 调用客户端相应的grpc方法,发送grpc请求,并接受后台发送回来的返回值
|
|
|
+ this.$client.toNextControlPointInGame(request, this.metadata, (err,
|
|
|
+ response) => {
|
|
|
+ if (err) {
|
|
|
+ console.warn(`[toNextControlPointInGame] err: code = ${err.code}` +
|
|
|
+ `, message = "${err.message}"`)
|
|
|
+ reject(err)
|
|
|
+ } else {
|
|
|
+ let res = response.toObject()
|
|
|
+ // console.log('[toNextControlPointInGame]', res)
|
|
|
+ resolve(res.nextcontrolpointrsList)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.log('[getToUsersInGameGpsQuery] err', e)
|
|
|
+ reject(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onActionChange(e) {
|
|
|
+ const sltActRoute = e.detail.value
|
|
|
+ console.log("onActionChange", sltActRoute)
|
|
|
+ this.$store.commit('setMapSltActRoute', sltActRoute)
|
|
|
+
|
|
|
+ if (sltActRoute == null || sltActRoute.length == 0) {
|
|
|
+ this.reLoad()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loadData(sltActRoute)
|
|
|
+ },
|
|
|
+ onActionsTreePopupOpened() {
|
|
|
+ // console.log("onActionsTreePopupOpened")
|
|
|
+ this.actionsTreePopup = true
|
|
|
+ },
|
|
|
+ onActionsTreePopupClosed() {
|
|
|
+ // console.log("onActionsTreePopupClosed")
|
|
|
+ this.actionsTreePopup = false
|
|
|
+ },
|
|
|
onPlayerListItemClick(item) {
|
|
|
// console.log("onListItemClick", item)
|
|
|
this.handlePlayerListItemClick(item)
|
|
|
@@ -333,28 +465,7 @@
|
|
|
icon: 'none'
|
|
|
})
|
|
|
}
|
|
|
- }
|
|
|
- // trigger(e) {
|
|
|
- // console.log(e)
|
|
|
- // this.content[e.index].active = !e.item.active
|
|
|
- // uni.showModal({
|
|
|
- // title: '提示',
|
|
|
- // content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
|
|
|
- // success: function(res) {
|
|
|
- // if (res.confirm) {
|
|
|
- // console.log('用户点击确定')
|
|
|
- // } else if (res.cancel) {
|
|
|
- // console.log('用户点击取消')
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- // },
|
|
|
- // fabClick() {
|
|
|
- // uni.showToast({
|
|
|
- // title: '点击了悬浮按钮',
|
|
|
- // icon: 'none'
|
|
|
- // })
|
|
|
- // },
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -379,7 +490,7 @@
|
|
|
// },
|
|
|
beforeDestroy() {
|
|
|
// console.log("beforeDestroy")
|
|
|
- // clearInterval(this.interval)
|
|
|
+ // clearInterval(this.interval_loadData)
|
|
|
leafletHelper.free()
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -387,23 +498,34 @@
|
|
|
// console.log('视图层接收到数据:', data);
|
|
|
// },
|
|
|
initMap() {
|
|
|
- // leafletHelper.init(this, 'map', [36.67175772119628, 117.12792580603369], 17)
|
|
|
-
|
|
|
- // const mapid = this.actionDetail.mapinfo.lid
|
|
|
- const mapurl = this.actionDetail.mapinfo.mapurl
|
|
|
- const centPoint = [this.actionDetail.mapinfo.centerlatitude, this.actionDetail.mapinfo.centerlongitude]
|
|
|
- const zoomNum = this.actionDetail.mapinfo.defscale
|
|
|
- leafletHelper.init(this, 'map', centPoint, zoomNum)
|
|
|
- leafletHelper.addMapLayer(mapurl)
|
|
|
+ if (this.mapDetail != null && this.mapDetail.mapinfo != null) {
|
|
|
+ // const mapid = this.mapDetail.mapinfo.lid
|
|
|
+ const mapUrl = this.mapDetail.mapinfo.mapurl
|
|
|
+ const centPoint = [this.mapDetail.mapinfo.centerlatitude, this.mapDetail.mapinfo.centerlongitude]
|
|
|
+ const zoomNum = this.mapDetail.mapinfo.defscale
|
|
|
+ const mapOptions = {
|
|
|
+ center: centPoint,
|
|
|
+ zoom: zoomNum,
|
|
|
+ maxBounds: [
|
|
|
+ [36.659365, 117.105246],
|
|
|
+ [36.653753, 117.122841]
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ leafletHelper.init(this, 'map', mapUrl, mapOptions)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleWindowResize() {
|
|
|
+ leafletHelper.onWindowResize()
|
|
|
},
|
|
|
handleMapDrawRoute() {
|
|
|
// leafletHelper.global.setCheckPoints(this.checkPoints)
|
|
|
+ // leafletHelper.global.setRoutes(this.mapDetail.routesList)
|
|
|
leafletHelper.global.setRoutes(this.actionDetail.routesList)
|
|
|
|
|
|
// leafletHelper.checkPoint.drawAllCheckPoints()
|
|
|
// leafletHelper.checkPoint.drawPath()
|
|
|
leafletHelper.route.drawAllRoutes()
|
|
|
- leafletHelper.route.drawAllPath()
|
|
|
+ // leafletHelper.route.drawAllPath()
|
|
|
},
|
|
|
handleMapDrawPlayer() {
|
|
|
leafletHelper.global.setPlayers(this.players)
|
|
|
@@ -415,6 +537,7 @@
|
|
|
leafletHelper.global.dealStaleData()
|
|
|
},
|
|
|
handleMapDrawTrail() {
|
|
|
+ this.trailTime = leafletHelper.config.trailTime
|
|
|
// leafletHelper.player.drawOneTrail(2, 10000)
|
|
|
// leafletHelper.player.drawOneTrail(3, 10000)
|
|
|
// leafletHelper.player.drawOneTrail(2, 0, false)
|
|
|
@@ -422,10 +545,15 @@
|
|
|
},
|
|
|
handleMapToggle() {
|
|
|
// leafletHelper.checkPoint.toggle(true)
|
|
|
- leafletHelper.route.toggle(true)
|
|
|
- leafletHelper.player.togglePlayer(true)
|
|
|
- leafletHelper.player.toggleTooltip(true)
|
|
|
- leafletHelper.player.toggleTrail(true)
|
|
|
+ // leafletHelper.route.toggle(true)
|
|
|
+ // leafletHelper.player.togglePlayer(true)
|
|
|
+ // leafletHelper.player.toggleTooltip(true)
|
|
|
+ // leafletHelper.player.toggleTrail(true)
|
|
|
+
|
|
|
+ leafletHelper.route.toggle(this.$store.state.mapControlRoute)
|
|
|
+ leafletHelper.player.togglePlayer(this.$store.state.mapControlPlayer)
|
|
|
+ leafletHelper.player.toggleTooltip(this.$store.state.mapControlTooltip)
|
|
|
+ leafletHelper.player.toggleTrail(this.$store.state.mapControlTrail)
|
|
|
},
|
|
|
handlePlayerListItemClick(item) {
|
|
|
this.focusPlayerId = item.id
|
|
|
@@ -436,7 +564,11 @@
|
|
|
return leafletHelper.player.getPlayerColor(playerId)
|
|
|
else
|
|
|
return leafletHelper.config.gStyle.marker.focus.fillColor
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 页面reLoad前调用本方法,将用户数据先保存,页面重载后再进行数据恢复
|
|
|
+ savePlayersData() {
|
|
|
+ leafletHelper.global.savePlayersData()
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
@@ -452,7 +584,7 @@
|
|
|
:focus-visible {
|
|
|
outline: none;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.map {
|
|
|
flex: 1 1 auto;
|
|
|
background-color: white;
|
|
|
@@ -463,9 +595,28 @@
|
|
|
}
|
|
|
|
|
|
.popup {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
background-color: #f5f5f5;
|
|
|
- // border-left: #ff0000 solid 5px;
|
|
|
- // overflow: hidden;
|
|
|
+ border-left: #dedede solid 1px;
|
|
|
+ // border-top: #dedede solid 1px;
|
|
|
+ // overflow: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actionsTree {
|
|
|
+ width: 100%;
|
|
|
+ // background-color: #ffffff;
|
|
|
+
|
|
|
+ /deep/ .input-value-border {
|
|
|
+ border-top: 1px solid #e5e5e5;
|
|
|
+ border-bottom: 1px solid #e5e5e5;
|
|
|
+ border-radius: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .uni-scroll-view {
|
|
|
+ overflow: unset !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.scroll-Y {
|
|
|
@@ -473,7 +624,7 @@
|
|
|
}
|
|
|
|
|
|
.list {
|
|
|
- margin-left: 2px;
|
|
|
+ margin-left: -6px;
|
|
|
}
|
|
|
|
|
|
.list-item {
|
|
|
@@ -482,11 +633,11 @@
|
|
|
/* #endif */
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- height: 60px;
|
|
|
+ height: 46px;
|
|
|
}
|
|
|
|
|
|
.list-item-focus {
|
|
|
- background-color: #fffaef;
|
|
|
+ background-color: #fffaef !important;
|
|
|
}
|
|
|
|
|
|
.slot-box {
|
|
|
@@ -495,30 +646,39 @@
|
|
|
/* #endif */
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
+ max-width: 280px;
|
|
|
}
|
|
|
|
|
|
.slot-image {
|
|
|
/* #ifndef APP-NVUE */
|
|
|
display: block;
|
|
|
/* #endif */
|
|
|
- margin-right: 10px;
|
|
|
+ margin-right: 6px;
|
|
|
width: 6px;
|
|
|
- height: 39px;
|
|
|
+ height: 33px;
|
|
|
align-self: center;
|
|
|
}
|
|
|
|
|
|
.slot-title {
|
|
|
flex: 1;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 13px;
|
|
|
color: #424242;
|
|
|
+ line-height: 18px;
|
|
|
// margin-right: 10px;
|
|
|
+ // overflow:hidden; //超出的文本隐藏
|
|
|
+ // text-overflow:ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
}
|
|
|
|
|
|
.slot-note {
|
|
|
flex: 1;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 12px;
|
|
|
color: #7d8da7;
|
|
|
+ line-height: 18px;
|
|
|
// margin-right: 10px;
|
|
|
+ // overflow:hidden; //超出的文本隐藏
|
|
|
+ // text-overflow:ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
}
|
|
|
|
|
|
.slot-phone {
|
|
|
@@ -527,8 +687,7 @@
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- // .fab {
|
|
|
- // z-index: 1000;
|
|
|
- // width: 20px;
|
|
|
- // }
|
|
|
+ /deep/ .uni-data-tree-dialog {
|
|
|
+ top: 39px;
|
|
|
+ }
|
|
|
</style>
|