Skip to content

M
mmc-stl-vue2
提交 7d9ec497 作者: 温凯
操作

合并master 分支

上级 8937020d
正在显示 包含 430 行增加 和 309 行删除
README.md
...@@ -66,7 +66,12 @@ Vue.use(MMCSTL); ...@@ -66,7 +66,12 @@ Vue.use(MMCSTL);
* 修正机库指令 * 修正机库指令
* 增加是否定支持定时任务的判断 * 增加是否定支持定时任务的判断
* 修正多个缺陷 * 修正多个缺陷
## v1.6.0
* MQTT新增账号密码
## v1.6.1
* fix: 文件名大小写错误
## v2.0.0
* 合并V4分支更新到v2.0.0版本
## 项目结构 ## 项目结构
``` ```
......
package.json
{ {
"name": "mmc-stl-vue2", "name": "mmc-stl-vue2",
"version": "1.5.0", "version": "2.0.0",
"description": "科比特前端标准化组件", "description": "科比特前端标准化组件",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
......
src/components/MMCFlightControlCenter/api/modules/taskInfo.js
...@@ -29,4 +29,17 @@ export default class TaskInfo { ...@@ -29,4 +29,17 @@ export default class TaskInfo {
data data
}); });
} }
}
/**
* 全部单位
* @param {*} params
* @returns
*/
static listAll(params) {
return request({
url: '/admin-api/system/dept/simple-list',
method: 'get',
params,
});
}
}
\ No newline at end of file
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/normalTask/components/airwayEdit/index.vue
...@@ -15,28 +15,30 @@ ...@@ -15,28 +15,30 @@
<el-form-item label="航线名称" required> <el-form-item label="航线名称" required>
<el-input clearable v-model="name"></el-input> <el-input clearable v-model="name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="所属单位：" required>
<el-cascader ref="CascaderRef" v-model="departmentId" :options="orgList" clearable :show-all-levels="false"
placeholder="请选择所属单位" :props="{
children: 'children',
label: 'name',
value: 'id',
checkStrictly: true,
emitPath: false,
}" @change="changeNode"></el-cascader>
</el-form-item>
<el-form-item label="航线速度" prop="speed"> <el-form-item label="航线速度" prop="speed">
<el-input clearable v-model="curForm.speed"></el-input> <el-input clearable v-model="curForm.speed"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="目标位置" prop="address"> <el-form-item label="目标位置" prop="address">
<el-autocomplete <el-autocomplete :popper-append-to-body="false" v-model="curForm.address" :fetch-suggestions="onAddressInput"
:popper-append-to-body="false" placeholder="请输入目标位置" :trigger-on-focus="false" @select="(item) => {
v-model="curForm.address" onAddressChange(item, 'end');
:fetch-suggestions="onAddressInput" }
placeholder="请输入目标位置" " clearable>
:trigger-on-focus="false"
@select="
(item) => {
onAddressChange(item, 'end');
}
"
clearable
>
<template slot-scope="{ item }"> <template slot-scope="{ item }">
<div> <div>
<span style="font-size: 14px; color: #9e9e9e"> <span style="font-size: 14px; color: #9e9e9e">
{{ {{
item.name item.name
}} }}
</span> </span>
<span style="font-size: 12px; color: #999; margin-left: 12px">{{ item.address }}</span> <span style="font-size: 12px; color: #999; margin-left: 12px">{{ item.address }}</span>
...@@ -58,27 +60,23 @@ ...@@ -58,27 +60,23 @@
<el-input clearable v-model="curForm.label"></el-input> <el-input clearable v-model="curForm.label"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="航点动作"> <el-form-item label="航点动作">
<el-button type="text" @click="showActions = true">{{curForm.actions.length}}个动作</el-button> <el-button type="text" @click="showActions = true">{{ curForm.actions.length }}个动作</el-button>
</el-form-item> </el-form-item>
<el-form-item label="航线总里程">{{distance}}m</el-form-item> <el-form-item label="航线总里程">{{ distance }}m</el-form-item>
<el-form-item label="预计飞行时间">{{time}}</el-form-item> <el-form-item label="预计飞行时间">{{ time }}</el-form-item>
</el-form> </el-form>
<div class="ae-btns"> <div class="ae-btns">
<el-button type="primary" @click="onSave" :loading="saveLoading">保存</el-button> <el-button type="primary" @click="onSave" :loading="saveLoading">保存</el-button>
<el-button type="danger" @click="onDel">删除航点</el-button> <el-button type="danger" @click="onDel">删除航点</el-button>
</div> </div>
</div> </div>
<Actions <Actions v-if="showActions" @close="showActions = false" @save="onActionsSave" :selectActions="curForm.actions">
v-if="showActions" </Actions>
@close="showActions = false"
@save="onActionsSave"
:selectActions="curForm.actions"
></Actions>
</div> </div>
</template> </template>
<script> <script>
import { Map, AirLine } from "../../../../../../../../../../../../api"; import { Map, AirLine, TaskInfo } from "../../../../../../../../../../../../api";
import { mapState } from "vuex"; import { mapState } from "vuex";
import Utils from "../../../../../../../../../../../../components/cesiumLayer/lib/cesium/utils"; import Utils from "../../../../../../../../../../../../components/cesiumLayer/lib/cesium/utils";
import { nanoid } from "nanoid"; import { nanoid } from "nanoid";
...@@ -115,7 +113,9 @@ export default { ...@@ -115,7 +113,9 @@ export default {
inject: ["rootNode"], inject: ["rootNode"],
data() { data() {
return { return {
orgList: [],
name: "", //航线名 name: "", //航线名
departmentId: "", //部门id
form: [], //表单集合 form: [], //表单集合
pageIndex: 0, //当前页码 pageIndex: 0, //当前页码
locationIcon: null, //定位图标 locationIcon: null, //定位图标
...@@ -158,6 +158,7 @@ export default { ...@@ -158,6 +158,7 @@ export default {
}, },
mounted() { mounted() {
let viewer = this.cesiumViewer; let viewer = this.cesiumViewer;
this.getOrgList()
this.dataSource = new Cesium.CustomDataSource("airway_edit"); this.dataSource = new Cesium.CustomDataSource("airway_edit");
viewer.dataSources.add(this.dataSource); viewer.dataSources.add(this.dataSource);
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //获取事件对象 this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //获取事件对象
...@@ -184,6 +185,7 @@ export default { ...@@ -184,6 +185,7 @@ export default {
Cesium.ScreenSpaceEventType.LEFT_CLICK Cesium.ScreenSpaceEventType.LEFT_CLICK
); );
this.pickerPointInit(); this.pickerPointInit();
}, },
beforeDestroy() { beforeDestroy() {
this.handler.removeInputAction( this.handler.removeInputAction(
...@@ -201,12 +203,87 @@ export default { ...@@ -201,12 +203,87 @@ export default {
this.dataSource.show = false; this.dataSource.show = false;
}, },
methods: { methods: {
async getOrgList() {
let data = await TaskInfo.listAll();
let res = data.data;
const config = {
id: "id",
parentId: "parentId",
childrenList: "children",
};
const childrenListMap = {};
const nodeIds = {};
const tree = [];
for (const d of res) {
const parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (const d of res) {
const parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (const t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (const c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
this.orgList = tree;
},
convertToSeconds(timeString) {
const regex = /(\d+)\s*(小时|分钟|秒)/g;
let totalSeconds = 0;
let match;
while ((match = regex.exec(timeString)) !== null) {
const value = parseInt(match[1], 10);
const unit = match[2];
switch (unit) {
case '小时':
totalSeconds += value * 3600; // 1小时 = 3600秒
break;
case '分钟':
totalSeconds += value * 60; // 1分钟 = 60秒
break;
case '秒':
totalSeconds += value; // 直接加秒
break;
}
}
return totalSeconds;
},
changeNode() {
this.$refs.CascaderRef.dropDownVisible = false;
},
// 保存航线 // 保存航线
async onSave() { async onSave() {
if (!this.name) { if (!this.name) {
this.$message.warning("请输入航线名称"); this.$message.warning("请输入航线名称");
return; return;
} }
if (!this.departmentId) {
this.$message.warning("请选择所属机构");
return;
}
if (this.form.length === 0) { if (this.form.length === 0) {
this.$message.warning("请点击地图选择航点"); this.$message.warning("请点击地图选择航点");
return; return;
...@@ -248,15 +325,19 @@ export default { ...@@ -248,15 +325,19 @@ export default {
content: waypoints, content: waypoints,
distance: this.distance, distance: this.distance,
dutyOrganizationId: "", dutyOrganizationId: "",
departmentId: this.departmentId,
name: this.name, name: this.name,
speed: this.form[0].speed, speed: this.form[0].speed,
flyTime: this.convertToSeconds(this.time)
}; };
try { try {
let res = await AirLine.add({ let res = await AirLine.add({
flightName: airway.name || `${this.userInfo.username}-巡查}`, flightName: airway.name || `${this.userInfo.username}-巡查}`,
pointCount: airway.content.length, pointCount: airway.content.length,
distance: airway.distance, distance: airway.distance,
departmentId: airway.departmentId,
sourceType: 1, sourceType: 1,
flyTime:airway.flyTime,
linePointSaveReqVOS: airway.content.map((point) => ({ linePointSaveReqVOS: airway.content.map((point) => ({
latitude: point.coordinate.latitude, latitude: point.coordinate.latitude,
longitude: point.coordinate.longitude, longitude: point.coordinate.longitude,
...@@ -279,7 +360,7 @@ export default { ...@@ -279,7 +360,7 @@ export default {
this.$message.success("创建航线成功"); this.$message.success("创建航线成功");
this.$emit("addDone", res.data); this.$emit("addDone", res.data);
this.$emit("close"); this.$emit("close");
} catch (e) {} } catch (e) { }
this.saveLoading = false; this.saveLoading = false;
// 通过事件创建会出现重复创建的情况, 改为标准化里创建 // 通过事件创建会出现重复创建的情况, 改为标准化里创建
...@@ -302,7 +383,6 @@ export default { ...@@ -302,7 +383,6 @@ export default {
* 动作保存 * 动作保存
*/ */
onActionsSave(actions) { onActionsSave(actions) {
console.log("动作", actions);
this.curForm.actions = actions; this.curForm.actions = actions;
this.showActions = false; this.showActions = false;
}, },
...@@ -606,8 +686,8 @@ export default { ...@@ -606,8 +686,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.airway-edit { .airway-edit {
position: absolute; position: absolute;
top: -50px; top: 0px;
width: 450px; width: 351px;
z-index: 2; z-index: 2;
.dialog-content { .dialog-content {
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/normalTask/index.vue
...@@ -143,6 +143,7 @@ export default { ...@@ -143,6 +143,7 @@ export default {
} }
}, },
beforeDestroy() { beforeDestroy() {
this.showAirwayEdit = false;
this.bus.$off("startTask", this.onStartTask); this.bus.$off("startTask", this.onStartTask);
this.clearAirwayEntities(); this.clearAirwayEntities();
}, },
...@@ -223,7 +224,7 @@ export default { ...@@ -223,7 +224,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.taskListBox { .taskListBox {
height: 100%; height: 100%;
width: 416px; width: 100%;
background: #222222; background: #222222;
border-radius: 12px; border-radius: 12px;
transition: 0.3s; transition: 0.3s;
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/periodTask/components/taskAdd/index.vue
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
background: rgba(9, 32, 87, 0.7); background: rgba(9, 32, 87, 0.7);
// border: 1px solid #70daf9; // border: 1px solid #70daf9;
position: absolute; position: absolute;
top: -5px; top: 50px;
left: 550px; left: 550px;
width: 512x; width: 512x;
z-index: 1; z-index: 1;
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/timedTask/components/taskAdd/index.vue
...@@ -176,7 +176,7 @@ export default { ...@@ -176,7 +176,7 @@ export default {
.task-add { .task-add {
height: 250px; height: 250px;
position: absolute; position: absolute;
top: -5px; top: 50px;
left: 550px; left: 550px;
width: 520px; width: 520px;
z-index: 1; z-index: 1;
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/index.vue
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.task-list { .task-list {
width: 416px; width: 350px;
height: 254px; height: 254px;
background: #222222; background: #222222;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/index.vue
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.task-list { .task-list {
width: 416px; width: 350px;
height: 254px; height: 254px;
background: #222222; background: #222222;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
......
src/components/MMCFlightControlCenter/components/mapSearch/index.vue
...@@ -200,6 +200,7 @@ export default { ...@@ -200,6 +200,7 @@ export default {
width: 48px; width: 48px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
z-index: 1;
&::before { &::before {
font-size: 24px; font-size: 24px;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/airwayList/components/airwayEdit/index.vue
...@@ -15,6 +15,16 @@ ...@@ -15,6 +15,16 @@
<el-form-item label="航线名称" required> <el-form-item label="航线名称" required>
<el-input clearable v-model="name"></el-input> <el-input clearable v-model="name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="所属单位：" required>
<el-cascader ref="CascaderRef" v-model="departmentId" :options="orgList" clearable :show-all-levels="false"
placeholder="请选择所属单位" :props="{
children: 'children',
label: 'name',
value: 'id',
checkStrictly: true,
emitPath: false,
}" @change="changeNode"></el-cascader>
</el-form-item>
<el-form-item label="航线速度" prop="speed"> <el-form-item label="航线速度" prop="speed">
<el-input clearable v-model="curForm.speed"></el-input> <el-input clearable v-model="curForm.speed"></el-input>
</el-form-item> </el-form-item>
...@@ -86,7 +96,7 @@ ...@@ -86,7 +96,7 @@
</template> </template>
<script> <script>
import { Map, AirLine } from "../../../../../../../../../../api"; import { Map, AirLine,TaskInfo } from "../../../../../../../../../../api";
import { mapState } from "vuex"; import { mapState } from "vuex";
import Utils from "../../../../../../../../../../components/cesiumLayer/lib/cesium/utils"; import Utils from "../../../../../../../../../../components/cesiumLayer/lib/cesium/utils";
import { nanoid } from "nanoid"; import { nanoid } from "nanoid";
...@@ -123,7 +133,9 @@ export default { ...@@ -123,7 +133,9 @@ export default {
inject: ["rootNode"], inject: ["rootNode"],
data() { data() {
return { return {
orgList: [],
name: "", //航线名 name: "", //航线名
departmentId:'',//部门id
flightLabel:"",//航线标签 flightLabel:"",//航线标签
form: [], //表单集合 form: [], //表单集合
pageIndex: 0, //当前页码 pageIndex: 0, //当前页码
...@@ -168,6 +180,7 @@ export default { ...@@ -168,6 +180,7 @@ export default {
}, },
mounted() { mounted() {
let viewer = this.cesiumViewer; let viewer = this.cesiumViewer;
this.getOrgList();
this.dataSource = new Cesium.CustomDataSource(this.dataSourceName); this.dataSource = new Cesium.CustomDataSource(this.dataSourceName);
viewer.dataSources.add(this.dataSource); viewer.dataSources.add(this.dataSource);
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //获取事件对象 this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //获取事件对象
...@@ -212,6 +225,77 @@ export default { ...@@ -212,6 +225,77 @@ export default {
this.dataSource.show = false; this.dataSource.show = false;
}, },
methods: { methods: {
changeNode() {
this.$refs.CascaderRef.dropDownVisible = false;
},
async getOrgList() {
let data = await TaskInfo.listAll();
let res = data.data;
const config = {
id: "id",
parentId: "parentId",
childrenList: "children",
};
const childrenListMap = {};
const nodeIds = {};
const tree = [];
for (const d of res) {
const parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (const d of res) {
const parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (const t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (const c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
this.orgList = tree;
},
convertToSeconds(timeString) {
const regex = /(\d+)\s*(小时|分钟|秒)/g;
let totalSeconds = 0;
let match;
while ((match = regex.exec(timeString)) !== null) {
const value = parseInt(match[1], 10);
const unit = match[2];
switch (unit) {
case '小时':
totalSeconds += value * 3600; // 1小时 = 3600秒
break;
case '分钟':
totalSeconds += value * 60; // 1分钟 = 60秒
break;
case '秒':
totalSeconds += value; // 直接加秒
break;
}
}
return totalSeconds;
},
async getLabel() { async getLabel() {
this.rootNode.$emit("getLabelList", { this.rootNode.$emit("getLabelList", {
callback: (data) => { callback: (data) => {
...@@ -225,6 +309,10 @@ export default { ...@@ -225,6 +309,10 @@ export default {
this.$message.warning("请输入航线名称"); this.$message.warning("请输入航线名称");
return; return;
} }
if (!this.departmentId) {
this.$message.warning("请选择所属机构");
return;
}
if (this.form.length === 0) { if (this.form.length === 0) {
this.$message.warning("请点击地图选择航点"); this.$message.warning("请点击地图选择航点");
return; return;
...@@ -269,15 +357,19 @@ export default { ...@@ -269,15 +357,19 @@ export default {
content: waypoints, content: waypoints,
distance: this.distance, distance: this.distance,
dutyOrganizationId: "", dutyOrganizationId: "",
departmentId: this.departmentId, //部门id
name: this.name, name: this.name,
speed: this.form[0].speed, speed: this.form[0].speed,
flyTime: this.convertToSeconds(this.time)
}; };
try { try {
let res = await AirLine.add({ let res = await AirLine.add({
flightName: airway.name || `${this.userInfo.username}-巡查}`, flightName: airway.name || `${this.userInfo.username}-巡查}`,
pointCount: airway.content.length, pointCount: airway.content.length,
distance: airway.distance, distance: airway.distance,
departmentId: airway.departmentId,
sourceType: 1, sourceType: 1,
flyTime:airway.flyTime,
linePointSaveReqVOS: airway.content.map((point) => ({ linePointSaveReqVOS: airway.content.map((point) => ({
latitude: point.coordinate.latitude, latitude: point.coordinate.latitude,
longitude: point.coordinate.longitude, longitude: point.coordinate.longitude,
...@@ -629,9 +721,8 @@ export default { ...@@ -629,9 +721,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.airway-edit { .airway-edit {
position: absolute; position: absolute;
top: -50px; top: 0px;
width: 450px; width: 352px;
.dialog-content { .dialog-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/airwayList/index.vue
...@@ -210,7 +210,7 @@ export default { ...@@ -210,7 +210,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.taskListBox { .taskListBox {
height: 200px; height: 200px;
width: 416px; width: 350px;
background: #222222; background: #222222;
border-radius: 12px; border-radius: 12px;
transition: 0.3s; transition: 0.3s;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/taskList/components/airwayEdit/index.vue
...@@ -543,9 +543,8 @@ export default { ...@@ -543,9 +543,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.airway-edit { .airway-edit {
position: absolute; position: absolute;
top: -50px; top: 0px;
width: 450px; width: 352px;
.dialog-content { .dialog-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/taskList/index.vue
...@@ -234,7 +234,7 @@ export default { ...@@ -234,7 +234,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.taskListBox { .taskListBox {
min-height: 254px; min-height: 254px;
width: 416px; width:350px;
background: #222222; background: #222222;
border-radius: 12px; border-radius: 12px;
transition: 0.3s; transition: 0.3s;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/index.vue
...@@ -139,6 +139,7 @@ export default { ...@@ -139,6 +139,7 @@ export default {
height: 48px; height: 48px;
background: #ffffff; background: #ffffff;
border-radius: 2px; border-radius: 2px;
top: -29px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/health/index.vue
...@@ -11,17 +11,8 @@ ...@@ -11,17 +11,8 @@
<div class="nset_control_box_area"> <div class="nset_control_box_area">
<div class="wrj"> <div class="wrj">
<div class="w97 h110 item" v-if="healthData.BAT"> <div class="w97 h110 item" v-if="healthData.BAT">
<img <img src="./assets/images/info.png" alt @click="infoDetail('智能电池', 'BAT')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('智能电池', 'BAT', true)" />
alt
@click="infoDetail('智能电池','BAT')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('智能电池','BAT',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/cell.png" /> <img src="./assets/images/cell.png" />
<span class="dib">智能电池</span> <span class="dib">智能电池</span>
...@@ -33,17 +24,8 @@ ...@@ -33,17 +24,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.RTK"> <div class="w97 h110 item cp" v-if="healthData.RTK">
<img <img src="./assets/images/info.png" alt @click="infoDetail('RTK', 'RTK')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('RTK', 'RTK', true)" />
alt
@click="infoDetail('RTK','RTK')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('RTK','RTK',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/rtk.png" /> <img src="./assets/images/rtk.png" />
<span class="dib">RTK</span> <span class="dib">RTK</span>
...@@ -55,17 +37,8 @@ ...@@ -55,17 +37,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.GPS"> <div class="w97 h110 item cp" v-if="healthData.GPS">
<img <img src="./assets/images/info.png" alt @click="infoDetail('GPS', 'GPS')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('GPS', 'GPS', true)" />
alt
@click="infoDetail('GPS','GPS')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('GPS','GPS',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/gps.png" /> <img src="./assets/images/gps.png" />
<span class="dib">GPS</span> <span class="dib">GPS</span>
...@@ -77,17 +50,8 @@ ...@@ -77,17 +50,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.OBS"> <div class="w97 h110 item cp" v-if="healthData.OBS">
<img <img src="./assets/images/info.png" alt @click="infoDetail('避障', 'OBS')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('避障', 'OBS', true)" />
alt
@click="infoDetail('避障','OBS')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('避障','OBS',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/obstacles.png" /> <img src="./assets/images/obstacles.png" />
...@@ -100,17 +64,8 @@ ...@@ -100,17 +64,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.VPN"> <div class="w97 h110 item cp" v-if="healthData.VPN">
<img <img src="./assets/images/info.png" alt @click="infoDetail('公网', 'VPN')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('公网', 'VPN', true)" />
alt
@click="infoDetail('公网','VPN')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('公网','VPN',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/public.png" /> <img src="./assets/images/public.png" />
<span class="dib">公网</span> <span class="dib">公网</span>
...@@ -122,17 +77,8 @@ ...@@ -122,17 +77,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.SPE"> <div class="w97 h110 item cp" v-if="healthData.SPE">
<img <img src="./assets/images/info.png" alt @click="infoDetail('专网', 'SPE')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('专网', 'SPE', true)" />
alt
@click="infoDetail('专网','SPE')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('专网','SPE',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/pr.png" /> <img src="./assets/images/pr.png" />
<span class="dib">专网</span> <span class="dib">专网</span>
...@@ -144,69 +90,36 @@ ...@@ -144,69 +90,36 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.CHUTE"> <div class="w97 h110 item cp" v-if="healthData.CHUTE">
<img <img src="./assets/images/info.png" alt @click="infoDetail('降落伞', 'CHUTE')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('降落伞', 'CHUTE', true)" />
alt
@click="infoDetail('降落伞','CHUTE')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('降落伞','CHUTE',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/san.png" /> <img src="./assets/images/san.png" />
<span class="dib">降落伞</span> <span class="dib">降落伞</span>
</div> </div>
<div <div class="notice" v-if="
class="notice" healthData.CHUTE && healthData.CHUTE.warningLevel != 'NORMAL'
v-if=" ">
healthData.CHUTE && healthData.CHUTE.warningLevel != 'NORMAL'
"
>
<div v-if="healthData.CHUTE.title.length <= 6">{{ healthData.CHUTE.title }}</div> <div v-if="healthData.CHUTE.title.length <= 6">{{ healthData.CHUTE.title }}</div>
<marquee v-else direction="left">{{ healthData.CHUTE.title }}</marquee> <marquee v-else direction="left">{{ healthData.CHUTE.title }}</marquee>
</div> </div>
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.SPEAK"> <div class="w97 h110 item cp" v-if="healthData.SPEAK">
<img <img src="./assets/images/info.png" alt @click="infoDetail('喊话器', 'SPEAK')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('喊话器', 'SPEAK', true)" />
alt
@click="infoDetail('喊话器','SPEAK')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('喊话器','SPEAK',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/speak.png" /> <img src="./assets/images/speak.png" />
<span class="dib">喊话器</span> <span class="dib">喊话器</span>
</div> </div>
<div <div class="notice" v-if="healthData.SPEAK && healthData.SPEAK.warningLevel != 'NORMAL'">
class="notice"
v-if="healthData.SPEAK && healthData.SPEAK.warningLevel != 'NORMAL'"
>
<div v-if="healthData.SPEAK.title.length <= 6">{{ healthData.SPEAK.title }}</div> <div v-if="healthData.SPEAK.title.length <= 6">{{ healthData.SPEAK.title }}</div>
<marquee v-else direction="left">{{ healthData.SPEAK.title }}</marquee> <marquee v-else direction="left">{{ healthData.SPEAK.title }}</marquee>
</div> </div>
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.NX"> <div class="w97 h110 item cp" v-if="healthData.NX">
<img <img src="./assets/images/info.png" alt @click="infoDetail('NX', 'NX')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('NX', 'NX', true)" />
alt
@click="infoDetail('NX','NX')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('NX','NX',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/nx.png" /> <img src="./assets/images/nx.png" />
<span class="dib">NX</span> <span class="dib">NX</span>
...@@ -230,7 +143,7 @@ ...@@ -230,7 +143,7 @@
</div> </div>
<div class="nest_info"> <div class="nest_info">
<!-- <div class="btn" @click="getInfoList">异常记录</div> --> <!-- <div class="btn" @click="getInfoList">异常记录</div> -->
<div class="bat" v-if="infoName == '智能电池' "> <div class="bat" v-if="infoName == '智能电池'">
<div class="batteryList mt16" v-for="item in batteryList" :key="item.id"> <div class="batteryList mt16" v-for="item in batteryList" :key="item.id">
<div class="head"> <div class="head">
<div class="line"></div> <div class="line"></div>
...@@ -243,11 +156,11 @@ ...@@ -243,11 +156,11 @@
<div class="title">电压：</div> <div class="title">电压：</div>
<div class="indo">{{ item.voltage.toFixed(1) }}V</div> <div class="indo">{{ item.voltage.toFixed(1) }}V</div>
</div> </div>
<div class="item ml83"> <div class="item ">
<div class="title">电流：</div> <div class="title">电流：</div>
<div class="indo">{{ item.current }}A</div> <div class="indo">{{ item.current }}A</div>
</div> </div>
<div class="item ml83"> <div class="item mr47 ">
<div class="title">温度：</div> <div class="title">温度：</div>
<div class="indo">{{ item.temperature }}</div> <div class="indo">{{ item.temperature }}</div>
</div> </div>
...@@ -269,47 +182,45 @@ ...@@ -269,47 +182,45 @@
<div class="rtk" v-else-if="infoName == 'RTK'"> <div class="rtk" v-else-if="infoName == 'RTK'">
<div class="item"> <div class="item">
<div class="title">FIX状态：</div> <div class="title">FIX状态：</div>
<div class="ingps">{{healthData.RTK&&healthData.RTK.title||'暂无'}}</div> <div class="ingps">{{ healthData.RTK && healthData.RTK.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">搜星数：</div> <div class="title">搜星数：</div>
<div class="inrtk">{{uavRealTimeData.rtk&&uavRealTimeData.rtk.satelliteCount}}</div> <div class="inrtk">{{ uavRealTimeData.rtk && uavRealTimeData.rtk.satelliteCount }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">定位精度：</div> <div class="title">定位精度：</div>
<div class="inrtk">{{uavRealTimeData.rtk&&uavRealTimeData.rtk.levelDivisor}}</div> <div class="inrtk">{{ uavRealTimeData.rtk && uavRealTimeData.rtk.levelDivisor }}</div>
</div> </div>
</div> </div>
<div class="gps" v-else-if="infoName == 'GPS'"> <div class="gps" v-else-if="infoName == 'GPS'">
<div class="item"> <div class="item">
<div class="title">FIX状态：</div> <div class="title">FIX状态：</div>
<div class="ingps">{{healthData.GPS&&healthData.GPS.title||'暂无'}}</div> <div class="ingps">{{ healthData.GPS && healthData.GPS.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">搜星数：</div> <div class="title">搜星数：</div>
<div class="ingps">{{uavRealTimeData.gps&&uavRealTimeData.gps.satelliteCount||'暂无'}}</div> <div class="ingps">{{ uavRealTimeData.gps && uavRealTimeData.gps.satelliteCount || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">定位精度：</div> <div class="title">定位精度：</div>
<div class="ingps">{{uavRealTimeData.gps&&uavRealTimeData.gps.levelDivisor||'暂无'}}</div> <div class="ingps">{{ uavRealTimeData.gps && uavRealTimeData.gps.levelDivisor || '暂无' }}</div>
</div> </div>
</div> </div>
<div class="public" v-else-if="infoName == '专网'"> <div class="public" v-else-if="infoName == '专网'">
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">专网信号质量：</div> <div class="title">专网信号质量：</div>
<div class="inpublic">{{healthData.SPE&&healthData.SPE.title||'暂无'}}</div> <div class="inpublic">{{ healthData.SPE && healthData.SPE.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.SPE && warningLevel[healthData.SPE.warningLevel].color }">
class="inpublic" {{ healthData.SPE && warningLevel[healthData.SPE.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.SPE&&warningLevel[healthData.SPE.warningLevel].color}"
>{{healthData.SPE&&warningLevel[healthData.SPE.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpublic">{{healthData.SPE&&healthData.SPE.description||'暂无'}}</div> <div class="inpublic">{{ healthData.SPE && healthData.SPE.description || '暂无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -318,18 +229,16 @@ ...@@ -318,18 +229,16 @@
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">公网信号质量：</div> <div class="title">公网信号质量：</div>
<div class="inpublic">{{healthData.VPN&&healthData.VPN.title||'暂无'}}</div> <div class="inpublic">{{ healthData.VPN && healthData.VPN.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.VPN && warningLevel[healthData.VPN.warningLevel].color }">
class="inpublic" {{ healthData.VPN && warningLevel[healthData.VPN.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.VPN&&warningLevel[healthData.VPN.warningLevel].color}"
>{{healthData.VPN&&warningLevel[healthData.VPN.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpublic">{{healthData.VPN&&healthData.VPN.description||'暂 无'}}</div> <div class="inpublic">{{ healthData.VPN && healthData.VPN.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -337,26 +246,22 @@ ...@@ -337,26 +246,22 @@
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">避障状态：</div> <div class="title">避障状态：</div>
<div class="inpublic">{{healthData.OBS &&healthData.OBS.title||'暂 无'}}</div> <div class="inpublic">{{ healthData.OBS && healthData.OBS.title || '暂 无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.OBS && warningLevel[healthData.OBS.warningLevel].color }">
class="inpublic" {{ healthData.OBS && warningLevel[healthData.OBS.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.OBS&&warningLevel[healthData.OBS.warningLevel].color}"
>{{healthData.OBS&&warningLevel[healthData.OBS.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">是否触发：</div> <div class="title">是否触发：</div>
<div <div class="inpublic">{{ uavRealTimeData.obstacles && uavRealTimeData.obstacles.enable ? '触发避障' : '未触发' }}</div>
class="inpublic"
>{{uavRealTimeData.obstacles&&uavRealTimeData.obstacles.enable? '触发避障':'未触发'}}</div>
</div> </div>
</div> </div>
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpr">{{healthData.OBS&&healthData.OBS.description||'暂 无'}}</div> <div class="inpr">{{ healthData.OBS && healthData.OBS.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -364,20 +269,19 @@ ...@@ -364,20 +269,19 @@
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">状态：</div> <div class="title">状态：</div>
<div class="inpublic">{{healthData.CHUTE&&healthData.CHUTE.title||'暂 无'}}</div> <div class="inpublic">{{ healthData.CHUTE && healthData.CHUTE.title || '暂 无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic"
class="inpublic" :style="{ 'color': healthData.CHUTE && warningLevel[healthData.CHUTE.warningLevel].color }">
:style="{'color':healthData.CHUTE&&warningLevel[healthData.CHUTE.warningLevel].color}" {{ healthData.CHUTE && warningLevel[healthData.CHUTE.warningLevel].title || '暂无' }}</div>
>{{healthData.CHUTE&&warningLevel[healthData.CHUTE.warningLevel].title||'暂无'}}</div>
</div> </div>
</div> </div>
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpr">{{healthData.CHUTE&&healthData.CHUTE.description||'暂 无'}}</div> <div class="inpr">{{ healthData.CHUTE && healthData.CHUTE.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -385,38 +289,35 @@ ...@@ -385,38 +289,35 @@
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">状态：</div> <div class="title">状态：</div>
<div class="inpublic">{{healthData.SPEAK&&healthData.SPEAK.title||'暂 无'}}</div> <div class="inpublic">{{ healthData.SPEAK && healthData.SPEAK.title || '暂 无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic"
class="inpublic" :style="{ 'color': healthData.SPEAK && warningLevel[healthData.SPEAK.warningLevel].color }">
:style="{'color':healthData.SPEAK&&warningLevel[healthData.SPEAK.warningLevel].color}" {{ healthData.SPEAK && warningLevel[healthData.SPEAK.warningLevel].title || '暂无' }}</div>
>{{healthData.SPEAK&&warningLevel[healthData.SPEAK.warningLevel].title||'暂无'}}</div>
</div> </div>
</div> </div>
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpr">{{healthData.SPEAK&&healthData.SPEAK.description||'暂 无'}}</div> <div class="inpr">{{ healthData.SPEAK && healthData.SPEAK.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="rtk" v-else-if="infoName == 'NX'"> <div class="rtk" v-else-if="infoName == 'NX'">
<div class="item"> <div class="item">
<div class="title">NX状态：</div> <div class="title">NX状态：</div>
<div class="ingps">{{healthData.NX&&healthData.NX.title||'暂无'}}</div> <div class="ingps">{{ healthData.NX && healthData.NX.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.NX && warningLevel[healthData.NX.warningLevel].color }">
class="inpublic" {{ healthData.NX && warningLevel[healthData.NX.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.NX&&warningLevel[healthData.NX.warningLevel].color}"
>{{healthData.NX&&warningLevel[healthData.NX.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inrtk">{{healthData.NX&&healthData.NX.description||'暂无'}}</div> <div class="inrtk">{{ healthData.NX && healthData.NX.description || '暂无' }}</div>
</div> </div>
</div> </div>
<Logs v-else :type="type"></Logs> <Logs v-else :type="type"></Logs>
...@@ -512,7 +413,7 @@ export default { ...@@ -512,7 +413,7 @@ export default {
message: {}, message: {},
}; };
}, },
beforeDestroy() {}, beforeDestroy() { },
methods: { methods: {
// flag 为true 代表展示异常信息 // flag 为true 代表展示异常信息
infoDetail(name, val, flag) { infoDetail(name, val, flag) {
...@@ -524,7 +425,7 @@ export default { ...@@ -524,7 +425,7 @@ export default {
this.infoShow = false; this.infoShow = false;
this.infoName = ""; this.infoName = "";
}, },
async addMessage() {}, async addMessage() { },
}, },
mounted() { mounted() {
console.log(this.healthData, "healthData"); console.log(this.healthData, "healthData");
...@@ -543,7 +444,7 @@ export default { ...@@ -543,7 +444,7 @@ export default {
top: -54px; top: -54px;
/* top: calc(50% - 14px); */ /* top: calc(50% - 14px); */
bottom: auto !important; bottom: auto !important;
width: 470px; width: 390px;
.nset_control_box_header { .nset_control_box_header {
display: flex; display: flex;
...@@ -564,14 +465,12 @@ export default { ...@@ -564,14 +465,12 @@ export default {
color: #14faff; color: #14faff;
line-height: 26px; line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2); text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient( background: linear-gradient(135deg,
135deg, #e3aa77 0%,
#e3aa77 0%, #f5cda9 38%,
#f5cda9 38%, #f9ecd3 58%,
#f9ecd3 58%, #fcdbb1 79%,
#fcdbb1 79%, #edb07a 100%);
#edb07a 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
...@@ -589,13 +488,14 @@ export default { ...@@ -589,13 +488,14 @@ export default {
.nset_control_box_area { .nset_control_box_area {
.wrj { .wrj {
height: 258px; height: 258px;
overflow: auto; padding: 5px;
display: flex; overflow: auto;
// justify-content: space-between; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 16px; justify-content: stretch;
gap: 16px; margin-top: 0;
row-gap: 8px;
column-gap: 8px;
.item { .item {
position: relative; position: relative;
background: #3E3E3E; background: #3E3E3E;
...@@ -605,17 +505,21 @@ export default { ...@@ -605,17 +505,21 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 97px; flex: 0 0 calc(33.33% - 6px);
/* 32px是左右padding的总和 */
height: 110px; height: 110px;
&:hover { &:hover {
background: url("./assets/images/checkbg.png") no-repeat; background: url("./assets/images/checkbg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
> img {
>img {
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 3px; top: 3px;
} }
.content { .content {
width: 100%; width: 100%;
height: 82px; height: 82px;
...@@ -624,8 +528,9 @@ export default { ...@@ -624,8 +528,9 @@ export default {
justify-content: end; justify-content: end;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
img {
} img {}
.dib { .dib {
margin-top: 6px; margin-top: 6px;
font-size: 12px; font-size: 12px;
...@@ -634,6 +539,7 @@ export default { ...@@ -634,6 +539,7 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
.type { .type {
width: calc(100% - 2px); width: calc(100% - 2px);
text-align: center; text-align: center;
...@@ -646,6 +552,7 @@ export default { ...@@ -646,6 +552,7 @@ export default {
color: #36e81a; color: #36e81a;
border-radius: 0 0 4.5px 4.5px; border-radius: 0 0 4.5px 4.5px;
} }
.notice { .notice {
width: calc(100% - 2px); width: calc(100% - 2px);
text-align: center; text-align: center;
...@@ -658,10 +565,12 @@ export default { ...@@ -658,10 +565,12 @@ export default {
color: #fff; color: #fff;
border-radius: 0 0 4.5px 4.5px; border-radius: 0 0 4.5px 4.5px;
} }
.iconfont { .iconfont {
margin-top: 8px; margin-top: 8px;
} }
} }
.item:nth-of-type(4n) { .item:nth-of-type(4n) {
margin-right: 0; margin-right: 0;
} }
...@@ -673,8 +582,10 @@ export default { ...@@ -673,8 +582,10 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.nest_info { .nest_info {
padding: 16px; padding: 16px;
.btn { .btn {
width: 80px; width: 80px;
height: 28px; height: 28px;
...@@ -686,18 +597,22 @@ export default { ...@@ -686,18 +597,22 @@ export default {
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
} }
.bat { .bat {
.batteryList { .batteryList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.head { .head {
display: flex; display: flex;
.line { .line {
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #ffd800; background: #ffd800;
border-radius: 2px; border-radius: 2px;
} }
.name { .name {
margin-left: 4px; margin-left: 4px;
font-size: 16px; font-size: 16px;
...@@ -705,19 +620,23 @@ export default { ...@@ -705,19 +620,23 @@ export default {
color: #fff; color: #fff;
} }
} }
.center { .center {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: start; justify-content: start;
.item { .item {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
flex: 1;
.title { .title {
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.indo { .indo {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
...@@ -727,21 +646,25 @@ export default { ...@@ -727,21 +646,25 @@ export default {
} }
} }
} }
.rtk, .rtk,
.gps { .gps {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item { .item {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
.title { .title {
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.ingps, .ingps,
.inrtk { .inrtk {
font-size: 16px; font-size: 16px;
...@@ -750,24 +673,29 @@ export default { ...@@ -750,24 +673,29 @@ export default {
} }
} }
} }
.public { .public {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.pu, .pu,
.pr { .pr {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item { .item {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
.title { .title {
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.inpublic, .inpublic,
.inpr { .inpr {
font-size: 16px; font-size: 16px;
...@@ -778,6 +706,7 @@ export default { ...@@ -778,6 +706,7 @@ export default {
} }
} }
} }
.list { .list {
position: fixed; position: fixed;
top: calc(50% + 90px); top: calc(50% + 90px);
...@@ -788,16 +717,15 @@ export default { ...@@ -788,16 +717,15 @@ export default {
border-radius: 10px; border-radius: 10px;
border: 1px solid rgba(26, 92, 246, 0.5); border: 1px solid rgba(26, 92, 246, 0.5);
backdrop-filter: blur(1px); backdrop-filter: blur(1px);
.nset_control_box_header { .nset_control_box_header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 32px; height: 32px;
background: linear-gradient( background: linear-gradient(180deg,
180deg, #9198ff 0%,
#9198ff 0%, rgba(45, 81, 153, 0.45) 40%,
rgba(45, 81, 153, 0.45) 40%, #05091a 100%);
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff; box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
border: 1px solid #427dff; border: 1px solid #427dff;
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/mount/index.vue
...@@ -2,15 +2,10 @@ ...@@ -2,15 +2,10 @@
<div class="mountBox"> <div class="mountBox">
<div class="main" v-if="show"> <div class="main" v-if="show">
<div v-if="mountList.length > 0" class="list"> <div v-if="mountList.length > 0" class="list">
<div <div class="mount-item pr mt6" :class="{
class="mount-item pr mt6" active:
:class="{ (selectMount && selectMount.gimbalName) === item.gimbalName,
active: }" v-for="(item, index) in mountList" :key="index">
(selectMount && selectMount.gimbalName) === item.gimbalName,
}"
v-for="(item, index) in mountList"
:key="index"
>
<div class="icon-box" @click="onSelectMount(item)"> <div class="icon-box" @click="onSelectMount(item)">
<img class :src="item.icon" /> <img class :src="item.icon" />
</div> </div>
...@@ -18,17 +13,9 @@ ...@@ -18,17 +13,9 @@
</div> </div>
</div> </div>
<template v-if="selectMount"> <template v-if="selectMount">
<component <component :is="selectMount.gimbalName" v-if="selectMount" class="mount-panel" :keyFlag="nxNormal"
:is="selectMount.gimbalName" :payload_data="selectMountPayload" @directive="mountDirective" @take_photo="mountTakePhoto"
v-if="selectMount" @record="mountRecord" @close="mountClose" />
class="mount-panel"
:keyFlag="nxNormal"
:payload_data="selectMountPayload"
@directive="mountDirective"
@take_photo="mountTakePhoto"
@record="mountRecord"
@close="mountClose"
/>
</template> </template>
</div> </div>
</template> </template>
...@@ -48,6 +35,11 @@ export default { ...@@ -48,6 +35,11 @@ export default {
...mountComponents, ...mountComponents,
}, },
props: { props: {
// 是否机库页面使用
isHangar: {
type: Boolean,
default: false,
},
show: { show: {
type: Boolean, type: Boolean,
default: false, default: false,
...@@ -78,11 +70,30 @@ export default { ...@@ -78,11 +70,30 @@ export default {
return this.uavRealTimeData?.healthData?.NX?.warningLevel === "NORMAL"; return this.uavRealTimeData?.healthData?.NX?.warningLevel === "NORMAL";
}, },
}, },
created() {}, created() { },
mounted() {}, mounted() { },
beforeDestroy() {}, beforeDestroy() { },
methods: { methods: {
onSelectMount(item) { /**
* 接管判断, 机库模块中不需要判断接管
*/
async isTakeOver() {
if (this.isHangar) {
return await this.$store.dispatch(
"MMCFlightControlCenter/hangar/isTakeOver"
);
} else {
return await this.$store.dispatch(
"MMCFlightControlCenter/uav/isTakeOver"
);
}
},
async onSelectMount(item) {
// 判断是否已接管
if (!(await this.isTakeOver())) {
this.$message.warning("请先接管设备");
return;
}
this.$store.commit("MMCFlightControlCenter/uav/setState", { this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "selectMount", key: "selectMount",
value: item, value: item,
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/index.vue
...@@ -2,72 +2,38 @@ ...@@ -2,72 +2,38 @@
<div class="control-right"> <div class="control-right">
<!-- 挂载-警灯-无人机 --> <!-- 挂载-警灯-无人机 -->
<div class="control-list" style="top: 13%"> <div class="control-list" style="top: 13%">
<div <div class="control-item" :class="showHealth ? 'active' : ''" @click="onSwitchShow('showHealth')">
class="control-item" <img :class="{ active: showHealth }" src="./assets/images/health.svg" />
:class="showHealth ? 'active' : ''"
@click="onSwitchShow('showHealth')"
>
<img :class="{active:showHealth}" src="./assets/images/health.svg" />
<span class="">健康管理</span> <span class="">健康管理</span>
</div> </div>
<!-- 机库信息 --> <!-- 机库信息 -->
<slot name="hangar"></slot> <slot name="hangar"></slot>
<div <div class="control-item" :class="showMount ? 'active' : ''" @click="onSwitchShow('showMount')">
class="control-item" <img :class="{ active: showMount }" src="./assets/images/mount.svg" />
:class="showMount ? 'active' : ''"
@click="onSwitchShow('showMount')"
>
<img :class="{active:showMount}" src="./assets/images/mount.svg" />
<span class="">挂载</span> <span class="">挂载</span>
</div> </div>
<div <div class="control-item" :class="showControlList ? 'active' : ''" @click="onSwitchShow('showControlList')">
class="control-item" <img :class="{ active: showControlList }" src="./assets/images/uav.svg" />
:class="showControlList ? 'active' : ''"
@click="onSwitchShow('showControlList')"
>
<img :class="{active:showControlList}" src="./assets/images/uav.svg" />
<span class="">无人机</span> <span class="">无人机</span>
</div> </div>
<div <div v-if="!isHangar && uav.network === 2" class="control-item" :class="showAlarmLamp ? 'active' : ''"
v-if="!isHangar && uav.network === 2" @click="onSwitchShow('showAlarmLamp')">
class="control-item" <img :class="{ active: showAlarmLamp }" src="./assets/images/lamp.svg" />
:class="showAlarmLamp ? 'active' : ''"
@click="onSwitchShow('showAlarmLamp')"
>
<img :class="{active:showAlarmLamp}" src="./assets/images/lamp.svg" />
<span class="">警灯</span> <span class="">警灯</span>
</div> </div>
<div <div class="control-item" :class="showViewLib ? 'active' : ''" @click="onSwitchShow('showViewLib')">
class="control-item" <img :class="{ active: showViewLib }" src="./assets/images/files.svg" />
:class="showViewLib ? 'active' : ''"
@click="onSwitchShow('showViewLib')"
>
<img :class="{active:showViewLib}" src="./assets/images/files.svg" />
<span class="">视图库</span> <span class="">视图库</span>
</div> </div>
<ViewLib v-if="showViewLib"></ViewLib> <ViewLib v-if="showViewLib"></ViewLib>
</div> </div>
<ControlList <ControlList @clearId="$emit('clearId')" @closeIconShow="iconShow = false" @exit="showControlList = false"
@clearId="$emit('clearId')" :show="showControlList" :isHangar="isHangar"></ControlList>
@closeIconShow="iconShow = false"
@exit="showControlList = false"
:show="showControlList"
:isHangar="isHangar"
></ControlList>
<Health v-if="showHealth" @exit="showHealth = false"></Health> <Health v-if="showHealth" @exit="showHealth = false"></Health>
<Mount v-if="showMount" :show="showMount"></Mount> <Mount v-if="showMount" :isHangar="isHangar" :show="showMount"></Mount>
<!-- 喊话器 --> <!-- 喊话器 -->
<MMCGimbalP1 <MMCGimbalP1 class="PagerP1" v-show="showMMCGimbalP1" ref="MMCGimbalP1" @close="showMMCGimbalP1 = false" />
class="PagerP1" <MountController @webscoketFn="(data) => fun(data)" v-if="uav && uav.deviceId" ref="MountControllerRef" />
v-show="showMMCGimbalP1"
ref="MMCGimbalP1"
@close="showMMCGimbalP1 = false"
/>
<MountController
@webscoketFn="(data) => fun(data)"
v-if="uav && uav.deviceId"
ref="MountControllerRef"
/>
<AlarmLamp v-if="showAlarmLamp" :uav="uav" @close="showAlarmLamp = false" /> <AlarmLamp v-if="showAlarmLamp" :uav="uav" @close="showAlarmLamp = false" />
<slot name="dialog"></slot> <slot name="dialog"></slot>
</div> </div>
...@@ -118,8 +84,8 @@ export default { ...@@ -118,8 +84,8 @@ export default {
}, },
watch: { watch: {
// 打开航线编辑时关闭所有窗口 // 打开航线编辑时关闭所有窗口
showAirwayEdit(newVal){ showAirwayEdit(newVal) {
if(newVal){ if (newVal) {
this.showAlarmLamp = false; this.showAlarmLamp = false;
this.showHealth = false; this.showHealth = false;
this.showMMCGimbalP1 = false; this.showMMCGimbalP1 = false;
...@@ -130,6 +96,20 @@ export default { ...@@ -130,6 +96,20 @@ export default {
} }
}, },
methods: { methods: {
/**
* 接管判断, 机库模块中不需要判断接管
*/
async isTakeOver() {
if (this.isHangar) {
return await this.$store.dispatch(
"MMCFlightControlCenter/hangar/isTakeOver"
);
} else {
return await this.$store.dispatch(
"MMCFlightControlCenter/uav/isTakeOver"
);
}
},
hideAll(key) { hideAll(key) {
let arr = [ let arr = [
"showAlarmLamp", "showAlarmLamp",
...@@ -148,7 +128,15 @@ export default { ...@@ -148,7 +128,15 @@ export default {
/** /**
* 切换展示 * 切换展示
*/ */
onSwitchShow(key) { async onSwitchShow(key) {
if (key == 'showHealth' && !this?.uav?.isOnline) {
return this.$message.info('无人机不在线!');
}
// 判断是否已接管
if (!(await this.isTakeOver())) {
this.$message.warning("请先接管设备");
return;
}
this.$emit("switchCallback"); this.$emit("switchCallback");
this.hideAll(key); this.hideAll(key);
this[key] = !this[key]; this[key] = !this[key];
...@@ -185,7 +173,7 @@ export default { ...@@ -185,7 +173,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
> img { >img {
width: 24px; width: 24px;
} }
...@@ -197,6 +185,7 @@ export default { ...@@ -197,6 +185,7 @@ export default {
border: 1px solid #3C3C3C; border: 1px solid #3C3C3C;
color: #3388ff; color: #3388ff;
} }
.active { .active {
filter: drop-shadow(#3388ff 100px 0); filter: drop-shadow(#3388ff 100px 0);
transform: translateX(-100px); transform: translateX(-100px);
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlTop/index.vue
...@@ -481,6 +481,7 @@ export default { ...@@ -481,6 +481,7 @@ export default {
align-items: center; align-items: center;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-size: 16px; font-size: 16px;
z-index: 2;
color: #ffffff; color: #ffffff;
line-height: 21px; line-height: 21px;
padding: 0 4px; padding: 0 4px;
......
vue2/README.md
# vue2 # vue2
# node版本 >= 18.12.0
## Project setup ## Project setup
``` ```
yarn install yarn install
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论