Skip to content

M
mmc-stl-vue2
提交 07e72614 作者: 翁进城
操作

feat: 无人机 

1. 指点飞行
2. 内场控制
3. 视图库
上级 a0346bba
正在显示 包含 1265 行增加 和 191 行删除
src/components/MMCDataTransferPanel/index.vue
......@@ -38,12 +38,6 @@ export default {
type: Object,
default: () => ({})
},
wsShow: {
type: Boolean,
default: () => {
false;
}
}
},
components: { Info, battery, obstacle, throttleGauge },
mounted(){
......
src/components/MMCFlightControlCenter/api/modules/uav_control.js
import request from '../request';
import request_uav from '../request_uav';
import request from "../request";
import request_uav from "../request_uav";
class Control_API {
/**
......@@ -9,12 +9,12 @@ class Control_API {
*/
static login(data) {
return request({
url: '/crm/account/loginInfo',
method: 'post',
url: "/crm/account/loginInfo",
method: "post",
data,
headers: {
token: window.localStorage.getItem('tmj_token')
}
token: window.localStorage.getItem("tmj_token"),
},
});
}
/**
......@@ -26,34 +26,34 @@ class Control_API {
static updateTakeOver(id) {
return request({
url: `/dms/uav/updateTakeOver/${id}`,
method: 'put'
method: "put",
});
}
// 获取无人机树结构列表
static getUavTree(params) {
return request({
url: '/dms/uav/tree',
url: "/dms/uav/tree",
// url: '/crm/personalCenter/list?id=4',
method: 'get',
params
method: "get",
params,
});
}
// 获取无人机列表
static getUavDataList(params) {
return request({
url: '/dms/uav/page',
method: 'get',
params
url: "/dms/uav/page",
method: "get",
params,
});
}
// 获取航线列表
static getUavRouteList(params) {
return request({
url: '/dms/route/page',
method: 'get',
params
url: "/dms/route/page",
method: "get",
params,
});
}
......@@ -61,7 +61,7 @@ class Control_API {
static getFlightSortic({ taskId, deviceHardId }) {
return request({
url: `/tss/task/getFlightSortic/${taskId}/${deviceHardId}`,
method: 'get'
method: "get",
});
}
......@@ -69,7 +69,7 @@ class Control_API {
static uavDetail(params) {
return request({
url: `/dms/uav/detail/${params.id}`,
method: 'get'
method: "get",
});
}
......@@ -77,8 +77,8 @@ class Control_API {
static getFlightLog(data) {
return request({
url: `/dms/sortie/flightLog`,
method: 'post',
data
method: "post",
data,
});
}
......@@ -86,8 +86,8 @@ class Control_API {
static addPhoto(data) {
return request({
url: `/dms/sortie-image/add`,
method: 'post',
data
method: "post",
data,
});
}
// 保存AI图片
......@@ -102,70 +102,107 @@ class Control_API {
static getAllOrg() {
return request({
url: `/crm/organization/tree`,
method: 'get'
method: "get",
});
}
// 获取所有无人机操作日志
static getUavAllLog(params) {
return request_uav({
url: `/api/log/selectUavCmdLikeList`,
method: 'get',
params
method: "get",
params,
});
}
// 获取1小时短时天气预报
static getUavShortForEcast(params) {
return request_uav({
url: `/whapi/json/aliweather/shortforecast`,
method: 'post',
params
method: "post",
params,
});
}
// 获取24小时短时天气预报(详细)包含风向等等...
static getUavShortForEcast24(params) {
return request_uav({
url: `/whapi/json/aliweather/forecast24hours`,
method: 'post',
params
method: "post",
params,
});
}
// 获取树结构-鹰巢
static getUavNestList(params) {
return request({
url: `/dms/nest/getNestList`,
method: 'get',
params
method: "get",
params,
});
}
// 获取任务库列表
static getTaskList(data) {
return request({
url: `/tss/task/list`,
method: 'post',
data
method: "post",
data,
});
}
// 获取任务库内的任务详情
static getTaskDetails(params) {
return request({
url: `/tss/task/${params.id}`,
method: 'get'
method: "get",
});
}
// 鹰巢-定时，周期自启动
static startUavNest = (data) =>
request({
url: '/tss/task/start',
method: 'POST',
data
url: "/tss/task/start",
method: "POST",
data,
});
// 鹰巢-运行日志
static getUavNestLog = (params) =>
request_uav({
url: `api/log/selectProcessLikeList`,
method: 'get',
params
method: "get",
params,
});
// 获取架次列表
static getSortie(params) {
return request({
url: "/dms/sortie/page",
method: "get",
params,
});
}
// 获取架次图片列表
static getSortieImage(params) {
return request({
url: "/dms/sortie-image/page",
method: "get",
params,
});
}
// 获取架次视频列表
static getSortieVideo(params) {
return request({
url: "/dms/sortie/history-video",
method: "get",
params,
});
}
// 导出成果
static getExportToWordForSortie(params) {
return request({
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
responseType: "blob",
url: `/dms/sortie/export-word`,
method: "GET",
params,
});
}
}
export default Control_API;
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/assets/images/task.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 58</title>
<g id="鹰视子页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="无人机应用3" transform="translate(-437.000000, -91.000000)">
<g id="编组-44" transform="translate(424.000000, 84.000000)">
<g id="编组-58" transform="translate(13.000000, 7.000000)">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
<g id="编组-24" transform="translate(1.000000, 0.000000)">
<g id="编组">
<path d="M3.88923078,2.41768162 L3.88923078,2.90699556 C3.89135237,3.71997902 4.54351573,4.37741013 5.34615385,4.37568669 L14.6538461,4.37568669 C15.0394305,4.37672127 15.409628,4.22256551 15.6829986,3.9471322 C15.9563693,3.67169889 16.1105197,3.2975503 16.1115385,2.90699556 L16.1115385,2.41768162 L18.0561538,2.41768162 C18.5702664,2.41624304 19.0638901,2.62171794 19.4284324,2.98891369 C19.7929747,3.35610944 19.9985739,3.85494697 20,4.37568669 L20,20.0419851 C19.9985741,20.5628602 19.7928693,21.0618161 19.4281605,21.4290343 C19.0634517,21.7962524 18.5696302,22.0016358 18.0553846,21.9999902 L1.94461539,21.9999902 C1.42923078,21.9999902 0.933846162,21.7942856 0.569230765,21.4265284 C0.205080492,21.0601733 0.000204616439,20.5618526 0,20.0419851 L0,4.37568669 C0.00142586731,3.85481157 0.207130678,3.35585567 0.57183949,2.98863751 C0.936548301,2.62141936 1.43036975,2.41603597 1.94461539,2.41768162 L3.88923078,2.41768162 Z M8.03089086,7.05007484 C7.25556571,7.05007484 6.50823684,7.43670355 5.98144997,8.10900158 C5.48894424,8.73770348 5.21812322,9.5643088 5.21812322,10.4345102 L5.21812322,13.5757252 L5.23069297,13.8051785 C5.22326539,14.8021528 6.753347,14.6570236 6.75220429,13.7460942 L6.7413486,13.5349973 L6.7413486,10.4345102 C6.7413486,9.42893139 7.33212692,8.57938074 8.03089086,8.57938074 C8.73022614,8.57938074 9.32100448,9.42835775 9.32100448,10.4345102 L9.32100448,15.6161382 C9.32100448,16.4863397 9.59182549,17.3117977 10.0849026,17.9404996 C10.6122608,18.6133713 11.358447,19 12.1337721,19 C12.9096686,19 13.6564261,18.6133713 14.1837844,17.9404996 C14.6762901,17.3117977 14.9476825,16.4863397 14.9476825,15.6161382 L14.9476825,13.7460942 C14.9476825,13.3237881 14.6066968,12.9814413 14.1860698,12.9814413 C13.7654427,12.9814413 13.4244571,13.3237881 13.4244571,13.7460942 L13.4244571,15.6161382 C13.4244571,16.6217171 12.8331074,17.4706941 12.1337721,17.4706941 C11.4344368,17.4706941 10.8442299,16.6217171 10.8442299,15.6161382 L10.8442299,10.4345102 C10.8442299,9.56373516 10.5728375,8.73885074 10.0803318,8.10900158 C9.55297353,7.43670356 8.80621601,7.05007484 8.03089086,7.05007484 Z M5.97516509,14.9455611 C4.88461082,14.9468261 4.00094457,15.8342765 4,16.9291844 C4.0018887,18.0248844 4.8855348,18.9115448 5.97573645,18.9128078 C7.06664416,18.9118582 7.95058664,18.0238736 7.95090153,16.9286108 C7.94995603,15.8335722 7.06585007,14.9461937 5.97516509,14.9455611 Z M5.97573645,15.8639477 C6.56202684,15.8639477 7.03730912,16.3411273 7.03730912,16.9297581 C7.03730912,17.5183889 6.56202684,17.9955684 5.97573645,17.9955684 C5.38944605,17.9955684 4.91416377,17.5183889 4.91416377,16.9297581 C4.91416377,16.3411273 5.38944605,15.8639477 5.97573645,15.8639477 Z M14.1032237,7 C13.9820029,7 13.8657981,7.04858666 13.7804096,7.13497254 L12.3286033,8.5925743 C12.2429834,8.6785294 12.1948821,8.79511348 12.1948821,8.91667701 C12.1948821,9.03824054 12.2429834,9.15482463 12.3286033,9.24077972 C12.4141875,9.32723452 12.5305812,9.37584903 12.6519887,9.37584903 C12.7733962,9.37584903 12.8897899,9.32723452 12.9753741,9.24077972 L13.3421824,8.87308089 L13.3421824,11.1498307 C13.3421824,11.5721369 13.683168,11.9144837 14.103795,11.9144837 C14.5244221,11.9144837 14.8654077,11.5721369 14.8654077,11.1498307 L14.8654077,8.87250726 L15.2327873,9.24077972 C15.4131049,9.40799186 15.692774,9.40235843 15.8662663,9.22801943 C16.0397585,9.05368044 16.0451222,8.77289011 15.8784155,8.59200067 L14.4260378,7.13497254 C14.3406493,7.04858666 14.2244445,7 14.1032237,7 Z M10,0 C10.8817357,0.000861025619 11.6408671,0.63065615 11.8153846,1.50609017 L14.44,1.50609017 C15.0560099,1.50609017 15.5553846,2.01190203 15.5553846,2.63585258 C15.5553846,3.25980313 15.0560099,3.76561499 14.44,3.76561499 L5.56000001,3.76561499 C4.9439901,3.76561499 4.4446154,3.25980313 4.4446154,2.63585258 C4.4446154,2.01190203 4.9439901,1.50609017 5.56000001,1.50609017 L8.18461538,1.50609017 C8.35913286,0.63065615 9.11826429,0.000861025619 10,0 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
<g id="编组-5" transform="translate(12.194882, 7.000000)"></g>
</g>
<path d="M8.18461538,1.50609017 C8.35913286,0.63065615 9.11826429,0.000861025619 10,3.40838469e-13 C10.8817357,0.000861025619 11.6408671,0.63065615 11.8153846,1.50609017 L14.44,1.50609017 C15.0560099,1.50609017 15.5553846,2.01190203 15.5553846,2.63585258 C15.5553846,3.25980313 15.0560099,3.76561499 14.44,3.76561499 L5.56000001,3.76561499 C4.9439901,3.76561499 4.4446154,3.25980313 4.4446154,2.63585258 C4.4446154,2.01190203 4.9439901,1.50609017 5.56000001,1.50609017 L8.18538463,1.50609017 L8.18461538,1.50609017 Z" id="路径" fill="#FFBD36"></path>
</g>
<path d="M8.03730912,16.9297581 C8.03730912,16.3411273 7.56202684,15.8639477 6.97573645,15.8639477 C6.38944605,15.8639477 5.91416377,16.3411273 5.91416377,16.9297581 C5.91416377,17.5183889 6.38944605,17.9955684 6.97573645,17.9955684 C7.56202684,17.9955684 8.03730912,17.5183889 8.03730912,16.9297581 Z" id="路径" fill="#FFBD36"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/Jm/index.vue 0 → 100644
<template>
<div class="car dialog1027">
<div class="dialog-header" v-interact>
<div class="dialog-header__icon" />
<div class="dialog-header__title">
快速建模
</div>
<div class="dialog-header_close" style="color:#fff" @click="() => $emit('close')">关闭</div>
</div>
<div class="dialog-content w267">
<el-cascader size="mini" filterable popper-class="cpt-observe-mspace-dashboard-airway_popper" v-model="taskCateId"
:options="airway_list" clearable :show-all-levels="false" placeholder="请选择任务" :props="{
children: 'children',
label: 'taskTitle',
value: 'id',
emitPath: false,
}">
<template slot-scope="{ data }">
<el-tooltip :disabled="data.taskTitle.length < 11" class="item" effect="dark" :content="data.taskTitle"
placement="top-start">
<span>{{ data.taskTitle }}</span>
</el-tooltip>
</template>
</el-cascader>
<el-select class="mt10" v-model="type" size="mini" placeholder="请选择类型">
<el-option label="图片" :value="0"></el-option>
<el-option label="视频" :value="1"></el-option>
</el-select>
<div class="jcsb w267 h30 mt30">
<div class="dec mt5">1</div><span class="dib cf ml10 lh30"> 快速建模</span>
<div class="btn fr cf h30 lh30 w80 cp" @click="jmFn(1)">启动</div>
</div>
<div class="jcsb mt18 w267 h30">
<div class="dec mt5">2</div><span class="dib cf lh30 ml10">数据处理</span>
<div class="btn fr cf h30 lh30 w80 cp" @click="jmFn(2)">启动</div>
</div>
</div>
</div>
</template>
<script>
import API from '@/api';
export default {
props: {
device: {
type: Object,
default: () => ({})
},
},
data() {
return {
imgUrl: process.env.VUE_APP_IMG_URL,
list: [],
type: null,
taskCateId: null,
airway_list: []
}
},
created() {
this.list_airway();
},
methods: {
jmFn(num) {
let { deviceHardId } = this.device
if (num == 1) {
let a = document.createElement("a");
a.href = `MMCEagleEye:// `
a.click()
}
else {
if(!this.taskCateId) return this.$message.warning('请选择任务！')
if(this.type==null ) return this.$message.warning('请选择类型！')
let a = document.createElement("a");
a.href = `MMCPosTool://&deviceId=${deviceHardId}enddeviceId&taskId=${this.taskCateId}endtaskId&type=${this.type}endtype`
a.click()
}
},
async list_airway() {
let res = await API.AIRWAY.getApprovedTask();
if (res) {
let jqList = [],
ctList = [],
lsList = [];
for (let i = 0; i < res.length; i++) {
if (res[i].taskCateId == 1) {
jqList.push(res[i]);
}
if (res[i].taskCateId == 2) {
ctList.push(res[i]);
}
if (res[i].taskCateId == 3) {
lsList.push(res[i]);
}
}
let airway_list = [
{
id: "警情任务",
taskTitle: "警情任务",
children: jqList,
},
{
id: "常态任务",
taskTitle: "常态任务",
children: ctList,
},
{
id: "临时任务",
taskTitle: "临时任务",
children: lsList,
},
];
this.airway_list = airway_list;
}
},
}
}
</script>
<style lang="scss" scoped>
.car {
width: 268px;
}
.dialog-content {
padding: 20px 14px 12px;
max-height: 461px;
overflow: auto;
.dec {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: #06199b;
}
.btn {
text-align: center;
border: 1px #315ec7 solid;
border-radius: 3px;
background-color: #02173d;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #D2D9FF;
cursor: pointer;
}
.btn:hover {
background: #06199b;
}
}
.car-img {
position: relative;
width: 100%;
height: 135px;
.car-img__img {
width: 100%;
height: 100%;
}
.car-img__label {
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #aee9ff;
font-family: MicrosoftYaHeiUI;
}
}
.car-form {
padding: 10px 0 0;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #fff;
>div {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
.car-item {
margin-bottom: 24px;
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/car/index.vue 0 → 100644
<template>
<div class="car dialog1027">
<div class="dialog-header" v-interact>
<div class="dialog-header__icon" />
<div class="dialog-header__title">
车辆识别
</div>
<div class="dialog-header_close" style="color:#fff" @click="()=>$emit('close')">关闭</div>
</div>
<div class="dialog-content" v-infinite-scroll="load">
<template v-if="list.length > 0" >
<div v-for="(item, i) in list" :key="i" class="car-item">
<div class="car-img">
<img class="car-img__img" :src="imgUrl + item.imageUrl" />
<div class="car-img__label">{{ item.plateNum || '暂无' }}</div>
</div>
<div class="car-form">
<div>地点：{{ item.addr || item.findAddress || '暂无' }}</div>
<div>时间：{{ item.findTime || '暂无' }}</div>
</div>
</div>
</template>
<template v-else>
<div style="text-align: center; width: 100%;">暂无数据</div>
</template>
</div>
</div>
</template>
<script>
import API from '@/api';
export default {
props: {
uavId: {
type: String,
default: ''
}
},
data(){
return {
imgUrl: process.env.VUE_APP_IMG_URL,
list: [],
pageNo: 1,
pageSize: 3,
}
},
created(){
this.getCarList()
},
methods: {
async load(){
this.pageNo++
let res = await API.HOME.getflightvideoMsg({
uavId: this.uavId,
pageNo: this.pageNo,
pageSize: this.pageSize
})
for(let i = 0; i < res.length; i++){
let item = res[i];
if(item.lon){
let address = await API.MAP.AiRegeo({
location: `${item.lon},${item.lat}`
})
item.addr = address.province.value + address.city.value + address.dist.value + address.road.roadname + address.poi;
}
this.list.push(res[i])
}
console.log(this.list,"list");
},
async getCarList(){
if(!this.uavId){
this.$message.error('请选择无人机');
return;
}
let res = await API.HOME.getflightvideoMsg({
uavId: this.uavId,
pageNo: this.pageNo,
pageSize: this.pageSize
})
for(let i = 0; i < res.length; i++){
let item = res[i];
if(item.lon){
let address = await API.MAP.AiRegeo({
location: `${item.lon},${item.lat}`
})
item.addr = address.province.value + address.city.value + address.dist.value + address.road.roadname + address.poi;
}
this.list.push(res[i])
}
// this.list = res || [];
}
}
}
</script>
<style lang="scss" scoped>
.car{
width: 268px;
}
.dialog-content{
padding: 20px 14px 12px;
max-height: 461px;
overflow: auto;
}
.car-img{
position: relative;
width: 100%;
height: 135px;
.car-img__img {
width: 100%;
height: 100%;
}
.car-img__label {
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #aee9ff;
font-family: MicrosoftYaHeiUI;
}
}
.car-form{
padding: 10px 0 0;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #fff;
>div {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
.car-item{
margin-bottom: 24px;
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/face/index.vue 0 → 100644
<template>
<div class="face dialog1027">
<div class="dialog-header" v-interact>
<div class="dialog-header__icon" />
<div class="dialog-header__title">
人脸识别
</div>
<div class="dialog-header_close" style="color:#fff" @click="()=>$emit('close')">关闭</div>
</div>
<div class="dialog-content" v-infinite-scroll="load">
<template v-if="list.length > 0">
<div class="result" v-for="(item, i) in list" :key="i">
<div class="rate-box">
<div class="rate-img">
<img :src="imgUrl + item.recordImageUrl" />
</div>
<div class="rate-round">
<div class="rate-round__value">{{ Number(item.similarity).toFixed(2) }}%</div>
<div class="rate-routd__text" @click="onDetail(item)">详情</div>
</div>
<div class="rate-img rate-img--contrary">
<img :src="imgUrl + item.snapImageUrl" />
</div>
</div>
<div class="rate-form" v-if="item.show">
<div class="rate-form-item">
<div class="rate-form-item__label">
姓名：
</div>
<div class="rate=form-item__value">
{{ item.userName || '暂无' }}
</div>
</div>
<div class="rate-form-item">
<div class="rate-form-item__label">
出生年份：
</div>
<div class="rate=form-item__value">
{{ item.birthday || '暂无' }}
</div>
</div>
<div class="rate-form-item">
<div class="rate-form-item__label">
发现时间：
</div>
<div class="rate=form-item__value">
{{ item.occurTime || '暂无' }}
</div>
</div>
<div class="rate-form-item">
<div class="rate-form-item__label">
发现地点：
</div>
<div class="rate=form-item__value">
{{ item.addr || item.address || '暂无' }}
</div>
</div>
<div class="rate-form-item">
<div class="rate-form-item__label">
身份证号：
</div>
<div class="rate=form-item__value">
{{ item.idCard || '暂无' }}
</div>
</div>
<div class="rate-form-item">
<div class="rate-form-item__label">
AI识别：
</div>
<div class="rate=form-item__value">
<template v-if="item.labels && item.labels.length">
<div class="round-border" v-for="(label, j) in item.labels" :key="j" >
{{label}}
</div>
</template>
<template v-else>
暂无
</template>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div style="text-align: center; width: 100%;">暂无数据</div>
</template>
</div>
</div>
</template>
<script>
import API from '@/api';
export default {
props: {
uavId: {
type: String,
default: ''
}
},
data(){
return {
imgUrl: process.env.VUE_APP_IMG_URL,
list: [
/* {
userName: '人热二',
birthday: '1888-02-11',
occurTime: '2022-02-30 08:22:14',
address: '深圳市南山区',
idCard: '112313123123',
labels: ['省内人员'],
similarity: '63',
img: '',
imgs: '',
show: true
} */
],
pageNo: 1,
pageSize: 4,
}
},
created(){
this.getFaceList();
},
methods: {
async load(){
this.pageNo++
let res = await API.HOME.getFaceuavvideoMsg({
uavId: this.uavId,
pageNo: this.pageNo,
pageSize: this.pageSize
})
for(let i = 0; i < res.length; i++){
let item = res[i];
if(item.longi){
let address = await API.MAP.AiRegeo({
location: `${item.longi},${item.lati}`
})
item.addr = address.province.value + address.city.value + address.dist.value + address.road.roadname + address.poi;
}
this.list.push(res[i])
}
console.log(this.list,"list");
},
async getFaceList(){
if(!this.uavId){
this.$message.error('请选择无人机');
return;
}
let res = await API.HOME.getFaceuavvideoMsg({
uavId: this.uavId,
pageNo: this.pageNo,
pageSize: this.pageSize
}) || [];
for(let i = 0; i < res.length; i++){
let item = res[i];
if(item.longi){
let address = await API.MAP.AiRegeo({
location: `${item.longi},${item.lati}`
})
item.addr = address.province.value + address.city.value + address.dist.value + address.road.roadname + address.poi;
}
this.list.push(res[i])
}
// this.list = res || [];
},
onDetail(item){
this.$set(item, 'show', !item.show);
}
}
}
</script>
<style lang="scss" scoped>
.face{
width: 268px;
}
.dialog-content{
padding: 14px;
cursor: initial;
max-height: 461px;
overflow-y: auto;
}
.result{
width: 100%;
margin-top: 27px;
&:first-child {
margin-top: 0;
}
}
.rate-box{
display: flex;
align-items: center;
position: relative;
width: 100%;
.rate-img{
flex: 1;
height: 75px;
background-image: url('~@/assets/images/observe/faceAI_border1.png');
background-size: 100% 100%;
padding: 7px;
display: flex;
align-items: center;
&.rate-img--contrary {
background-image: url('~@/assets/images/observe/faceAI_border2.png');
justify-content: right;
}
img {
width: 70px;
height: 70px;
border-radius: 7px;
overflow: hidden;
}
}
.rate-round{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.rate-round__value{
color: #fb799d;
font-size: 14px;
font-family: MicrosoftYaHei;
}
.rate-routd__text{
cursor: pointer;
font-size: 12px;
color: #b9d7f0;
font-family: MicrosoftYaHei;
transform: scale(0.9);
margin-top: 3px;
}
}
}
.rate-form{
margin-top: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #fff;
.rate-form-item {
margin-bottom: 12px;
display: flex;
&:last-child {
margin-bottom: 0;
}
.rate-form-item__label {
width: 70px;
text-align: right;
flex-shrink: 0;
}
.rate-form-item__value {
}
}
}
.round-border{
padding: 2px 8px;
border-radius: 11px;
border: 1px solid #ff4a4a;
color: #ff4a4a;
font-size: 14px;
font-family: MicrosoftYaHei;
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/traffic/index.vue 0 → 100644
<template>
<div class="traffic dialog1027">
<div class="dialog-header" v-interact>
<div class="dialog-header__icon" />
<div class="dialog-header__title">交通指引</div>
<div class="dialog-header_close" style="color:#fff" @click="()=>$emit('close')">关闭</div>
</div>
<div class="dialog-content">
<div class="step active">
<div class="step-box">
<div class="step-icon">1</div>
<div class="step-desc">无人机飞往交通事故现场进行拍摄取证</div>
</div>
<div class="btn-box1027">
<div class="btn1027" @click="onTakePhoto">取证</div>
</div>
<div class="imgList mt8" v-if="xcimg">
<el-image
style="width: 110px;height: 88px"
:src="imgApi + xcimg"
fit="cover"
:preview-src-list="[imgApi + xcimg]"
></el-image>
</div>
</div>
<div class="step">
<div class="step-box">
<div class="step-icon">2</div>
<div class="step-desc">激活事故绘制软件并上传事故图</div>
</div>
<div class="btn-box1027">
<div class="btn1027" @click="onActiveApp">激活软件</div>
<el-upload
class="dib"
accept=".png, .jpg, .image, .jpeg"
:action="upLoadApi + '/upload/v2_uploads'"
:on-success="onSuccess"
multiple
name="uploadFiles"
:show-file-list="false"
>
<div class="btn1027" style="margin-right: 0">上传事故图</div>
</el-upload>
</div>
<div class="imgList mt8" v-if="image">
<el-image
style="width: 110px;height: 88px"
:src="imgApi + image"
fit="cover"
:preview-src-list="[imgApi + image]"
></el-image>
</div>
</div>
<div class="step">
<div class="step-box">
<div class="step-icon">3</div>
<div class="step-desc">生成交通事故报告</div>
</div>
<div class="btn-box1027">
<div class="btn1027" @click="onExportReport">导出报告</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Bus from "@/assets/ligature.js";
import { saveAs } from "file-saver";
import Moment from "moment";
import API from "@/api";
export default {
props: {
uavId: {
type: String,
default: ""
}
},
data() {
return {
upLoadApi: process.env.VUE_APP_UPLOADS_URL,
imgApi: process.env.VUE_APP_IMG_URL,
imageUrl: [],
imageName: [],
baseList: [],
image: null,
xcimg: null
};
},
computed: {
taskId() {
return this.$store.state.fckernel.taskId;
},
user_info() {
return this.$store.state.user.user_info;
}
},
methods: {
//拍照
async onTakePhoto() {
console.log("uav_take_photo emit");
Bus.$emit("uav_take_photo", {
callback: async blob => {
console.log("uav_take_photo callback");
const moment = new Moment();
const dateTime = moment.format("yyyyMMddhhmmss");
saveAs(blob, `${dateTime}.jpg`);
let fd2 = new FormData();
fd2.append("uploadFile", blob, `拍照.png`);
fd2.append("taskId", this.taskId);
fd2.append("deviceHardId", this.uavId);
let res2 = await API.FCKERNEL.Upload(fd2);
console.log(res2,"urlrel");
this.xcimg = '/uploads'+ res2.fileKey;
this.$message.success("取证成功！");
this.imageUrl.push(this.xcimg);
this.imageName.push('拍照.png');
let res1 = await API.ACCIDENT.createTaskWord({
imageUrl: this.imageUrl,
imageName: this.imageName,
taskId: this.taskId,
baseList: null
});
this.imageName = [];
this.imageUrl = [];
}
});
},
//激活程序
onActiveApp() {
window.open(`TrafficAccident://`, "_blank");
},
//导出报告
onExportReport() {
let url = `${process.env.VUE_APP_BASE_URL}/hawksystemserver/task/exportTaskWord?id=${this.taskId}&FLYINGSESSIONID=${this.user_info.FLYINGSESSIONID}&mmc-identity=${this.user_info["mmc-identity"]}`;
const fileName = url;
window.open(fileName);
},
//图片上传成功
async onSuccess(res, file, fileList) {
console.log("onSuccess", res);
if (res.status == 1) {
this.imageUrl.push(res.data[0].url);
this.imageName.push(res.data[0].name);
this.baseList.push(res.data[0].encode);
this.image = res.data[0].url;
let res1 = await API.ACCIDENT.createTaskWord({
imageUrl: this.imageUrl,
imageName: this.imageName,
taskId: this.taskId,
baseList: this.baseList
});
this.imageName = [];
this.imageUrl = [];
this.baseList = [];
this.$message.success("上传成功");
} else {
this.$message.error(res.msg || "上传失败");
}
}
}
};
</script>
<style lang="scss" scoped>
.traffic {
width: 268px;
}
.dialog-content {
padding: 16px !important;
height: initial !important;
}
.step {
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #fff;
width: 100%;
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
&.active {
.step-icon {
background: #1439ff;
}
}
.step-box {
display: flex;
// justify-content: space-between;
align-items: baseline;
}
.step-icon {
width: 18px;
height: 18px;
background: #515050;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-right: 8px;
flex-shrink: 0;
}
.step-desc {
height: 40px;
line-height: 20px;
}
}
.btn-box1027 {
padding: 0 !important;
justify-content: right;
}
.btn1027 {
padding: 3px 8px;
min-width: 64px;
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/index.vue 0 → 100644
<template>
<div class="left-bar" :class="{ collapse: listCollapse }">
<div class="left-bar-item item" @click="closeAI()">
<img class="left-bar-item__icon" src="./assets/images/task.svg" />
<div class="left-bar-item__text">任务</div>
</div>
<div
class="left-bar-item item"
@click="
openAIList = !openAIList;
$emit('changeTask', false);
"
>
<img class="left-bar-item__icon" src="./assets/images/ai.png" />
<div class="left-bar-item__text">智能识别</div>
</div>
<div class="ai-list" :class="{ active: openAIList }" @click.stop>
<div class="left-bar-item item" @click="switchAI(0)">
<img class="left-bar-item__icon" src="./assets/images/faceAI2.png" />
<div class="left-bar-item__text">人脸识别</div>
</div>
<Face v-if="openFace" class="ai-dialog" :uavId="uav.hardId" @close="openFace = false" />
<div class="left-bar-item item" @click="switchAI(1)">
<img class="left-bar-item__icon" src="./assets/images/carAI2.png" />
<div class="left-bar-item__text">车辆识别</div>
</div>
<Car v-if="openPlate" class="ai-dialog" :uavId="uav.hardId" @close="openPlate = false" />
<div class="left-bar-item item" @click="switchAI(2)">
<img class="left-bar-item__icon" src="./assets/images/traffic.png" />
<div class="left-bar-item__text">交通指引</div>
</div>
<div class="left-bar-item item" @click="switchAI(3)">
<img class="left-bar-item__icon" src="./assets/images/ksjm.png" />
<div class="left-bar-item__text">快速建模</div>
</div>
<Jm v-if="jmflag" :device="device" class="jm-dialog" @close="jmflag = false"></Jm>
<Traffic v-if="openTraffic" class="ai-dialog" :uavId="uav.hardId" @close="openTraffic = false" />
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "ControlLeft",
data() {
return {
openAIList: false, //打开AI列表
openTraffic: false, //打开交通指引
openFace: false, //打开人脸识别
openPlate: false, //车牌识别
};
},
computed: {
...mapState("MMCFlightControlCenter/uavApplications", [
"uav",
]),
// 收起列表按钮
listCollapse: {
get() {
return this.$store.state.MMCFlightControlCenter.listCollapse;
},
set(val) {
this.$store.commit("MMCFlightControlCenter/setState", {
key: "listCollapse",
value: val,
});
},
},
},
methods: {
/**
* 切换AI功能
*/
switchAI(type) {
this.openFace = false;
this.openPlate = false;
this.openTraffic = false;
switch (type) {
case 0:
this.openFace = !this.openFace;
break;
case 1:
this.openPlate = !this.openPlate;
break;
case 2:
if (this.taskId == null) {
return this.$message.error("暂无绑定任务！");
}
this.openTraffic = !this.openTraffic;
break;
case 3:
this.jmflag = !this.jmflag;
break;
}
},
/**
* 关闭所有ai
*/
closeAI() {
this.openAIList = false;
this.openFace = false;
this.openPlate = false;
this.openTraffic = false;
},
},
};
</script>
<style scoped lang="scss">
.left-bar {
position: absolute;
left: 470px;
top: 13%;
transition: 0.3s;
&.collapse {
left: 10px;
}
.left-bar-item {
cursor: pointer;
position: relative;
width: 48px;
height: 48px;
background: rgba(9, 32, 87, 0.7);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 2px;
.left-bar-item__icon {
width: 20px;
height: 20px;
margin-bottom: 2px;
}
.left-bar-item__text {
font-size: 16px;
transform: scale(0.6);
white-space: nowrap;
color: #fff;
}
}
.ai-list {
width: 0;
position: absolute;
left: 65px;
top: 62px;
display: none;
&.active {
display: flex;
}
.left-bar-item {
margin-right: 4px;
}
}
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/index.vue
......@@ -82,133 +82,7 @@
<img src="../../assets/images/stk.png" alt />
<span class="dib f8">视图库</span>
</div>
<div class="stk" v-if="showViewLib">
<div class="stk_head">
<div :class="isfk == 1 ? 'ac' : ''">视图</div>
<div :class="isfk == 2 ? 'bc' : ''">机载</div>
</div>
<div class="content">
<!-- 先注释，下次更新要用 -->
<div class="head" style="justify-content: flex-end">
<div class="aitype mr60" v-if="isfk == 1 && !moreshow">
<el-select v-model="aiType" placeholder="全部" @change="changeAiType">
<el-option
v-for="item in aitypeList"
:key="item.id"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
</div>
<div class="select" v-if="isfk == 2">
<div class="btns" :class="filetype == 0 ? 'bg' : ''">图片</div>
<div class="btns" :class="filetype == 1 ? 'bg' : ''">视频</div>
<span class="iconfont icon-gengxin"></span>
</div>
<div class="select" v-if="isfk == 1 && !moreshow">
<div class="btns" :class="filetypev2 == 1 ? 'bg' : ''">图片</div>
<div class="btns" :class="filetypev2 == 2 ? 'bg' : ''">视频</div>
<span class="iconfont icon-gengxin"></span>
</div>
<div class="select" v-if="isfk == 1 && moreshow">
<div class="btns bg">返回</div>
</div>
</div>
<p v-if="isfk == 2 && filetype == 1">
如遇视频无法播放，请
<a href="http://32.128.6.52:4500/11.11平台部署/ChromeStandaloneSetup64.exe">下载最新谷歌</a>
</p>
<div class="lists">
<!-- <div style="text-align: left">asfnjkfassfausfasn</div> -->
<div class="boxs" :style="!moreshow ? 'height: 300px;' : ''" v-if="isfk == 1">
<div class="boxst" :style="!moreshow ? 'height: 280px;' : ''" v-if="!moreshow">
<div class="task" v-for="(item, index) in photoList" :key="index">
<div class="name">
{{ item.taskName }}
<div v-if="isfk == 1">更多</div>
</div>
<div class="images">
<div
class="box"
v-for="(item2, index2) in photoList[index].list"
:key="index2"
:class="isfk == 1 && filetypev2 == 2 ? 'boxv2' : ''"
>
<!-- <el-image v-if="isfk == 1 && filetypev2 == 1" :src="imgApi + '/uploads' + item2.fileKey"
fit="cover" :preview-src-list="[imgApi + '/uploads' + item2.fileKey]"></el-image>-->
<img
v-if="isfk == 1 && filetypev2 == 1"
:src="imgApi + '/uploads' + item2.fileKey"
/>
<video
controls
v-if="isfk == 1 && filetypev2 == 2"
:src="imgApi + '/uploads' + item2.fileKey"
></video>
<div class="down" v-if="isfk == 1 && filetypev2 == 1">下载</div>
</div>
</div>
</div>
</div>
<div v-else>
<el-checkbox-group v-model="checkList">
<div
class="box"
:class="isfk == 1 && filetypev2 == 2 ? 'boxv2' : ''"
v-for="(item, index) in morelist"
:key="index"
>
<el-checkbox :label="item">
<video
controls
v-if="isfk == 1 && filetypev2 == 2"
:src="imgApi + '/uploads' + item.fileKey"
></video>
<img v-else :src="imgApi + '/uploads' + item.fileKey" />
<div class="down" v-if="isfk == 1 && filetypev2 == 1">下载</div>
<!-- <el-image
v-else
:src="imgApi + '/uploads' + item.fileKey"
fit="cover"
:preview-src-list="[imgApi + '/uploads' + item.fileKey]"
></el-image>-->
</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
<div class="boxs jz" v-else>
<el-checkbox-group v-model="checkList">
<div
class="box"
v-for="(item, index) in photoList"
:key="index"
:class="isfk == 2 && filetype == 1 ? 'boxv2' : ''"
>
<el-checkbox :label="item">
<el-image
v-if="isfk == 2 && filetype == 0"
:src="item.jsonFilePath"
fit="cover"
:preview-src-list="[item.jsonFilePath]"
></el-image>
<video controls v-if="isfk == 2 && filetype == 1" :src="item.jsonFilePath"></video>
<div class="down" v-if="isfk == 2 && filetype == 0">下载</div>
</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
<div class="foot" v-if="moreshow || isfk == 2 || filetypev2 == 2">
<div class="btns blue" v-if="allshow">全选</div>
<div class="btns blue" v-else>取消全选</div>
<div class="btns ml12" v-if="isfk == 2">转存</div>
<div class="btns red ml12">删除</div>
</div>
</div>
</div>
<ViewLib v-if="showViewLib"></ViewLib>
</div>
<!-- 警灯控制 -->
<div v-if="showAlarmLamp == true">
......@@ -265,9 +139,7 @@
v-if="showControlList"
></ControlList>
<Health v-if="showHealth" @exit="showHealth = false"></Health>
<Mount
v-if="showMount"
></Mount>
<Mount v-if="showMount"></Mount>
<!-- 喊话器 -->
<MMCGimbalP1
class="PagerP1"
......@@ -291,6 +163,7 @@ import ControlList from "./components/controlList";
import MountController from "./components/mountController";
import Mount from "./components/mount";
import MMCGimbalP1 from "./components/PagerP1";
import ViewLib from './components/viewLib';
export default {
name: "ControlRight",
......@@ -300,6 +173,7 @@ export default {
MountController,
Mount,
MMCGimbalP1,
ViewLib
},
data() {
return {
......@@ -333,6 +207,7 @@ export default {
this.hideAll();
this[key] = !this[key];
},
},
};
</script>
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/index.vue
......@@ -3,7 +3,6 @@
<MMCDataTransferPanel
class="data-panel"
:device="device"
:wsShow="wsShow"
:throttleValue="throttleValue"
:uav-battery="battery"
:uav-data="uavData"
......@@ -12,6 +11,8 @@
<ControlBottom></ControlBottom>
<!-- 健康管理-挂载-警灯-无人机 -->
<ControlRight></ControlRight>
<!-- 任务 智能识别 -->
<ControlLeft></ControlLeft>
</div>
</template>
......@@ -20,19 +21,20 @@ import { mapState } from "vuex";
import Moment from "moment";
import ControlBottom from './components/controlBottom';
import ControlRight from './components/controlRight';
import ControlLeft from './components/controlLeft';
export default {
name: 'ControlPanel',
components: {
ControlBottom,
ControlRight
ControlRight,
ControlLeft
},
data() {
return {
device: {
cateName: "px4",
},
wsShow: false,
throttleValue: 500,
battery: {
voltage: 0,
......
src/components/MMCFlightControlCenter/components/uavApplications/components/uavList/index.vue
<template>
<div class="uav-list" :class="{ collapse: collapseFlag }">
<div class="uav-list" :class="{ collapse: listCollapse }">
<img
@click="collapseFlagfn"
v-if="collapseFlag"
v-if="listCollapse"
style="transform: rotate(180deg)"
src="./assets/images/hs.png"
class="icon-collapse uav-list_btn"
......@@ -59,10 +59,23 @@ export default {
data() {
return {
uavList: [], // 无人机列表
collapseFlag: false, // 收起列表按钮
uavSearchContent: "", // 无人机搜索内容
};
},
computed: {
// 收起列表按钮
listCollapse: {
get(){
return this.$store.state.MMCFlightControlCenter.listCollapse;
},
set(val){
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'listCollapse',
value: val
})
}
}
},
mounted() {
// this.uavList = data.data;
this.initList();
......@@ -73,7 +86,7 @@ export default {
this.uavList = res.data;
},
collapseFlagfn() {
this.collapseFlag = !this.collapseFlag;
this.listCollapse = !this.listCollapse;
},
/**
* 无人机搜索
......
src/components/MMCFlightControlCenter/index.vue
......@@ -32,11 +32,11 @@ export default {
default: null,
},
},
beforeCreate(){
if(!window.mmc){
window.mmc = {};
beforeCreate() {
if (!window.$mmc) {
window.$mmc = {};
}
window.mmc.store = this.$store;
window.$mmc.store = this.$store;
},
created() {
if (!window.$mmc) {
......@@ -71,7 +71,13 @@ export default {
</style>
<style lang="scss">
.mmc-dialog {
.mmc-filght-control-center {
.el-input__inner {
background-color: #02173d;
color: #00aacb;
border: 1px solid #2b56b7;
}
.el-dialog__body {
button:nth-child(2) {
box-shadow: inset 0 0 5px #00ffff;
......@@ -79,5 +85,91 @@ export default {
opacity: 0.8;
}
}
* {
/* 滚动条整体样式 */
&::-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;
}
}
}
.mmc {
// 所有下拉选择框样式
&.el-select-dropdown {
border: none !important;
//item选项的hover样式
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #34466e !important;
}
.option.hover,
.option:hover {
background-image: linear-gradient(
90deg,
rgba(44, 135, 176, 0.7) 0%,
rgba(26, 100, 139, 0.37) 51%,
rgba(7, 61, 98, 0.7) 100%
);
font-family: MicrosoftYaHei;
font-size: 12px;
color: #00f5ff;
letter-spacing: 0 !important;
font-weight: 400 !important;
}
.el-select-dropdown__item {
color: #00aeff !important;
.selected {
background-color: #606266 !important;
}
}
.option {
font-family: MicrosoftYaHei;
font-size: 12px !important;
color: rgba(146, 217, 255, 0.7) !important;
letter-spacing: 0;
font-weight: 400 !important;
}
.popper__arrow::after {
border-bottom-color: #161d2d !important;
}
.el-scrollbar {
overflow: hidden;
position: relative;
background: #0d224f !important;
border: 1px solid #178890;
}
&.is-multiple {
.el-select-dropdown__item.selected {
background-color: #34466e !important;
}
}
}
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/main.js
......@@ -31,14 +31,14 @@ export default function main(elementOrSelector, options = {}){
if(!options.hasMMCSTLVue2){
Vue.use(MMCSTL);
}
if(!window.mmc){
window.mmc = {};
if(!window.$mmc){
window.$mmc = {};
}
window.mmc.store = new Vuex.Store(store);
window.$mmc.store = new Vuex.Store(store);
return new Vue({
render: (h) => h(App),
router,
store: window.mmc.store,
store: window.$mmc.store,
}).$mount(elementOrSelector);
}
......
src/components/MMCFlightControlCenter/store/index.js
......@@ -26,6 +26,7 @@ export default {
},
},
cesium3DModels: [], //cesium的3D模型
listCollapse: false, //无人机或盈巢列表是否折叠
},
mutations: {
/**
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论