From 0082fa417fb2af9add3406bf05ab3e3e45890c34 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Thu, 12 Jun 2025 14:30:02 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/drone-web-manage
---
src/views/device/fly.vue | 224 +++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 198 insertions(+), 26 deletions(-)
diff --git a/src/views/device/fly.vue b/src/views/device/fly.vue
index c6e4e63..2fd28b2 100644
--- a/src/views/device/fly.vue
+++ b/src/views/device/fly.vue
@@ -1,10 +1,12 @@
<template>
<basic-container>
<avue-crud
+ id="device"
:option="option"
:table-loading="loading"
:data="data"
- v-model:page="page"
+ :page="page"
+ @update:page="handlePageChange"
ref="crud"
@row-del="rowDel"
v-model="form"
@@ -18,7 +20,6 @@
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
- @on-load="onLoad"
>
<template #menu-left>
<el-button
@@ -34,26 +35,116 @@
<el-tag>{{ row.dept_name }}</el-tag>
</template>
<template #status="{ row }">
- <div v-if="row.status==true" style="display: flex;flex-direction: row;align-items: center;">
- <div style="width: 15px;height: 15px;background-color: #40CB8B;border-radius: 50%;"></div>
- <span style="margin-left: 5px;">在线</span>
+ <div v-if="row.status == true" class="onlineStatus">
+ <div class="onlineStatus-dot"></div>
+ <span class="online" >在线</span>
</div>
- <div v-if="row.status==false" style="display: flex;flex-direction: row;align-items: center;">
- <div style="width: 15px;height: 15px;background-color: #DE5E5E;border-radius: 50%;"></div>
- <span style="margin-left: 5px;">离线</span>
+ <div v-if="row.status == false" class="onlineStatus">
+ <div class="onlineStatus-dot1"></div>
+ <span class="online">离线</span>
</div>
</template>
+ <template #menu="scope">
+ <el-button
+ type="primary"
+ text
+ icon="el-icon-setting"
+ v-if="permission.operate_password_set"
+ @click.stop="handleOperatePassword(scope.row, scope.index)"
+ >操控密码设置
+ </el-button>
+ <!-- <el-button
+ type="primary"
+ text
+ icon="el-icon-view"
+ v-if="permission.operate_password_view"
+ @click.stop="viewOperatePassword(scope.row, scope.index)"
+ >操控密码查看
+ </el-button> -->
+ </template>
</avue-crud>
+ <el-dialog title="操控密码设置" append-to-body v-model="operatePasswordSetBox" width="455px">
+ <el-form
+ :model="passwordForm"
+ ref="passwordForm"
+ label-width="80px"
+ :rules="rules"
+ v-loading="loadingForm"
+ >
+ <el-form-item label="密码" prop="password">
+ <el-input
+ type="password"
+ v-model="passwordForm.password"
+ placeholder="请输入密码"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="确认密码" prop="password2">
+ <el-input
+ type="password"
+ v-model="passwordForm.password2"
+ placeholder="请输入确认密码"
+ show-password
+ ></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="operatePasswordSetBox = false">取 消</el-button>
+ <el-button type="primary" @click="setOperatePasswordConfirm">确 定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <el-dialog title="操控密码查看" append-to-body v-model="operatePasswordViewBox" width="455px">
+ <el-input v-model="operate_password" disabled></el-input>
+ </el-dialog>
</basic-container>
</template>
<script>
-import { getList, remove, update, add, getDetail } from '@/api/device/device';
+import {
+ getList,
+ remove,
+ update,
+ add,
+ getDetail,
+ getOperatePassword,
+ operatePasswordUpdate,
+} from '@/api/device/device';
import { mapGetters } from 'vuex';
export default {
data() {
+ const validatePass = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('请输入密码'));
+ } else {
+ callback();
+ }
+ };
+ const validatePass2 = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('请再次输入密码'));
+ } else if (value !== this.passwordForm.password) {
+ callback(new Error('两次输入密码不一致!'));
+ } else {
+ callback();
+ }
+ };
return {
+ loadingForm: false,
+ rules: {
+ password: [{ required: true, validator: validatePass, trigger: 'blur' }],
+ password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
+ },
+ passwordForm: {
+ id: '',
+ password: '',
+ password2: '',
+ },
+ operatePasswordSetBox: false,
+ operatePasswordViewBox: false,
+ operate_password: '',
form: {},
query: {},
loading: true,
@@ -64,9 +155,9 @@
},
selectionList: [],
option: {
- height: '460',
- calcHeight: 32,
- dialogWidth: 950,
+ // height: '460',
+ // calcHeight: 32,
+ // dialogWidth: 950,
tip: false,
searchShow: true,
searchMenuSpan: 6,
@@ -74,7 +165,7 @@
index: true,
viewBtn: true,
selection: true,
- addBtn:false,
+ addBtn: false,
excelBtn: false,
dialogClickModal: false,
grid: false,
@@ -83,9 +174,9 @@
label: '设备型号',
prop: 'device_name',
search: true,
- searchSpan:4,
+ searchSpan: 4,
labelWidth: 130,
- editDisabled:true,
+ editDisabled: true,
rules: [
{
required: true,
@@ -98,9 +189,9 @@
label: '设备SN',
prop: 'device_sn',
labelWidth: 130,
- search:true,
- searchSpan:4,
- editDisabled:true,
+ search: true,
+ searchSpan: 4,
+ editDisabled: true,
rules: [
{
required: true,
@@ -138,8 +229,8 @@
label: '固件版本',
prop: 'firmware_version',
labelWidth: 130,
- width:100,
- editDisabled:true,
+ width: 100,
+ editDisabled: true,
rules: [
{
required: true,
@@ -191,7 +282,7 @@
editDisplay: false,
type: 'date',
labelWidth: 130,
- width:160,
+ width: 160,
format: 'YYYY-MM-DD HH:mm:ss',
// valueFormat: 'YYYY-MM-DD HH:mm:ss',
rules: [
@@ -209,7 +300,7 @@
addDisplay: false,
editDisplay: false,
labelWidth: 130,
- width:160,
+ width: 160,
format: 'YYYY-MM-DD HH:mm:ss',
// valueFormat: 'YYYY-MM-DD HH:mm:ss',
startPlaceholder: '任务开始时间',
@@ -261,8 +352,52 @@
},
},
methods: {
- init(){
- this.onLoad(this.page);
+ // 设置无人机操作密码
+ setOperatePasswordConfirm() {
+ var that = this;
+ this.$refs.passwordForm.validate(valid => {
+ if (valid) {
+ this.loadingForm = true;
+ const data = {
+ id: this.passwordForm.id,
+ operate_password: this.passwordForm.password,
+ };
+ // 提交
+ operatePasswordUpdate(data).then(res => {
+ this.loadingForm = false;
+ this.operatePasswordSetBox = false;
+ that.passwordForm = {};
+ this.onLoad(this.page);
+ this.$message({
+ type: 'success',
+ message: '操作成功!',
+ });
+ });
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+ // 操作密码设置
+ handleOperatePassword(row) {
+ this.operatePasswordSetBox = true;
+ this.passwordForm.id = row.id;
+ },
+ viewOperatePassword(row) {
+ this.operatePasswordViewBox = true;
+ // 查询密码
+ getOperatePassword(row.id).then(res => {
+ this.operate_password = res.data.data;
+ });
+ },
+ init() {
+ (this.page = {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ }),
+ this.onLoad(this.page);
},
rowSave(row, done, loading) {
add(row).then(
@@ -360,11 +495,18 @@
}
done();
},
+ handlePageChange(val) {
+ this.page = val;
+ this.onLoad(this.page);
+ },
currentChange(currentPage) {
this.page.currentPage = currentPage;
+ this.onLoad(this.page);
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
+ this.page.currentPage = 1;
+ this.onLoad(this.page);
},
refreshChange() {
this.onLoad(this.page, this.query);
@@ -383,7 +525,7 @@
};
values.releaseTimeRange = null;
}
- values['domain'] = 0
+ values['domain'] = 0;
this.loading = true;
getList(page.currentPage, page.pageSize, values).then(res => {
const data = res.data.data;
@@ -397,4 +539,34 @@
};
</script>
-<style></style>
+<style lang="scss" scoped>
+:deep(#device .el-card__body .avue-crud__body .el-form) {
+ height: 655px !important;
+ overflow: auto;
+}
+.online {
+ margin-left: 5px;
+}
+.onlineStatus1 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.onlineStatus {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+.onlineStatus-dot {
+ width: 15px;
+ height: 15px;
+ background-color: #40cb8b;
+ border-radius: 50%;
+}
+.onlineStatus-dot1 {
+ width: 15px;
+ height: 15px;
+ background-color: #de5e5e;
+ border-radius: 50%;
+}
+</style>
--
Gitblit v1.9.3