guangyin
/
hbt-training-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into guangyin

wuyanfu
guangyin 2023-05-17 16:56:27 +08:00
parent 7dde068ed0 c9a45ca8f6
commit b3d6a8aa29
8 changed files with 240 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map.component.vue
View File

@ -58,8 +58,8 @@ export default class MapComponent extends Vue {
}
mounted(){
window.addEventListener("resize",this.resize)
document.addEventListener("mousemove", this.fixedCamera)
this.player = this.playerUtils.initPlayer(this.id);
// document.addEventListener("mousemove", this.fixedCamera)
this.player = this.playerUtils.initPlayer(this.id,"2423385884355");
this.playerApi = this.player.getAPI();
}

14
src/mock/index.ts
View File

@ -13,12 +13,15 @@ import dangrous from "./dangrous";
export class MockData{
public static getPeopleList(){
const data = [] as any;
for(let i=0;i<100;i++){
for(let i=0;i<50;i++){
data.push({
id:Mock.mock("@id"),
name:Mock.mock("@cname"),
job:"安全顾问",
position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
position:turf.randomPosition([
11660757, 3692398.75,
11661124, 3692643.5
]),
time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
tel:Mock.mock("@integer(13200000000, 13299999999)")
})
@ -495,13 +498,16 @@ export class MockData{
const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"];
const typeList = ["罐车","挂车","油车"];
const data = [] as any;
for(let i=0;i<20;i++){
for(let i=0;i<10;i++){
data.push({
id:Mock.mock("@id"),
time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
startTime : "7:00",
endTime : "8:00",
position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
position:turf.randomPosition([
11660757, 3692398.75,
11661124, 3692643.5
]),
plate:plateList[i%5],
remark:typeList[i%3],
type:i%2

21
src/mock/layer.ts
View File

@ -18,23 +18,34 @@ enum COLOR{
// 四色图-红
RED="#FF5959"
}
import CloseService from "@/service/close.service";
import ParkFileService from "@/service/park.service";
import Vue from "vue";
const service = new CloseService();
const parkService = new ParkFileService()
const glob = new Vue();
export default [ {
name:"电子围栏",
ids:[] as string[],
type:"area",
value:"bounds",
color:COLOR.BOUNDS,
init:async ()=>{
return await parkService.getRealBounds()
},
selected:false,
pages:["manage"]
},{
name:"人员定位",
ids:[] as string[],
type:"moveMarker",
init:async ()=>{
return await service.getPeopleList()
},
value:"peo",
url: "@path:people.png",
pakFilePath: "@path:DTS_Library_V5.4.pak",
assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
coordinateType:1,
scale:[0,0,0],
selected:false,
pages:["home","view"]
},{
@ -42,14 +53,16 @@ export default [ {
ids:[] as string[],
type:"moveMarker",
value:"car",
pakFilePath: "@path:DTS_Library_V5.4.pak",
assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
urls:[
"@path:car.png",
"@path:d-car.png",
"@path:d-car.png",
],
coordinateType:1,
init:async ()=>{
return await service.getCarList()
},
scale:[0,0,0],
selected:false,
pages:["home","view"]
}]

30
src/store/index.ts
View File

@ -17,6 +17,7 @@ export default new Vuex.Store({
specialEnvList:[],
dangrousList:[],
safeGoods:[],
boundsData:[]
},
getters: {
},
@ -24,39 +25,14 @@ export default new Vuex.Store({
setPeopleList(state,data){
state.peopleList = data;
},
setCompanyList(state,data){
state.companyList = data;
},
setCarList(state,data){
state.carList = data;
},
setCameraList(state,data){
state.cameraList = data;
},
upDateWaringList(state:any,data){
state.warningList = [...data,...state.warningList];
},
setHiddenDangrousList(state:any,data){
state.hiddenDangrousList = data;
},
setDangrousWorkList(state:any,data){
state.dangrousWorkList = data;
},
setGroundEnvList(state:any,data){
state.groundEnvList = data;
},
setSpecialEnvList(state:any,data){
state.specialEnvList = data;
},
upDateEventList(state:any,data){
state.eventList = [...data,...state.eventList];
},
setDangrousList(state:any,data){
state.dangrousList = data;
},
setSafeGoods(state:any,data){
state.safeGoods = data;
setBoundsData(state,data){
state.boundsData = data;
},
},
actions: {

16
src/utils/player.ts
View File

@ -5,9 +5,10 @@ import * as acapi from '../../public/ac.min.js'
// import acapi from 'ac.min.js'
export default class PlayerUtils{
public api:any;
public initPlayer(domId){
public initPlayer(domId,iid?){
const player = new acapi.DigitalTwinPlayer(process.env.VUE_APP_PALYER_URL,{
domId,
iid,
// reset:true,
apiOptions:{
onReady: this.onReady,
@ -52,8 +53,10 @@ export default class PlayerUtils{
public onMouseLeave :any= null;
public onMouseMove :any= null;
public onMouseDown :any= null;
public onMouseUp :any= (data)=>{
console.log(data)
public onMouseUp :any= (res)=>{
this.api.camera.get((data)=>{
console.log(data)
})
};;
public onKeyDown :any= null;
public onKeyUp :any= null;
@ -123,12 +126,15 @@ export default class PlayerUtils{
* @returns 经纬度 lon,lat]
*/
public getLonLat(coordinates,coordinateType?,fn?){
public async getLonLat(coordinates,coordinateType?,fn?){
if(!coordinateType){
// 1 84坐标系 2 GCJ02 3 BD09
coordinateType=1;
}
const result = this.api.coord.pcs2gcs(coordinates,coordinateType,fn)
if(!coordinates[2]){
coordinates[2] = 0
}
const result = await this.api.coord.pcs2gcs(coordinates,coordinateType,fn)
if(result.resultMessage==="OK"){
return result.coordinates
}else{

170
src/views/base.component.ts
View File

@ -46,19 +46,13 @@ export default class BaseComponent extends Vue {
return
}
this.player.api.camera.lookAt(
13312716.658437,
4098255.982695,
60.714346,
11660869.788125,
3692656.110371,
194.028672,
0,
-20,
-45
-59.638443,
63.604168
)
// this.player.api.camera.get((res)=>{
// console.log(res)
// })
// return await this.player.api.tileLayer.focus("48D390964B7F0D37D07DD8A2D5596E64",330,time)
}
// 添加电子围栏 // 安全线 // 实控线 // 规划线
@ -90,6 +84,152 @@ export default class BaseComponent extends Vue {
}
}
public async addMarker(layer,trackCustom?){
if(!layer.ids.length){
const options = layer.data.map((item,index)=>{
return {
id:item.id,
groupId:layer.value,
coordinate:item.position,
coordinateType:layer.coordinateType?layer.coordinateType:0,
displayMode:2,
imagePath:layer.url || layer.urls[item.type],
imageSize:[48,48],
// popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item),
lineSize:[2,40],
useTextAnimation: false,
lineOffset:[24,0],
autoHeight:true,
}
})
this.player.api.marker.add(options,(data)=>{
if(data.resultMessage==="OK"){
if(trackCustom){
this.player.api.marker.setAttachCustomObject(layer.data.map(item=>{
return{
markerId: item.id, //标注id
objectId: item.id, //自定义对象id
offset: [0, 0, 0] //偏移量
}
}),(res)=>{
console.log(res)
});
this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
const position = (await this.player.utils.getLonLat(item.position))[0]
const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
const newLocation = (await this.player.utils.getPosition(newPosition))[0];
if(!newLocation[2]){
newLocation[2] = 0
}
return {
id:item.id,
location:newLocation,
"smoothTime": 5
}
}),(data)=>{
console.log(data)
})
this.timerList[layer.value] = setInterval(()=>{
this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
const position = (await this.player.utils.getLonLat(item.position))[0]
const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
const newLocation = (await this.player.utils.getPosition(newPosition))[0];
if(!newLocation[2]){
newLocation[2] = 0
}
return {
id:item.id,
location:newLocation,
"smoothTime": 5
}
}),(data)=>{
console.log(data)
})
},5000)
}else{
layer.ids = options.map(item=>item.id);
}
}
})
}else{
if(layer.selected){
this.player.api.marker.show(layer.ids)
if(trackCustom){
this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
const position = (await this.player.utils.getLonLat(item.position))[0]
const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
const newLocation = (await this.player.utils.getPosition(newPosition))[0];
if(!newLocation[2]){
newLocation[2] = 0
}
return {
id:item.id,
location:newLocation,
"smoothTime": 5
}
}))
this.timerList[layer.value] = setInterval(()=>{
this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
const position = (await this.player.utils.getLonLat(item.position))[0]
const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
const newLocation = (await this.player.utils.getPosition(newPosition))[0];
if(!newLocation[2]){
newLocation[2] = 0
}
return {
id:item.id,
location:newLocation,
"smoothTime": 5
}
}))
},5000)
}
}else{
if(trackCustom){
clearInterval(this.timerList[layer.value]);
this.timerList[layer.value] = null;
}
this.player.api.marker.hide(layer.ids)
}
}
}
public addCustom(layer,needMarker?){
if(!layer.ids.length){
const options = layer.data.map((item,index)=>{
return {
id:item.id,
groupId:layer.value,
pakFilePath:this.pakFilePath,
assetPath:layer.assetPath,
location:item.position,
smoothMotion:1,
scale:layer.scale,
rotation:[0,90,0]
}
})
this.player.api.customObject.add(options,(data)=>{
if(data.resultMessage==="OK"){
if(needMarker){
console.log(data)
this.addMarker(layer,needMarker)
}else{
layer.ids = options.map(item=>item.id)
}
}
})
}else{
if(layer.selected){
this.player.api.customObject.show(layer.ids)
}else{
this.player.api.customObject.hide(layer.ids)
}
}
}
public onFocus(data){
this.player.api[data.type].focus(data.id)
@ -105,7 +245,13 @@ export default class BaseComponent extends Vue {
//
}
destroyed(){
//
this.layerData.forEach(item=>{
if(this.timerList[item.value]){
clearInterval(this.timerList[item.value]);
this.timerList[item.value] = null;
}
})
}

2
src/views/overview.component.html
View File

@ -1,6 +1,6 @@
<div class="overview-container">
<!-- <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>-->
<MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
<div class="bg-box left animate__animated">
<div class="panel-container">

61
src/views/overview.component.ts
View File

@ -38,8 +38,8 @@ export default class OverViewComponent extends BaseComponent {
// 是否隐藏除地图外所有板块
public hideAllPanel = false;
created(){
this.currentLayers = this.getCurrentLayers()
async created(){
// this.currentLayers = this.getCurrentLayers();
}
public upDateEventList(){
const eventList = MockData.getEventList().data
@ -51,19 +51,6 @@ export default class OverViewComponent extends BaseComponent {
this.$store.commit("setHiddenDangrousList",res.data)
})
}
// 获取车辆
public getCarList(){
this.closeService.getCarList().then((res)=>{
this.dataList["car"] = res.data;
this.$store.commit("setCarList",res.data)
})
}// 获取车辆
public getPersonList(){
this.closeService.getPeopleList().then((res)=>{
this.dataList["peo"] = res.data;
this.$store.commit("setPeopleList",res.data)
})
}
// 地图初始化后
public getMap(store: any) {
this.player = store;
@ -73,6 +60,7 @@ export default class OverViewComponent extends BaseComponent {
this.player.api.polygon3d.clear();
this.player.api.marker.clear();
this.player.api.marker3d.clear();
this.player.api.settings.setInteractiveMode(0);
this.player.api.polyline.clear();
this.player.api.heatmap.clear();
this.currentLayers = this.getCurrentLayers();
@ -80,15 +68,15 @@ export default class OverViewComponent extends BaseComponent {
}
public handleChange(data) {
console.log(data)
if(data.GroupID){
const currentData = this.dataList[data.GroupID].find(item=>item.id === data.Id);
}
}
public navChange(data: string) {
this.currentNav = data;
this.currentLayers = this.getCurrentLayers()
if(this.player){
this.currentLayers = this.getCurrentLayers()
this.resetMap();
}
console.log('当前点击导航', data)
@ -126,8 +114,12 @@ export default class OverViewComponent extends BaseComponent {
}
public toggleAllPanel(){
this.hideAllPanel = true;
this.drawerChange(false)
this.hideAllPanel = !this.hideAllPanel;
this.drawerChange(!this.hideAllPanel)
if(!this.hideAllPanel){
this.player.api.settings.setInteractiveMode(0)
}
}
public toggleHeight(){
@ -140,9 +132,26 @@ export default class OverViewComponent extends BaseComponent {
return
}
layer.selected = !layer.selected;
if(layer.type === "moveMarker"){
this.addCustom(layer,true)
}
}
//进入自由导览
showView(){
this.toggleAllPanel();
this.player.api.camera.lookAt(
11660667.474375,
3692632.815,
11.3054,
0,
-0.822798,
88.42289,
2,
()=>{
this.player.api.settings.setInteractiveMode(1);
this.player.api.settings.setMainUIVisibility(false)
})
//todo 进入自由导览
}
//展开导览右侧
@ -171,7 +180,10 @@ export default class OverViewComponent extends BaseComponent {
public getCurrentLayers(){
const layers = [] as any;
this.layerData.forEach((item:any)=>{
this.layerData.forEach(async (item:any)=>{
if(!item.data){
item.data = (await item.init()).data
}
if(item.pages.includes(this.currentNav)){
if(!item.selected){
this.toggleLayer(item)
@ -183,13 +195,16 @@ export default class OverViewComponent extends BaseComponent {
}
}
})
console.log(layers)
return layers
}
destroyed() {
deactivated(){
console.log(123)
}
beforeDestory() {
if (this.player) {
this.player = null
}