提交 7fcd220c 作者: 翁进城

feat: 飞控中心无人机应用无人机列表接入

上级 60781650
...@@ -33,6 +33,7 @@ class Control_API { ...@@ -33,6 +33,7 @@ class Control_API {
static getUavTree(params) { static getUavTree(params) {
return request({ return request({
url: '/dms/uav/tree', url: '/dms/uav/tree',
// url: '/crm/personalCenter/list?id=4',
method: 'get', method: 'get',
params params
}); });
......
...@@ -5,10 +5,11 @@ import router from '../router'; ...@@ -5,10 +5,11 @@ import router from '../router';
import store from '../store'; import store from '../store';
let prodUrl = 'https://tmj.mmcuav.cn'; let prodUrl = 'https://tmj.mmcuav.cn';
let devUrl = 'https://test.tmj.mmcuav.cn' let devUrl = 'https://test.tmj.mmcuav.cn/'
const $axios = axios.create({ const $axios = axios.create({
// baseURL: process.env.VUE_APP_BASE_API_TG // baseURL: process.env.VUE_APP_BASE_API_TG
// withCredentials: true
}); });
Vue.prototype.$http = axios; Vue.prototype.$http = axios;
...@@ -27,10 +28,12 @@ $axios.interceptors.request.use( ...@@ -27,10 +28,12 @@ $axios.interceptors.request.use(
config.baseURL = prodUrl; config.baseURL = prodUrl;
} }
const token = localStorage.getItem('tmj_token'); const token = store.state.token;
if (token) { if (token) {
config.headers['token'] = token; config.headers['token'] = token;
config.headers['channel'] = 'channel'; // 渠道 主平台 子平台 后台 // config.headers['channel'] = 'channel'; // 渠道 主平台 子平台 后台
console.log('config', config)
config.params.token = token;
} }
return config; return config;
}, },
...@@ -65,11 +68,6 @@ $axios.interceptors.response.use( ...@@ -65,11 +68,6 @@ $axios.interceptors.response.use(
return Promise.resolve(response.data); return Promise.resolve(response.data);
case 401: case 401:
// resetMessage.error('登录失效');
store.commit('user/LOGIN_OUT');
router.replace({
path: '/login'
});
return Promise.reject(response); return Promise.reject(response);
case 403: case 403:
......
<template> <template>
<div class="wih100 ht100 cpt-cesium_layerBox"> <div id="layer-container" class="cpt-cesium_layer">
<div id="layer-container"></div>
</div> </div>
</template> </template>
<script> <script>
import { mapState, mapActions } from "vuex"; import { mapState, mapActions } from "vuex";
import { User } from "../../api"; import { User } from "../../api";
import _3dList from "./lib/3d";
import _2dList from './lib/2d';
export default { export default {
data() { data() {
return { return {
...@@ -22,34 +24,17 @@ export default { ...@@ -22,34 +24,17 @@ export default {
}; };
}, },
computed: { computed: {
...mapState([]), ...mapState('MMCFlightControlCenter', ['cesiumImagesLayers', 'cesium3DModels']),
...mapState(["mapMode"]), ...mapState(["mapMode"]),
}, },
watch: { watch: {
mapMode(newVal) {
switch (newVal) {
case 0:
this.imageryLayers.satellite.show = true;
this.imageryLayers.night.show = false;
// this.imageryLayers.text.show = true;
break;
case 1:
this.imageryLayers.satellite.show = false;
this.imageryLayers.night.show = true;
// this.imageryLayers.text.show = false;
break;
}
},
}, },
mounted() { mounted() {
if (!window.$mmc) { if (!window.$mmc) {
window.$mmc = {}; window.$mmc = {};
} }
window.$mmc.viewer = {}; window.$mmc.viewer = {};
// this.get_user_position()//获取用户位置
this.init_viewer(); this.init_viewer();
this.bus_getPositions();
}, },
methods: { methods: {
...mapActions([]), ...mapActions([]),
...@@ -87,11 +72,13 @@ export default { ...@@ -87,11 +72,13 @@ export default {
shouldAnimate: true, shouldAnimate: true,
homeButton: false, homeButton: false,
fullscreenButton: false, fullscreenButton: false,
vrButton: false,
baseLayerPicker: false, baseLayerPicker: false,
geocoder: true, geocoder: false,
timeline: false, timeline: false,
sceneModePicker: true, sceneModePicker: false,
navigationHelpButton: false, navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
infoBox: false, infoBox: false,
requestRenderMode: true, requestRenderMode: true,
scene3DOnly: false, scene3DOnly: false,
...@@ -104,19 +91,64 @@ export default { ...@@ -104,19 +91,64 @@ export default {
`layer-container`, `layer-container`,
viewerOptions viewerOptions
); );
// 卫星图
this.imageryLayers.satellite = this.viewer.imageryLayers.addImageryProvider( this.imageryLayers.satellite = this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({ new Cesium.UrlTemplateImageryProvider({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
maximumLevel: 18, maximumLevel: 18,
}) })
); );
// 街道图
this.imageryLayers.street = this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url:
"https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
})
);
// 夜视图
this.imageryLayers.night = this.viewer.imageryLayers.addImageryProvider( this.imageryLayers.night = this.viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({ new Cesium.UrlTemplateImageryProvider({
url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
maximumLevel: 16, maximumLevel: 16,
}) })
); );
// 地图标注
this.imageryLayers.text = this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:
"https://{s}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE={style}&TILEMATRIXSET={TileMatrixSet}&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=a5e0a8dcf07f40afe19b76bf8a32eef0",
layer: "cia",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
credit: new Cesium.Credit("天地图全球影像服务"),
tilingScheme: new Cesium.GeographicTilingScheme(), //采用经纬度投影
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileMatrixLabels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18"
],
maximumLevel: 18
})
)
this.imageryLayers.night.show = false; this.imageryLayers.night.show = false;
this.imageryLayers.street.show = false;
this.viewer.scene.camera.flyTo({ this.viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees( destination: Cesium.Cartesian3.fromDegrees(
this.init_lng, this.init_lng,
...@@ -125,11 +157,16 @@ export default { ...@@ -125,11 +157,16 @@ export default {
), ),
}); });
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'cesiumImagesLayers',
value: this.imageryLayers
})
// 加载三维倾斜 // 加载三维倾斜
window._3d = []; window.$mmc._3d = [];
/* const token = /* const token =
'r0G6d8tdvfgN_Aad1j28SGqj6ILgt1DNHpP9dK-FNVOVBPgcyaHiEs2z2qyv455bTHU8QaFTbt_Y_AdeAsPp-Q..'; */ 'r0G6d8tdvfgN_Aad1j28SGqj6ILgt1DNHpP9dK-FNVOVBPgcyaHiEs2z2qyv455bTHU8QaFTbt_Y_AdeAsPp-Q..'; */
window.___s3m.forEach(async (item) => { _3dList.forEach(async (item) => {
const obj = await this.viewer.scene.addS3MTilesLayerByScp( const obj = await this.viewer.scene.addS3MTilesLayerByScp(
`https://ct.mmcuav.cn:8443/iserver/services/${item}/rest/realspace/datas/Config/config`, `https://ct.mmcuav.cn:8443/iserver/services/${item}/rest/realspace/datas/Config/config`,
{ {
...@@ -137,15 +174,19 @@ export default { ...@@ -137,15 +174,19 @@ export default {
// cullEnabled: false // cullEnabled: false
} }
); );
window._3d.push(obj); window.$mmc._3d.push(obj);
if (item === "3D-ZQ-JLH") { if (item === "3D-ZQ-JLH") {
// 肇庆九龙湖的模型需要修改海拔, 使其贴地 // 肇庆九龙湖的模型需要修改海拔, 使其贴地
obj.style3D.bottomAltitude = -20; obj.style3D.bottomAltitude = -20;
} }
}); });
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'cesium3DModels',
value: window.$mmc._3d
})
// 二维影像缓存加载方式 // 二维影像缓存加载方式
window._2d = []; window.$mmc._2d = [];
["3D-ZQ-DH", "3D-local3DCache-s3mb"].forEach((item) => { ["3D-ZQ-DH", "3D-local3DCache-s3mb"].forEach((item) => {
this.viewer.scene this.viewer.scene
.open( .open(
...@@ -157,7 +198,7 @@ export default { ...@@ -157,7 +198,7 @@ export default {
} }
) )
.then((obj) => { .then((obj) => {
window._2d.push(obj); window.$mmc._2d.push(obj);
}); });
}); });
...@@ -170,21 +211,6 @@ export default { ...@@ -170,21 +211,6 @@ export default {
}); });
}; };
}, },
add_polyline(entities, data) {
return entities.add({
id: data.entity_id,
parent: data.parent || null,
polyline: {
positions: new Cesium.CallbackProperty(() => {
return data.positions;
}, false),
width: 5,
material: Cesium.Color.fromCssColorString("#6DD400"),
show: true,
...(data.options ? data.options : {}),
},
});
},
}, },
}; };
</script> </script>
...@@ -193,25 +219,20 @@ export default { ...@@ -193,25 +219,20 @@ export default {
.cesium_layerBox { .cesium_layerBox {
} }
.cpt-cesium_layer_1 { .cpt-cesium_layer {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0;
bottom: 0;
right: 0;
top: 0;
// #layer-container_1 { #layer-container {
// position: absolute; }
// left: 0;
// bottom: 0; ::v-deep .cesium-viewer-bottom {
// top: 0; display: none;
// right: 0; }
// width: 100%;
// height: 100%; ::v-deep .cesium-viewer-zoomIndicatorContainer {
// box-sizing: border-box; display: none;
// } }
} }
.videoWallMapStyle { .videoWallMapStyle {
......
export default["3D-ZQ-DH", "3D-local3DCache-s3mb"];
export default [
'3D-DH-LHZ',
'3D-FSJD',
'3D-HY-GXQ',
'3D-SX-TY',
'3D-SZ-SLSQ',
'3D-ZQYS',
'3D-SCYTS',
'3D-SZ-FT',
'3D-GZ',
'3D-SM',
'3D-ZQ-JLH',
'3D-DG-YJYAD'
];
switch (process.env.VUE_APP_ENV_TYPE) {
case "公网":
window.___s3m = [
"3D-DH-LHZ",
"3D-FSJD",
"3D-HY-GXQ",
"3D-SX-TY",
"3D-SZ-SLSQ",
"3D-ZQYS",
"3D-SCYTS",
"3D-SZ-FT",
"3D-GZ",
];
break;
default:
window.___s3m = [
"3D-9-1",
"3D-9-2",
"3D-9-3",
"3D-9-4",
"3D-9-4-bu",
// "3D-13-1",
// "3D-13-2",
"3D-LGZ-1",
"3D-XFZ",
"3D-XXZ-1-2",
"3D-XXZ-2-2",
"3D-XXZ-3-2",
"3D-YDZ",
// 永丰镇
"3D-YFZ-JM",
// 秦南镇
// 龙岗镇 JM
"3D-DGZ-JM-1",
"3D-DGZ-JM-2",
"3D-XXZ-3-3",
//数梦小镇
"3D-SMXZ",
//珠溪古镇
"3D-ZXGZ",
//先锋岛
"3D-XFD",
//金茂府周边
"3D-JMFZB",
//特警基地附近
"3D-TJJD",
// 2023年更新
"3D-YDZ",
"3D-QK15-2",
"3D-1619",
"3D-QK12",
"3D-QK14-6",
"3D-BCZ-2",
"3D-QK18-2",
"3D-dgz",
"3D-QK3",
"3D-QK5-S3MB",
"3D-QK10_11S3MB_2023",
"3D-YiQiQK10-2S3MB",
"3D-YiQiQK10-3-S3MB",
"3D-YiQiQK11-1S3MB",
"3D-YiQiQK11-2-S3MB",
"3D-YiQiQK11-3-S3MB",
"3D-QK1",
"3D-QK2",
"3D-QK6_2021_S3MB",
"3D-QK7_2021_S3MB",
"3D-QK8-2-S3MB",
"3D-QK8-5-S3MB",
"3D-QK9_S3MB",
// 粗模
"3D-_2_S3MB",
"3D-_1_S3MB_JM",
"3D-DZHZ-S3MB",
"3D-GW-S3MB",
"3D-LG-S3MB",
"3D-LW-S3MB",
// 南洋镇
"3D-NY-S3MB",
"3D-QN-S3MB",
"3D-SZ-S3MB",
"3D-XF-S3MB",
"3D-17S3MB",
"3D-QK8-3-S3MB",
"3D-QK8-4-S3MB",
"3D-QK13_S3M7",
"3D-BJ-S3MB-JM",
"3D-GM-S3MB-JM",
"3D-QK6-S3MB-JM",
"3D-QK7-S3MB-JM",
"3D-QK8-S3MB-JM",
"3D-YF-S3MB-JM",
"3D-ZZJD-S3MB-JM",
"3D-XX-S3MB-JM",
// 10-21 部署
"3D-QK4-X",
"3D-DZHDJQ",
"3D-BLGZ",
"3D-GWSQ-2",
"3D-NYZ",
"3D-LWZ-2",
"3D-DZH",
"3D-XFZ-4",
"3D-SZZ-2",
"3D-QK13_S3M"
];
break;
}
\ No newline at end of file
<!-- 飞控地图选择 -->
<template>
<div class="cpt-hwkeys">
<div class="hwkeys-wrap cp" @click="change" @mouseout="likai">
<div :class="{
'hwkeys-item': 1,
'hwkeys-item-satellite': 1,
}" v-for="item in tabs" :key="item.id" v-show="item.id == current" @click="handle_change(item.id)">
<!-- <div class="typeNmae">{{ item.name }}</div> -->
</div>
</div>
<div class="changeMapBox pa cp">
<div class="dise" @mouseout="likai">
<div class="bai" :class="{ active: !is_3d }" v-show="!is_3d" @click="handle_change_3d(true)">
2D
</div>
<div class="bai" :class="{ active: is_3d }" v-show="is_3d" @click="handle_change_3d(false)">
3D
</div>
</div>
<div v-for="item in tabs" :key="item.id" class="dise" @mousemove="jinru(item.id)">
<div :class="{
'hwkeys-item': 1,
[item.class_name]: 1,
}" @click="handle_change(item.id)" style="position: relative; overflow: hidden">
<div class="zimu" :class="{ sh: numId == item.id + 1 }">
{{ item.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
components: { },
data() {
return {
numId: null, //鼠标悬浮效果
active: false,
is_3d: true,
current: 1,
tabs: [
{
id: 1,
name: "卫星",
class_name: "hwkeys-item-satellite",
},
{
id: 2,
name: "街道",
class_name: "hwkeys-item-street",
},
{
id: 3,
name: "夜景",
class_name: "hwkeys-item-night-blue",
},
],
};
},
computed: {
...mapState('MMCFlightControlCenter', ['cesiumImagesLayers', 'cesium3DModels']),
},
mounted() {
console.log('handle_change2')
setTimeout(() => {
this.handle_change(1);
this.handle_change_3d(false);
}, 3500);
},
watch: {
},
methods: {
// 鼠标悬浮效果
jinru(id) {
this.numId = id + 1;
},
likai() {
this.numId = null;
},
handle_change_3d(bool) {
this.is_3d = bool;
this.$store.dispatch('MMCFlightControlCenter/switch3DModelsShow', {show: bool})
},
handle_change(id) {
this.current = id;
if (id == 1) {
this.cesiumImagesLayers.street && (this.cesiumImagesLayers.street.show = false);
this.cesiumImagesLayers.satellite && (this.cesiumImagesLayers.satellite.show = true);
this.cesiumImagesLayers.night && (this.cesiumImagesLayers.night.show = false);
} else if (id == 2) {
this.cesiumImagesLayers.street && (this.cesiumImagesLayers.street.show = true);
this.cesiumImagesLayers.satellite && (this.cesiumImagesLayers.satellite.show = false);
this.cesiumImagesLayers.night && (this.cesiumImagesLayers.night.show = false);
} else {
this.cesiumImagesLayers.street && (this.cesiumImagesLayers.street.show = false);
this.cesiumImagesLayers.satellite && (this.cesiumImagesLayers.satellite.show = false);
this.cesiumImagesLayers.night && (this.cesiumImagesLayers.night.show = true);
}
console.log('this.cesiumImagesLayers', this.cesiumImagesLayers, id)
},
change() {
this.active = !this.active;
// global_leyers.forEach(promise => {
// promise.then((layer) =>{
// layer.visible = this.active;
// });
// })
// base_layer.BASIC && (base_layer.BASIC.show = !this.active)
// base_layer.SATELLITE && (base_layer.SATELLITE.show = this.active)
},
},
};
</script>
<style lang="scss" scoped>
.cpt-hwkeys {
z-index: 1;
bottom: 30px;
.changeMapBox {
position: absolute;
width: 201px;
height: 48px;
background: rgba(9, 32, 87, 0.7);
border: 1px solid #43deff;
left: -159px;
margin-top: 3px;
display: none;
justify-content: space-around;
align-items: center;
// display: flex;
.hwkeys-item {
width: 30px;
height: 30px;
color: #04d5da;
text-align: right;
line-height: 49px;
// margin-top: 5px;
border-radius: 4px;
font-size: 9px;
border: 1px solid #eee;
cursor: pointer;
}
.hwkeys-item-satellite {
background: url(./assets/images/3d.png) center no-repeat;
}
.hwkeys-item-street {
background: url(./assets/images/2d.png) center no-repeat;
}
.hwkeys-item-night-blue {
background: url(./assets/images/night-blue.png) center no-repeat;
}
.hwkeys-item-3d {
background: url(./assets/images/3d.png) center no-repeat;
}
.hwkeys-item-2d {
background: url(./assets/images/2d.png) center no-repeat;
}
}
position: absolute;
right: 14px;
width: 104px;
height: 78px;
transition: 0.2s;
transform: translateX(0);
&.wkeysRight {
transition: 0.3s;
transform: translateX(-12px);
right: 40px;
}
.hwkeys-wrap {
position: absolute;
right: 0;
min-width: 52px;
height: 52px;
border-radius: 2px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
transition: width 0.25s;
&.active {
width: 166px;
}
.hwkeys-item {
width: 52px;
height: 52px;
box-sizing: border-box;
border-radius: 50%;
border: 3px solid #fff;
position: relative;
&.hwkeys-item-satellite {
// background: url(./assets/images/3d.png) center no-repeat;
background: url('./assets/images/ditu_icon.png') center no-repeat;
background-size: 112% 112%;
}
&.hwkeys-item-street {
background: url(./assets/images/2d.png) center no-repeat;
}
&.hwkeys-item-night-blue {
background: url(./assets/images/night-blue.png) center no-repeat;
// background-size: 115% 115%;
}
&.hwkeys-item-3d {
background: url(./assets/images/3d.png) center no-repeat;
}
&.hwkeys-item-2d {
background: url(./assets/images/2d.png) center no-repeat;
}
&.hwkeys-item-street {}
.typeNmae {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
height: 20px;
border: 1px solid #43ddfe;
box-shadow: inset 0 0 7px 0 #43ddfe;
border-radius: 1px;
font-size: 12px;
line-height: 20px;
text-align: center;
color: #04d5da;
}
}
}
.waterbox {
height: 48px;
width: 48px;
position: absolute;
top: 130px;
right: 0px;
border: 1px solid #04d5da;
background: rgba(22, 29, 45, 0.7);
color: #43deff;
font-size: 20px;
line-height: 48px;
}
.water_quality {
width: 459px;
height: 418px;
background: rgba(0, 23, 79, 0.7);
box-shadow: 0 2px 4px 0 rgba(1, 162, 255, 0.35),
inset 0 0 40px 0 rgba(0, 184, 255, 0.5);
border-radius: 13px;
}
}
.cpt-hwkeys:hover {
.changeMapBox {
display: flex;
}
}
.dise {
width: 34px;
height: 34px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.bai {
text-align: center;
line-height: 30px;
font-size: 14px;
color: #ffffff !important;
font-weight: 700;
width: 30px;
height: 30px;
// border: 2px solid #fff;
border-radius: 4px;
// margin: 5px 0 0 0;
background: #000000;
cursor: pointer;
}
.zimu {
position: absolute;
left: 0;
bottom: 0;
height: 18px;
opacity: 0.64;
background: #fff;
border-radius: 0 0 4px 4px;
width: 100%;
text-align: center;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #000;
line-height: 16px;
font-weight: 400;
display: none;
pointer-events: auto;
}
@keyframes fr {
from {
bottom: -60%;
}
to {
bottom: 0%;
}
}
.sh {
display: block;
animation: fr 1s linear;
animation-fill-mode: forwards;
pointer-events: auto;
}
.anniu {
width: 48px;
height: 48px;
background: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-content: center;
}
</style>
\ No newline at end of file
<template>
<div class="cpt-nest-dialog">
<div class="dialog-ctx" :style="containerStyle" :class="{ collapse,changeHeightStyle }">
<div v-if="showTitle" class="dialog-title">
{{ title }}
<div class="nav__left">
<slot name="nav__left"></slot>
</div>
<div class="nav__right " @click='handleClose'>
<slot name="nav__right"></slot>
</div>
</div>
<div class="dialog-bd">
<slot></slot>
</div>
<img v-if="isCollapse" @click="collapse = !collapse" src="./assets/images/collapse.png"
class="icon-collapse" />
<div class="wih100 h24 pa bottom0 nest-dialog_bottom cp pt5 tc" @click='changeHeight'>
<div class="w24 h24 dib " :class="changeHeightStyle ? 'xbStyle':'' "> <img src="./assets/images/xb.png" alt=""> </div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: () => "",
},
showTitle: {
type: Boolean,
default: () => false,
},
containerStyle: {
type: Object,
default: () => ({}),
},
isCollapse: {
type: Boolean,
default: () => true,
},
isCollapse2: {
type: Boolean,
default: () => false,
}
},
data() {
return {
collapse: false,
changeHeightStyle: false
};
},
methods: {
changeHeight() {
this.changeHeightStyle = !this.changeHeightStyle
},
handleClose() {
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
.cpt-nest-dialog {
position: absolute;
width: 100%;
z-index: 99;
.nest-dialog_bottom {
background: rgba(13, 82, 143, 0.60);
}
.changeHeightStyle {
height: 637px !important;
}
.xbStyle{
transform:rotateX(141deg) ;
}
.dialog-ctx {
position: absolute;
width: 476px;
height: 648px;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
top: 90px;
left: 116px;
box-sizing: border-box;
display: flex;
flex-direction: column;
transform: translateY(0);
transition: 0.3s;
&.collapse {
transform: translateX(-100%);
}
.dialog-title {
width: 100%;
height: 32px;
line-height: 32px;
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
flex-shrink: 0;
margin: 0 auto;
background-size: 100% 100%;
color: #fff;
text-align: center;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #92d9ff;
letter-spacing: 0;
text-align: center;
font-weight: 700;
position: relative;
.nav__right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
}
.dialog-bd {
flex: 1;
box-sizing: border-box;
overflow: auto;
}
.icon-close {
position: absolute;
top: 15px;
right: 13px;
font-size: 18px;
color: #2edfff;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.icon-collapse {
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
height: 80px;
z-index: 1;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<div class="ctx-box">
<div class="form-box" v-show="!visible">
<el-form :model="airline" :rules="rules">
<el-form-item label="航线名称">
<el-input v-model="airline.filename" placeholder="请输入航线名称" />
</el-form-item>
<el-form-item label="起始位置" prop="destination">
<div class="item-group">
<el-autocomplete :popper-append-to-body='false' v-model="start.name" :fetch-suggestions="handle_query_address_async"
placeholder="请输入起始位置" :trigger-on-focus="false" @select="
(item) => {
handle_select_address(item, 'start');
}
" clearable>
<template slot-scope="{ item }">
<div>
<span style="font-size: 14px; color: #333">{{
item.name
}}</span>
<span style="font-size: 12px; color: #999; margin-left: 12px">{{ item.address }}</span>
</div>
</template>
</el-autocomplete>
<div @click="handle_pick('start')" class="el-icon-location-outline"></div>
</div>
</el-form-item>
<el-form-item label="目的位置" prop="destination">
<div class="item-group">
<el-autocomplete :popper-append-to-body='false' v-model="end.name" :fetch-suggestions="handle_query_address_async" placeholder="请输入目标位置"
:trigger-on-focus="false" @select="
(item) => {
handle_select_address(item, 'end');
}
" clearable>
<template slot-scope="{ item }">
<div>
<span style="font-size: 14px; color: #333">{{
item.name
}}</span>
<span style="font-size: 12px; color: #999; margin-left: 12px">{{ item.address }}</span>
</div>
</template>
</el-autocomplete>
<div @click="handle_pick('end')" class="el-icon-location-outline"></div>
</div>
</el-form-item>
<el-form-item label="默认高度">
<div class="item-group">
<el-input v-model="airline.height" />
<span class="unit">( m )</span>
</div>
</el-form-item>
<el-form-item label="默认速度" prop="baseSpeed">
<div class="item-group">
<el-input v-model="airline.baseSpeed" />
<span class="unit">( m/s )</span>
</div>
</el-form-item>
</el-form>
<div class="bottom-box cp" @click="handle_autoPlan">飞行航线</div>
</div>
</div>
<div class="choose" v-show="visible">
<div class="ctx-box mt25">
<span class="aotu_tip">已自动规划{{ planlist.length }}条航线:</span>
<div class="planlist" v-for="(item, index) in planlist" :key="index">
<el-radio model="radio" :label="item.name">航线A:距离{{ item.distance / 1000 }}km,时长{{
item.duration
}}s</el-radio>
</div>
</div>
<div class="btns">
<div @click="close" class="btn ml80 cp">重新规划</div>
<div @click="handle_sava" class="btn ml50 cp">保存</div>
</div>
</div>
</div>
</template>
<script>
import API from "@/api";
import { Utils } from "@/lib/cesium";
import axios2 from "axios";
let SWXT_AUTOPLAN_URL = "http://32.128.12.138:21009/service/lbs/route/driving3";
let handler = null;
let data_srouce = null;
let location_icon = null;
let positions = [];
export default {
data() {
var validateSpeed = (rule, value, callback) => {
if (value < 2 || value > 15) {
return callback(new Error("速度最大值为15,最小值为2"));
}
};
return {
rules: {
baseSpeed: [
{ validator: validateSpeed, required: false, trigger: "blur" },
],
},
visible: false,
airline: {
filename: "",
baseSpeed: 2,
height: 100,
destination: null,
start: null,
},
planlist: [],
start: {
name: "",
lng: 0,
lat: 0,
},
end: {
name: "",
lng: 0,
lat: 0,
},
radio: "1",
positionsArr: [], //四维图新接口返回的所有航点(加了高度)
positionsArr_y: [], //四维图新接口返回的所有航点
lineDistance: 0, //四维图新接口返回的所有距离
lineTime: "", //四维图新接口返回的用时
};
},
inject: ["g_cesium_layer", "change_page"],
methods: {
// 点击自动航线的数据处理
async handle_autoPlan() {
// if (this.airline.filename == "") {
// this.$message.info('请输入航线名称!')
// } else if(this.airline.height>15 || this.airline.height<2){
// this.$$message.info("航线速度允许最大值为15,最小值为2!请重新输入!")
// }else {
this.visible = true;
// let data = {
// data: {
// rows: [
// {
// distance: 3366,
// duration: 553,
// niIds:
// "36546132,1,47;36546348,0,14;5119103,0,52;5106931,0,116;5106932,0,8;88050931,0,388;88050932,0,29;49719812,0,52;49719813,0,30;5106942,0,8;32083179,1,31;32083178,1,48;5224350,1,49;5119076,1,8;5119075,0,9;5224359,0,39;64858180,0,74;64858181,0,13;5230535,0,35;17430867,0,32;17430868,0,52;17430861,0,6;17430862,0,161;79278741,0,89;79278742,0,4;35802389,0,14;35802391,0,27;35802392,0,28;35802388,0,32;35802386,0,27;35802384,0,25;35802382,0,37;19497879,0,61;79278650,0,71;79278651,0,92;17430784,1,89;17430783,1,46;5119128,0,19;9226583,0,5;9226589,0,12;9226600,0,21;79278614,1,35;79278615,1,17;79278611,0,31;9226583,1,5;5119128,1,19;17430783,0,46;17430784,0,89;79278645,0,73;79278646,0,44;5227435,0,183;33254441,0,135;33254442,0,14;49512318,0,54;49512340,0,14;49512367,0,36;49512368,0,23;14663945,0,55;14663946,0,49;15781919,0,68;15781920,0,45;61613576,0,26;61613577,0,32;5117564,0,36;5117567,0,11;5117565,0,36;5119051,1,30;61613575,1,27;61613574,1,45;63929499,0,14;63929500,0,19;76828946,0,55;",
// routelatlon:
// "120.14201,33.3824;120.14248,33.38251;120.14248,33.38251;120.14251,33.38239;120.1426,33.3821;120.14264,33.38193;120.14264,33.38193;120.14301,33.38193;120.14364,33.38189;120.14389,33.38187;120.14398,33.38186;120.14444,33.38187;120.14524,33.38175;120.14571,33.38165;120.14615,33.38155;120.14646,33.38145;120.1467,33.38136;120.1469,33.38125;120.14709,33.38117;120.14744,33.38093;120.14779,33.38067;120.1479,33.38058;120.14801,33.38049;120.14838,33.38014;120.14859,33.37994;120.14864,33.37988;120.14878,33.37963;120.14899,33.37924;120.14921,33.37884;120.14921,33.37884;120.14926,33.37884;120.14932,33.37883;120.14963,33.37907;120.14974,33.37915;120.14985,33.37925;120.15022,33.37952;120.15032,33.3796;120.1506,33.37981;120.15087,33.38001;120.15106,33.38015;120.15129,33.38032;120.15134,33.38036;120.15174,33.38065;120.152,33.38082;120.15272,33.38124;120.15272,33.38124;120.15337,33.3807;120.1534,33.38067;120.15343,33.38064;120.15353,33.38055;120.15373,33.38037;120.15393,33.38018;120.15417,33.37996;120.15436,33.37978;120.15439,33.37975;120.15453,33.37961;120.15479,33.37936;120.15521,33.37894;120.1557,33.37845;120.15577,33.3784;120.15636,33.37784;120.15636,33.37784;120.15565,33.3773;120.15529,33.37702;120.15529,33.37702;120.15515,33.37714;120.15512,33.37718;120.15504,33.37727;120.15493,33.37743;120.15493,33.37743;120.1553,33.3775;120.1553,33.3775;120.15538,33.37736;120.15538,33.37736;120.15512,33.37718;120.15512,33.37718;120.15515,33.37714;120.15529,33.37702;120.15529,33.37702;120.15565,33.3773;120.15636,33.37784;120.15699,33.37824;120.15737,33.37848;120.15768,33.37866;120.15784,33.37877;120.15818,33.37901;120.15888,33.37954;120.15999,33.38033;120.1601,33.38041;120.1601,33.38041;120.16035,33.38004;120.16039,33.37999;120.16047,33.37988;120.16067,33.3796;120.16079,33.37942;120.16109,33.37899;120.16135,33.37861;120.16147,33.37843;120.16169,33.37808;120.16192,33.37772;120.16207,33.37752;120.16224,33.37727;120.16224,33.37727;120.16227,33.37729;120.16227,33.37729;120.16231,33.37732;120.16214,33.37755;120.16205,33.37767;120.16203,33.3777;120.16199,33.37776;120.16176,33.37812;120.16176,33.37812;120.16188,33.37819;120.16205,33.37828;120.16205,33.37828;120.16225,33.37804;120.16232,33.37799;120.1624,33.37799;120.16249,33.37804;",
// trafficSpeeds: "?x72",
// },
// ],
// },
// errcode: 0,
// errmsg: "",
// };
let sPoint = this.start.lng + "," + this.start.lat;
let ePoint = this.end.lng + "," + this.end.lat;
let data = await axios2
.get(SWXT_AUTOPLAN_URL, {
params: {
sPoint: sPoint,
ePoint: ePoint,
st: 4,
appKey: "f31add2975584a2b8c1d606e3f112f5a",
},
})
.then((res) => {
return res.data.data;
});
// let data1 = data.rows[0].routelatlon.replace(/\;/g, ",").split(",");
// let data_y = data.rows[0].routelatlon.replace(/\;/g, ",").split(",");
// this.positionsArr_y = data_y
// .slice(0, data_y.length - 1)
// .map((item) => item * 1);
let item = data.rows[0].item
console.log("item", item)
let crr = []
item.forEach(v => {
console.log("vv-->", v);
let arr = v.turnlatlon.split(",")
crr.push(Number(arr[0]), Number(arr[1]))
})
console.log("crr:", crr);
this.positionsArr_y = crr
// this.positionsArr_y = item.reduce((total, item, index) => {
// console.log("885885");
// let arr = item.split(",")
// total.push(arr[0], arr[1])
// console.log("total:", total);
// return total
// },[])
// this.positionsArr_y = data.rows[0].item.reduce((total, item, index) => {
// let arr = item.split(",")
// total.push(arr[0], arr[1])
// console.log("total:", total);
// return total
// },[])
console.log("positionsArr_y:", this.positionsArr_y);
this.positionsArr = this.positionsArr_y.reduce((total, item, index) => {
total.push(item);
if ((index + 1) % 2 === 0) {
total.push(10);
}
return total;
}, []);
console.log("positionsArr:", this.positionsArr);
this.lineDistance = data.rows[0].distance;
this.duration = data.rows[0].duration;
this.planlist = data.rows;
this.handle_autoPlan_map();
// }
},
// 点击自动航线的地图显示
async handle_autoPlan_map() {
const _this = this;
let cesium_layer = this.g_cesium_layer();
let viewer = cesium_layer.viewer();
if (this.positionsArr.length > 2) {
let potiion = Utils.transformWGS842Cartesian({
lng: Number(_this.end.lng),
lat: Number(_this.end.lat),
alt: 20000,
});
console.log("potiion:", potiion);
viewer.camera.flyTo({
destination: potiion,
});
}
data_srouce = new Cesium.CustomDataSource("airway_autoedit");
await viewer.dataSources.add(data_srouce);
let entities = data_srouce.entities;
console.log("map-_this.positionsArr", _this.positionsArr);
entities.add({
polyline: {
width: 3,
arcType: Cesium.ArcType.NONE,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.PURPLE
),
positions: new Cesium.CallbackProperty(() => {
return Cesium.Cartesian3.fromDegreesArrayHeights(
_this.positionsArr
);
}, false),
},
});
},
handle_query_address_async(address, cb) {
API.MAP.Geo({ keywords: address })
.then((res) => {
cb(res.data.data.rows);
})
.catch((e) => cb([]));
},
close() {
this.visible = false;
},
// 表单位置信息索引
handle_select_address(item, type) {
if (item) {
let location = item.location.split(",");
this[type].name = item.name;
this[type].lng = Number(location[0]);
this[type].lat = Number(location[1]);
let cesium_layer = this.g_cesium_layer();
let viewer = cesium_layer.viewer();
let potiion = Utils.transformWGS842Cartesian({
lng: this[type].lng,
lat: this[type].lat,
alt: 1000,
});
viewer.camera.flyTo({
destination: potiion,
});
this.init_location_icon(potiion);
}
},
// handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
// handler.setInputAction(async (movement) => {
// let windowPosition = movement.position;
// let pickedObject = viewer.scene.pick(windowPosition);
// let position = Utils.getCartesian3FromPX(viewer, movement.position);
// console.log("position-->",position);
// let wgs84 = Utils.transformCartesian2WGS84(position);
// let address = await API.MAP.Regeo({
// location: `${wgs84.lng},${wgs84.lat}`,
// });
// console.log("address-->", address);
// if (address) {
// this[type].name = address;
// this[type].lng = wgs84.lng;
// this[type].lat = wgs84.lat;
// } else {
// this.$el_message("地址解析失败", () => {}, "error");
// }
// }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
// },
// 点击表单旁图标定位
async handle_pick(type) {
handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(async (movement) => {
let position = Utils.getCartesian3FromPX(viewer, movement.position);
let wgs84 = Utils.transformCartesian2WGS84(position);
let address = await API.MAP.Regeo({
location: `${wgs84.lng},${wgs84.lat}`,
});
if (address) {
this[type].name = address;
this[type].lng = wgs84.lng;
this[type].lat = wgs84.lat;
// 生成图标
data_srouce = new Cesium.CustomDataSource("airway_edit");
await viewer.dataSources.add(data_srouce);
let entities = data_srouce.entities;
entities.add({
position: new Cesium.CallbackProperty(() => {
return Cesium.Cartesian3.fromDegrees(
Number(this[type].lng),
Number(this[type].lat)
);
}, false),
billboard: {
width: 36,
height: 36,
image: require(`@/assets/images/icons/${type}Point.png`),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.Bottom,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
} else {
this.$el_message("地址解析失败", () => { }, "error");
}
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN) &&
(handler = null);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
},
init_location_icon(position) {
let cesium_layer = this.g_cesium_layer();
let viewer = cesium_layer.viewer();
if (location_icon) {
location_icon.position = position;
} else {
location_icon = viewer.entities.add({
position,
billboard: {
width: 36,
height: 36,
image: require("@/assets/images/icons/icon_location.png"),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.Bottom,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
}
},
// 点击保存
handle_sava() {
let points = this.positionsArr_y;
let arr = [];
for (var i = 0; i < points.length; i = i + 2) {
arr.push({
lon: points[i],
lat: points[i + 1],
alt: 0,
pitch: 0,
gimbalPitch: 0,
action: [],
uuid: i + "HHYYHH" + i + 1,
});
}
const reqObj = {
filename: this.airline.filename,
line: {
baseSpeed: this.airline.baseSpeed,
},
points: arr,
baseSpeed: this.airline.baseSpeed,
};
this.airline.baseSpeed = Number(this.airline.baseSpeed);
let options = {
distance: this.lineDistance,
flightCourseJson: JSON.stringify(reqObj),
flightName: this.airline.filename,
pointCount: points.length,
time: parseInt(this.lineDistance / this.airline.baseSpeed),
destination: this.end.name,
lng: this.end.lng,
lat: this.end.lat,
};
(this.airline = {
filename: "",
baseSpeed: 100.0,
height: 100.0,
destination: null,
start: null,
}),
this.$emit("add", options);
},
destroy_cesium_handler() {
let viewer = window.viewer;
viewer.scene.globe.depthTestAgainstTerrain = false;
if (handler) {
// handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler && handler.destroy() && (handler = null);
handler = null;
}
if (data_srouce) {
data_srouce.entities.removeAll();
viewer.dataSources.remove(data_srouce, true);
data_srouce = null;
this.positionsArr = [];
this.start.lng = 0;
this.start.lat = 0;
this.end.lng = 0;
this.end.lat = 0;
}
},
// clear_entities() {
// noFlyEntities.forEach((item) => {
// viewer.entities.remove(item);
// });
// electricFenceEntities.forEach((item) => {
// viewer.entities.remove(item);
// });
// noFlyEntities = [];
// electricFenceEntities = [];
// },
change_close() {
let viewer = window.viewer;
viewer.scene.globe.depthTestAgainstTerrain = false;
// this.change_page();
},
},
computed: {
cesium_layer() {
return this.g_cesium_layer();
},
},
destroyed() {
this.destroy_cesium_handler();
// this.clear_entities();
},
};
</script>
<style lang=scss scoped>
@import "~@/styles/var.scss";
@import "~@/styles/mixins.scss";
.title-box {
height: 56px;
box-sizing: border-box;
padding-left: 112px;
position: relative;
display: flex;
justify-content: space-between;
margin-right: 80px;
.title {
font-family: PangMenZhengDao;
font-size: 22px;
color: #dce9ff;
font-weight: 400;
line-height: 3.2;
margin-right: 30px;
}
.select {
font-family: PangMenZhengDao;
font-size: 22px;
color: #00ffff;
text-align: center;
font-weight: 400;
}
&::before {
content: " ";
display: block;
position: absolute;
height: 1px;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(270deg,
rgba(0, 117, 221, 0) 0%,
#3ea4d5 50%,
rgba(0, 117, 221, 0) 100%);
}
.right-box {
flex: 1;
display: flex;
font-family: PangMenZhengDao;
font-size: 18px;
color: #20f0f0;
text-align: center;
font-weight: 400;
line-height: 3.8;
.before-point {
margin-right: 12px;
}
.before-point,
.after-point {
cursor: pointer;
user-select: none;
margin-left: 15px;
&.disabled {
cursor: not-allowed;
}
}
.no {
margin: 0 10px;
}
}
}
.ctx-box {
height: calc(100% - 56px - 88px);
box-sizing: border-box;
padding: 25px 0px 0px 70px;
overflow: auto;
.form-box {
::v-deep .el-form {
.divider {
@include linear_gradient_border(0, auto, 0, 0);
height: 22px;
}
.el-form-item {
.item-group {
display: flex;
align-items: center;
.unit {
font-family: MicrosoftYaHeiUI;
font-size: 18px;
color: rgb(179, 201, 203);
font-weight: 400;
margin-left: 12px;
}
.iconfont {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
.el-icon-location-outline {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
}
.el-form-item__label {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ccedff;
text-align: right;
font-weight: 400;
}
.el-input {
width: 356px;
height: 40px;
border: 1px solid #08c2d1;
.el-input__inner {
width: 100%;
border: none;
border-radius: 0;
background-color: #000000;
color: #fff;
}
}
.el-input-number {
width: 356px;
.el-input-number__decrease,
.el-input-number__increase {
bottom: 1px;
background: #606266;
color: #f5f7fa;
border-radius: 0;
border: none;
}
.el-input-number__decrease {
left: 1px;
}
.el-input-number__increase {
right: -1px;
}
}
}
}
}
}
.bottom-box {
position: absolute;
bottom: 50px;
left: 150px;
width: 300px;
height: 50px;
background-color: #08c2d1;
font-family: PangMenZhengDao;
font-size: 22px;
color: #dce9ff;
text-align: center;
line-height: 50px;
font-weight: 400;
}
.btns {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 50px;
.btn {
width: 200px;
height: 50px;
background-color: #08c2d1;
font-family: PangMenZhengDao;
font-size: 22px;
color: #dce9ff;
text-align: center;
line-height: 50px;
font-weight: 400;
}
}
::v-deep .el-radio,
.el-radio__inner,
.el-radio__input {
display: block;
width: 20px;
height: 20px;
.el-radio__inner {
width: 20px;
height: 20px;
}
}
/deep/ .el-radio {
margin-bottom: 20px;
}
/deep/ .el-radio__label {
font-family: MicrosoftYaHeiUI;
font-size: 18px;
color: #ccedff;
text-align: right;
font-weight: 400;
line-height: 20px;
margin-left: 20px;
}
.aotu_tip {
color: #fff;
font-size: 18px;
line-height: 18px;
margin-bottom: 26px;
display: block;
}
</style>
\ No newline at end of file
<template>
<div class="cpt-command-airway-edit">
<div class="header" v-interact>
<div class="hd-box">手动规划</div>
<div style="color: #08c2d1" class="hd-box cp">
<!-- <div @click="change_airway" v-if="isShow">
<span
class="iconfont"
:class="flag ? 'icon-shebeiliebiao' : 'icon-shebeiliebiao'"
></span>
<span class="ml5 mr5">{{ flag ? "鹰巢" : "无人机" }}</span>
<span
class="iconfont icon-shujushangchuan"
:class="flag ? 'icon-shujushangchuan' : 'icon-shujushangchuan'"
></span>
</div> -->
</div>
<div class="hd-box cp mr20" @click="exit">关闭</div>
</div>
<manual
:nestData="data"
v-if="visibleFlag"
:flag="flag"
@add="testEmit"
></manual>
<autoPlan v-if="!visibleFlag" :flag="flag" @add="testEmit"></autoPlan>
</div>
</template>
<script>
import autoPlan from "./autoPlan";
import manual from "./manual";
import dayjs from "dayjs";
let entitie = null;
export default {
components: {
autoPlan,
manual,
},
props: {
//为true是 规划航线为鹰巢
flag: {
type: Boolean,
default: false,
},
// 是否展示切换按钮
data: {
type: Object || Array,
default: () => {},
},
},
data() {
return {
// 手动规划还是自动规划
visibleFlag: true,
};
},
watch: {
data: {
handler(value) {
this.showAreaFn(value);
},
immediate: true,
deep: true,
},
},
beforeDestroy() {
window.viewer.entities.remove(entitie);
},
methods: {
showAreaFn(data) {
if (entitie) {
window.viewer.entities.remove(entitie);
}
let positions = Cesium.Cartesian3.fromDegrees(
Number(data.longitude),
Number(data.latitude),
0
);
let ellipse = {
semiMinorAxis: 2500,
material: Cesium.Color.fromCssColorString("#2f6947").withAlpha(0.7),
semiMajorAxis: 2500,
rotation: Cesium.Math.toRadians(-40.0),
outline: true,
outlineWidth: 4,
stRotation: Cesium.Math.toRadians(90),
};
let entities = this.createAreaPoint(window.viewer, {
id: "showArea" + data.id + "yc",
position: positions,
title: data.name,
ellipse,
});
entitie = entities;
},
createAreaPoint(viewer, { position, title, id, ellipse, longitude }) {
let point = viewer.entities.add({
id: id || null,
name: "pointArea",
position,
ellipse: ellipse,
longitude: longitude || null,
// label: {
// text: title,
// font: "14pt monospace",
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// outlineWidth: 2,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
// },
});
return point;
},
exit() {
// 为false时为飞控中心创建航线
this.$emit("quit");
},
testEmit(item) {
this.$emit("add", item);
},
},
inject: ["g_cesium_layer"],
};
</script>
<style lang="scss" scoped>
@import "~@/styles/var.scss";
@import "~@/styles/mixins.scss";
.cpt-command-airway-edit {
position: absolute;
left: 100px;
top: 54px;
width: 560px;
box-sizing: border-box;
background: rgba(0, 23, 79, 0.7);
box-shadow: 0 2px 4px 0 rgba(1, 162, 255, 0.35),
inset 0 0 40px 0 rgba(0, 184, 255, 0.5);
border-radius: 13px;
z-index: 4;
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 44px;
background: rgba(16, 65, 215, 0.2);
box-shadow: inset 0 0 15px 0 rgba(0, 182, 255, 0.6);
border-radius: 10px 10px 0 0;
}
.hd-box {
font-family: MicrosoftYaHei-Bold;
font-size: 18px;
color: #00ffff;
letter-spacing: 0;
font-weight: 700;
margin-left: 20px;
}
.ctx-box {
height: calc(100% - 56px - 88px);
box-sizing: border-box;
padding: 25px 0px 0px 58px;
overflow: auto;
.form-box {
::v-deep .el-form {
.divider {
@include linear_gradient_border(0, auto, 0, 0);
height: 22px;
}
.el-form-item {
.item-group {
display: flex;
align-items: center;
.unit {
font-family: MicrosoftYaHeiUI;
font-size: 18px;
color: rgb(179, 201, 203);
font-weight: 400;
margin-left: 12px;
}
.iconfont {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
.el-icon-location-outline {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
}
.el-form-item__label {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ccedff;
text-align: right;
font-weight: 400;
}
.el-input {
width: 356px;
height: 40px;
border: 1px solid #08c2d1;
.el-input__inner {
width: 100%;
border: none;
border-radius: 0;
background-color: #000000;
color: #fff;
}
}
.el-input-number {
width: 356px;
.el-input-number__decrease,
.el-input-number__increase {
bottom: 1px;
background: #606266;
color: #f5f7fa;
border-radius: 0;
border: none;
}
.el-input-number__decrease {
left: 1px;
}
.el-input-number__increase {
right: -1px;
}
}
}
}
}
}
.bottom-box {
box-sizing: border-box;
padding-bottom: 20px;
height: 88px;
display: flex;
justify-content: space-evenly;
align-items: center;
@include linear_gradient_border(0, auto, 0, 0);
.iconfont {
cursor: pointer;
font-size: 44px;
color: #08c2d1;
}
}
}
</style>
<style lang="scss">
.actions-box {
.title-box {
display: flex;
align-items: center;
.title {
font-size: 14px;
width: 70px;
}
}
.list-box {
max-height: 210px;
overflow: auto;
margin-top: 12px;
.action-item {
background-color: #ececec;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #fff;
box-sizing: border-box;
padding: 12px;
&:hover {
background-color: #ccc;
}
.item-inner {
display: flex;
align-items: center;
}
.iconfont {
color: red;
cursor: pointer;
font-size: 20px;
}
}
}
}
</style>
<template>
<div>
<div class="right-box mt10">
<div class="before-point" :class="{ disabled: action.curr_index <= 0 }" @click="handle_before_point">
上一航点
</div>
<div class="no">
<span class="current">{{ action.curr_index }}</span>
/
<span class="total">{{ airline.points.length == 0 ? 0 : airline.points.length }}
</span>
</div>
<div class="after-point" :class="{
disabled: action.curr_index >= airline.points.length,
}" @click="handle_after_point">
下一航点
</div>
</div>
<div class="ctx-box">
<div class="form-box">
<el-form ref="form" :model="form" :rules="rules" label-width="96px">
<el-form-item label="航线名称">
<el-input :disabled="true" v-model="airline.filename" />
</el-form-item>
<el-form-item label="航线速度">
<div class="item-group">
<el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="airline.line.baseSpeed" />
<span class="unit">( m/s )</span>
</div>
</el-form-item>
<el-form-item label="目标位置" prop="destination">
<div class="item-group" :title="form.destination">
<el-autocomplete :popper-append-to-body='false' v-model="destination.name" :fetch-suggestions="handle_query_address_async"
placeholder="请输入目标位置" :trigger-on-focus="false" @select="handle_select_address" clearable>
<template slot-scope="{ item }">
<div>
<span style="font-size: 14px; color: #333">{{
item.name
}}</span>
<span style="font-size: 12px; color: #999; margin-left: 12px">{{ item.address }}</span>
</div>
</template>
</el-autocomplete>
<div @click="handle_pick" class="el-icon-location-outline"></div>
</div>
</el-form-item>
<!-- <div class="divider"></div> -->
<el-form-item label="选择鹰巢" v-if="flag" prop="nestId">
<el-select v-model="form.nestId" :popper-append-to-body="false">
<el-option v-for="item in getNestListForLineList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="场景" prop="scene">
<el-select v-model="scene" :popper-append-to-body="false" @change="handle_change">
<el-option v-for="item in scene_list" :key="item.id" :label="item.name" :value="item.name" />
</el-select>
</el-form-item>
<el-form-item label="纬度" prop="lat">
<el-input v-model="form.lat" oninput="value=value.replace(/[^0-9.]/g,'')" />
</el-form-item>
<el-form-item label="经度" prop="lon">
<el-input v-model="form.lon" oninput="value=value.replace(/[^0-9.]/g,'')" />
</el-form-item>
<el-form-item label="高度" prop="alt">
<div class="item-group">
<el-input @change="(val) => handle_change_field('alt', val)" v-model.number="form.alt"
oninput="value=value.replace(/[^0-9.]/g,'')" />
<span class="unit">( m )</span>
</div>
</el-form-item>
<el-form-item label="偏航角">
<div class="item-group">
<el-input-number @change="(val) => handle_change_field('pitch', val)" v-model="form.pitch" :min="-90"
:max="90" label="描述文字" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input-number>
<span class="unit">( ° )</span>
</div>
</el-form-item>
<el-form-item label="俯仰角">
<div class="item-group">
<el-input-number @change="(val) => handle_change_field('gimbalPitch', val)" v-model="form.gimbalPitch"
:min="-90" :max="90" label="描述文字" oninput.native="value=value.replace(/[^0-9.]/g,'')"></el-input-number>
<span class="unit">( ° )</span>
</div>
</el-form-item>
<el-form-item label="航线标签" prop="lat">
<el-select v-model="labvalue" multiple placeholder="请选择航线标签">
<el-option v-for="item in LablistL" :key="item.id" :label="item.labelName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="航点动作" prop="actions">
<el-link @click="handle_show_action" style="color: #409eff">{{ form.actions.length }}个动作<i
class="el-icon-d-arrow-right"></i>
</el-link>
</el-form-item>
</el-form>
</div>
</div>
<div class="bottom-box">
<!-- <div class="iconfont icon-zengjia" title="添加"></div> -->
<div @click="handle_save_line" class="iconfont icon-baocun" title="保存航线"></div>
<div @click="handle_remove_point" class="iconfont icon-shanchu" title="删除航点"></div>
</div>
<!-- <el-dialog
center
title="新增航点动作"
:visible.sync="action.visible"
width="500px"
top="20em"
:append-to-body="true"
:close-on-click-modal="false"
@close="
action.visible = false;
action.list = [];
"
> -->
<div class="w500 action-list" v-if="action.visible">
<div class="header">
<div class="hd-box">新增航点动作</div>
<div class="hd-box cp mr20" @click="
action.visible = false;
action.list = [];
">
关闭
</div>
</div>
<div class="actions-box">
<div class="title-box">
<div class="title">航点动作</div>
<el-dropdown trigger="click">
<el-button size="small" type="primary" icon="el-icon-plus">增加</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item, index) in action.types" :key="index">
<div @click="handle_add_action(item)">{{ item.label }}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="list-box">
<div class="action-item" v-for="(item, index) in action.list" :key="index">
<div class="item-label">{{ item.label }}</div>
<div v-if="item.input" class="item-input">
<component :is="item.input" :min="item.min" :max="item.max" v-model="item.actionParam" />
</div>
<div @click="handle_delete_action(index, item)" class="iconfont icon-shanchu" title="删除"></div>
</div>
</div>
</div>
<span class="footer">
<el-button size="small" @click="
action.visible = false;
action.list = [];
">取 消</el-button>
<el-button size="small" type="primary" @click="handle_save_action">确 定</el-button>
</span>
</div>
<!-- </el-dialog> -->
</div>
</template>
<script>
import API from "@/api";
import { Utils } from "@/lib/cesium";
import { nanoid } from "nanoid";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
let positions = [];
let handler = null;
let data_srouce = null;
let location_icon = null;
let noFlyEntities = [];
let electricFenceEntities = [];
let point_index = null;
let point_uuid = null;
let point_uuid_next = null;
let isEditting = false;
export default {
components: {},
data() {
let validateLon = (rule, value, callback) => {
// let reg =
// /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/;
console.log("value", value);
if (value < -180 || value > 180) {
callback(new Error("请输入正确经度值(-180.0-180.0)"));
} else {
callback();
}
};
let validateLat = (rule, value, callback) => {
// let reg = /^[\-\+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/;
console.log("value", value);
if (value < -90 || value > 90) {
callback(new Error("请输入正确纬度值(-90.0-90.0)"));
} else {
callback();
}
};
let validateAlt = (rule, value, callback) => {
if (value > 150) {
callback(new Error("航点高度不可超过150m"));
} else {
callback();
}
};
let validateNestId = (rule, value, callback) => {
if (!value) {
callback(new Error("请选择鹰巢"));
} else {
callback();
}
};
return {
labvalue: [],
LablistL: [],
getNestListForLineList: [],
rules: {
lat: [{ validator: validateLat, trigger: "change" }],
lon: [{ validator: validateLon, trigger: "change" }],
alt: [{ validator: validateAlt, trigger: "change" }],
nestId: [{ validator: validateNestId, trigger: "change" }],
},
time: null,
visibleFlag: true,
isGetAddress: false,
form: {
lon: 0,
lat: 0,
alt: 100,
pitch: 0, //-180~180
gimbalPitch: 0, //0~-90
actions: [],
nestId: null
},
destination: {
name: "",
lng: 0,
lat: 0,
},
airline: {
filename: null,
line: {
// baseSpeed: 10,
baseSpeed: 2,
},
points: [],
},
action: {
visible: false,
types: [
{
label: "悬停(s)",
input: "el-input-number",
min: 0,
max: 32000,
actionType: "STAY",
actionParam: 10,
},
{
label: "拍照",
actionType: "START_TAKE_PHOTO",
actionParam: 0,
},
{
label: "开始录像",
actionType: "START_RECORD",
actionParam: 0,
},
{
label: "停止录像",
actionType: "STOP_RECORD",
actionParam: 0,
},
],
list: [],
curr_index: 0,
},
scene: "巡查",
scene_list: [
{ name: "巡查", id: 1 },
{ name: "预警", id: 2 },
{ name: "侦察", id: 3 },
{ name: "服务", id: 4 },
{ name: "救援", id: 5 },
{ name: "处置", id: 6 },
{ name: "打击", id: 7 },
{ name: "宣传", id: 8 },
],
};
},
props: {
flag: {
type: Boolean,
default: true
},
nestData: {
type: Object||Array,
default: ()=>{},
},
},
// watch: {
// labvalue (val, value) {
// console.log("val", val)
// console.log("value", value)
// },
// deep: true
// },
async mounted() {
this.getlable();
this.init_cesium_handler();
let filename = ""
if(this.user_info.departmentId == 1){
filename = `巡特警支队-${this.scene}`;
}else{
filename = `${this.user_info.parentDepName ? this.user_info.parentDepName + "-" : ""
}${this.user_info.departmentName}-${this.scene}`;
}
let res = await API.AIRSPACE.GetFlightLineCount({ flightName: filename });
let filename_count = res + 1;
filename_count =
filename_count < 10 ? "0" + filename_count : filename_count;
this.airline.filename = filename + filename_count;
// this.get_air_space_list();
// this.get_electric_fence_list();
// this.get_institutional_fence_list();
this.getNestListForLine()
},
beforeDestroy() {
this.destroy_cesium_handler();
this.clear_entities();
},
methods: {
async getNestListForLine() {
this.getNestListForLineList = await API.AIRWAY.getNestListForLine();
},
async getlable() {
this.LablistL = await API.AIRWAY.labelList();
let {id,address,name} =this.nestData
if(id) {
console.log(this.nestData,'this.nestData');
this.form.nestId=id
// this.destination.name =this.nestData.address
this.destination.name =address||name
}
},
async handle_change() {
let filename = ""
if(this.user_info.departmentId == 1){
filename = `巡特警支队-${this.scene}`;
}else{
filename = `${this.user_info.parentDepName ? this.user_info.parentDepName + "-" : ""
}${this.user_info.departmentName}-${this.scene}`;
}
let res = await API.AIRSPACE.GetFlightLineCount({ flightName: filename });
let filename_count = res + 1;
filename_count =
filename_count < 10 ? "0" + filename_count : filename_count;
this.airline.filename = filename + filename_count;
},
init_point(data) {
Object.keys(data).map((key) => {
if (this.form.hasOwnProperty(key)) {
this.form[key] = data[key];
}
});
},
testEmit(item) {
this.$emit("add", item);
},
reset_form() {
let alt = this.form.alt;
let nestId = this.form.nestId;
this.$refs["form"] && this.$refs["form"].resetFields();
//继承上一个点的高度
this.form.alt = alt;
//继承上一个点的鹰巢id
this.form.nestId = nestId;
},
handle_before_point() {
let points = this.airline.points;
if (this.action.curr_index - 1 > 0) {
this.action.curr_index -= 1;
this.init_point(points[this.action.curr_index - 1]);
}
},
handle_after_point() {
try {
let points = this.airline.points;
if (this.action.curr_index + 1 <= points.length) {
this.action.curr_index += 1;
this.init_point(points[this.action.curr_index - 1]);
}
} catch (error) { }
},
handler_current_point(index) {
let points = this.airline.points;
this.action.curr_index = index;
this.init_point(points[this.action.curr_index]);
},
handle_save_point() {
this.airline.points.push({ ...this.form });
},
handle_remove_point() {
let index = this.action.curr_index - 1;
let points = this.airline.points;
let point = points[index];
if (point) {
points.splice(index, 1);
positions.splice(index, 1);
this.remove_point(point);
this.remove_label(point);
/**
* 如果后面没有点
*/
let after = points[index];
if (!after) {
if (index - 1 < 0) {
this.action.curr_index = 0;
} else {
this.action.curr_index -= 1;
}
}
points.length
? this.init_point(points[this.action.curr_index - 1])
: this.reset_form();
}
},
/**
* 显示动作弹窗
*/
handle_show_action() {
this.action.list = [];
this.action.list.push(...this.form.actions);
this.action.visible = true;
},
handle_add_action(item) {
this.action.list.push({ ...item });
},
handle_delete_action(index, item) {
this.action.list.splice(index, 1);
},
/**
* 关闭动作弹窗
*/
handle_save_action() {
this.form.actions = [];
this.form.actions.push(...this.action.list);
this.action.visible = false;
let point = this.airline.points[this.action.curr_index - 1];
point.actions = [];
point.actions.push(...this.action.list);
},
handle_change_field(key, value) {
let point = this.airline.points[this.action.curr_index];
if (point) {
point[key] = value * 1;
}
},
remove_point(point) {
data_srouce.entities.removeById(point.uuid);
},
create_point(uuid, position) {
let wgs84 = Utils.transformCartesian2WGS84(position);
let points = this.airline.points;
if (data_srouce && this.visibleFlag) {
let entities = data_srouce.entities;
entities.add({
name: "airline_point",
id: uuid,
position: Utils.transformWGS842Cartesian({
lng: wgs84.lng,
lat: wgs84.lat,
alt: wgs84.alt + 10,
}),
point: {
pixelSize: 20,
color: Cesium.Color.RED,
fillColor: Cesium.Color.RED,
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, // supermap版本会导致拖动显示错误
},
label: {
text: new Cesium.CallbackProperty(() => {
let index = points.findIndex((item) => item.uuid === uuid);
return String(index + 1);
}, false),
scale: 0.5,
font: "bold 24px Microsoft YaHei",
fillColor: Cesium.Color.WHITE,
horizontalOrigin: Cesium.VerticalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
showBackground: false,
outlineWidth: 0,
},
});
}
},
remove_label(point) {
data_srouce.entities.removeById(`label_${point.uuid}`);
},
create_label(uuid, before, after, alt) {
if (data_srouce) {
let entities = data_srouce.entities;
let before_wgs84 = Utils.transformCartesian2WGS84(before);
let after_wgs84 = Utils.transformCartesian2WGS84(after);
let center_lng = (before_wgs84.lng + after_wgs84.lng) / 2;
let cetner_lat = (before_wgs84.lat + after_wgs84.lat) / 2;
let alt = (after_wgs84.alt + before_wgs84.alt) / 2;
let position = Utils.transformWGS842Cartesian({
lng: center_lng,
lat: cetner_lat,
alt: alt + 10,
});
let text = `${Cesium.Cartesian3.distance(before, after).toFixed(2)} m`;
entities.add({
id: `label_${uuid}`,
position: position,
label: {
text: text,
scale: 0.5,
font: "bold 30px Microsoft YaHei",
fillColor: Cesium.Color.fromCssColorString("#fff"),
horizontalOrigin: Cesium.VerticalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
showBackground: true,
backgroundPadding: new Cesium.Cartesian2(10, 10),
},
});
}
},
update_label(uuid, before, after) {
let entities = data_srouce.entities;
let id = `label_${uuid}`;
let entity = entities.getById(id);
let before_wgs84 = Utils.transformCartesian2WGS84(before);
let after_wgs84 = Utils.transformCartesian2WGS84(after);
let center_lng = (before_wgs84.lng + after_wgs84.lng) / 2;
let cetner_lat = (before_wgs84.lat + after_wgs84.lat) / 2;
let alt = (after_wgs84.alt + before_wgs84.alt) / 2;
let position = Utils.transformWGS842Cartesian({
lng: center_lng,
lat: cetner_lat,
alt: alt + 10,
});
let text = `${Cesium.Cartesian3.distance(before, after).toFixed(2)} m`;
entity.position = position;
entity.label.text = text;
},
debounce(fn, wait) {
clearTimeout(this.time);
this.time = null;
this.time = setTimeout(() => {
fn.apply(this, arguments);
this.destination.name = ''
}, wait);
},
save_line() {
let sourceType = null;
let nestId = null;
if (this.flag) {
sourceType = 2
nestId = this.form.nestId;
} else {
sourceType = 1
}
let points = this.airline.points;
let distance = points.reduce((total, item, index) => {
let dist = 0;
if (points[index + 1]) {
let cd = Cesium.Cartesian3.distance(
Utils.transformWGS842Cartesian({ lng: item.lon, lat: item.lat }),
Utils.transformWGS842Cartesian({
lng: points[index + 1].lon,
lat: points[index + 1].lat,
})
);
// dist = total + cd;
dist = cd;
}
console.log(distance, "distance");
return total + parseInt(dist);
}, 0);
this.airline.baseSpeed = Number(this.airline.baseSpeed)
let options = {
distance,
flightCourseJson: JSON.stringify(this.airline),
flightName: this.airline.filename,
pointCount: points.length,
time: parseInt(distance / this.airline.line.baseSpeed),
destination: this.destination.name,
lng: this.destination.lng,
lat: this.destination.lat,
labelIds: this.labvalue,
sourceType,
nestId
};
this.$emit("add", options);
},
handle_save_line() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.debounce(this.save_line, 1000);
} else {
return false;
}
});
},
async init_cesium_handler() {
let viewer = window.viewer;
let currentPoint;
// 修复规划航线时
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
if (data_srouce) {
data_srouce.entities.removeAll();
viewer.dataSources.remove(data_srouce, true);
data_srouce = null;
positions = [];
}
data_srouce = new Cesium.CustomDataSource("airway_edit");
await viewer.dataSources.add(data_srouce);
let entities = data_srouce.entities;
let polyline = entities.add({
polyline: {
material: Cesium.Color.RED,
width: 3,
positions: new Cesium.CallbackProperty(() => {
return positions.map((item) => {
let wgs84 = Utils.transformCartesian2WGS84(item);
return Utils.transformWGS842Cartesian({
lng: wgs84.lng,
lat: wgs84.lat,
alt: wgs84.alt + 10,
});
});
}, false),
},
});
// viewer.scene.globe.depthTestAgainstTerrain = true;
handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(async (movement) => {
let windowPosition = movement.position;
let pickedObject = viewer.scene.pick(windowPosition);
if (this.isGetAddress) {
let position = Utils.getCartesian3FromPX(viewer, movement.position);
let wgs84 = Utils.transformCartesian2WGS84(position);
let address = await API.MAP.Regeo({
location: `${wgs84.lng},${wgs84.lat}`,
});
if (address) {
this.destination.name = address;
this.destination.lng = wgs84.lng;
this.destination.lat = wgs84.lat;
} else {
this.$el_message("地址解析失败", () => { }, "error");
}
this.isGetAddress = false;
return;
}
if (
Cesium.defined(pickedObject) &&
pickedObject.id?.name === "airline_point"
) {
// 航点编辑
let entity = pickedObject.id;
point_uuid = entity.id;
let points = this.airline.points;
let index = points.findIndex((item) => item.uuid === entity.id);
if (index > -1) {
point_index = index;
if (index + 1 < points.length) {
point_uuid_next = points[index + 1].uuid;
}
this.handler_current_point(index);
}
currentPoint = entity;
isEditting = true;
viewer.scene.screenSpaceCameraController.enableRotate = false;
viewer.scene.screenSpaceCameraController.enableZoom = false;
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(async (movement) => {
let windowPosition = movement.position;
let pickedObject = viewer.scene.pick(windowPosition);
if (pickedObject) {
console.log("pickedObject", JSON.stringify(pickedObject.id.id));
}
if (this.isGetAddress) {
let position = Utils.getCartesian3FromPX(viewer, movement.position);
let wgs84 = Utils.transformCartesian2WGS84(position);
let address = await API.MAP.Regeo({
location: `${wgs84.lng},${wgs84.lat}`,
});
if (address) {
this.destination.name = address;
this.destination.lng = wgs84.lng;
this.destination.lat = wgs84.lat;
} else {
this.$el_message("地址解析失败", () => { }, "error");
}
this.isGetAddress = false;
return;
}
if (
Cesium.defined(pickedObject) &&
pickedObject.id?.name === "airline_point"
) {
// 航点编辑
// let entity = pickedObject.id;
// point_uuid = entity.id;
// let points = this.airline.points;
// let index = points.findIndex((item) => item.uuid === entity.id);
// if (index > -1) {
// point_index = index;
// if (index + 1 < points.length) {
// point_uuid_next = points[index + 1].uuid;
// }
// this.handler_current_point(index);
// }
// currentPoint = entity;
// isEditting = true;
// viewer.scene.screenSpaceCameraController.enableRotate = false;
// viewer.scene.screenSpaceCameraController.enableZoom = false;
} else {
// 航点添加
let position = Utils.getCartesian3FromPX(viewer, movement.position);
if (Cesium.defined(position) && this.visibleFlag) {
this.reset_form();
if (positions.length + 1) {
let points = this.airline.points;
if (this.action.curr_index <= points.length + 1) {
this.action.curr_index = points.length + 1;
} else {
this.action.curr_index += 1;
}
}
positions.push(position);
let wgs84 = Utils.transformCartesian2WGS84(position);
this.form.lon = wgs84.lng;
this.form.lat = wgs84.lat;
let uuid = (this.form.uuid = nanoid());
this.handle_save_point();
if (positions.length > 1) {
let before = positions[positions.length - 2];
let after = positions[positions.length - 1];
this.create_label(uuid, before, after);
}
this.create_point(uuid, position);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 对鼠标移动事件的监听
handler.setInputAction((event) => {
if (isEditting && currentPoint) {
// let windowPosition = event.startPosition;
// let ellipsoid = viewer.scene.globe.ellipsoid;
// let cartesian = viewer.camera.pickEllipsoid(windowPosition, ellipsoid);
let cartesian = Utils.getCartesian3FromPX(
viewer,
event.startPosition
);
if (!cartesian) {
return;
}
currentPoint.position = cartesian;
if (!(typeof point_index == undefined) && positions?.length > 1) {
positions[point_index] = cartesian;
let current_wgs84 = Utils.transformCartesian2WGS84(cartesian);
this.airline.points[point_index].lon = current_wgs84.lng;
this.airline.points[point_index].lat = current_wgs84.lat;
if (point_index === this.action.curr_index) {
this.form.lon = current_wgs84.lng;
this.form.lat = current_wgs84.lat;
}
if (point_index > 0) {
this.update_label(
point_uuid,
cartesian,
positions[point_index - 1]
);
}
if (point_uuid_next) {
this.update_label(
point_uuid_next,
cartesian,
positions[point_index + 1]
);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 对鼠标抬起事件的监听
handler.setInputAction((event) => {
point_index = null;
point_uuid_next = null;
isEditting = false;
currentPoint = undefined;
// viewer.render()
setTimeout(() => {
viewer.scene.screenSpaceCameraController.enableRotate = true;
viewer.scene.screenSpaceCameraController.enableZoom = true;
}, 300);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
},
destroy_cesium_handler() {
let viewer = window.viewer;
viewer.scene.globe.depthTestAgainstTerrain = false;
if (handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// handler && handler.destroy() && (handler = null);
handler = null;
}
if (data_srouce) {
console.log(data_srouce, 'data_srouce');
data_srouce.entities.removeAll();
// viewer.dataSources.remove(data_srouce, true);
data_srouce = null;
positions = [];
}
},
handle_pick() {
this.isGetAddress = true;
},
handle_query_address_async(address, cb) {
API.MAP.Geo({ keywords: address })
.then((res) => {
cb(res.data.data.rows);
})
.catch((e) => cb([]));
},
handle_select_address(item) {
if (item) {
let location = item.location.split(",");
this.destination.name = item.name;
this.destination.lng = Number(location[0]);
this.destination.lat = Number(location[1]);
let cesium_layer = this.g_cesium_layer();
let viewer = cesium_layer.viewer();
let potiion = Utils.transformWGS842Cartesian({
lng: this.destination.lng,
lat: this.destination.lat,
alt: 1000,
});
viewer.camera.flyTo({
destination: potiion,
});
this.init_location_icon(potiion);
}
},
init_location_icon(position) {
let cesium_layer = this.g_cesium_layer();
let viewer = cesium_layer.viewer();
if (location_icon) {
location_icon.position = position;
} else {
location_icon = viewer.entities.add({
position,
billboard: {
width: 36,
height: 36,
image: require("@/assets/images/icons/icon_location.png"),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.Bottom,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
}
},
destroy_location_icon() {
if (!location_icon) {
return location_icon;
}
let cesium_layer = this.g_cesium_layer();
let viewer = cesium_layer.viewer();
viewer.entities.remove(location_icon);
location_icon = null;
},
async get_air_space_list() {
let res = await API.AIRSPACE.GetNotFlyAreas();
res.forEach((item) => {
let positions = item.region.split(" ").join(",").split(",");
if (positions.length > 0) {
}
let hierarchy = Cesium.Cartesian3.fromDegreesArray(positions);
let position = Cesium.BoundingSphere.fromPoints(hierarchy).center;
if (item.regionType === "POLYGON") {
if (positions.length % 2 !== 0) return;
if (item.typeId === 1) {
var entity = viewer.entities.add({
name: "Red polygon on surface",
position,
label: {
text: item.name,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(5, 5),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
polygon: {
hierarchy,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
noFlyEntities.push(entity);
}
}
});
},
async get_electric_fence_list() {
let res = await API.AIRSPACE.GetAreaList();
res.forEach((item) => {
let positions = item.region.split(" ").join(",").split(",");
if (item.regionType === "POLYGON") {
if (positions.length % 2 !== 0) return;
let hierarchy = Cesium.Cartesian3.fromDegreesArray(positions);
let position = Cesium.BoundingSphere.fromPoints(hierarchy).center;
if (item.typeId === 2) {
var entity = viewer.entities.add({
name: "Red polygon on surface",
position,
label: {
text: item.name,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(5, 5),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
polygon: {
hierarchy,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
electricFenceEntities.push(entity);
}
}
});
},
async get_institutional_fence_list() {
let res = await API.AIRSPACE.GetCurrentAreaList();
res.forEach((item) => {
let positions = item.region.split(" ").join(",").split(",");
if (item.regionType === "POLYGON") {
if (positions.length % 2 !== 0) return;
let hierarchy = Cesium.Cartesian3.fromDegreesArray(positions);
let position = Cesium.BoundingSphere.fromPoints(hierarchy).center;
if (item.typeId === 2) {
var entity = viewer.entities.add({
name: "Red polygon on surface",
position,
label: {
text: item.name,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(5, 5),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
polygon: {
hierarchy,
material: Cesium.Color.CYAN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
electricFenceEntities.push(entity);
}
}
});
},
clear_entities() {
noFlyEntities.forEach((item) => {
viewer.entities.remove(item);
});
electricFenceEntities.forEach((item) => {
viewer.entities.remove(item);
});
noFlyEntities = [];
electricFenceEntities = [];
},
change_close() {
let viewer = window.viewer;
viewer.scene.globe.depthTestAgainstTerrain = false;
// this.change_page();
},
},
computed: {
...mapGetters(["user_info"]),
cesium_layer() {
return this.g_cesium_layer();
},
},
inject: ["g_cesium_layer"],
};
</script>
<style lang="scss" scoped>
@import "~@/styles/var.scss";
@import "~@/styles/mixins.scss";
@import "~@/styles/form.scss";
// /deep/.el-scrollbar {
// width: 355px !important;
// }
// /deep/.el-select-dropdown {
// /deep/.el-scrollbar {
// /deep/.el-select-dropdown__wrap {
// width: 355px !important;
// }
// }
// }
::v-deep {
.el-select {
width: 355px;
.el-input {
height: 100%;
}
}
}
.cpt-command-airway-edit {
position: absolute;
left: 100px;
top: 140px;
width: 600px;
height: 770px;
box-sizing: border-box;
background: url("~@/assets/images/plate_bg_01.png") no-repeat;
background-size: 100% 100%;
z-index: 4;
.img-close {
position: absolute;
right: 30px;
top: 20px;
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
.title-box {
height: 56px;
box-sizing: border-box;
padding-left: 112px;
position: relative;
display: flex;
justify-content: space-between;
margin-right: 80px;
.title {
font-family: PangMenZhengDao;
font-size: 22px;
color: #dce9ff;
font-weight: 400;
// line-height: 3.2;
margin-right: 30px;
}
.select {
font-family: PangMenZhengDao;
font-size: 22px;
color: #00ffff;
text-align: center;
font-weight: 400;
}
&::before {
content: " ";
display: block;
position: absolute;
height: 1px;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(270deg,
rgba(0, 117, 221, 0) 0%,
#3ea4d5 50%,
rgba(0, 117, 221, 0) 100%);
}
}
.ctx-box {
margin-top: 10px;
height: calc(100% - 56px - 80px);
box-sizing: border-box;
overflow: auto;
.form-box {
::v-deep .el-form {
.divider {
@include linear_gradient_border(0, auto, 0, 0);
height: 12px;
}
.el-form-item {
.item-group {
display: flex;
align-items: center;
.unit {
font-family: MicrosoftYaHeiUI;
font-size: 18px;
color: rgb(179, 201, 203);
font-weight: 400;
margin-left: 12px;
}
.iconfont {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
.el-icon-location-outline {
color: rgb(179, 201, 203);
font-size: 30px;
margin-left: 0.3em;
cursor: pointer;
}
}
.el-form-item__label {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ccedff;
text-align: right;
font-weight: 400;
}
.el-select-dropdown {
min-width: 356px !important;
}
.el-input {
width: 356px;
height: 40px;
.el-input__inner {
width: 100%;
font-family: MicrosoftYaHeiUI;
font-size: 15px;
color: #08c2d1;
background: rgba(2, 31, 51, 0.7);
border: 1px solid #06b6e0;
}
}
.el-input-number {
width: 356px;
.el-input-number__decrease,
.el-input-number__increase {
bottom: 1px;
opacity: 0.5;
background: #06b6e0;
color: #f5f7fa;
border-radius: 0;
border: none;
}
.el-input-number__decrease {
left: 1px;
}
.el-input-number__increase {
right: px;
}
}
}
}
}
}
.bottom-box {
box-sizing: border-box;
// padding-bottom: 20px;
// height: 88px;
display: flex;
justify-content: space-evenly;
align-items: center;
@include linear_gradient_border(0, auto, 0, 0);
.iconfont {
cursor: pointer;
font-size: 44px;
color: #08c2d1;
}
}
// 动作列表
.action-list {
position: fixed;
left: 40%;
top: 30%;
background: rgba(0, 23, 79, 0.7);
box-shadow: 0 2px 4px 0 rgba(1, 162, 255, 0.35),
inset 0 0 40px 0 rgba(0, 184, 255, 0.5);
border-radius: 13px;
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 44px;
background: rgba(16, 65, 215, 0.2);
box-shadow: inset 0 0 15px 0 rgba(0, 182, 255, 0.6);
border-radius: 10px 10px 0 0;
}
.hd-box {
font-family: MicrosoftYaHei-Bold;
font-size: 18px;
color: #00ffff;
letter-spacing: 0;
font-weight: 700;
margin-left: 20px;
}
.actions-box {
.title-box {
display: flex;
align-items: center;
.title {
font-size: 24px;
width: 120px;
}
}
.list-box {
max-height: 210px;
overflow: auto;
margin-top: 12px;
padding: 0 20px;
::v-deep {
.el-input-number {
margin-left: 180px;
.el-input {
width: 180px;
}
}
}
.action-item {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #fff;
box-sizing: border-box;
padding: 12px;
&:hover {
background-color: #ccc;
}
.item-inner {
display: flex;
align-items: center;
}
.iconfont {
color: red;
cursor: pointer;
font-size: 20px;
}
}
}
}
.footer {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 10px;
}
}
.right-box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: 400;
// line-height: 3.8;
margin-top: 10px;
font-family: PangMenZhengDao;
font-size: 18px;
color: #00ffff;
text-align: right;
font-weight: 400;
.before-point {
margin-right: 12px;
}
.before-point,
.after-point {
cursor: pointer;
user-select: none;
margin-left: 15px;
&.disabled {
cursor: not-allowed;
}
}
.no {
margin: 0 10px;
}
}
}
</style>
<style lang="scss">
</style>
\ No newline at end of file
<template>
<div class="cpt-nest-dialog">
<div class="dialog-ctx" :style="containerStyle" :class="{ collapse,changeHeightStyle }">
<div v-if="showTitle" class="dialog-title">
{{ title }}
<div class="nav__left">
<slot name="nav__left"></slot>
</div>
<div class="nav__right " @click='handleClose'>
<slot name="nav__right"></slot>
</div>
</div>
<div class="dialog-bd">
<slot></slot>
</div>
<img v-if="isCollapse" @click="collapse = !collapse" src="~@/assets/images/observe/fckernel/collapse.png"
class="icon-collapse" />
<div class="wih100 h24 pa bottom0 nest-dialog_bottom cp pt5 tc" @click='changeHeight'>
<div class="w24 h24 dib " :class="changeHeightStyle ? 'xbStyle':'' "> <img src="~@/assets/images/observe/fckernel/xb.png" alt=""> </div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: () => "",
},
showTitle: {
type: Boolean,
default: () => false,
},
containerStyle: {
type: Object,
default: () => ({}),
},
isCollapse: {
type: Boolean,
default: () => true,
},
isCollapse2: {
type: Boolean,
default: () => false,
}
},
data() {
return {
collapse: false,
changeHeightStyle: false
};
},
methods: {
changeHeight() {
this.changeHeightStyle = !this.changeHeightStyle
},
handleClose() {
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
.cpt-nest-dialog {
position: absolute;
width: 100%;
z-index: 99;
.nest-dialog_bottom {
background: rgba(13, 82, 143, 0.60);
}
.changeHeightStyle {
height: 637px !important;
}
.xbStyle{
transform:rotateX(141deg) ;
}
.dialog-ctx {
position: absolute;
width: 476px;
height: 648px;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
top: 90px;
left: 116px;
box-sizing: border-box;
display: flex;
flex-direction: column;
transform: translateY(0);
transition: 0.3s;
&.collapse {
transform: translateX(-100%);
}
.dialog-title {
width: 100%;
height: 32px;
line-height: 32px;
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
flex-shrink: 0;
margin: 0 auto;
background-size: 100% 100%;
color: #fff;
text-align: center;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #92d9ff;
letter-spacing: 0;
text-align: center;
font-weight: 700;
position: relative;
.nav__left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.nav__right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
}
.dialog-bd {
flex: 1;
box-sizing: border-box;
overflow: auto;
}
.icon-close {
position: absolute;
top: 15px;
right: 13px;
font-size: 18px;
color: #2edfff;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.icon-collapse {
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
height: 80px;
z-index: 1;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
<template>
<svg class="symbol-svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
import "@/assets/fonts/ali/iconfont.js";
export default {
name: "symbol-icon",
props: {
icon: {
type: String,
required: true,
},
},
computed: {
iconName() {
return `#icon-${this.icon}`;
},
},
};
</script>
<style>
.symbol-svg-icon {
width: 28px;
height: 28px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
\ No newline at end of file
<!-- 飞控中心头部 -->
<template>
<div class="cpt-fckernel-header">
<div class="title">飞控中心</div>
<div class="nav-list"
@click="go_home">
<div class="nav-item"
v-for="(item, index) in list"
:key="item.id"
:class="`${index <= list.length / 2 - 1 ? '_1' : '_2'} ${
curr_val === item.id ? 'selected' : undefined
}`"
@click.stop="handle_change_nav(item)">
<div class="text-box">{{ item.label }}</div>
</div>
</div>
<div class="date-box">
<div class="yyyy">{{ date}}</div>
<div class="week-box">
<div class="week">{{ week }}</div>
<div class="hhmm">{{ time }}</div>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
export default {
props: {
value: {
type: Number | String,
default: 0,
},
},
data () {
return {
now: null,
curr_val: 0,
list: [
{ id: 1, label: "无人机应用" },
{ id: 2, label: "鹰巢应用" },
],
week_map: {
0: "天",
1: "一",
2: "二",
3: "三",
4: "四",
5: "五",
6: "六",
},
};
},
watch: {
value: {
handler (value) {
this.curr_val = value;
},
deep: true,
immediate: true,
},
},
methods: {
handle_change_nav (item) {
if(item.id==1){
this.$store.commit("device/SET_VIDEO", false);
}else{}
this.curr_val = item.id;
this.$emit("input", this.curr_val);
this.$emit("nav-click", item);
},
go_home () {
let { href } = this.$router.resolve({ path: "/home" });
window.open(href, "_self");
setTimeout(() => {
this.$router.go(0);
}, 100);
},
},
computed: {
date () {
let { now } = this;
return now ? `${now.format("YYYY/MM/DD")}` : "0000/00/00";
},
week () {
let { now, week_map } = this;
return now ? `周${week_map[now.day()]}` : "周N/A";
},
time () {
let { now } = this;
return now ? `${now.format("HH:mm")}` : "00:00";
},
},
mounted () {
setInterval(() => {
this.now = dayjs();
}, 500);
},
created () {
this.now = dayjs();
},
};
</script>
<style lang="scss" scoped>
.cpt-fckernel-header {
height: 91px;
background-color: black;
position: fixed;
top: 0;
left: 0;
right: 0;
background: center url("~@/assets/images/observe/fckernel/01_header_bg.png")
no-repeat;
background-size: cover;
.title {
font-size: 32px;
font-family: Microsoft YaHei;
font-weight: bold;
text-align: center;
line-height: 80px;
background-image: linear-gradient(0deg, #e3aa77, #f9ecd3, #e3aa77);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-list {
width: 590px;
height: 77px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
.nav-item {
width: 223px;
height: 77px;
box-sizing: border-box;
background: center url("~@/assets/images/observe/fckernel/nav-item.png")
no-repeat;
background-size: cover;
text-align: center;
cursor: pointer;
transition: 0.3s;
&:hover,
&.selected {
background: center
url("~@/assets/images/observe/fckernel/nav-item-selected.png")
no-repeat;
.text-box {
color: #3df1ff;
}
}
.text-box {
line-height: 77px;
font-family: Microsoft YaHei Bold;
font-size: 20px;
color: #aab8d1;
font-weight: 700;
transition: 0.3s;
}
&._2 {
transform: scaleX(-1);
.text-box {
transform: scaleX(-1);
}
}
}
}
.date-box {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
left: 20px;
top: 0;
height: 60px;
box-sizing: border-box;
.yyyy {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 3px;
}
.week-box {
display: flex;
justify-content: space-between;
.week {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
}
.hhmm {
font-family: Microsoft YaHei;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="nset_control_box">
<div class="nset_control_box_header lh34">
<slot name="nset__left" ></slot>
<slot name="nset__right" ></slot>
</div>
<div class="nset_control_box_area p10 pb30" :class="{changeHeightStyle}">
<slot></slot>
</div>
<div @click='changeHeight' class="wih100 h24 pa bottom0 cp nset_control_box_bottom tc">
<div class="w24 h24 dib " :class="changeHeightStyle ? 'xbStyle':'' "> <img
src="~@/assets/images/observe/fckernel/xb.png" alt=""> </div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
changeHeightStyle: false
}
},
methods: {
changeHeight() {
this.changeHeightStyle = !this.changeHeightStyle
},
},
}
</script>
<style lang="scss" scoped>
.nset_control_box {
min-height: 200px;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
position: absolute;
left: calc(50% - 352px);
top: 70px;
min-width: 700px;
.nset_control_box_header {
display: flex;
justify-content: space-between;
height: 32px;
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
}
.nset_control_box_bottom {
background: rgba(13, 82, 143, 0.60);
}
.xbStyle {
transform: rotateX(141deg);
}
.changeHeightStyle {
height: 300px;
}
}
</style>
\ No newline at end of file
<template>
<div class="w440 h177 noticeBox">
<div class="headerBox" v-interact>
<div class=" jcsb">
<div class="jcsb title">
<div style="border:1px solid #FFBD36;background-color:#FFBD36 ; " class="w1 h16 mr10"></div>
{{ title }}
</div>
<div class="cp" @click="$emit('exit')" style="color: #70DAF9;">
关闭
</div>
</div>
</div>
<div class="contant pt34 ">
<div class="mb34 cf pl22 pr22">
{{ content }}
</div>
<div class="jcsb pl76 pr76">
<div class="w122 h32 tc lh32 cf cp btn" @click="$emit('close')">{{ leftText }}</div>
<div v-if="flag" class="w122 h32 tc lh32 cf cp btn ml10 mr10" @click="$emit('qzjg')">强制接管</div>
<div class="w122 h32 tc lh32 cf cp btn" @click="$emit('handle')">{{ rightText }}</div>
</div>
</div>
</div>
</template>
<script>
import API from "@/api";
export default {
data() {
return {
}
},
props: {
title: {
'type': String,
default: '提示'
},
content: {
'type': String,
default: '某某某某某某某某某某某某单位请求接管000000无人机无人机无人机'
},
leftText: {
'type': String,
default: '拒绝'
},
rightText: {
'type': String,
default: '同意'
},
flag:{
'type': Boolean,
default: ()=>{ false}
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.noticeBox {
position: absolute;
left: 50%;
top: 40%;
transform: translateX(-50%);
z-index: 99;
background: rgba(9, 32, 87, 0.70);
border: 1px solid #70DAF9;
.headerBox {
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
padding: 5px 14px;
.title {
font-family: MicrosoftYaHei-Bold;
font-size: 16px;
color: #70DAF9;
letter-spacing: 0;
font-weight: 700;
}
}
.contant {
height: 146px;
text-align: center;
.btn {
background-image: linear-gradient(180deg, #9198FF 0%, rgba(45, 81, 153, 0.22) 40%, #05091A 100%);
border: 1px solid #70DAF9;
box-shadow: inset 0 0 10px 2px #3F9DFF;
}
}
}
</style>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="4px" height="8px" viewBox="0 0 4 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>路径</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="无人机应用" transform="translate(-235.000000, -394.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="编组-8" transform="translate(24.000000, 177.000000)">
<g id="编组-56备份-2" transform="translate(48.000000, 213.000000)">
<g id="编组-4" transform="translate(158.000000, 2.000000)">
<g id="I" transform="translate(5.875000, 2.436523)">
<polygon id="路径" points="2.90039062 1.25488281 2.25097656 1.25488281 2.25097656 6.30859375 2.90039062 6.30859375 2.90039062 7.56347656 0 7.56347656 0 6.30859375 0.639648438 6.30859375 0.639648438 1.25488281 0 1.25488281 0 0 2.90039062 0"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="4px" height="3px" viewBox="0 0 4 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 3</title>
<g id="城市之鹰APP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-3">
<g id="编组-53备份-2" transform="translate(1.000000, 1.000000)">
<rect id="矩形" x="0" y="-1.44822075e-13" width="2" height="1.69849126"></rect>
<g id="编组" transform="translate(0.090952, 0.212364)" fill-rule="nonzero">
<path d="M1.36360537,0.532745286 C1.63632645,0.532745286 1.81809504,0.616723904 1.81809504,0.829250299 C1.81809504,1.15466744 1.40744529,1.3630127 0.909047522,1.3630127 C0.410649758,1.3630127 0,1.15466744 0,0.829250299 C0,0.61574534 0.227244835,0.532745286 0.454489671,0.532745286 L0.545442149,0.532745286 L0.5431922,0.534880336 C0.533919684,0.543776376 0.496147815,0.577759249 0.454012409,0.592081873 C0.264198541,0.656311282 0.181768596,0.761818316 0.181768596,0.829250299 C0.181768596,0.962424018 0.503715825,1.12584427 0.909047522,1.12584427 C1.31437922,1.12584427 1.63632645,0.962424018 1.63632645,0.829250299 C1.63632645,0.762263118 1.55164655,0.656400242 1.36360537,0.592081873 C1.31499284,0.575446278 1.27265289,0.575446278 1.27265289,0.532745286 C1.27265289,0.490044295 1.3044249,0.532745286 1.36360537,0.532745286 Z" id="形状" fill="#FFFFFF"></path>
<polygon id="路径" fill="#FFBD36" transform="translate(0.909048, 0.371532) rotate(-180.000000) translate(-0.909048, -0.371532) " points="1.09061158 0.318467112 1.09061158 0 0.727210745 0 0.727210745 0.318467112 0.454489671 0.318467112 0.909047522 0.743063388 1.36360537 0.318467112"></polygon>
</g>
</g>
<path d="M3.36360537,0 C3.40942251,0 3.44733074,0.0799228627 3.45360333,0.183736876 C3.58682757,0.173023355 3.70805209,0.142918363 3.79859549,0.142918363 C3.87018477,0.142918363 4,0.168630812 4,0.214270409 C4,0.260017142 3.87018477,0.285729591 3.79859549,0.285729591 C3.70805209,0.285729591 3.58682757,0.255624598 3.45360333,0.244589672 C3.44773982,0.342189844 3.41405877,0.418470109 3.37205973,0.427683737 L3.36442354,0.428433683 L3.63632645,0.428540819 L3.45455785,0.714270409 L3.45455785,0.785729591 C3.45452631,0.897856976 3.34447243,0.991003701 3.2021545,0.999357189 L3.18170042,1 L3.0908843,1 L3.0908843,0.714163274 L2.54544215,0.714270409 C2.54544215,0.79312192 2.447808,0.857081637 2.32726529,0.857081637 L1.67273471,0.857081637 C1.552192,0.857081637 1.45455785,0.79312192 1.45455785,0.714270409 L0.909115702,0.714270409 L0.909115702,1 L0.818163224,1 C0.667543533,1 0.545442149,0.90406787 0.545442149,0.785729591 L0.545442149,0.714270409 L0.363673553,0.428540819 L0.635303743,0.428540819 L0.627940274,0.427683737 C0.585941229,0.418470109 0.552260176,0.342189844 0.546396673,0.244803943 C0.413308788,0.255517463 0.29194791,0.285729591 0.201404514,0.285729591 C0.129815231,0.285729591 0,0.260017142 0,0.214270409 C0,0.168630812 0.129815231,0.142918363 0.201404514,0.142918363 C0.29194791,0.142918363 0.413308788,0.173023355 0.546396673,0.183951146 C0.552669258,0.0799228627 0.590577487,0 0.636394627,0 C0.682211768,0 0.720119997,0.0799228627 0.726392582,0.183736876 C0.859616827,0.173023355 0.980841345,0.142918363 1.07138474,0.142918363 C1.14297402,0.142918363 1.27278925,0.168630812 1.27278925,0.214270409 C1.27278925,0.260017142 1.14297402,0.285729591 1.07138474,0.285729591 C0.980841345,0.285729591 0.859616827,0.255624598 0.726392582,0.244589672 C0.720529079,0.342189844 0.686848026,0.418470109 0.644848981,0.427683737 L0.637212791,0.428433683 L1.63632645,0.428433683 L1.63632645,0.392864795 C1.63632645,0.333695656 1.69737714,0.285729591 1.77268698,0.285729591 L2.22731302,0.285729591 C2.30262286,0.285729591 2.36367355,0.333695656 2.36367355,0.392864795 L2.36367355,0.428433683 L3.36251449,0.428433683 L3.35515102,0.427683737 C3.31315197,0.418470109 3.27947092,0.342189844 3.27360742,0.244803943 C3.14051953,0.255517463 3.01915866,0.285729591 2.92861526,0.285729591 C2.85702598,0.285729591 2.72721075,0.260017142 2.72721075,0.214270409 C2.72721075,0.168630812 2.85702598,0.142918363 2.92861526,0.142918363 C3.01915866,0.142918363 3.14051953,0.173023355 3.27360742,0.183951146 C3.27988,0.0799228627 3.31778823,0 3.36360537,0 Z" id="路径" fill="#FFFFFF"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="18px" viewBox="0 0 9 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>一代</title>
<g id="无人机列表改" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="一代" transform="translate(0.000000, 0.000000)" fill="#43DEFF" fill-rule="nonzero">
<path d="M2.60526316,16.0632911 L2.60526316,1.90822785 C2.60526316,1.58544304 2.55098684,1.35759494 2.44243421,1.22468354 C2.33388158,1.09177215 2.14144737,1.01582278 1.86513158,0.996835443 L0,0.740506329 L0,0 C0.197368421,0.0569620253 2.26973684,0.085443038 6.21710526,0.085443038 C7.38157895,0.085443038 8.30921053,0.0569620253 9,0 L9,0.768987342 L7.13486842,1.02531646 C6.85855263,1.0443038 6.66611842,1.11075949 6.55756579,1.22468354 C6.44901316,1.33860759 6.39473684,1.5664557 6.39473684,1.90822785 L6.39473684,16.0632911 C6.39473684,16.4050633 6.44407895,16.6234177 6.54276316,16.7183544 C6.64144737,16.8132911 6.83881579,16.8702532 7.13486842,16.8892405 L9,17.0316456 L9,18 C8.60526316,17.9620253 8.03782895,17.9335443 7.29769737,17.914557 C6.55756579,17.8955696 5.625,17.8860759 4.5,17.8860759 C3.375,17.8860759 2.44243421,17.8955696 1.70230263,17.914557 C0.962171053,17.9335443 0.394736842,17.9620253 0,18 L0,17.0316456 L1.86513158,16.8892405 C2.16118421,16.8512658 2.35855263,16.7848101 2.45723684,16.6898734 C2.55592105,16.5949367 2.60526316,16.3860759 2.60526316,16.0632911 Z" id="路径"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>二代</title>
<g id="无人机列表改" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="二代" transform="translate(0.000000, 0.000000)" fill="#43DEFF" fill-rule="nonzero">
<g id="I备份-2">
<path d="M2.60526316,16.0632911 L2.60526316,1.90822785 C2.60526316,1.58544304 2.55098684,1.35759494 2.44243421,1.22468354 C2.33388158,1.09177215 2.14144737,1.01582278 1.86513158,0.996835443 L0,0.740506329 L0,0 C0.197368421,0.0569620253 2.26973684,0.085443038 6.21710526,0.085443038 C7.38157895,0.085443038 8.30921053,0.0569620253 9,0 L9,0.768987342 L7.13486842,1.02531646 C6.85855263,1.0443038 6.66611842,1.11075949 6.55756579,1.22468354 C6.44901316,1.33860759 6.39473684,1.5664557 6.39473684,1.90822785 L6.39473684,16.0632911 C6.39473684,16.4050633 6.44407895,16.6234177 6.54276316,16.7183544 C6.64144737,16.8132911 6.83881579,16.8702532 7.13486842,16.8892405 L9,17.0316456 L9,18 C8.60526316,17.9620253 8.03782895,17.9335443 7.29769737,17.914557 C6.55756579,17.8955696 5.625,17.8860759 4.5,17.8860759 C3.375,17.8860759 2.44243421,17.8955696 1.70230263,17.914557 C0.962171053,17.9335443 0.394736842,17.9620253 0,18 L0,17.0316456 L1.86513158,16.8892405 C2.16118421,16.8512658 2.35855263,16.7848101 2.45723684,16.6898734 C2.55592105,16.5949367 2.60526316,16.3860759 2.60526316,16.0632911 Z" id="路径"></path>
</g>
<g id="I备份-3" transform="translate(9.000000, 0.000000)">
<path d="M2.60526316,16.0632911 L2.60526316,1.90822785 C2.60526316,1.58544304 2.55098684,1.35759494 2.44243421,1.22468354 C2.33388158,1.09177215 2.14144737,1.01582278 1.86513158,0.996835443 L0,0.740506329 L0,0 C0.197368421,0.0569620253 2.26973684,0.085443038 6.21710526,0.085443038 C7.38157895,0.085443038 8.30921053,0.0569620253 9,0 L9,0.768987342 L7.13486842,1.02531646 C6.85855263,1.0443038 6.66611842,1.11075949 6.55756579,1.22468354 C6.44901316,1.33860759 6.39473684,1.5664557 6.39473684,1.90822785 L6.39473684,16.0632911 C6.39473684,16.4050633 6.44407895,16.6234177 6.54276316,16.7183544 C6.64144737,16.8132911 6.83881579,16.8702532 7.13486842,16.8892405 L9,17.0316456 L9,18 C8.60526316,17.9620253 8.03782895,17.9335443 7.29769737,17.914557 C6.55756579,17.8955696 5.625,17.8860759 4.5,17.8860759 C3.375,17.8860759 2.44243421,17.8955696 1.70230263,17.914557 C0.962171053,17.9335443 0.394736842,17.9620253 0,18 L0,17.0316456 L1.86513158,16.8892405 C2.16118421,16.8512658 2.35855263,16.7848101 2.45723684,16.6898734 C2.55592105,16.5949367 2.60526316,16.3860759 2.60526316,16.0632911 Z" id="路径"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 12备份</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="接管中" transform="translate(-1267.000000, -201.000000)">
<g id="编组-25" transform="translate(641.000000, 172.000000)">
<g transform="translate(0.000000, -60.000000)" id="编组-12备份">
<g transform="translate(626.000000, 89.000000)">
<rect id="矩形" x="0" y="0" width="18" height="18"></rect>
<g id="编组" transform="translate(0.000000, 1.000000)" fill="#B3C9CB" fill-rule="nonzero">
<path d="M17.850016,13.5103629 C17.5788626,12.8481305 16.9357273,12.4165056 16.2228035,12.4182979 C15.7931026,12.4195874 15.3790797,12.5805555 15.0605089,12.8701869 L13.163344,11.763059 L13.163344,7.47764569 L9.47399584,5.33870477 L9.47399584,3.50102313 C10.3177515,3.28747031 10.8817508,2.48954009 10.8042077,1.61907713 C10.7266645,0.748614175 10.0305891,0.0639190733 9.16248966,0.00420007209 C8.29439023,-0.0555189291 7.51186606,0.527459147 7.31687937,1.37917401 C7.12189267,2.23088887 7.57230367,3.09860323 8.37918928,3.42570831 L8.37918928,5.33117328 L4.71233711,7.47764569 L4.71233711,11.6500868 L2.98764183,12.6818998 C2.40679718,12.1116776 1.51039599,12.0210201 0.82802338,12.4634868 C0.113289308,12.9100641 -0.1850107,13.8034942 0.117159798,14.5925747 C0.419330296,15.3816552 1.23683126,15.8440536 2.06530479,15.6944927 C2.89243426,15.5317097 3.48747791,14.8012523 3.48255439,13.9547203 C3.48992794,13.8670091 3.48992794,13.7788297 3.48255439,13.6911184 L5.21474835,12.6894313 L8.96408594,14.8810926 L12.6234394,12.7496832 L14.5206042,13.8492795 C14.4924107,13.9703061 14.4773257,14.094039 14.4756122,14.2183222 C14.4708638,14.9381924 14.9007044,15.5892294 15.5627925,15.8649668 C16.2248806,16.1407041 16.9872866,15.9861975 17.4911185,15.4741788 C17.9949504,14.96216 18.1398132,14.1946555 17.8575147,13.5329573 L17.850016,13.5103629 Z M11.5136355,7.81656238 L8.94908859,9.32285881 L6.36204565,7.81656238 L8.92659257,6.31026596 L11.5136355,7.81656238 Z M12.0460414,8.77306061 L12.0460414,11.7856535 L9.47399584,13.2919499 L9.47399584,10.279357 L12.0460414,8.77306061 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 65备份</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="无人机应用" transform="translate(-62.000000, -209.000000)" fill="#00B7FF">
<g id="编组-8" transform="translate(24.000000, 177.000000)">
<g id="编组-41" transform="translate(0.000000, 2.000000)">
<g id="编组-24" transform="translate(24.000000, 30.000000)">
<g id="编组-66" transform="translate(14.000000, 0.000000)">
<g id="站点地图,分级,组织,层级备份-2" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path d="M16,11.453125 L16,13.5 C16,14.328125 15.328125,15 14.5,15 L13,15 C12.171875,15 11.5,14.328125 11.5,13.5 L11.5,11.453125 C11.5,10.625 12.171875,9.953125 13,9.953125 C13.1375,9.953125 13.25,9.840625 13.25,9.703125 L13.25,8.5 C13.25,8.2234375 13.0265625,8 12.75,8 L3.25,8 C2.9734375,8 2.75,8.2234375 2.75,8.5 L2.75,9.703125 C2.75,9.840625 2.8625,9.953125 3,9.953125 C3.828125,9.953125 4.5,10.625 4.5,11.453125 L4.5,13.5 C4.5,14.328125 3.828125,15 3,15 L1.5,15 C0.671875,15 0,14.328125 0,13.5 L0,11.453125 C0,10.625 0.671875,9.953125 1.5,9.953125 C1.6375,9.953125 1.75,9.840625 1.75,9.703125 L1.75,8.5 C1.75,7.671875 2.421875,7 3.25,7 L7.25,7 C7.3875,7 7.5,6.8875 7.5,6.75 L7.5,6 L6,6 C5.171875,6 4.5,5.328125 4.5,4.5 L4.5,2.25 C4.5,1.421875 5.171875,0.75 6,0.75 L10,0.75 C10.828125,0.75 11.5,1.421875 11.5,2.25 L11.5,4.5 C11.5,5.328125 10.828125,6 10,6 L8.5,6 L8.5,6.75 C8.5,6.8875 8.6125,7 8.75,7 L12.75,7 C13.578125,7 14.25,7.671875 14.25,8.5 L14.25,9.703125 C14.25,9.840625 14.3625,9.953125 14.5,9.953125 C15.328125,9.953125 16,10.625 16,11.453125 Z" id="路径"></path>
</g>
<text id="2" font-family="PingFangSC-Semibold, PingFang SC" font-size="8" font-weight="500" line-spacing="8">
<tspan x="5.94444444" y="16">2</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 65备份 5</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="无人机应用" transform="translate(-86.000000, -390.000000)" fill="#00B7FF">
<g id="编组-8" transform="translate(24.000000, 177.000000)">
<g id="编组-56备份-2" transform="translate(48.000000, 213.000000)">
<g id="编组-66" transform="translate(14.000000, 0.000000)">
<g id="站点地图,分级,组织,层级备份-2" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path d="M16,11.453125 L16,13.5 C16,14.328125 15.328125,15 14.5,15 L13,15 C12.171875,15 11.5,14.328125 11.5,13.5 L11.5,11.453125 C11.5,10.625 12.171875,9.953125 13,9.953125 C13.1375,9.953125 13.25,9.840625 13.25,9.703125 L13.25,8.5 C13.25,8.2234375 13.0265625,8 12.75,8 L3.25,8 C2.9734375,8 2.75,8.2234375 2.75,8.5 L2.75,9.703125 C2.75,9.840625 2.8625,9.953125 3,9.953125 C3.828125,9.953125 4.5,10.625 4.5,11.453125 L4.5,13.5 C4.5,14.328125 3.828125,15 3,15 L1.5,15 C0.671875,15 0,14.328125 0,13.5 L0,11.453125 C0,10.625 0.671875,9.953125 1.5,9.953125 C1.6375,9.953125 1.75,9.840625 1.75,9.703125 L1.75,8.5 C1.75,7.671875 2.421875,7 3.25,7 L7.25,7 C7.3875,7 7.5,6.8875 7.5,6.75 L7.5,6 L6,6 C5.171875,6 4.5,5.328125 4.5,4.5 L4.5,2.25 C4.5,1.421875 5.171875,0.75 6,0.75 L10,0.75 C10.828125,0.75 11.5,1.421875 11.5,2.25 L11.5,4.5 C11.5,5.328125 10.828125,6 10,6 L8.5,6 L8.5,6.75 C8.5,6.8875 8.6125,7 8.75,7 L12.75,7 C13.578125,7 14.25,7.671875 14.25,8.5 L14.25,9.703125 C14.25,9.840625 14.3625,9.953125 14.5,9.953125 C15.328125,9.953125 16,10.625 16,11.453125 Z" id="路径"></path>
</g>
<text id="3" font-family="PingFangSC-Semibold, PingFang SC" font-size="8" font-weight="500" line-spacing="8">
<tspan x="5.94444444" y="16">3</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<div class="cpt-app-uav-list">
<div class="uav-item-box">
<div class="uav-item-inner" @click="$set(data, 'collapse', !data.collapse)">
<div class="title-box">
<span class="el-icon-caret-right" :class="{ collapse: data.collapse }"></span>
<img class="level-icon" src="./assets/images/uav_item1_1.png" v-if="level === 1" />
<img class="level-icon" src="./assets/images/uav_item2.svg" v-if="level === 2" />
<img class="level-icon" src="./assets/images/uav_item3.svg" v-if="level === 3" />
<div class="org-name" :title="data.name">{{ data.name }}</div>
<i class="refresh-icon el-icon-refresh-right" v-if="level === 1" @click.stop="$emit('refresh')" />
</div>
<div class="online-info">
(共 {{data.online + data.offline}}
<span
class="ml10"
:class="{ online: data.online }"
>{{ data.online }} 在线</span>
/
{{ data.offline }} 离线)
</div>
</div>
<div class="uav-item-child-box" :class="{ collapse: data.collapse }">
<Item v-for="child in data.childs" :key="child.id" :data="child" :level="level+1" />
<div
class="device-item-box"
:class="{ online: device.online == 1 }"
v-for="device in data.uavs"
:key="`device_${device.id}`"
>
<div class="device-name" >
<span style="margin-right:10px" :class="device.online==1&&device.currentOperator==1? 'blue' : device.online==1&&device.currentOperator!=1 ?'yellow':'' " :title="device.name">{{device.name}}</span>
<span style="color:#31DB24 " class="dib" v-if=" device.online == 1 ">(在线)</span>
<span v-else class="dib">(离线)</span>
<div class="symbol-icon-box">
<template v-if="device.modelName && device.modelName.includes('入云龙1')">
<div class="uav_version status-icon cp">
<img src="./assets/images/I.svg" />
</div>
</template>
<template v-if="device.modelName && device.modelName.includes('入云龙2')">
<div class="uav_version status-icon cp">
<img src="./assets/images/I.svg"/>
<img src="./assets/images/I.svg"/>
</div>
</template>
<template v-if="device.modelName && device.modelName.includes('插翅虎')">
<div class="uav_version status-icon cp">
<img src="./assets/images/cq.svg"/>
</div>
</template>
</div>
</div>
<div class="device-fns">
<div
class="iconfont icon-luxiang_xianxing"
:class="{ active: device.showPlayer }"
title="视频"
></div>
<div
v-if="device.online"
class="iconfont icon-kongzhi_xianxing"
:class="{ active: device.showPanel }"
title="控制面板"
></div>
<div
class="jieg"
title="接管无人机 "
v-if="device.online"
></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Item",
data() {
return {
}
},
props: {
data: {
type: Object,
default: () => ({})
},
level: {
type: Number,
default: -1
}
},
inject: ["fn"],
};
</script>
<style lang="scss" scoped>
.cpt-app-uav-list {
.uav-item-box {
font-family: Microsoft YaHei;
font-size: 16px;
color: #b3bbc5;
font-weight: 400;
.uav-item-inner {
height: 30px;
display: flex;
align-items: center;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
.title-box {
display: flex;
align-content: center;
align-items: center;
.el-icon-caret-right {
cursor: pointer;
transition: 0.3s;
transform-origin: center;
transform: rotate(90deg);
margin-right: 4px;
&.collapse {
transform: rotate(0deg);
}
}
.org-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
}
.online-info {
font-size: 12px;
white-space: nowrap;
.online {
color: #31db24;
}
}
}
.uav-item-child-box {
padding-left: 20px;
max-height: 20000px;
transition: 0.3s;
overflow: hidden;
position: relative;
&::before {
content: " ";
display: block;
height: 100%;
width: 1px;
background-color: #129c9c;
position: absolute;
left: 7px;
top: 0;
}
&.collapse {
max-height: 0;
}
.device-item-box {
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
transition: 0.2s;
.device-name {
display: flex;
align-items: center;
width: calc(100% - 150px);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
}
&.online {
.device-name {
color: #00ffff;
}
}
.device-fns {
display: flex;
align-items: center;
justify-content: space-between;
.jieg {
width: 20px;
cursor: pointer;
height: 20px;
background: url("./assets/images/jieguan.svg") no-repeat;
background-size: 100% 100%;
}
.iconfont {
font-size: 24px;
margin-right: 8px;
cursor: pointer;
&.active {
color: #00ffff;
}
}
}
}
}
}
.goodsName_two{
background-image: url("./assets/images/goodsName_two.svg");
background-size: 100% 100%;
}
.goodsName_one{
background-image: url("./assets/images/goodsName_one.svg");
background-size: 100% 100%;
}
}
.green{
color:#31DB24
}
.red{
color:red
}
.item_items{
align-items: center;
}
.level-icon{
width: 16px;
margin-right: 6px;
}
.refresh-icon{
width: 16px;
margin-left: 34px;
}
.jcsb{
justify-content: left;
}
.status-icon{
margin-left: 12px;
font-size: 14px;
color: RGBA(251, 192, 1, 1);
}
.uav_version{
margin-top: 1px;
width: 14px;
height: 12px;
background: rgba(255, 255, 255, 0.4);
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.symbol-icon-box{
display: flex;
align-items: center;
img {
height: 8px;
}
}
</style>
\ No newline at end of file
<template>
<div class="uavSearch">
<el-input
:placeholder="placeholder"
:suffix-icon="icon"
v-model="input"
@input="searchFn"
clearable
>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
input: "",
};
},
props: {
placeholder: {
type: String,
default: "请输入内容",
},
icon: {
type: String,
default: "el-icon-search",
},
},
methods: {
searchFn() {
this.$emit("searchFn", this.input);
},
},
};
</script>
<style lang="scss" >
.uavSearch {
padding: 0 10px;
.el-input--suffix {
color: #6e9fbf;
.el-input__inner {
border: 1px solid #00b6ff;
box-shadow: 0 2px 4px 0 rgba(28, 94, 124, 0.5), inset 0 0 3px 0 #00b6ff;
background: transparent;
color: #6e9fbf;
border-radius: 6px;
height: 40px;
}
.el-icon-search:before {
color: #00f8f9;
}
}
}
</style>
\ No newline at end of file
<!-- 飞控中心无人机应slot -->
<template>
<div class="h700 list">
<template v-if="wsList && wsList.length">
<!-- <div class="all">全部</div> -->
<div class="pl10 pb30 pr8">
<Item
v-for="item in wsList"
:key="item.id"
:data="item"
:level="1"
@refresh="$emit('refresh')"
/>
</div>
</template>
</div>
<!-- </Dialog> -->
</template>
<script>
import Dialog from "./components/dialog";
import Item from "./components/item";
export default {
data() {
return {
components_start: true, //组件当前的状态
wsList: [],
num: 0,
};
},
props: {
containerStyle: {
type: String | Object,
default: () => ({}),
},
list: {
type: Array,
default: () => [],
},
},
components: { Dialog, Item },
watch: {
list: {
handler(val) {
this.wsList = val;
},
},
},
methods: {},
mounted() {
this.wsList = this.list;
},
provide() {
return {
fn: (...args) => this.$emit("fn", ...args),
};
},
};
</script>
<style lang="scss">
.list {
overflow-y: auto;
}
.cpt-observe-uav_list {
height: 100%;
box-sizing: border-box;
}
.nestlist {
background: rgba(4, 18, 50, 0.5);
}
.mountItem {
background: rgba(25, 42, 61, 0.5);
box-shadow: inset 0 0 38px 0 rgba(0, 219, 255, 0.71);
border-radius: 10px;
padding: 10px;
}
.wrjBtn {
background: rgba(6, 23, 56, 0.6);
border: 0 solid #00b6ff;
box-shadow: 1px 1px 2px 0 rgba(3, 16, 50, 0.5), inset 0 0 12px 0 #00b6ff;
border-radius: 3px;
}
.all {
margin-top: 10px;
text-indent: 1em;
background-image: linear-gradient(
270deg,
rgba(12, 134, 242, 0) 0%,
rgba(37, 151, 251, 0.62) 99%
);
width: 100px;
color: #a6caeb;
height: 20px;
border-radius: 4px;
}
.jz {
height: 100%;
display: flex;
align-items: center;
}
.mar {
margin: 0 0 0 5px;
color: #70daf9 !important;
font-weight: 700 !important;
}
</style>
\ No newline at end of file
{
"code": 200,
"msg": "操作成功",
"data": [
{
"name": "科比特",
"online": 7,
"offline": 29,
"childs": [
{
"name": "盐城公安",
"online": 4,
"offline": 11,
"childs": [
{
"name": "盐城亭湖公安局",
"online": 4,
"offline": 11,
"childs": [
{
"name": "亭湖派出所",
"online": 2,
"offline": 1,
"childs": [],
"uavs": [
{
"id": 152,
"addtime": "2023-10-28 10:41:56",
"updatetime": "2024-03-18 15:15:18",
"name": "肇庆无人机test",
"sn": "3987462549735735363",
"hardId": "3987462549735735363",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 166,
"organizationName": "亭湖派出所",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 50,
"addtime": "2023-07-11 10:42:01",
"updatetime": "2024-03-16 14:02:52",
"name": "mock-小旋风II-交通事故处置-006",
"sn": "mock-小旋风-deviceHardId-006",
"hardId": "mock-小旋风-deviceHardId-006",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 166,
"organizationName": "亭湖派出所",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 46,
"addtime": "2023-07-11 10:40:36",
"updatetime": "2024-03-16 14:04:37",
"name": "mock-入云龙-景区安全巡查-002",
"sn": "mock-小旋风-deviceHardId-002",
"hardId": "mock-小旋风-deviceHardId-002",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 166,
"organizationName": "亭湖派出所",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
}
],
"uavs": [
{
"id": 168,
"addtime": "2024-02-27 15:06:35",
"updatetime": "2024-02-27 16:23:57",
"name": "MMC301R22205363",
"sn": "MMC301R22205363",
"hardId": "MMC301R22205363",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 167,
"addtime": "2024-02-26 13:58:39",
"updatetime": "2024-03-05 09:11:02",
"name": "盐城8189",
"sn": "MMC301R22208189",
"hardId": "MMC301R22208189",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 166,
"addtime": "2024-01-30 10:01:56",
"updatetime": "2024-03-18 14:57:30",
"name": "盐城气体检测",
"sn": "4852153673897607219",
"hardId": "4852153673897607219",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 165,
"addtime": "2024-01-24 11:20:36",
"updatetime": "2024-02-08 14:38:38",
"name": "盐城气体检测无人机",
"sn": "MMC301R22208140",
"hardId": "MMC301R22208140",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 164,
"addtime": "2024-01-15 15:33:10",
"updatetime": "2024-03-18 14:43:46",
"name": "盐城鹰巢",
"sn": "LMMC3R2KUAV202311001",
"hardId": "LMMC3R2KUAV202311001",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": 27,
"nest": null
},
{
"id": 162,
"addtime": "2023-12-27 12:02:33",
"updatetime": "2024-03-15 13:44:31",
"name": "测试鹰巢",
"sn": "MMC301X22306027",
"hardId": "MMC301X22306027",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 160,
"addtime": "2023-12-19 17:49:39",
"updatetime": "2023-12-28 11:11:38",
"name": "鹰巢2",
"sn": "MMC301X22306038",
"hardId": "MMC301X22306038",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 154,
"addtime": "2023-11-21 16:15:11",
"updatetime": "2023-12-28 15:33:21",
"name": "鹰巢22222",
"sn": "MMC301X22306023",
"hardId": "MMC301X22306023",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": 63,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 53,
"addtime": "2023-07-19 15:20:46",
"updatetime": "2023-12-28 15:33:48",
"name": "大疆001",
"sn": "1234561",
"hardId": "1234561",
"status": 1,
"online": 0,
"cateId": 45,
"cateName": "配件",
"modelId": 36,
"model": "单光版",
"modelName": "小旋风S单光版",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421236664_01%281%29%20%E6%8B%B7%E8%B4%9D.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 287,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 52,
"addtime": "2023-07-19 10:27:06",
"updatetime": "2023-12-28 15:33:50",
"name": "测试设备",
"sn": "1234567891234567891012",
"hardId": "1234567891012",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 36,
"model": "单光版",
"modelName": "小旋风S单光版",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421236664_01%281%29%20%E6%8B%B7%E8%B4%9D.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 51,
"addtime": "2023-07-11 10:42:20",
"updatetime": "2024-03-18 10:32:40",
"name": "mock-入云龙II-应急救援抛投-007",
"sn": "mock-小旋风-deviceHardId-007",
"hardId": "mock-小旋风-deviceHardId-007",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": 395,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": 26,
"nest": null
},
{
"id": 45,
"addtime": "2023-07-11 10:40:00",
"updatetime": "2024-03-13 18:25:04",
"name": "mock-入云龙II-洪涝灾害应急巡查-001",
"sn": "mock-小旋风-deviceHardId-001",
"hardId": "mock-小旋风-deviceHardId-001",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 31,
"model": "插翅虎10",
"modelName": "插翅虎M10",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421715458_%E7%BF%85%E8%99%8E%20M10-1.png",
"organizationId": 147,
"organizationName": "盐城亭湖公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1709863717261_M10anima.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
}
],
"uavs": []
},
{
"name": "浙江科比特",
"online": 0,
"offline": 0,
"childs": [],
"uavs": []
},
{
"name": "西北大区",
"online": 0,
"offline": 0,
"childs": [],
"uavs": []
},
{
"name": "乌鲁木齐市公安局",
"online": 0,
"offline": 1,
"childs": [],
"uavs": [
{
"id": 54,
"addtime": "2023-08-08 13:26:56",
"updatetime": "2023-09-07 09:43:47",
"name": "乌鲁木齐市-入云龙2",
"sn": "3472927426180284439",
"hardId": "3472927426180284439",
"status": 1,
"online": 0,
"cateId": 46,
"cateName": "地面系统",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 161,
"organizationName": "乌鲁木齐市公安局",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "福建科比特",
"online": 0,
"offline": 2,
"childs": [],
"uavs": [
{
"id": 132,
"addtime": "2023-08-20 17:13:19",
"updatetime": "2023-12-26 17:50:23",
"name": "福建科比特红",
"sn": "4852153630946099246",
"hardId": "4852153630946099246",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 162,
"organizationName": "福建科比特",
"remark": null,
"userId": 299,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 131,
"addtime": "2023-08-20 16:40:54",
"updatetime": "2024-03-04 16:13:18",
"name": "福建无人机",
"sn": "6427006125642350639",
"hardId": "6427006125642350639",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 162,
"organizationName": "福建科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "山西指挥车交付",
"online": 0,
"offline": 1,
"childs": [],
"uavs": [
{
"id": 133,
"addtime": "2023-08-23 19:26:05",
"updatetime": "2023-08-25 15:34:34",
"name": "山西指挥车入云龙",
"sn": "3617042597074960431",
"hardId": "3617042597074960431",
"status": 1,
"online": 0,
"cateId": 46,
"cateName": "地面系统",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 163,
"organizationName": "山西指挥车交付",
"remark": null,
"userId": 300,
"currentOperator": 300,
"currentOperatorName": "山西指挥车标准版",
"username": "sx123",
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": 63,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "山东济南",
"online": 1,
"offline": 2,
"childs": [],
"uavs": [
{
"id": 157,
"addtime": "2023-11-29 11:00:12",
"updatetime": "2024-02-26 17:27:41",
"name": "神思项目测试",
"sn": "3987462549734752306",
"hardId": "3987462549734752306",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 164,
"organizationName": "山东济南",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 151,
"addtime": "2023-09-29 18:13:44",
"updatetime": "2024-02-26 18:40:51",
"name": "神思入云龙2",
"sn": "MMC301R22208087",
"hardId": "MMC301R22208087",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 164,
"organizationName": "山东济南",
"remark": null,
"userId": 304,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 48,
"addtime": "2023-07-11 10:41:24",
"updatetime": "2024-03-13 18:25:04",
"name": "mock-小旋风II-河长制水利常态化巡查-004",
"sn": "mock-小旋风-deviceHardId-004",
"hardId": "mock-小旋风-deviceHardId-004",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 164,
"organizationName": "山东济南",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "肇庆",
"online": 0,
"offline": 2,
"childs": [],
"uavs": [
{
"id": 169,
"addtime": "2024-03-14 17:27:37",
"updatetime": "2024-03-18 10:59:32",
"name": "肇庆鹰巢",
"sn": "LMMC3X2KUAV202311051",
"hardId": "LMMC3X2KUAV202311051",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 37,
"model": "II",
"modelName": "入云龙II",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701420754644_II_%E6%96%B0%E7%89%88%EF%BC%883%EF%BC%89.png",
"organizationId": 165,
"organizationName": "肇庆",
"remark": null,
"userId": 308,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": 28,
"nest": null
},
{
"id": 150,
"addtime": "2023-09-21 09:42:11",
"updatetime": "2024-03-11 15:02:59",
"name": "入云龙2",
"sn": "6427006134231695394",
"hardId": "6427006134231695394",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 165,
"organizationName": "肇庆",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "河北省黄骅市",
"online": 0,
"offline": 1,
"childs": [],
"uavs": [
{
"id": 149,
"addtime": "2023-09-18 10:51:39",
"updatetime": "2023-11-24 10:47:57",
"name": "M10-1",
"sn": "YYD700000200",
"hardId": "YYD700000200",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 31,
"model": "插翅虎10",
"modelName": "插翅虎M10",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421715458_%E7%BF%85%E8%99%8E%20M10-1.png",
"organizationId": 168,
"organizationName": "河北省黄骅市",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1709863717261_M10anima.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "江西天目将试用",
"online": 0,
"offline": 0,
"childs": [],
"uavs": []
},
{
"name": "厦门智俊达科技",
"online": 2,
"offline": 0,
"childs": [],
"uavs": [
{
"id": 49,
"addtime": "2023-07-11 10:41:41",
"updatetime": "2024-03-13 18:25:04",
"name": "mock-小旋风II-AI车辆识别巡查-005",
"sn": "mock-小旋风-deviceHardId-005",
"hardId": "mock-小旋风-deviceHardId-005",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 171,
"organizationName": "厦门智俊达科技",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 47,
"addtime": "2023-07-11 10:41:06",
"updatetime": "2024-03-13 18:25:04",
"name": "mock-入云龙-防溺水巡查-003",
"sn": "mock-小旋风-deviceHardId-003",
"hardId": "mock-小旋风-deviceHardId-003",
"status": 1,
"online": 1,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 171,
"organizationName": "厦门智俊达科技",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
},
{
"name": "广州大学城",
"online": 0,
"offline": 0,
"childs": [],
"uavs": []
}
],
"uavs": [
{
"id": 161,
"addtime": "2023-12-20 14:51:44",
"updatetime": "2023-12-20 14:55:44",
"name": "无人机1",
"sn": "3987462545440571438",
"hardId": "3987462545440571438",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 31,
"model": "插翅虎10",
"modelName": "插翅虎M10",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421715458_%E7%BF%85%E8%99%8E%20M10-1.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1709863717261_M10anima.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 129,
"addtime": "2023-08-20 10:45:20",
"updatetime": "2023-12-19 11:12:41",
"name": "福建公安版",
"sn": "XLC100000200",
"hardId": "XLC100000200",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 128,
"addtime": "2023-08-20 10:44:11",
"updatetime": "2023-12-19 11:12:37",
"name": "福建标准版",
"sn": "IPE000000200",
"hardId": "IPE000000200",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 55,
"addtime": "2023-08-15 16:45:08",
"updatetime": "2023-12-19 11:12:47",
"name": "肇庆测试机",
"sn": "3617042524062351414",
"hardId": "3617042524062351414",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 43,
"addtime": "2023-06-28 14:10:20",
"updatetime": "2024-01-31 11:33:41",
"name": "MMC9058",
"sn": "MMC301R22209058",
"hardId": "MMC301R22209058",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 40,
"addtime": "2023-05-10 15:47:50",
"updatetime": "2023-12-19 11:11:30",
"name": "飞控中心无人机",
"sn": "MMC301R22208058",
"hardId": "MMC301R22208058",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 34,
"model": null,
"modelName": null,
"modelIMage": null,
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": null,
"code": null,
"taskId": null,
"taskType": null,
"network": 1,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 39,
"addtime": "2023-04-27 19:05:02",
"updatetime": "2023-12-19 11:11:03",
"name": "肇庆无人机5",
"sn": "3987462545441423395",
"hardId": "3987462545441423395",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 38,
"addtime": "2023-04-22 18:45:43",
"updatetime": "2023-12-19 11:11:22",
"name": "肇庆无人机2",
"sn": "3617042597077385265",
"hardId": "3617042597077385265",
"status": 1,
"online": 0,
"cateId": 39,
"cateName": "无人机",
"modelId": 32,
"model": "SN052",
"modelName": "入云龙2-p【大载重版】",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421564087_II-P%E6%B8%B2%E6%9F%9301.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": "1",
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1701311743774_5_1025g2.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
},
{
"id": 37,
"addtime": "2023-04-22 18:30:13",
"updatetime": "2024-03-13 16:37:30",
"name": "肇庆无人机",
"sn": "3987462549736914976",
"hardId": "3987462549736914976",
"status": 1,
"online": 0,
"cateId": 40,
"cateName": "地面站",
"modelId": 31,
"model": "插翅虎10",
"modelName": "插翅虎M10",
"modelIMage": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/tmj-icon_1701421715458_%E7%BF%85%E8%99%8E%20M10-1.png",
"organizationId": 1,
"organizationName": "科比特",
"remark": null,
"userId": 4,
"currentOperator": 0,
"currentOperatorName": null,
"username": null,
"streamConfiguration": null,
"streamUrlMessage": null,
"modelVictor": "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-uav-model/tmj-uav-model_1709863717261_M10anima.glb",
"code": null,
"taskId": null,
"taskType": null,
"network": 0,
"scene": 1,
"ipId": null,
"streamId": null,
"nestId": null,
"nest": null
}
]
}
]
}
\ No newline at end of file
<template>
<div class="uav-list" :class="{ collapse: collapseFlag }">
<img
@click="collapseFlagfn"
v-if="collapseFlag"
style="transform: rotate(180deg)"
src="./assets/images/hs.png"
class="icon-collapse uav-list_btn"
/>
<img
@click="collapseFlagfn"
v-else
src="./assets/images/collapse.png"
class="icon-collapse uav-list_btn"
/>
<div class="uav-list-header">
<img class="uav-list-header__icon" src="./assets/images/uav_list_header.png" />
<span class="uav-list-header__text">无人机列表</span>
</div>
<div class="uav-search">
<el-input
class="uav-search__input"
clearable
placeholder="请输入无人机名称/机构名称"
v-model="uavSearchContent"
v-on:keyup.enter.native="onUavSearch"
>
<i
slot="suffix"
class="el-input__icon el-icon-search"
style="color: rgba(123, 181, 213, 1)"
></i>
</el-input>
<el-button class="uav-search__btn" @click="onUavSearch">搜索</el-button>
</div>
<List
class="uav-list-main"
@exit
:containerStyle="{
width: '400PX',
height: '275px',
}"
:list="uavList"
@refresh="onUavSearch"
/>
<div></div>
</div>
</template>
<script>
import { Control_API } from "../../../../api";
import List from "./components/list";
import data from "./data.json";
export default {
components: {
List,
},
data() {
return {
uavList: [], // 无人机列表
collapseFlag: false, // 收起列表按钮
uavSearchContent: "", // 无人机搜索内容
};
},
mounted() {
// this.uavList = data.data;
this.initList();
},
methods: {
async initList() {
let res = await Control_API.getUavTree({ name: this.uavSearchContent });
this.uavList = res.data;
},
collapseFlagfn() {
this.collapseFlag = !this.collapseFlag;
},
/**
* 无人机搜索
*/
onUavSearch() {
this.initList();
},
},
};
</script>
<style lang="scss" scoped>
.collapse {
transform: translateX(-100%);
transition: 0.3s;
}
.uav-list {
display: flex;
flex-direction: column;
padding-bottom: 10px;
position: absolute;
width: 460px;
height: 85%;
left: 0;
top: 60px;
// height: 86vh;
z-index: 99;
transition: 0.3s;
background: rgba(9, 32, 87, 0.7);
border-radius: 10px 10px 0px 0px;
// border: 1px solid #70daf9;
.uav-list_btn {
position: absolute;
cursor: pointer;
right: -22px;
top: 50%;
transform: translate(0, -50%);
z-index: 99;
}
}
.uav-list-header {
flex-shrink: 0;
box-sizing: border-box;
display: flex;
align-items: center;
width: 460px;
height: 33px;
background: linear-gradient(
180deg,
#9198ff 0%,
rgba(45, 81, 153, 0.45) 40%,
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px;
border: 1px solid #427dff;
.uav-list-header__text {
font-size: 20px;
font-family: YouSheBiaoTiHei;
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#f7b67d 38%,
#f9eacb 58%,
#f5d2a6 79%,
#f59743 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.uav-list-header__icon {
width: 26px;
margin-left: 9px;
}
}
::v-deep .uav-search {
flex-shrink: 0;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
// margin-bottom: 7px;
margin-top: 14px;
.uav-search__input {
width: 317px;
height: 32px;
box-shadow: 0px 2px 4px 0px rgba(28, 94, 124, 0.5),
inset 0px 0px 3px 0px #00b6ff;
border-radius: 4px;
.el-input__icon {
line-height: 32px;
}
input {
height: 32px;
background: #02173d;
color: #43deff;
border: 1px solid #315ec7;
&::placeholder {
font-size: 12px;
color: #7bb5d5;
}
}
}
.uav-search__btn {
padding: 7px 25px 6px 26px;
// background: rgba(38, 71, 238, 0.71);
background: url("./assets/images/twobg.png");
border-radius: 4px;
border: 1px solid;
font-size: 14px;
color: #fff;
}
}
.uav-list-main {
margin-top: 20px;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
}
/* 滚动条滑块样式 */
&::-webkit-scrollbar-thumb {
background-color: #02173d; /* 滑块颜色 */
}
/* 滚动条滑块悬停样式 */
&::-webkit-scrollbar-thumb:hover {
background-color: #112d5b; /* 悬停时滑块颜色 */
}
&::-webkit-scrollbar-track-piece {
/* background-color: #182F5C; */
}
&::-webkit-scrollbar-track {
background-color: #182f5c;
}
}
</style>
\ No newline at end of file
<template>
<div>
<uavList></uavList>
</div>
</template>
<script>
import uavList from './components/uavList';
export default {
components: {
uavList
}
}
</script>
<style>
</style>
\ No newline at end of file
<template> <template>
<div> <div class="mmc-filght-control-center">
<CesiumLayout> <!-- cesium地图层 -->
<cesiumLayout></cesiumLayout>
</CesiumLayout> <!-- 地图切换组件 -->
<mapImageSwitch></mapImageSwitch>
<!-- 无人机应用 -->
<uavApplications></uavApplications>
</div> </div>
</template> </template>
<script> <script>
import CesiumLayout from './components/cesium-layer'; import cesiumLayout from "./components/cesium-layer";
import mapImageSwitch from "./components/mapImageSwitch";
import uavApplications from './components/uavApplications';
export default { export default {
name: 'MMCFlightControlCenter', name: "MMCFlightControlCenter",
components: { components: {
CesiumLayout cesiumLayout,
mapImageSwitch,
uavApplications
},
props: {
devMode: { // 开发环境
type: Boolean,
default: false
},
token: {
type: String,
default: ''
}
},
created(){
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'devMode',
value: this.devMode
})
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'token',
value: this.token
})
} }
} };
</script> </script>
<style> <style scope="scss">
.mmc-filght-control-center {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
}
</style> </style>
\ No newline at end of file
import uavApplications from "./uavApplications"; import uavApplications from "./uavApplications";
export default { export default {
namespaced: true,
state: { state: {
devMode: false, //开发模式, 使用开发环境接口 devMode: false, //开发模式, 使用开发环境接口
token: "", //登录token
cesiumImagesLayers: {
//cesium的地图图层
street: {
//街道影像
show: false,
},
satellite: {
//卫星影像
show: false,
},
night: {
//夜景影像
show: false,
},
text: {
// 地图标注
show: false,
},
},
cesium3DModels: [], //cesium的3D模型
}, },
mutations: { mutations: {
/** /**
...@@ -18,6 +40,19 @@ export default { ...@@ -18,6 +40,19 @@ export default {
} }
}, },
}, },
actions: {
/**
* 切换3D模型展示
* @param {Object} param0
* @param {Object} data
* @param {Boolean} data.show是否展示
*/
switch3DModelsShow({ state }, data) {
state.cesium3DModels.forEach((layer) => {
layer.visible = data.show;
});
},
},
modules: { modules: {
uavApplications, uavApplications,
}, },
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="./cesium/Widgets/widgets.css">
<script src="./cesium/Cesium.js"></script> <script src="./cesium/Cesium.js"></script>
<script src="./js/icontfont.js"></script> <script src="./js/icontfont.js"></script>
<script type="text/javascript" src="./js/nipplejs.min.js"></script> <script type="text/javascript" src="./js/nipplejs.min.js"></script>
......
...@@ -40,11 +40,17 @@ ...@@ -40,11 +40,17 @@
</template> </template>
<script> <script>
import store from '@/../../src/components/MMCFlightControlCenter/store';
export default { export default {
name: 'App', name: 'App',
components: { components: {
}, },
created(){
if(!this.$store.hasModule('MMCFlightControlCenter')){
this.$store.registerModule("MMCFlightControlCenter", store);
}
},
methods: { methods: {
onSelect(index){ onSelect(index){
this.$router.push({ this.$router.push({
......
<template> <template>
<div> <div style="width: 1920px; height: 1080px;">
<div ref="el"></div> <div ref="el"></div>
</div> </div>
</template> </template>
......
<template> <template>
<div> <div>
<MMCFlightControlCenter></MMCFlightControlCenter> <el-form>
<el-form-item label="账号">
<el-input v-model="account"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="password"></el-input>
</el-form-item>
<el-form-item label="token">{{ token }}</el-form-item>
<el-button @click="login">登录</el-button>
</el-form>
<MMCFlightControlCenter v-if="token" :token="token" :devMode="true"></MMCFlightControlCenter>
</div> </div>
</template> </template>
<script> <script>
import { Base64 } from "js-base64"
export default { export default {
name: "fkzx1", name: "fkzx1",
data() { data() {
return {}; return {
account: "mmctest@admin",
password: "test@Admin001",
token: "",
};
}, },
computed: {}, computed: {},
async mounted() { async mounted() {},
methods: {
async login() {
let formData = new FormData();
formData.append("userAccount", this.account);
formData.append("password", Base64.encode(this.password));
let res1 = await fetch("/crm/login", {
method: "post",
headers: {
// "Content-Type": "multipart/form-data",
},
body: formData,
});
let data1 = await res1.json();
if (data1.code == 200) {
await fetch("/crm/user/platformPermission", {
method: "get",
headers: {
"Token": data1.data.token
},
})
this.token = data1.data.token;
}
},
}, },
methods: {},
}; };
</script> </script>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论