Skip to content

S
SatelliteDigital
提交 92be75d4 authored 作者: 刘佳星-公司's avatar 刘佳星-公司
浏览文件
操作

去除警告

上级 1e443c8e
隐藏空白字符变更
内嵌 并排
正在显示 包含 828 行增加 和 846 行删除
package-lock.json
浏览文件 @ 92be75d4
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vuedraggable": "4.1.0", "vuedraggable": "4.1.0",
"vxe-pc-ui": "^4.8.20", "vxe-pc-ui": "~4.8.20",
"vxe-table": "^4.15.9" "vxe-table": "~4.15.9"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.2.1", "@vitejs/plugin-vue": "^5.2.1",
......
src/router/index.js
浏览文件 @ 92be75d4
...@@ -57,7 +57,7 @@ export const constantRoutes = [ ...@@ -57,7 +57,7 @@ export const constantRoutes = [
component: () => import('@/views/error/401.vue'), component: () => import('@/views/error/401.vue'),
hidden: true hidden: true
}, },
{ {
path: '', path: '',
component: Layout, component: Layout,
...@@ -75,7 +75,7 @@ export const constantRoutes = [ ...@@ -75,7 +75,7 @@ export const constantRoutes = [
component: () => import('../views/buildManage/index.vue'), component: () => import('../views/buildManage/index.vue'),
name: 'BuildManage', name: 'BuildManage',
meta: { title: '建筑管理', icon: 'dashboard', affix: true }, meta: { title: '建筑管理', icon: 'dashboard', affix: true },
}, },
{ {
path: '/uavManage', path: '/uavManage',
...@@ -109,75 +109,75 @@ export const constantRoutes = [ ...@@ -109,75 +109,75 @@ export const constantRoutes = [
meta: { title: '分析页面', icon: 'dashboard', affix: true } meta: { title: '分析页面', icon: 'dashboard', affix: true }
}, },
{ {
path: '/workBenchPage', path: '/workBenchPage',
component: () => import('../views/dashboard/workbench/index.vue'), component: () => import('../views/dashboard/workbench/index.vue'),
name: 'WorkbenchPage', name: 'WorkbenchPage',
meta: { title: '工作台', icon: 'dashboard', affix: true } meta: { title: '工作台', icon: 'dashboard', affix: true }
}, },
{ {
path: '/usermanage', path: '/usermanage',
component: () => import('../views/systemmanage/staffManage/index.vue'), component: () => import('../views/systemmanage/staffManage/index.vue'),
name: 'systemManage', name: 'systemManage',
meta: { title: '人员管理', icon: 'dashboard', affix: true } meta: { title: '人员管理', icon: 'dashboard', affix: true }
}, },
{ {
path: '/areabuildmanage', path: '/areabuildmanage',
component: () => import('../views/areabuildmanage/index.vue'), component: () => import('../views/areabuildmanage/index.vue'),
name: 'areaBuildmanage', name: 'areaBuildmanage',
meta: { title: '建筑管理', icon: 'dashboard', affix: true } meta: { title: '建筑管理', icon: 'dashboard', affix: true }
}, },
{ {
path: '/uavdispatch', path: '/uavdispatch',
component: () => import('../views/uavshowdate/index.vue'), component: () => import('../views/uavshowdate/index.vue'),
name: 'uavDispatch', name: 'uavDispatch',
meta: { title: '无人机调度', icon: 'dashboard', affix: true } meta: { title: '无人机调度', icon: 'dashboard', affix: true }
}, },
{ {
path: '/firesurveillance', path: '/firesurveillance',
component: () => import('../views/areafiremanage/firesurveillance/index.vue'), component: () => import('../views/areafiremanage/firesurveillance/index.vue'),
name: 'fireSurveillance', name: 'fireSurveillance',
meta: { title: '历史火情', icon: 'dashboard', affix: true } meta: { title: '历史火情', icon: 'dashboard', affix: true }
}, },
{ {
path: '/historyfire', path: '/historyfire',
component: () => import('../views/areafiremanage/historyfire/index.vue'), component: () => import('../views/areafiremanage/historyfire/index.vue'),
name: 'historyFire', name: 'historyFire',
meta: { title: '当前火情', icon: 'dashboard', affix: true }, meta: { title: '当前火情', icon: 'dashboard', affix: true },
}, },
{ {
path: '/floordetaildate', path: '/floordetaildate',
component: () => import('../views/areafiremanage/historyfire/components/floordetail.vue'), component: () => import('../views/areafiremanage/historyfire/components/floordetail.vue'),
name: 'floorDetailDate', name: 'floorDetailDate',
meta: { title: '详细楼层火情', icon: 'dashboard', affix: true } meta: { title: '详细楼层火情', icon: 'dashboard', affix: true }
}, },
{ {
path: '/buildingdetaildate', path: '/buildingdetaildate',
component: () => import('../views/areabuildmanage/components/showdetaildate.vue'), component: () => import('../views/areabuildmanage/components/showdetaildate.vue'),
name: 'buildingDetailDate', name: 'buildingDetailDate',
meta: { title: '楼详细建筑数据', icon: 'dashboard', affix: true } meta: { title: '楼详细建筑数据', icon: 'dashboard', affix: true }
}, },
{ {
path: '/onefloorbuildingdetaildate', path: '/onefloorbuildingdetaildate',
component: () => import('../views/areabuildmanage/onefloor/index.vue'), component: () => import('../views/areabuildmanage/onefloor/index.vue'),
name: 'oneFloorBuildingDetailDate', name: 'oneFloorBuildingDetailDate',
meta: { title: '层详细建筑数据', icon: 'dashboard', affix: true } meta: { title: '层详细建筑数据', icon: 'dashboard', affix: true }
}, },
{ {
path: '/uavdetaildate', path: '/uavdetaildate',
component: () => import('../views/uavshowdate/uavmanage/index.vue'), component: () => import('../views/uavshowdate/uavmanage/index.vue'),
name: 'uavDetailDate', name: 'uavDetailDate',
meta: { title: '无人机管理', icon: 'dashboard', affix: true } meta: { title: '无人机管理', icon: 'dashboard', affix: true }
}, },
{
path: '/recordfireinfo',
component: () => import('../views/areafiremanage/firerecord/index.vue'),
name: 'recordFireInfo',
meta: { title: '火情记录管理', icon: 'dashboard', affix: true }
},
{
path: '/recordfireinfo',
component: () => import('../views/areafiremanage/firerecord/index.vue'),
name: 'recordFireInfo',
meta: { title: '火情记录管理', icon: 'dashboard', affix: true }
},
] ]
}, },
......
src/views/areabuildmanage/onefloor/index.vue
浏览文件 @ 92be75d4
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<main class="main-content"> <main class="main-content">
<!-- 左侧区域 --> <!-- 左侧区域 -->
<div class="left-section"> <div class="left-section">
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-table"> <div class="card-table">
<onefloorbuildingdetaildate></onefloorbuildingdetaildate> <onefloorbuildingdetaildate></onefloorbuildingdetaildate>
</div> </div>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
</main> </main>
</div> </div>
</template> </template>
...@@ -33,9 +33,9 @@ import { message } from 'ant-design-vue'; ...@@ -33,9 +33,9 @@ import { message } from 'ant-design-vue';
// import Operation from 'ant-design-vue/es/transfer/operation'; // import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性 // 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([ const searchShowData = ref([
{ label: '用户姓名', placeholder: "请输入", type: 'input',content:'' ,isShow: false }, { label: '用户姓名', placeholder: "请输入", type: 'input', content: '', isShow: false },
{ label: '用户状态', placeholder: "请选择", type: 'select',content:'' ,isShow: false, options: [{label:'启用', value:'启用'}, {label:'禁用', value:'禁用'}] }, { label: '用户状态', placeholder: "请选择", type: 'select', content: '', isShow: false, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '用户角色', placeholder: "请选择", type: 'select', content:'' ,isShow: false,options: [{label:'管理员', value:'管理员'}, {label:'巡查员', value:'巡查员'}]}, { label: '用户角色', placeholder: "请选择", type: 'select', content: '', isShow: false, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]) ])
// 响应式布局配置 // 响应式布局配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -76,7 +76,7 @@ const editData = (data) => { ...@@ -76,7 +76,7 @@ const editData = (data) => {
// 设置要编辑的数据 // 设置要编辑的数据
rowData.value = data rowData.value = data
console.log("000000-------1-----0000000000",data) console.log("000000-------1-----0000000000", data)
} }
/** /**
...@@ -85,7 +85,7 @@ const editData = (data) => { ...@@ -85,7 +85,7 @@ const editData = (data) => {
* 显示确认对话框，用户确认后执行删除操作 * 显示确认对话框，用户确认后执行删除操作
*/ */
const deleteData = (data) => { const deleteData = (data) => {
console.log("000000---2---------0000000000",data) console.log("000000---2---------0000000000", data)
ElMessageBox.confirm( ElMessageBox.confirm(
'删除操作不可逆，是否继续?', '删除操作不可逆，是否继续?',
'删除', '删除',
...@@ -97,20 +97,20 @@ const deleteData = (data) => { ...@@ -97,20 +97,20 @@ const deleteData = (data) => {
} }
) )
.then(() => { .then(() => {
console.log("000000---1-456464564------0000000000","我是确认") console.log("000000---1-456464564------0000000000", "我是确认")
try { try {
const res = staffRemoveInfoApi({id:data.id}); const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) { if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' }); ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh(); tableDataRefresh();
} else { } else {
ElMessage({ type: 'error', message: '删除失败：' + res.msg }); ElMessage({ type: 'error', message: '删除失败：' + res.msg });
} }
} catch (err) { } catch (err) {
// API 请求失败时在此捕获，不向上冒泡 // API 请求失败时在此捕获，不向上冒泡
ElMessage({ type: 'error', message: '删除失败（网络错误）' }); ElMessage({ type: 'error', message: '删除失败（网络错误）' });
// console.error('删除接口失败：', err); // console.error('删除接口失败：', err);
} }
}) })
.catch(() => { .catch(() => {
...@@ -143,73 +143,73 @@ const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的 ...@@ -143,73 +143,73 @@ const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的
const resetPasswordData = ref({}); const resetPasswordData = ref({});
const resetData = (data) => { const resetData = (data) => {
console.log("000000-----3-------0000000000",data) console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true; isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data; resetPasswordData.value = data;
} }
const showuserinfodata = ref({}) const showuserinfodata = ref({})
const userData = (data) => { const userData = (data) => {
console.log("000000------4------0000000000",data) console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true isUserInfoDialogVisible.value = true
showuserinfodata.value = data showuserinfodata.value = data
} }
const tableShowData = ref([{ const tableShowData = ref([{
tableHeader:[ tableHeader: [
{label: '姓名', prop: 'name'}, { label: '姓名', prop: 'name' },
{label: '电话', prop: 'phone'}, { label: '电话', prop: 'phone' },
{label: '是否可用', prop: 'status'}, { label: '是否可用', prop: 'status' },
{label: '用户权限', prop: 'role'}, { label: '用户权限', prop: 'role' },
{label: '创建时间', prop: 'createTime'}, { label: '创建时间', prop: 'createTime' },
{label: '更新时间', prop: 'updateTime'}, { label: '更新时间', prop: 'updateTime' },
{label: '操作', prop: 'Operation'} { label: '操作', prop: 'Operation' }
], ],
tableBody:[ tableBody: [
] ]
} }
]) ])
const Operation = ref( [ { label: '编辑', type: 'primary', icon: 'EditPen', click: editData }, const Operation = ref([{ label: '编辑', type: 'primary', icon: 'EditPen', click: editData },
{ label: '删除', type: 'danger', icon: 'Delete', click: deleteData }, { label: '删除', type: 'danger', icon: 'Delete', click: deleteData },
{ label: '用户信息', type: 'primary', icon: 'EditPen', click: userData }, { label: '用户信息', type: 'primary', icon: 'EditPen', click: userData },
{ label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }] { label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }]
) )
const initTableData = () => { const initTableData = () => {
staffGetPageInfoApi({ staffGetPageInfoApi({
"currentPageNum": 1, "currentPageNum": 1,
"currentPageSize": 10, "currentPageSize": 10,
}).then(res => {
if(res.code === 200){
let tempData = res.data.list
tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据
console.log(res.data,"--------999999999----")
tempData = tempData.filter(element => {
return element.isDeleted === 0;
});
tempData.forEach(element => {
element.Operation = [...Operation.value]
});
tableShowData.value[0].tableBody = tempData
tableShowData.value[0].total = res.data.total
tableShowData.value[0].pageSize = res.data.pageSize
console.log(tableShowData.value, '展示数据');
} }).then(res => {
if (res.code === 200) {
}).catch(err => { let tempData = res.data.list
ElMessage.error(err.message) tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据
console.log(res.data, "--------999999999----")
tempData = tempData.filter(element => {
return element.isDeleted === 0;
});
}) tempData.forEach(element => {
element.Operation = [...Operation.value]
});
tableShowData.value[0].tableBody = tempData
tableShowData.value[0].total = res.data.total
tableShowData.value[0].pageSize = res.data.pageSize
console.log(tableShowData.value, '展示数据');
}
}).catch(err => {
ElMessage.error(err.message)
})
} }
onMounted(() => { onMounted(() => {
// console.log(tableShowData.value, '错误'); // console.log(tableShowData.value, '错误');
initTableData() initTableData()
}) })
...@@ -242,7 +242,7 @@ const containerStyle = computed(() => ({ ...@@ -242,7 +242,7 @@ const containerStyle = computed(() => ({
flex-direction: column; flex-direction: column;
gap: var(--card-spacing); gap: var(--card-spacing);
height: 100%; height: 100%;
} }
.left-top { .left-top {
...@@ -287,24 +287,28 @@ const containerStyle = computed(() => ({ ...@@ -287,24 +287,28 @@ const containerStyle = computed(() => ({
padding: 10px; padding: 10px;
} }
.title{
.title {
width: 70%; width: 70%;
} }
.card-actions { .card-actions {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* margin-bottom: 1rem; */ /* margin-bottom: 1rem; */
height: 8%; height: 8%;
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -320,30 +324,36 @@ const containerStyle = computed(() => ({ ...@@ -320,30 +324,36 @@ const containerStyle = computed(() => ({
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
/* 文本样式 */ /* 文本样式 */
.page-text { .page-text {
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
white-space: nowrap; /* 防止文本换行 */ white-space: nowrap;
/* 防止文本换行 */
} }
/* 修复 Element Plus 分页组件默认的块级布局问题 */ /* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; /* 清除默认外边距 */ margin: 0;
/* 清除默认外边距 */
} }
.pagination-block{
.pagination-block {
height: 8%; height: 8%;
} }
.card-table{
.card-table {
width: 100%; width: 100%;
/* display: flex; */ /* display: flex; */
/* background-color: #000000; */ /* background-color: #000000; */
flex:1; flex: 1;
overflow: hidden; overflow: hidden;
border-radius: 8PX; border-radius: 8PX;
} }
...@@ -353,7 +363,7 @@ const containerStyle = computed(() => ({ ...@@ -353,7 +363,7 @@ const containerStyle = computed(() => ({
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
src/views/areafiremanage/historyfire/components/floordetail.vue
浏览文件 @ 92be75d4
...@@ -7,39 +7,37 @@ ...@@ -7,39 +7,37 @@
<div class="left-top"> <div class="left-top">
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<div class="card-tabs"> <div class="card-tabs">
<span class="title" >历史火情详情</span> <span class="title">历史火情详情</span>
</div> </div>
<div class="first-card-content"> <div class="first-card-content">
<img src="https://picsum.photos/300/200" alt=""> <img src="https://picsum.photos/300/200" alt="">
</div> </div>
</div> </div>
</div> </div>
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tabs"> <div class="card-tabs">
<span class="title" >火情汇报列表</span> <span class="title">火情汇报列表</span>
<div class="card-actions"> <div class="card-actions">
<!-- <el-button type="danger" plain>Danger</el-button> --> <!-- <el-button type="danger" plain>Danger</el-button> -->
<el-button class="operation-button" type="danger" plain @click="fireInfoDataDeleteFn" >撤销归档</el-button> <el-button class="operation-button" type="danger" plain @click="fireInfoDataDeleteFn">撤销归档</el-button>
<el-button class="operation-button" type="danger" plain @click="fireInfoDataDeleteFn" >删除</el-button> <el-button class="operation-button" type="danger" plain @click="fireInfoDataDeleteFn">删除</el-button>
<el-button class="operation-button" type="primary" @click="addFireInfoDataImportFn" >新增</el-button> <el-button class="operation-button" type="primary" @click="addFireInfoDataImportFn">新增</el-button>
</div> </div>
</div> </div>
<div class="card-table"> <div class="card-table">
<!-- 表格 --> <!-- 表格 -->
<Tableshowdetail :tableShowData="tableShowData" @fireInfoDataImportBackcallFn="fireInfoDataImportBackcallFn"></Tableshowdetail> <Tableshowdetail :tableShowData="tableShowData"
@fireInfoDataImportBackcallFn="fireInfoDataImportBackcallFn"></Tableshowdetail>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<!-- 新增添加框 --> <!-- 新增添加框 -->
<el-drawer <el-drawer v-model="addFireInfoDataImportFndrawer" :with-header="false">
v-model="addFireInfoDataImportFndrawer"
:with-header="false"
>
<addFireInfo></addFireInfo> <addFireInfo></addFireInfo>
</el-drawer> </el-drawer>
</div> </div>
...@@ -56,39 +54,39 @@ import addFireInfo from './addFireInfo.vue'; ...@@ -56,39 +54,39 @@ import addFireInfo from './addFireInfo.vue';
import Tableshowdetail from './tableshowdetail.vue'; import Tableshowdetail from './tableshowdetail.vue';
const addFireInfoDataImportFndrawer = ref(false); const addFireInfoDataImportFndrawer = ref(false);
const addFireInfoDataImportFn = () => { const addFireInfoDataImportFn = () => {
addFireInfoDataImportFndrawer.value = true addFireInfoDataImportFndrawer.value = true
} }
const fireInfoDataImport = ref(null); const fireInfoDataImport = ref(null);
const fireInfoDataImportBackcallFn = (info) => { const fireInfoDataImportBackcallFn = (info) => {
fireInfoDataImport.value = info fireInfoDataImport.value = info
} }
const fireInfoDataDeleteFn = () => { const fireInfoDataDeleteFn = () => {
if ( fireInfoDataImport ===undefined ||fireInfoDataImport.value===null || fireInfoDataImport.value.length<=0 ) { if (fireInfoDataImport === undefined || fireInfoDataImport.value === null || fireInfoDataImport.value.length <= 0) {
ElMessage.warning("没有勾选数据") ElMessage.warning("没有勾选数据")
}else { } else {
console.log("删除数据",fireInfoDataImport.value) console.log("删除数据", fireInfoDataImport.value)
fireInfoDataImport.value = null fireInfoDataImport.value = null
} }
} }
const fireInfoDataImportFn = () => { const fireInfoDataImportFn = () => {
if ( fireInfoDataImport ===undefined ||fireInfoDataImport.value===null || fireInfoDataImport.value.length<=0 ) { if (fireInfoDataImport === undefined || fireInfoDataImport.value === null || fireInfoDataImport.value.length <= 0) {
ElMessage.warning("没有勾选数据") ElMessage.warning("没有勾选数据")
}else { } else {
console.log("导入数据",fireInfoDataImport.value) console.log("导入数据", fireInfoDataImport.value)
fireInfoDataImport.value = null fireInfoDataImport.value = null
} }
} }
// import Operation from 'ant-design-vue/es/transfer/operation'; // import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性 // 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([ const searchShowData = ref([
{ label: '用户姓名', placeholder: "请输入", type: 'input',content:'' ,isShow: true}, { label: '用户姓名', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '用户状态', placeholder: "请选择", type: 'select',content:'' ,isShow: true, options: [{label:'启用', value:'启用'}, {label:'禁用', value:'禁用'}] }, { label: '用户状态', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '用户角色', placeholder: "请选择", type: 'select', content:'' ,isShow: true,options: [{label:'管理员', value:'管理员'}, {label:'巡查员', value:'巡查员'}]}, { label: '用户角色', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]) ])
// 响应式布局配置 // 响应式布局配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -132,7 +130,7 @@ const editData = (data) => { ...@@ -132,7 +130,7 @@ const editData = (data) => {
// 设置要编辑的数据 // 设置要编辑的数据
rowData.value = data rowData.value = data
console.log("000000-------1-----0000000000",data) console.log("000000-------1-----0000000000", data)
} }
/** /**
...@@ -141,7 +139,7 @@ const editData = (data) => { ...@@ -141,7 +139,7 @@ const editData = (data) => {
* 显示确认对话框，用户确认后执行删除操作 * 显示确认对话框，用户确认后执行删除操作
*/ */
const deleteData = (data) => { const deleteData = (data) => {
console.log("000000---2---------0000000000",data) console.log("000000---2---------0000000000", data)
ElMessageBox.confirm( ElMessageBox.confirm(
'删除操作不可逆，是否继续?', '删除操作不可逆，是否继续?',
'删除', '删除',
...@@ -153,20 +151,20 @@ const deleteData = (data) => { ...@@ -153,20 +151,20 @@ const deleteData = (data) => {
} }
) )
.then(() => { .then(() => {
console.log("000000---1-456464564------0000000000","我是确认") console.log("000000---1-456464564------0000000000", "我是确认")
try { try {
const res = staffRemoveInfoApi({id:data.id}); const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) { if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' }); ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh(); tableDataRefresh();
} else { } else {
ElMessage({ type: 'error', message: '删除失败：' + res.msg }); ElMessage({ type: 'error', message: '删除失败：' + res.msg });
} }
} catch (err) { } catch (err) {
// API 请求失败时在此捕获，不向上冒泡 // API 请求失败时在此捕获，不向上冒泡
ElMessage({ type: 'error', message: '删除失败（网络错误）' }); ElMessage({ type: 'error', message: '删除失败（网络错误）' });
// console.error('删除接口失败：', err); // console.error('删除接口失败：', err);
} }
}) })
.catch(() => { .catch(() => {
...@@ -201,53 +199,53 @@ const closeResetPasswordDialogFn = () => { ...@@ -201,53 +199,53 @@ const closeResetPasswordDialogFn = () => {
} }
const resetPasswordData = ref({}); const resetPasswordData = ref({});
const resetData = (data) => { const resetData = (data) => {
console.log("000000-----3-------0000000000",data) console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true; isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data; resetPasswordData.value = data;
} }
const showuserinfodata = ref({}) const showuserinfodata = ref({})
const userData = (data) => { const userData = (data) => {
console.log("000000------4------0000000000",data) console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true isUserInfoDialogVisible.value = true
showuserinfodata.value = data showuserinfodata.value = data
} }
const tableShowData =[ { const tableShowData = [{
id: 1, id: 1,
fireNo:12, fireNo: 12,
updataTime:'2016-05-04', updataTime: '2016-05-04',
name: 'Aleyna Kutzner', name: 'Aleyna Kutzner',
floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland', floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
reporter:"张三", reporter: "张三",
discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis', discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis',
fireLevel: '1级', fireLevel: '1级',
firePoint: '厨房', firePoint: '厨房',
}, },
{ {
id: 1, id: 1,
fireNo:12, fireNo: 12,
updataTime:'2016-05-04', updataTime: '2016-05-04',
name: 'Aleyna Kutzner', name: 'Aleyna Kutzner',
floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland', floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
reporter:"张三", reporter: "张三",
discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis', discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis',
fireLevel: '1级', fireLevel: '1级',
firePoint: '厨房', firePoint: '厨房',
}] }]
const Operation = ref( [ { label: '编辑', type: 'primary', icon: 'EditPen', click: editData }, const Operation = ref([{ label: '编辑', type: 'primary', icon: 'EditPen', click: editData },
{ label: '删除', type: 'danger', icon: 'Delete', click: deleteData }, { label: '删除', type: 'danger', icon: 'Delete', click: deleteData },
{ label: '用户信息', type: 'primary', icon: 'EditPen', click: userData }, { label: '用户信息', type: 'primary', icon: 'EditPen', click: userData },
{ label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }] { label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }]
) )
const initTableData = () => { const initTableData = () => {
// staffGetPageInfoApi({ // staffGetPageInfoApi({
// "currentPageNum": 1, // "currentPageNum": 1,
// "currentPageSize": 10, // "currentPageSize": 10,
// }).then(res => { // }).then(res => {
// if(res.code === 200){ // if(res.code === 200){
// let tempData = res.data.list // let tempData = res.data.list
...@@ -257,26 +255,26 @@ const initTableData = () => { ...@@ -257,26 +255,26 @@ const initTableData = () => {
// tempData = tempData.filter(element => { // tempData = tempData.filter(element => {
// return element.isDeleted === 0; // return element.isDeleted === 0;
// }); // });
// tempData.forEach(element => { // tempData.forEach(element => {
// element.Operation = [...Operation.value] // element.Operation = [...Operation.value]
// }); // });
// tableShowData.value[0].tableBody = tempData // tableShowData.value[0].tableBody = tempData
// tableShowData.value[0].total = res.data.total // tableShowData.value[0].total = res.data.total
// tableShowData.value[0].pageSize = res.data.pageSize // tableShowData.value[0].pageSize = res.data.pageSize
// console.log(tableShowData.value, '展示数据'); // console.log(tableShowData.value, '展示数据');
// } // }
// }).catch(err => { // }).catch(err => {
// message.error(err.message) // message.error(err.message)
// }) // })
} }
onMounted(() => { onMounted(() => {
// console.log(tableShowData.value, '错误'); // console.log(tableShowData.value, '错误');
initTableData() initTableData()
}) })
...@@ -354,32 +352,37 @@ const containerStyle = computed(() => ({ ...@@ -354,32 +352,37 @@ const containerStyle = computed(() => ({
padding: 1rem; padding: 1rem;
} }
.first-card-content{
.first-card-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 1rem ; padding-top: 1rem;
} }
.title{
.title {
/* width: 100%; */ /* width: 100%; */
/* background-color: #000000; */ /* background-color: #000000; */
} }
.card-actions { .card-actions {
display: flex; display: flex;
/* flex: 1; */ /* flex: 1; */
justify-content: end; justify-content: end;
align-items: center; align-items: center;
background-color: aqua; background-color: aqua;
height: 8%; height: 8%;
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
/* width: 15%; */ /* width: 15%; */
width: 100%; width: 100%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -395,27 +398,33 @@ const containerStyle = computed(() => ({ ...@@ -395,27 +398,33 @@ const containerStyle = computed(() => ({
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
/* 文本样式 */ /* 文本样式 */
.page-text { .page-text {
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
white-space: nowrap; /* 防止文本换行 */ white-space: nowrap;
/* 防止文本换行 */
} }
/* 修复 Element Plus 分页组件默认的块级布局问题 */ /* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; /* 清除默认外边距 */ margin: 0;
/* 清除默认外边距 */
} }
.pagination-block{
.pagination-block {
height: 8%; height: 8%;
} }
.card-table{
.card-table {
width: 100%; width: 100%;
/* display: flex; */ /* display: flex; */
/* background-color: #000000; */ /* background-color: #000000; */
/* flex:1; */ /* flex:1; */
...@@ -429,7 +438,7 @@ const containerStyle = computed(() => ({ ...@@ -429,7 +438,7 @@ const containerStyle = computed(() => ({
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
src/views/buildManage/index.vue
浏览文件 @ 92be75d4
...@@ -5,20 +5,21 @@ ...@@ -5,20 +5,21 @@
<div class="contenterTitle" style="height: 95%;"> <div class="contenterTitle" style="height: 95%;">
<div class="title"> <div class="title">
<div class="title1">国际花园小区鸟瞰图</div> <div class="title1">国际花园小区鸟瞰图</div>
<el-button type="primary" size="large" style="width: 15px;height: 15px; margin-left: 4%; color: #fff;" color="#06B0E1" @click="buildAerialView">更换</el-button> <el-button type="primary" size="large" style="width: 15px;height: 15px; margin-left: 4%; color: #fff;"
color="#06B0E1" @click="buildAerialView">更换</el-button>
</div> </div>
<div class="container" > <div class="container">
<div class="titleimg" > <div class="titleimg">
<img class="titleimg1" @click="bigImgFn" src="../../static/image/loginback.png" alt=""> <img class="titleimg1" @click="bigImgFn" src="../../static/image/loginback.png" alt="">
</div> </div>
<div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 100%;">
<!-- <div style="background-color: aquamarine; display: flex; flex-direction: column; justify-content: center; align-items: center;width: 100%;height: 100%;overflow: hidden;"> <!-- <div style="background-color: aquamarine; display: flex; flex-direction: column; justify-content: center; align-items: center;width: 100%;height: 100%;overflow: hidden;">
--> -->
<SearchInfo style="width: 95%;height: 100%;" :build="build"></SearchInfo> <SearchInfo style="width: 95%;height: 100%;" :build="build"></SearchInfo>
<!-- <div style="margin-bottom: 10px; display: flex; align-items: center;margin-left: -19.5%;margin-bottom: 5%;"> <!-- <div style="margin-bottom: 10px; display: flex; align-items: center;margin-left: -19.5%;margin-bottom: 5%;">
<span style="margin-right: 10px; min-width: 80px; text-align: right; margin-right: 10px;">建筑名称:</span> <span style="margin-right: 10px; min-width: 80px; text-align: right; margin-right: 10px;">建筑名称:</span>
<el-select <el-select
class="buildf1t2 select__" class="buildf1t2 select__"
...@@ -31,8 +32,8 @@ ...@@ -31,8 +32,8 @@
</el-select> </el-select>
</div> --> </div> -->
<!-- 第二个选择框组 --> <!-- 第二个选择框组 -->
<!-- <div style="display: flex; align-items: center;"> <!-- <div style="display: flex; align-items: center;">
<span style="margin-right: 10px; min-width: 80px; text-align: right;margin-left: -16%;margin-right: 10px;">建筑楼层:</span> <span style="margin-right: 10px; min-width: 80px; text-align: right;margin-left: -16%;margin-right: 10px;">建筑楼层:</span>
<el-select <el-select
class="buildf1t2 select__" class="buildf1t2 select__"
...@@ -45,13 +46,17 @@ ...@@ -45,13 +46,17 @@
</el-select> </el-select>
</div> </div>
</div> --> </div> -->
<!-- </div> --> <!-- </div> -->
</div> </div>
<div style="width: 20%;height: 100%; display: flex; flex-direction: column; justify-content: center;" > <div style="width: 20%;height: 100%; display: flex; flex-direction: column; justify-content: center;">
<el-button type="primary" class="query-btn" size="large" style="width: 100%;height: 15%; color: #fff;margin-top: 65%;" color="#06B0E1" @click="detailBuildListShow" >查询</el-button> <el-button type="primary" class="query-btn" size="large"
<el-button type="primary" class="add-btn" size="large" style="width: 100%;height: 15%; color: #fff;margin-top: 40%;" color="#06B0E1" @click="updateBuildInfoFn()">新增建筑</el-button> style="width: 100%;height: 15%; color: #fff;margin-top: 65%;" color="#06B0E1"
@click="detailBuildListShow">查询</el-button>
<el-button type="primary" class="add-btn" size="large"
style="width: 100%;height: 15%; color: #fff;margin-top: 40%;" color="#06B0E1"
@click="updateBuildInfoFn()">新增建筑</el-button>
</div> </div>
<!-- <div class="buildfilter" > <!-- <div class="buildfilter" >
<div class="buildf1" > <div class="buildf1" >
...@@ -81,20 +86,20 @@ ...@@ -81,20 +86,20 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<div style="margin: 20px 0 10px 0;" >详细建筑列表</div>
<el-table stripe :data="buildData" width="1000" class="table___"
element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="360" :row-style="{ height: '5px' }" style="overflow: auto">
<el-table-column label="建筑名称" align="center"> <div style="margin: 20px 0 10px 0;">详细建筑列表</div>
<el-table stripe :data="buildData" width="1000" class="table___" element-loading-background="rgba(0, 0, 0, 0.3)"
:max-height="360" :row-style="{ height: '5px' }" style="overflow: auto">
<el-table-column label="建筑名称" align="center">
<template #default="scope"> <template #default="scope">
<div style="color: #fff;">{{ scope.row.aaa0 }}</div> <div style="color: #fff;">{{ scope.row.aaa0 }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="建筑层数" align="center"> <el-table-column label="建筑层数" align="center">
<template #default="scope"> <template #default="scope">
{{ scope.row.aaa1 }} {{ scope.row.aaa1 }}
</template> </template>
...@@ -102,9 +107,9 @@ ...@@ -102,9 +107,9 @@
<el-table-column label="内部结构" align="center"> <el-table-column label="内部结构" align="center">
<template #default="scope"> <template #default="scope">
<div @click="showBuildInfoFn(scope)" class="build_view">查看</div> <div @click="showBuildInfoFn(scope)" class="build_view">查看</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="建筑描述" align="center"> <el-table-column label="建筑描述" align="center">
...@@ -112,36 +117,28 @@ ...@@ -112,36 +117,28 @@
{{ scope.row.aaa3 }} {{ scope.row.aaa3 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="btn" label="操作" width="200" align="center"> <el-table-column property="btn" label="操作" width="200" align="center">
<template #default="scope"> <template #default="scope">
<div > <div>
<div style="display: flex; align-items: center; ;"> <div style="display: flex; align-items: center; ;">
<el-button type="primary" size="large" style="width: 40%; color: #fff;" color="#06B0E1">查看详情</el-button> <el-button type="primary" size="large" style="width: 40%; color: #fff;"
<el-button type="primary" size="large" style="width: 10% ;color: #fff;" color="#06B0E1" @click="updateBuildInfoFn(scope)">修改</el-button> color="#06B0E1">查看详情</el-button>
<el-button type="primary" size="large" style="width: 10% ;color: #fff;" color="#06B0E1"
@click="updateBuildInfoFn(scope)">修改</el-button>
<!-- <el-button type="danger" size="large" style="width: 10%;height: 1px; color: #fff;" color="#06B0E1">删除</el-button> --> <!-- <el-button type="danger" size="large" style="width: 10%;height: 1px; color: #fff;" color="#06B0E1">删除</el-button> -->
<el-popconfirm <el-popconfirm :icon="InfoFilled" icon-color="red" title="确定要删除这条记录吗？" @cancel="onCancel">
<template #reference>
:icon="InfoFilled" <el-button style="width: 20%;color: #fff;height: 42px;" color="#06B0E1">删除</el-button>
icon-color="red" </template>
title="确定要删除这条记录吗？" <template #actions="{ confirm, cancel }">
@cancel="onCancel" <el-button size="small" @click="deleteCancel(cancel)">取消</el-button>
> <el-button type="danger" size="small" @click="deleteConfirm(confirm)">
<template #reference> 确认
<el-button style="width: 20%;color: #fff;height: 42px;" color="#06B0E1">删除</el-button> </el-button>
</template> </template>
<template #actions="{ confirm, cancel }"> </el-popconfirm>
<el-button size="small" @click="deleteCancel(cancel)">取消</el-button>
<el-button
type="danger"
size="small"
@click="deleteConfirm(confirm)"
>
确认
</el-button>
</template>
</el-popconfirm>
</div> </div>
</div> </div>
...@@ -155,146 +152,98 @@ ...@@ -155,146 +152,98 @@
</div> </div>
<fireShow v-if="imgShow" @click="imgShow = ! imgShow" :images="images" :videos="videos"/> <fireShow v-if="imgShow" @click="imgShow = !imgShow" :images="images" :videos="videos" />
<!-- 更换鸟瞰图 --> <!-- 更换鸟瞰图 -->
<el-dialog <el-dialog v-model="isChangeBuildAerialView" title="更换鸟瞰图" width="500px" :before-close="handleClose">
v-model="isChangeBuildAerialView" <updataImgInfo :file="aerialViewUrl" @changeAerialView="changeAerialView" :updataImageCount="1"></updataImgInfo>
title="更换鸟瞰图" </el-dialog>
width="500px" <!-- 展示鸟瞰图 -->
:before-close="handleClose" <el-dialog v-model="isShowAerialView" width="900px" custom-class="left-slide-dialog"
style="background-color: rgba(0, 0, 0, 0)">
> <div>
<updataImgInfo :file="aerialViewUrl" @changeAerialView="changeAerialView" :updataImageCount="1" ></updataImgInfo> <img style="width: 100%;height: auto;" :src="aerialViewUrl" alt="加载失败">
</el-dialog> </div>
<!-- 展示鸟瞰图 --> </el-dialog>
<el-dialog
v-model="isShowAerialView"
width="900px"
custom-class="left-slide-dialog"
style="background-color: rgba(0, 0, 0, 0)"
>
<div>
<img style="width: 100%;height: auto;" :src="aerialViewUrl" alt="加载失败">
</div>
</el-dialog>
<!-- 展示修改信息 --> <!-- 展示修改信息 -->
<el-dialog <el-dialog v-model="isShowChangeInfo" width="900px" custom-class="left-slide-dialog" style="background-color: rgba(0, 0, 0, 0);
v-model="isShowChangeInfo" margin-top: 5%;" @close="showChangeInfohandleClose">
width="900px" <el-form :model="updataFormData" :rules="updataFormRules" ref="updataFormRef">
custom-class="left-slide-dialog" <div class="building-form-container">
style="background-color: rgba(0, 0, 0, 0); <el-collapse v-model="activeNames" class="transparent-collapse">
margin-top: 5%;" <!-- 移除 accordion 属性，并设置 activeNames 包含所有项 -->
@close="showChangeInfohandleClose" <!-- 建筑名称 -->
> <el-collapse-item title="建筑名称" name="1">
<el-form <div class="form-item">
:model="updataFormData" <el-form-item prop="name">
:rules="updataFormRules" <el-input v-model="updataFormData.name" placeholder="请输入建筑名称" clearable />
ref="updataFormRef" </el-form-item>
</div>
> </el-collapse-item>
<div class="building-form-container">
<el-collapse v-model="activeNames" class="transparent-collapse"> <!-- 建筑层数 -->
<!-- 移除 accordion 属性，并设置 activeNames 包含所有项 --> <el-collapse-item title="建筑层数" name="2">
<!-- 建筑名称 --> <div class="form-item">
<el-collapse-item title="建筑名称" name="1" > <el-form-item prop="floors">
<div class="form-item"> <el-input-number v-model="updataFormData.floors" :min="1" :max="100" controls-position="right" />
<el-form-item prop="name"> </el-form-item>
<el-input <span class="unit">层</span>
v-model="updataFormData.name" </div>
placeholder="请输入建筑名称" </el-collapse-item>
clearable <!-- 内部结构 -->
/> <el-collapse-item title="内部结构" name="3">
</el-form-item> <div class="image-uploader">
</div> <div class="image-preview-container">
</el-collapse-item> <div v-for="(img, index) in updataFormData.images" :key="index" class="image-preview">
<el-image :src="img.url" fit="cover" class="preview-image" />
<!-- 建筑层数 --> <div class="image-actions">
<el-collapse-item title="建筑层数" name="2"> <el-button type="danger" size="small" circle @click="removeImage(index)">
<div class="form-item"> <el-icon>
<el-form-item prop="floors"> <Delete />
<el-input-number </el-icon>
v-model="updataFormData.floors" </el-button>
:min="1"
:max="100"
controls-position="right"
/>
</el-form-item>
<span class="unit">层</span>
</div>
</el-collapse-item>
<!-- 内部结构 -->
<el-collapse-item title="内部结构" name="3">
<div class="image-uploader">
<div class="image-preview-container">
<div
v-for="(img, index) in updataFormData.images"
:key="index"
class="image-preview"
>
<el-image
:src="img.url"
fit="cover"
class="preview-image"
/>
<div class="image-actions">
<el-button
type="danger"
size="small"
circle
@click="removeImage(index)"
>
<el-icon><Delete /></el-icon>
</el-button>
</div>
</div> </div>
</div> </div>
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:on-change="handleImageChange"
:show-file-list="false"
>
<el-icon><Plus /></el-icon>
</el-upload>
</div>
</el-collapse-item>
<!-- 建筑描述 -->
<el-collapse-item title="建筑描述" name="4">
<div class="form-item">
<el-form-item prop="description" style="background-color: blue;">
<el-input
v-model="updataFormData.description"
type="textarea"
:rows="4"
placeholder="请输入建筑描述(5-500字)"
:minlength="10"
:maxlength="500"
show-word-limit
/>
</el-form-item>
</div> </div>
</el-collapse-item>
</el-collapse> <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleImageChange"
:show-file-list="false">
<div class="form-actions"> <el-icon>
<el-button v-if="!isAddBuild" type="primary" @click="handleSubmit('update')"> <Plus />
<el-icon><Edit /></el-icon>确认修改 </el-icon>
</el-button> </el-upload>
<el-button v-else type="success" @click="handleSubmit('create')"> </div>
<el-icon><Plus /></el-icon>确认新增 </el-collapse-item>
</el-button>
</div> <!-- 建筑描述 -->
<el-collapse-item title="建筑描述" name="4">
<div class="form-item">
<el-form-item prop="description" style="background-color: blue;">
<el-input v-model="updataFormData.description" type="textarea" :rows="4" placeholder="请输入建筑描述(5-500字)"
:minlength="10" :maxlength="500" show-word-limit />
</el-form-item>
</div>
</el-collapse-item>
</el-collapse>
<div class="form-actions">
<el-button v-if="!isAddBuild" type="primary" @click="handleSubmit('update')">
<el-icon>
<Edit />
</el-icon>确认修改
</el-button>
<el-button v-else type="success" @click="handleSubmit('create')">
<el-icon>
<Plus />
</el-icon>确认新增
</el-button>
</div> </div>
</el-form> </div>
</el-dialog> </el-form>
</el-dialog>
</div> </div>
</template> </template>
...@@ -307,7 +256,7 @@ import imgupload from '../../components/ImageUpload/index.vue' ...@@ -307,7 +256,7 @@ import imgupload from '../../components/ImageUpload/index.vue'
import { InfoFilled } from '@element-plus/icons-vue' import { InfoFilled } from '@element-plus/icons-vue'
import updataImgInfo from './updataImgInfo.vue'; import updataImgInfo from './updataImgInfo.vue';
import { Delete, Plus, Edit } from '@element-plus/icons-vue' import { Delete, Plus, Edit } from '@element-plus/icons-vue'
import { staffAerialViewApi } from '../../api/build' // import { staffAerialViewApi } from '../../api/build'
import SearchInfo from './searchInfo.vue'; import SearchInfo from './searchInfo.vue';
onMounted(() => { onMounted(() => {
...@@ -323,15 +272,15 @@ onMounted(() => { ...@@ -323,15 +272,15 @@ onMounted(() => {
}) })
const changeAerialView = (url)=>{ const changeAerialView = (url) => {
//通过子组件调用了父组件的funcToSon()方法，获取服务器的返回地址，更新到aerialViewUrl中 //通过子组件调用了父组件的funcToSon()方法，获取服务器的返回地址，更新到aerialViewUrl中
console.log("子组件调用了父组件的funcToSon()方法",url) console.log("子组件调用了父组件的funcToSon()方法", url)
aerialViewUrl.value = url aerialViewUrl.value = url
isChangeBuildAerialView.value = false isChangeBuildAerialView.value = false
} }
const isAddBuild = ref(false) // 是否是新增建筑按钮 const isAddBuild = ref(false) // 是否是新增建筑按钮
const activeNames = ref(['1','2', '3', '4' ]) // 默认展开第一项 const activeNames = ref(['1', '2', '3', '4']) // 默认展开第一项
const updataFormData = reactive({ const updataFormData = reactive({
name: '', name: '',
...@@ -406,29 +355,29 @@ const showChangeInfohandleClose = (done) => { ...@@ -406,29 +355,29 @@ const showChangeInfohandleClose = (done) => {
// 通过新增或者修改的方式更新建筑列表信息 // 通过新增或者修改的方式更新建筑列表信息
const updateBuildInfoFn = (info) => { const updateBuildInfoFn = (info) => {
isShowChangeInfo.value = true isShowChangeInfo.value = true
console.log("------------可获取到当前的需要修改的建筑信息",info); console.log("------------可获取到当前的需要修改的建筑信息", info);
if (info === '' || info === undefined) { if (info === '' || info === undefined) {
isAddBuild.value = true isAddBuild.value = true
console.log("------------我是新增",); console.log("------------我是新增",);
} else{ } else {
// 修改这里的info和formData的字段不一致的问题 // 修改这里的info和formData的字段不一致的问题
updataFormData.value= info, updataFormData.value = info,
isAddBuild.value = false isAddBuild.value = false
console.log("------------我是修改",); console.log("------------我是修改",);
} }
// 获取到当前建筑信息的数据，需要更新到中fromData中 // 获取到当前建筑信息的数据，需要更新到中fromData中
} }
const buildAerialView = () => { const buildAerialView = () => {
isChangeBuildAerialView.value = true isChangeBuildAerialView.value = true
} }
const imgUrl = ref('')//图片地址 const imgUrl = ref('')//图片地址
const images = ref([]) const images = ref([])
const bigImgFn = () => { const bigImgFn = () => {
isShowAerialView.value = true isShowAerialView.value = true
aerialViewUrl.value ='../../static/image/loginback.png' aerialViewUrl.value = '../../static/image/loginback.png'
console.log(aerialViewUrl.value) console.log(aerialViewUrl.value)
} }
const aerialViewUrl = ref('')//展示的鸟瞰图url const aerialViewUrl = ref('')//展示的鸟瞰图url
...@@ -444,17 +393,17 @@ const showBuildInfoFn = () => { ...@@ -444,17 +393,17 @@ const showBuildInfoFn = () => {
const deleteCancel = (cancel) => { const deleteCancel = (cancel) => {
cancel() cancel()
ElMessage({ ElMessage({
message: '取消删除', message: '取消删除',
type: 'info', type: 'info',
}) })
deleteClicked.value = false deleteClicked.value = false
} }
const deleteConfirm = (confirm) => { const deleteConfirm = (confirm) => {
confirm() confirm()
ElMessage({ ElMessage({
message: '执行删除操作', message: '执行删除操作',
type: 'success', type: 'success',
}) })
deleteClicked.value = false deleteClicked.value = false
} }
...@@ -477,9 +426,9 @@ const detailBuildListShow = () => { ...@@ -477,9 +426,9 @@ const detailBuildListShow = () => {
type: 'warning', type: 'warning',
}) })
} else { } else {
console.log('detailBuildListShow',build) console.log('detailBuildListShow', build)
} }
} }
const build = ref({ const build = ref({
unitName: '', unitName: '',
...@@ -487,7 +436,7 @@ const build = ref({ ...@@ -487,7 +436,7 @@ const build = ref({
}) })
// 用于展示查询建筑列表的条件信息 // 用于展示查询建筑列表的条件信息
const buildList = ref([{ name: '建筑1', value: '1' }, { name: '建筑2', value: '2' }]) const buildList = ref([{ name: '建筑1', value: '1' }, { name: '建筑2', value: '2' }])
const floorList = ref([{ name: '一层', value: '1' },{ name: '二层', value: '2'}]) const floorList = ref([{ name: '一层', value: '1' }, { name: '二层', value: '2' }])
const buildData = ref([ const buildData = ref([
{ {
aaa0: '建筑1', aaa0: '建筑1',
...@@ -572,16 +521,20 @@ const buildchangeFn = () => { ...@@ -572,16 +521,20 @@ const buildchangeFn = () => {
font-family: SourceHanSansCN, SourceHanSansCN; font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: #FFFFFF ; color: #FFFFFF;
} }
.container { .container {
/* background-color: #06a0cf; */ /* background-color: #06a0cf; */
height: 36%; height: 36%;
display: flex; display: flex;
/* 可选的对齐方式 */ /* 可选的对齐方式 */
align-items: center; /* 垂直居中对齐 */ align-items: center;
gap: 10px; /* 两个div之间的间距 */ /* 垂直居中对齐 */
gap: 10px;
/* 两个div之间的间距 */
} }
.titleimg { .titleimg {
width: 30vw; width: 30vw;
height: 30vh; height: 30vh;
...@@ -598,19 +551,24 @@ const buildchangeFn = () => { ...@@ -598,19 +551,24 @@ const buildchangeFn = () => {
display: flex; display: flex;
width: 60%; width: 60%;
/* height: 100%; */ /* height: 100%; */
flex-direction: row; /* 垂直排列 */ flex-direction: row;
/* 垂直排列 */
} }
.buildButton { .buildButton {
display: flex; display: flex;
flex-direction: column; /* 垂直排列 */ flex-direction: column;
gap: 75%; /* 垂直排列 */
width: 200px; /* 给容器一个宽度 */ gap: 75%;
width: 200px;
/* 给容器一个宽度 */
} }
.query-btn { .query-btn {
width: 100%; width: 100%;
margin-top: 30%; margin-top: 30%;
margin-left: -15%; margin-left: -15%;
color: #fff; color: #fff;
} }
...@@ -619,9 +577,10 @@ const buildchangeFn = () => { ...@@ -619,9 +577,10 @@ const buildchangeFn = () => {
margin-left: -16%; margin-left: -16%;
color: #fff; color: #fff;
} }
.button2_container{
.button2_container {
width: 40%; width: 40%;
position: absolute; position: absolute;
/* 如果是相对于整个页面的右下角 */ /* 如果是相对于整个页面的右下角 */
/* bottom: 20px; /* bottom: 20px;
...@@ -634,15 +593,18 @@ const buildchangeFn = () => { ...@@ -634,15 +593,18 @@ const buildchangeFn = () => {
display: flex; display: flex;
margin-left: 10%; margin-left: 10%;
/* align-items: center; */ /* align-items: center; */
flex-direction: column; /* 垂直排列 */ flex-direction: column;
/* 垂直排列 */
} }
.form_row { .form_row {
margin-bottom: 5%; margin-bottom: 5%;
width: 70%; width: 70%;
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
justify-content: left; /* 水平居中 */ /* 垂直居中 */
justify-content: left;
/* 水平居中 */
/* gap: 12px; 元素间距 */ /* gap: 12px; 元素间距 */
} }
...@@ -653,8 +615,7 @@ const buildchangeFn = () => { ...@@ -653,8 +615,7 @@ const buildchangeFn = () => {
text-align: center; text-align: center;
} }
.buildf2 { .buildf2 {}
}
/* /*
...@@ -794,7 +755,7 @@ const buildchangeFn = () => { ...@@ -794,7 +755,7 @@ const buildchangeFn = () => {
margin-left: 5px; margin-left: 5px;
} }
.left-slide-dialog{ .left-slide-dialog {
background-color: #072547; background-color: #072547;
} }
......
src/views/commentcomponents/searchtop/index.vue
浏览文件 @ 92be75d4
...@@ -2,65 +2,32 @@ ...@@ -2,65 +2,32 @@
<div class="fire-search-container"> <div class="fire-search-container">
<div class="search-row"> <div class="search-row">
<!-- 火情描述输入框 --> <!-- 火情描述输入框 -->
<div class="search-item" v-for="(items, index) in searchShowData" :key="index" > <div class="search-item" v-for="(items, index) in searchShowData" :key="index">
<label class="search-label">{{items.label}}</label> <label class="search-label">{{ items.label }}</label>
<el-input v-if="items.type === 'input'" <el-input v-if="items.type === 'input'" v-model="items.content" clearable :disabled="!isShow"
v-model="items.content" :placeholder="items.placeholder" />
clearable <el-select v-else-if="items.type === 'select'" v-model="items.content" :placeholder="items.placeholder"
:disabled="!isShow" clearable>
:placeholder="items.placeholder" <el-option v-for="building in items.options" :key="building.value" :label="building.label"
/> :value="building.value" />
<el-select v-else-if="items.type === 'select'" </el-select>
v-model="items.content" <el-autocomplete v-else-if="items.type === 'autocomplete'" v-model="items.content"
:placeholder="items.placeholder" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable class="inline-input w-50"
clearable placeholder="请输入" @input="getAllListInfoFn(items)" />
> <el-date-picker v-else v-model="items.content" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
<el-option :default-value="defaultDateRange" @change="getAllListInfoFn" :disabled-date="disableFutureDates"
v-for="building in items.options" style="max-width: 220px;" />
:key="building.value"
:label="building.label"
:value="building.value"
/>
</el-select>
<el-autocomplete v-else-if="items.type === 'autocomplete'"
v-model="items.content"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
clearable
class="inline-input w-50"
placeholder="请输入"
@input="getAllListInfoFn(items)"
/>
<el-date-picker v-else
v-model="items.content"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-value="defaultDateRange"
@change="getAllListInfoFn"
:disabled-date="disableFutureDates"
style="max-width: 220px;"
/>
</div> </div>
</div> </div>
<div class="operation-buttons" v-if="isShow"> <div class="operation-buttons" v-if="isShow">
<!-- 操作按钮组 --> <!-- 操作按钮组 -->
<div class="search-buttons"> <div class="search-buttons">
<el-button <el-button type="default" style="width: 45%;" @click="resetSearchForm">
type="default"
style="width: 45%;"
@click="resetSearchForm"
>
重置 重置
</el-button> </el-button>
<el-button <el-button type="primary" style="width: 45%;" @click="submitSearch">
type="primary"
style="width: 45%;"
@click="submitSearch"
>
查询 查询
</el-button> </el-button>
</div> </div>
...@@ -71,21 +38,21 @@ ...@@ -71,21 +38,21 @@
<script setup> <script setup>
import { computed, reactive, ref, watch } from 'vue'; import { computed, reactive, ref, watch } from 'vue';
import { ElInput, ElSelect, ElOption, ElButton, ElMessage, dayjs } from 'element-plus'; import { ElInput, ElSelect, ElOption, ElButton, ElMessage, dayjs } from 'element-plus';
import { buildingGetBuildCodeListApi,buildingGetBuildListByBuildNameApi,buildingGetTotalFloorNumListApi,buildingGetBuildNameListApi } from '../../../api/build' import { buildingGetBuildCodeListApi, buildingGetBuildListByBuildNameApi, buildingGetTotalFloorNumListApi, buildingGetBuildNameListApi } from '../../../api/build'
import { floorGetFloorNoListAPI } from '../../../api/floor' import { floorGetFloorNoListAPI } from '../../../api/floor'
import useAppStore from '../../../store/module/app'; import useAppStore from '../../../store/module/app';
const useAppStoreInstance = useAppStore() const useAppStoreInstance = useAppStore()
const props = defineProps(["searchShowData"]) const props = defineProps(["searchShowData"])
const isShow = computed(() => { const isShow = computed(() => {
console.log("按钮操作显示标识",props.searchShowData) console.log("按钮操作显示标识", props.searchShowData)
if (props.searchShowData.length > 0) { if (props.searchShowData.length > 0) {
return props.searchShowData[0].isShow return props.searchShowData[0].isShow
}else{ } else {
ElMessage.error('按钮操作显示标识错误') ElMessage.error('按钮操作显示标识错误')
} }
}) })
const Year = dayjs(Date.now()).format('YYYY') const Year = dayjs(Date.now()).format('YYYY')
const Month = dayjs(Date.now()).format('MM') const Month = dayjs(Date.now()).format('MM')
const Day = dayjs(Date.now()).format('DD') const Day = dayjs(Date.now()).format('DD')
...@@ -117,11 +84,11 @@ const createFilter = (queryString) => { ...@@ -117,11 +84,11 @@ const createFilter = (queryString) => {
return (restaurant) => { return (restaurant) => {
// 确保 restaurant 和 restaurant.value 存在 // 确保 restaurant 和 restaurant.value 存在
if (!restaurant?.value) return false; if (!restaurant?.value) return false;
// 确保 queryString 是字符串 // 确保 queryString 是字符串
const searchText = String(queryString || '').toLowerCase(); const searchText = String(queryString || '').toLowerCase();
const itemText = String(restaurant.value).toLowerCase(); const itemText = String(restaurant.value).toLowerCase();
return itemText.includes(searchText); // 或 startsWith() return itemText.includes(searchText); // 或 startsWith()
} }
} }
...@@ -131,7 +98,7 @@ const handleSelect = (item) => { ...@@ -131,7 +98,7 @@ const handleSelect = (item) => {
restaurants.value = item.options restaurants.value = item.options
} }
const getAllListInfoFn = (item) => { const getAllListInfoFn = (item) => {
// console.log(item.click,'-*--*-*-*-*-*-') // console.log(item.click,'-*--*-*-*-*-*-')
switch (item.click) { switch (item.click) {
case 'buildingGetBuildListByBuildNameFn': case 'buildingGetBuildListByBuildNameFn':
...@@ -154,59 +121,59 @@ const getAllListInfoFn = (item) => { ...@@ -154,59 +121,59 @@ const getAllListInfoFn = (item) => {
break; break;
} }
} }
const buildingGetBuildListByBuildNameFn = (item) => { const buildingGetBuildListByBuildNameFn = (item) => {
// console.log(item,'buildingGetBuildCodeListFn被触发') // console.log(item,'buildingGetBuildCodeListFn被触发')
buildingGetBuildListByBuildNameApi({buildName:item.content}).then(res => { buildingGetBuildListByBuildNameApi({ buildName: item.content }).then(res => {
// console.log(res,'buildingGetBuildCodeListFn返回数据') // console.log(res,'buildingGetBuildCodeListFn返回数据')
if(res.code == 200) { if (res.code == 200) {
restaurants.value = res.data restaurants.value = res.data
// console.log(restaurants.value,'buildingGetBuildCodeListFn8999999999999返回数据') // console.log(restaurants.value,'buildingGetBuildCodeListFn8999999999999返回数据')
} }
}) })
}; };
const buildCodeTraverse = (item)=>{ const buildCodeTraverse = (item) => {
let buildCodeList = [] let buildCodeList = []
item.forEach(item => { item.forEach(item => {
// console.log(item,'buildCodeTraverse被触发') // console.log(item,'buildCodeTraverse被触发')
buildCodeList.push({value:item}) buildCodeList.push({ value: item })
}) })
return buildCodeList return buildCodeList
} }
const buildingGetBuildCodeListApiFn = (item) => { const buildingGetBuildCodeListApiFn = (item) => {
buildingGetBuildCodeListApi({buildCode:item.content}).then(res => { buildingGetBuildCodeListApi({ buildCode: item.content }).then(res => {
// console.log(res,'buildingGetBuildCodeListFn返回数据') // console.log(res,'buildingGetBuildCodeListFn返回数据')
if(res.code == 200) { if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data) restaurants.value = buildCodeTraverse(res.data)
// console.log(restaurants.value,'buildingGetBuildCodeListFn8999999999999返回数据') // console.log(restaurants.value,'buildingGetBuildCodeListFn8999999999999返回数据')
} }
}) })
}; };
// 返回的数据不对应当[楼层数]不是【建筑名称】 // 返回的数据不对应当[楼层数]不是【建筑名称】
const buildingGetTotalFloorNumListFn = (item) => { const buildingGetTotalFloorNumListFn = (item) => {
buildingGetTotalFloorNumListApi({totalFloorNum:item.content}).then(res => { buildingGetTotalFloorNumListApi({ totalFloorNum: item.content }).then(res => {
console.log(res,'buildingGetTotalFloorNumListFn返回数据') console.log(res, 'buildingGetTotalFloorNumListFn返回数据')
if(res.code == 200) { if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data) restaurants.value = buildCodeTraverse(res.data)
console.log(restaurants.value,'buildingGetTotalFloorNumListFn8999999999999返回数据') console.log(restaurants.value, 'buildingGetTotalFloorNumListFn8999999999999返回数据')
} }
}) })
} }
const buildingGetBuildNameListFn = (item) => { const buildingGetBuildNameListFn = (item) => {
buildingGetBuildNameListApi({buildName:item.content}).then(res => { buildingGetBuildNameListApi({ buildName: item.content }).then(res => {
// console.log(res,'buildingGetBuildNameListFn返回数据') // console.log(res,'buildingGetBuildNameListFn返回数据')
if(res.code == 200) { if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data) restaurants.value = buildCodeTraverse(res.data)
// console.log(restaurants.value,'buildingGetBuildNameListFn8999999999999返回数据') // console.log(restaurants.value,'buildingGetBuildNameListFn8999999999999返回数据')
} }
}) })
} }
const floorGetFloorNoListFn = (item) => { const floorGetFloorNoListFn = (item) => {
floorGetFloorNoListAPI({buildId: useAppStoreInstance.PUSHPARAMETER.buildId,floorNo:item.content}).then(res => { floorGetFloorNoListAPI({ buildId: useAppStoreInstance.PUSHPARAMETER.buildId, floorNo: item.content }).then(res => {
// console.log(res,'floorGetFloorNoListFn返回数据') // console.log(res,'floorGetFloorNoListFn返回数据')
if(res.code == 200) { if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data) restaurants.value = buildCodeTraverse(res.data)
// console.log(restaurants.value,'floorGetFloorNoListFn8999999999999返回数据') // console.log(restaurants.value,'floorGetFloorNoListFn8999999999999返回数据')
} }
...@@ -226,11 +193,11 @@ const submitSearch = () => { ...@@ -226,11 +193,11 @@ const submitSearch = () => {
}; };
// 定义一个重置搜索表单的函数 // 定义一个重置搜索表单的函数
const resetSearchForm = () => { const resetSearchForm = () => {
// 遍历props.searchShowData数组 // 遍历props.searchShowData数组
props.searchShowData.forEach(item => { props.searchShowData.forEach(item => {
// 将每个item的content属性置为空字符串 // 将每个item的content属性置为空字符串
item.content = '' item.content = ''
}) })
} }
</script> </script>
...@@ -249,8 +216,8 @@ const resetSearchForm = () => { ...@@ -249,8 +216,8 @@ const resetSearchForm = () => {
} }
.search-row { .search-row {
/* background-color: #606266; */ /* background-color: #606266; */
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
...@@ -261,7 +228,7 @@ const resetSearchForm = () => { ...@@ -261,7 +228,7 @@ const resetSearchForm = () => {
} }
.search-item { .search-item {
/* background-color: #606266; */ /* background-color: #606266; */
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
...@@ -269,7 +236,7 @@ const resetSearchForm = () => { ...@@ -269,7 +236,7 @@ const resetSearchForm = () => {
.search-label { .search-label {
width: 90px; width: 90px;
margin-right: 8px; margin-right: 8px;
color: #606266; color: #606266;
...@@ -277,8 +244,8 @@ const resetSearchForm = () => { ...@@ -277,8 +244,8 @@ const resetSearchForm = () => {
} }
/* 使用深度选择器覆盖Element Plus默认样式 */ /* 使用深度选择器覆盖Element Plus默认样式 */
:deep .el-input__wrapper, :deep(.el-input__wrapper),
:deep .el-select__wrapper { :deep(.el-select__wrapper) {
border-radius: 4px; border-radius: 4px;
} }
...@@ -289,13 +256,14 @@ const resetSearchForm = () => { ...@@ -289,13 +256,14 @@ const resetSearchForm = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.operation-buttons { .operation-buttons {
width: 20%; width: 20%;
padding-left: 5%; padding-left: 5%;
} }
/* 响应式适配 */ /* 响应式适配 */
...@@ -304,7 +272,7 @@ padding-left: 5%; ...@@ -304,7 +272,7 @@ padding-left: 5%;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.search-buttons { .search-buttons {
margin-left: 0; margin-left: 0;
margin-top: 10px; margin-top: 10px;
......
src/views/systemmanage/staffManage/index.vue
浏览文件 @ 92be75d4
...@@ -7,25 +7,30 @@ ...@@ -7,25 +7,30 @@
<div class="left-top"> <div class="left-top">
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop> <searchtop :searchShowData="searchShowData"></searchtop>
</div> </div>
</div> </div>
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tabs"> <div class="card-tabs">
<span class="title" >用户列表</span> <span class="title">用户列表</span>
<div class="card-actions"> <div class="card-actions">
<el-button class="operation-button" type="primary" size="small" style="width: 15%;">导入</el-button> <el-button class="operation-button" type="primary" size="small" style="width: 15%;">导入</el-button>
<el-button class="operation-button" type="primary" size="small">导出</el-button> <el-button class="operation-button" type="primary" size="small">导出</el-button>
<el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增</el-button> <el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增</el-button>
<el-button class="operation-button" type="primary" size="small" @click="tableDataRefresh"><el-icon><RefreshRight /></el-icon></el-button> <el-button class="operation-button" type="primary" size="small" @click="tableDataRefresh"><el-icon>
<el-button class="operation-button" type="primary" size="small"><el-icon><FullScreen /></el-icon></el-button> <RefreshRight />
</el-icon></el-button>
<el-button class="operation-button" type="primary" size="small"><el-icon>
<FullScreen />
</el-icon></el-button>
</div> </div>
</div> </div>
<div class="card-table"> <div class="card-table">
<tabledata :tableShowData="tableShowData" :Operation="Operation" @getPageCommonAPI="initTableData" @tableDataRefresh="tableDataRefresh"></tabledata> <tabledata :tableShowData="tableShowData" :Operation="Operation" @getPageCommonAPI="initTableData"
@tableDataRefresh="tableDataRefresh"></tabledata>
</div> </div>
</div> </div>
...@@ -33,32 +38,25 @@ ...@@ -33,32 +38,25 @@
</main> </main>
<!-- 新增用户 --> <!-- 新增用户 -->
<el-drawer v-model="isAddDrawer" title="添加用户信息" :with-header="false" style="height: 100%;" :before-close="beforCloseAddDrawer"> <el-drawer v-model="isAddDrawer" title="添加用户信息" :with-header="false" style="height: 100%;"
:before-close="beforCloseAddDrawer">
<AddInfo @closeAddDrawer="closeAddDrawer" @tableDataRefresh="tableDataRefresh"></AddInfo> <AddInfo @closeAddDrawer="closeAddDrawer" @tableDataRefresh="tableDataRefresh"></AddInfo>
</el-drawer> </el-drawer>
<!-- 修改弹窗 --> <!-- 修改弹窗 -->
<el-drawer v-model="isEditDrawer" title="修改用户信息" :with-header="false" style="height: 100%;" :before-close="beforCloseAddDrawer"> <el-drawer v-model="isEditDrawer" title="修改用户信息" :with-header="false" style="height: 100%;"
<editinfo :rowData="rowData" @closeEditDrawer="closeEditDrawer" @tableDataRefresh="tableDataRefresh"></editinfo> :before-close="beforCloseAddDrawer">
</el-drawer> <editinfo :rowData="rowData" @closeEditDrawer="closeEditDrawer" @tableDataRefresh="tableDataRefresh"></editinfo>
<!-- 用户信息弹窗 --> </el-drawer>
<el-dialog <!-- 用户信息弹窗 -->
v-model="isUserInfoDialogVisible" <el-dialog v-model="isUserInfoDialogVisible" title="用户信息" width="800">
title="用户信息" <userinfo :userInfo="showuserinfodata" :isUserInfoDialogVisible="isUserInfoDialogVisible"></userinfo>
width="800" </el-dialog>
> <!-- 重置密码弹窗 -->
<userinfo :userInfo="showuserinfodata" :isUserInfoDialogVisible="isUserInfoDialogVisible"></userinfo> <el-dialog v-model="isResetPasswordDialogVisible" title="重置密码" width="800" close="beforCloseAddDrawer"
</el-dialog> :close-on-click-modal=false :show-close='false'>
<!-- 重置密码弹窗 --> <resetpassword :userInfo="resetPasswordData" @closeResetPasswordDialogFn="closeResetPasswordDialogFn"
<el-dialog :isResetPasswordDialogVisible="isResetPasswordDialogVisible"></resetpassword>
v-model="isResetPasswordDialogVisible" </el-dialog>
title="重置密码"
width="800"
close="beforCloseAddDrawer"
:close-on-click-modal = false
:show-close = 'false'
>
<resetpassword :userInfo="resetPasswordData" @closeResetPasswordDialogFn="closeResetPasswordDialogFn" :isResetPasswordDialogVisible="isResetPasswordDialogVisible"></resetpassword>
</el-dialog>
</div> </div>
</template> </template>
...@@ -71,7 +69,7 @@ import resetpassword from '../components/resetpassword.vue' ...@@ -71,7 +69,7 @@ import resetpassword from '../components/resetpassword.vue'
import editinfo from '../components/editinfo.vue'; import editinfo from '../components/editinfo.vue';
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import AddInfo from '../components/addInfo.vue'; import AddInfo from '../components/addInfo.vue';
import { staffGetPageInfoApi,staffRemoveInfoApi } from "../../../api/staff.js" import { staffGetPageInfoApi, staffRemoveInfoApi } from "../../../api/staff.js"
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import useAppStore from '../../../store/module/app.js'; import useAppStore from '../../../store/module/app.js';
...@@ -81,9 +79,9 @@ const route = useRoute() ...@@ -81,9 +79,9 @@ const route = useRoute()
// import Operation from 'ant-design-vue/es/transfer/operation'; // import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性 // 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([ const searchShowData = ref([
{ label: '用户姓名', placeholder: "请输入", type: 'input',content:'' ,isShow: true}, { label: '用户姓名', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '用户状态', placeholder: "请选择", type: 'select',content:'' ,isShow: true, options: [{label:'启用', value:'启用'}, {label:'禁用', value:'禁用'}] }, { label: '用户状态', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '用户角色', placeholder: "请选择", type: 'select', content:'',isShow: true ,options: [{label:'管理员', value:'管理员'}, {label:'巡查员', value:'巡查员'}]}, { label: '用户角色', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]) ])
// 响应式布局配置 // 响应式布局配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -100,7 +98,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示 ...@@ -100,7 +98,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示
* 控制添加抽屉的显示状态 * 控制添加抽屉的显示状态
* @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示 * @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
*/ */
const isAddDrawer= ref(false) const isAddDrawer = ref(false)
const closeAddDrawer = () => { const closeAddDrawer = () => {
console.log("000000-------3-----0000000000") console.log("000000-------3-----0000000000")
// 关闭添加抽屉 // 关闭添加抽屉
...@@ -119,8 +117,8 @@ const beforCloseAddDrawer = () => { ...@@ -119,8 +117,8 @@ const beforCloseAddDrawer = () => {
const tableDataRefresh = () => { const tableDataRefresh = () => {
initTableData({ initTableData({
currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum, currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum,
currentPageSize:useAppStoreInstance.pageCountInfo.currentPageSize, currentPageSize: useAppStoreInstance.pageCountInfo.currentPageSize,
}) })
console.log("000000-------2-----0000000000,这里获取到最新的数据") console.log("000000-------2-----0000000000,这里获取到最新的数据")
...@@ -141,14 +139,14 @@ const rowData = ref([]) ...@@ -141,14 +139,14 @@ const rowData = ref([])
*/ */
const editData = (data) => { const editData = (data) => {
try { try {
if(useAppStoreInstance.chackCurPersionOpition()){ if (useAppStoreInstance.chackCurPersionOpition()) {
// 打开编辑抽屉 // 打开编辑抽屉
isEditDrawer.value = true isEditDrawer.value = true
// 设置要编辑的数据 // 设置要编辑的数据
rowData.value = data rowData.value = data
console.log("000000-------1-----0000000000",data) console.log("000000-------1-----0000000000", data)
}else{ } else {
ElMessage.error("没有权限打开编辑抽屉") ElMessage.error("没有权限打开编辑抽屉")
} }
} catch (error) { } catch (error) {
...@@ -160,7 +158,7 @@ const editData = (data) => { ...@@ -160,7 +158,7 @@ const editData = (data) => {
* 调用后将关闭编辑抽屉并重置相关状态 * 调用后将关闭编辑抽屉并重置相关状态
*/ */
const closeEditDrawer = () => { const closeEditDrawer = () => {
console.log("000000-------23-----0000000000") console.log("000000-------23-----0000000000")
// 关闭编辑抽屉 // 关闭编辑抽屉
isEditDrawer.value = false isEditDrawer.value = false
...@@ -174,24 +172,24 @@ const closeEditDrawer = () => { ...@@ -174,24 +172,24 @@ const closeEditDrawer = () => {
const deleteData = (data) => { const deleteData = (data) => {
try { try {
if(useAppStoreInstance.chackCurPersionOpition()){ if (useAppStoreInstance.chackCurPersionOpition()) {
console.log("000000---2---------0000000000",data) console.log("000000---2---------0000000000", data)
ElMessageBox.confirm( ElMessageBox.confirm(
'删除操作不可逆，是否继续?', '删除操作不可逆，是否继续?',
'删除', '删除',
{ {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
draggable: true, draggable: true,
} }
) )
.then(() => { .then(() => {
// console.log("000000---1-456464564------0000000000","我是确认",data.id) // console.log("000000---1-456464564------0000000000","我是确认",data.id)
try { try {
let submitData = {id:data.id}; let submitData = { id: data.id };
staffRemoveInfoApi(submitData).then(res => { staffRemoveInfoApi(submitData).then(res => {
if (res.code === 200) { if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' }); ElMessage({ type: 'success', message: '已删除' });
...@@ -205,13 +203,13 @@ const deleteData = (data) => { ...@@ -205,13 +203,13 @@ const deleteData = (data) => {
ElMessage({ type: 'error', message: `删除失败（网络错误）err:${err}` }); ElMessage({ type: 'error', message: `删除失败（网络错误）err:${err}` });
} }
}).catch(() => { }).catch(() => {
ElMessage({ ElMessage({
type: 'info', type: 'info',
message: '取消删除', message: '取消删除',
})
}) })
}) } else {
}else{
ElMessage.error("没有权限打开编辑抽屉") ElMessage.error("没有权限打开编辑抽屉")
} }
} catch (error) { } catch (error) {
...@@ -219,7 +217,7 @@ const deleteData = (data) => { ...@@ -219,7 +217,7 @@ const deleteData = (data) => {
} }
} }
...@@ -230,16 +228,16 @@ const closeResetPasswordDialogFn = () => { ...@@ -230,16 +228,16 @@ const closeResetPasswordDialogFn = () => {
} }
const resetPasswordData = ref({}); const resetPasswordData = ref({});
const resetData = (data) => { const resetData = (data) => {
if(useAppStoreInstance.userInfo.id === data.id){ if (useAppStoreInstance.userInfo.id === data.id) {
ElMessage.error("不能重置自己的密码") ElMessage.error("不能重置自己的密码")
}else{ } else {
try { try {
console.log(useAppStoreInstance.chackCurPersionOpition(),"********useAppStoreInstance.chackCurPersionOpition()***************") console.log(useAppStoreInstance.chackCurPersionOpition(), "********useAppStoreInstance.chackCurPersionOpition()***************")
if(useAppStoreInstance.chackCurPersionOpition() ){ if (useAppStoreInstance.chackCurPersionOpition()) {
console.log("000000-----3-------0000000000",data) console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true; isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data; resetPasswordData.value = data;
}else{ } else {
ElMessage.error("没有权限打开重置密码抽屉") ElMessage.error("没有权限打开重置密码抽屉")
} }
} catch (error) { } catch (error) {
...@@ -250,71 +248,71 @@ const resetData = (data) => { ...@@ -250,71 +248,71 @@ const resetData = (data) => {
const showuserinfodata = ref({}) const showuserinfodata = ref({})
const userData = (data) => { const userData = (data) => {
console.log("000000------4------0000000000",data) console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true isUserInfoDialogVisible.value = true
showuserinfodata.value = data showuserinfodata.value = data
} }
const tableShowData = ref([{ const tableShowData = ref([{
tableHeader:[ tableHeader: [
{label: '姓名', prop: 'name'}, { label: '姓名', prop: 'name' },
{label: '电话', prop: 'phone'}, { label: '电话', prop: 'phone' },
{label: '是否可用', prop: 'status'}, { label: '是否可用', prop: 'status' },
{label: '用户权限', prop: 'role'}, { label: '用户权限', prop: 'role' },
{label: '创建时间', prop: 'createTime'}, { label: '创建时间', prop: 'createTime' },
{label: '更新时间', prop: 'updateTime'}, { label: '更新时间', prop: 'updateTime' },
{label: '操作', prop: 'Operation'} { label: '操作', prop: 'Operation' }
], ],
tableBody:[ tableBody: [
] ]
} }
]) ])
const Operation = ref( [ { label: '编辑', type: 'primary', icon: 'EditPen', click: editData }, const Operation = ref([{ label: '编辑', type: 'primary', icon: 'EditPen', click: editData },
{ label: '删除', type: 'danger', icon: 'Delete', click: deleteData }, { label: '删除', type: 'danger', icon: 'Delete', click: deleteData },
{ label: '用户信息', type: 'primary', icon: 'EditPen', click: userData }, { label: '用户信息', type: 'primary', icon: 'EditPen', click: userData },
{ label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }] { label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }]
) )
const initTableData = (parameter) => { const initTableData = (parameter) => {
staffGetPageInfoApi({ staffGetPageInfoApi({
currentPageNum: parameter.currentPageNum, currentPageNum: parameter.currentPageNum,
currentPageSize: parameter.currentPageSize, currentPageSize: parameter.currentPageSize,
}).then(res => {
if(res.code === 200){
let tempData = res.data.list
tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据
console.log(res.data,"--------999999999----")
tempData = tempData.filter(element => {
return element.isDeleted === 0;
});
tempData.forEach(element => {
element.status = element.status === 0 ? true : false;
element.Operation = [...Operation.value]
});
tableShowData.value[0].tableBody = tempData
tableShowData.value[0].total = res.data.total
tableShowData.value[0].pageSize = res.data.pageSize
console.log(tableShowData.value, '展示数据');
} }).then(res => {
if (res.code === 200) {
}).catch(err => { let tempData = res.data.list
message.error(err.message) tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据
console.log(res.data, "--------999999999----")
tempData = tempData.filter(element => {
return element.isDeleted === 0;
});
tempData.forEach(element => {
element.status = element.status === 0 ? true : false;
element.Operation = [...Operation.value]
});
tableShowData.value[0].tableBody = tempData
tableShowData.value[0].total = res.data.total
tableShowData.value[0].pageSize = res.data.pageSize
console.log(tableShowData.value, '展示数据');
}
}) }).catch(err => {
message.error(err.message)
})
} }
onMounted(() => { onMounted(() => {
// console.log(tableShowData.value, '错误'); // console.log(tableShowData.value, '错误');
initTableData({ initTableData({
currentPageNum: 1, currentPageNum: 1,
currentPageSize: 10, currentPageSize: 10,
}) })
}) })
...@@ -401,24 +399,28 @@ watch(route, () => { ...@@ -401,24 +399,28 @@ watch(route, () => {
padding: 10px; padding: 10px;
} }
.title{
.title {
width: 70%; width: 70%;
} }
.card-actions { .card-actions {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* margin-bottom: 1rem; */ /* margin-bottom: 1rem; */
height: 8%; height: 8%;
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -434,30 +436,36 @@ watch(route, () => { ...@@ -434,30 +436,36 @@ watch(route, () => {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
/* 文本样式 */ /* 文本样式 */
.page-text { .page-text {
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
white-space: nowrap; /* 防止文本换行 */ white-space: nowrap;
/* 防止文本换行 */
} }
/* 修复 Element Plus 分页组件默认的块级布局问题 */ /* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; /* 清除默认外边距 */ margin: 0;
/* 清除默认外边距 */
} }
.pagination-block{
.pagination-block {
height: 8%; height: 8%;
} }
.card-table{
.card-table {
width: 100%; width: 100%;
/* display: flex; */ /* display: flex; */
/* background-color: #000000; */ /* background-color: #000000; */
flex:1; flex: 1;
overflow: hidden; overflow: hidden;
border-radius: 8PX; border-radius: 8PX;
} }
...@@ -467,7 +475,7 @@ watch(route, () => { ...@@ -467,7 +475,7 @@ watch(route, () => {
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
src/views/uavshowdate/index.vue
浏览文件 @ 92be75d4
...@@ -8,21 +8,21 @@ ...@@ -8,21 +8,21 @@
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<div class="card-tabs"> <div class="card-tabs">
<span class="tab-btn">历史火情统计</span> <span class="tab-btn">历史火情统计</span>
</div> </div>
<div class="content" > <div class="content">
<Uavcard :drone="drones"></Uavcard> <Uavcard :drone="drones"></Uavcard>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
</div> </div>
</template> </template>
...@@ -96,11 +96,11 @@ const drones = ref([ ...@@ -96,11 +96,11 @@ const drones = ref([
// import Operation from 'ant-design-vue/es/transfer/operation'; // import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性 // 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([ const searchShowData = ref([
{ label: '火情描述', placeholder: "请输入", type: 'input',content:'' ,isShow: true}, { label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '火情描述', placeholder: "请输入", type: 'input',content:'' ,isShow: true}, { label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '火情编号', placeholder: "请输入", type: 'input', content:'' ,isShow: true}, { label: '火情编号', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '建筑名称', placeholder: "请选择", type: 'select',content:'' ,isShow: true, options: [{label:'火灾', value:'烟雾'}, {label:'烟雾', value:'火灾'}, {label:'烟雾', value:'火灾'}] }, { label: '建筑名称', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '火灾', value: '烟雾' }, { label: '烟雾', value: '火灾' }, { label: '烟雾', value: '火灾' }] },
{ label: '建筑名称', placeholder: "请选择", type: 'select', content:'' ,isShow: true,options: [{label:'火灾1', value:'烟雾1'}, {label:'烟雾1', value:'火灾1'}, {label:'烟雾1', value:'火灾1'}] }, { label: '建筑名称', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '火灾1', value: '烟雾1' }, { label: '烟雾1', value: '火灾1' }, { label: '烟雾1', value: '火灾1' }] },
]) ])
// 响应式布局配置 // 响应式布局配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -117,7 +117,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示 ...@@ -117,7 +117,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示
* 控制添加抽屉的显示状态 * 控制添加抽屉的显示状态
* @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示 * @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
*/ */
const isAddDrawer= ref(false) const isAddDrawer = ref(false)
const closeAddDrawer = () => { const closeAddDrawer = () => {
console.log("000000-------3-----0000000000") console.log("000000-------3-----0000000000")
// 关闭添加抽屉 // 关闭添加抽屉
...@@ -134,7 +134,7 @@ const beforCloseAddDrawer = () => { ...@@ -134,7 +134,7 @@ const beforCloseAddDrawer = () => {
* 当调用此方法时，会触发表格数据的重新加载 * 当调用此方法时，会触发表格数据的重新加载
*/ */
const tableDataRefresh = () => { const tableDataRefresh = () => {
console.log("000000-------2-----0000000000",这里获取到最新的数据) console.log("000000-------2-----0000000000", 这里获取到最新的数据)
} }
/** /**
* 控制编辑抽屉的显示状态 * 控制编辑抽屉的显示状态
...@@ -155,7 +155,7 @@ const editData = (data) => { ...@@ -155,7 +155,7 @@ const editData = (data) => {
isEditDrawer.value = true isEditDrawer.value = true
// 设置要编辑的数据 // 设置要编辑的数据
rowData.value = data rowData.value = data
console.log("000000-------1-----0000000000",data) console.log("000000-------1-----0000000000", data)
} }
/** /**
* 关闭编辑抽屉的方法 * 关闭编辑抽屉的方法
...@@ -172,7 +172,7 @@ const closeEditDrawer = () => { ...@@ -172,7 +172,7 @@ const closeEditDrawer = () => {
* 显示确认对话框，用户确认后执行删除操作 * 显示确认对话框，用户确认后执行删除操作
*/ */
const deleteData = (data) => { const deleteData = (data) => {
console.log("000000---2---------0000000000",data) console.log("000000---2---------0000000000", data)
ElMessageBox.confirm( ElMessageBox.confirm(
'是否删除该用户？此操作将无法撤销', '是否删除该用户？此操作将无法撤销',
'删除', '删除',
...@@ -199,42 +199,42 @@ const deleteData = (data) => { ...@@ -199,42 +199,42 @@ const deleteData = (data) => {
const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的显示状态 const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的显示状态
const resetPasswordData = ref({}); const resetPasswordData = ref({});
const resetData = (data) => { const resetData = (data) => {
console.log("000000-----3-------0000000000",data) console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true; isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data; resetPasswordData.value = data;
} }
const showuserinfodata = ref({}) const showuserinfodata = ref({})
const userData = (data) => { const userData = (data) => {
console.log("000000------4------0000000000",data) console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true isUserInfoDialogVisible.value = true
showuserinfodata.value = data showuserinfodata.value = data
} }
const tableShowData = ref([{ const tableShowData = ref([{
tableHeader:[ tableHeader: [
{label: '姓名', prop: 'userName'}, { label: '姓名', prop: 'userName' },
{label: '电话', prop: 'phone'}, { label: '电话', prop: 'phone' },
{label: '是否可用', prop: 'isUse'}, { label: '是否可用', prop: 'isUse' },
{label: '用户权限', prop: 'userPermission'}, { label: '用户权限', prop: 'userPermission' },
{label: '创建时间', prop: 'createTime'}, { label: '创建时间', prop: 'createTime' },
{label: '更新时间', prop: 'updataTime'}, { label: '更新时间', prop: 'updataTime' },
{label: '操作', prop: 'Operation'} { label: '操作', prop: 'Operation' }
], ],
tableBody:[ tableBody: [
{userName: '张三',password:"123456", phone: "15736985235",gender:'man' , isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(),remarks:"",Operation:[ {label:'编辑', type:'primary', icon:'EditPen', click:editData}, {label:'删除', type:'danger', icon:'Delete', click:deleteData}, {label:'用户信息', type:'primary', icon:'EditPen', click:userData}, {label:'重置密码', type:'primary', icon:'EditPen', click:resetData}]}, { userName: '张三', password: "123456", phone: "15736985235", gender: 'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [{ label: '编辑', type: 'primary', icon: 'EditPen', click: editData }, { label: '删除', type: 'danger', icon: 'Delete', click: deleteData }, { label: '用户信息', type: 'primary', icon: 'EditPen', click: userData }, { label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }] },
{userName: '李四',password:"123456", phone: "15736985235",gender:'man', isUse: false, userPermission: false, createTime: Date.now(), updataTime: Date.now(), remarks:"",Operation:[ {label:'编辑', type:'primary', icon:'EditPen', click:editData}, {label:'删除', type:'danger', icon:'Delete', click:deleteData}, {label:'用户信息', type:'primary', icon:'EditPen', click:userData}, {label:'重置密码', type:'primary', icon:'EditPen', click:resetData}]}, { userName: '李四', password: "123456", phone: "15736985235", gender: 'man', isUse: false, userPermission: false, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [{ label: '编辑', type: 'primary', icon: 'EditPen', click: editData }, { label: '删除', type: 'danger', icon: 'Delete', click: deleteData }, { label: '用户信息', type: 'primary', icon: 'EditPen', click: userData }, { label: '重置密码', type: 'primary', icon: 'EditPen', click: resetData }] },
{userName: '王五',password:"123456", phone: "15736985235",gender:'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '王五', password: "123456", phone: "15736985235", gender: 'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '赵六',password:"123456", phone: "15736985235",gender:'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '赵六', password: "123456", phone: "15736985235", gender: 'man', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '钱七',password:"123456", phone: "15736985235", gender:'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '钱七', password: "123456", phone: "15736985235", gender: 'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '孙八',password:"123456", phone: "15736985235", gender:'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '孙八', password: "123456", phone: "15736985235", gender: 'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '周九',password:"123456", phone: "15736985235", gender:'female' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '周九', password: "123456", phone: "15736985235", gender: 'female', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '张三', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '张三', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '李四', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '李四', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '王五', phone: "15736985235", gender:'male' , isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '王五', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '赵六', phone: "15736985235", gender:'male' , isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '赵六', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '钱七', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '钱七', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '孙八', phone: "15736985235", gender:'male' ,isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '孙八', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
{userName: '周九', phone: "15736985235", gender:'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks:"" ,Operation:[]}, { userName: '周九', phone: "15736985235", gender: 'male', isUse: true, userPermission: true, createTime: Date.now(), updataTime: Date.now(), remarks: "", Operation: [] },
] ]
} }
]) ])
...@@ -287,31 +287,33 @@ const containerStyle = computed(() => ({ ...@@ -287,31 +287,33 @@ const containerStyle = computed(() => ({
} }
.region-overview { .region-overview {
height: 79%; height: 79%;
/* background-color: #000000; */ /* background-color: #000000; */
min-width: 200px; min-width: 200px;
} }
.card-title{
height: 5%; .card-title {
background-color:#0b07ff; height: 5%;
border-radius: 8px 0; background-color: #0b07ff;
display: flex; border-radius: 8px 0;
align-items: center; display: flex;
padding: 0 1rem; align-items: center;
color: #ffffff; padding: 0 1rem;
font-size: 1.2rem; color: #ffffff;
font-weight: bold; font-size: 1.2rem;
border-bottom: #606266 1px solid; font-weight: bold;
} border-bottom: #606266 1px solid;
.content{ }
height: 95%;
background-color: #000000; .content {
display: flex; height: 95%;
flex-direction: column; background-color: #000000;
gap: 1rem; display: flex;
padding: 0.5rem; flex-direction: column;
overflow: auto; gap: 1rem;
padding: 0.5rem;
overflow: auto;
} }
/* 统计卡片样式 */ /* 统计卡片样式 */
...@@ -351,24 +353,28 @@ const containerStyle = computed(() => ({ ...@@ -351,24 +353,28 @@ const containerStyle = computed(() => ({
padding: 10px; padding: 10px;
} }
.title{
.title {
width: 70%; width: 70%;
} }
.card-actions { .card-actions {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* margin-bottom: 1rem; */ /* margin-bottom: 1rem; */
height: 8%; height: 8%;
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -384,30 +390,36 @@ const containerStyle = computed(() => ({ ...@@ -384,30 +390,36 @@ const containerStyle = computed(() => ({
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
/* 文本样式 */ /* 文本样式 */
.page-text { .page-text {
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
white-space: nowrap; /* 防止文本换行 */ white-space: nowrap;
/* 防止文本换行 */
} }
/* 修复 Element Plus 分页组件默认的块级布局问题 */ /* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; /* 清除默认外边距 */ margin: 0;
/* 清除默认外边距 */
} }
.pagination-block{
.pagination-block {
height: 8%; height: 8%;
} }
.card-table{
.card-table {
width: 100%; width: 100%;
/* display: flex; */ /* display: flex; */
/* background-color: #000000; */ /* background-color: #000000; */
flex:1; flex: 1;
overflow: hidden; overflow: hidden;
border-radius: 8PX; border-radius: 8PX;
} }
...@@ -417,7 +429,7 @@ const containerStyle = computed(() => ({ ...@@ -417,7 +429,7 @@ const containerStyle = computed(() => ({
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
src/views/uavshowdate/uavmanage/index.vue
浏览文件 @ 92be75d4
...@@ -7,21 +7,25 @@ ...@@ -7,21 +7,25 @@
<div class="left-top"> <div class="left-top">
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop> <searchtop :searchShowData="searchShowData"></searchtop>
</div> </div>
</div> </div>
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tabs"> <div class="card-tabs">
<span class="title" >用户列表</span> <span class="title">用户列表</span>
<div class="card-actions"> <div class="card-actions">
<el-button class="operation-button" type="primary" size="small" style="width: 15%;">导入</el-button> <el-button class="operation-button" type="primary" size="small" style="width: 15%;">导入</el-button>
<el-button class="operation-button" type="primary" size="small">导出</el-button> <el-button class="operation-button" type="primary" size="small">导出</el-button>
<el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增</el-button> <el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增</el-button>
<el-button class="operation-button" type="primary" size="small" @click="tableDataRefresh"><el-icon><RefreshRight /></el-icon></el-button> <el-button class="operation-button" type="primary" size="small" @click="tableDataRefresh"><el-icon>
<el-button class="operation-button" type="primary" size="small"><el-icon><FullScreen /></el-icon></el-button> <RefreshRight />
</el-icon></el-button>
<el-button class="operation-button" type="primary" size="small"><el-icon>
<FullScreen />
</el-icon></el-button>
</div> </div>
</div> </div>
<div class="card-table"> <div class="card-table">
...@@ -32,7 +36,7 @@ ...@@ -32,7 +36,7 @@
</div> </div>
</main> </main>
</div> </div>
</template> </template>
...@@ -48,9 +52,9 @@ import { message } from 'ant-design-vue'; ...@@ -48,9 +52,9 @@ import { message } from 'ant-design-vue';
// import Operation from 'ant-design-vue/es/transfer/operation'; // import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性 // 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([ const searchShowData = ref([
{ label: '用户姓名', placeholder: "请输入", type: 'input',content:'',isShow: true }, { label: '用户姓名', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '用户状态', placeholder: "请选择", type: 'select',content:'' ,isShow: true, options: [{label:'启用', value:'启用'}, {label:'禁用', value:'禁用'}] }, { label: '用户状态', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '用户角色', placeholder: "请选择", type: 'select', content:'',isShow: true ,options: [{label:'管理员', value:'管理员'}, {label:'巡查员', value:'巡查员'}]}, { label: '用户角色', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]) ])
// 响应式布局配置 // 响应式布局配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -67,7 +71,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示 ...@@ -67,7 +71,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示
* 控制添加抽屉的显示状态 * 控制添加抽屉的显示状态
* @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示 * @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
*/ */
const isAddDrawer= ref(false) const isAddDrawer = ref(false)
const closeAddDrawer = () => { const closeAddDrawer = () => {
console.log("000000-------3-----0000000000") console.log("000000-------3-----0000000000")
// 关闭添加抽屉 // 关闭添加抽屉
...@@ -106,7 +110,7 @@ const editData = (data) => { ...@@ -106,7 +110,7 @@ const editData = (data) => {
// 设置要编辑的数据 // 设置要编辑的数据
rowData.value = data rowData.value = data
console.log("000000-------1-----0000000000",data) console.log("000000-------1-----0000000000", data)
} }
/** /**
* 关闭编辑抽屉的方法 * 关闭编辑抽屉的方法
...@@ -124,7 +128,7 @@ const closeEditDrawer = () => { ...@@ -124,7 +128,7 @@ const closeEditDrawer = () => {
* 显示确认对话框，用户确认后执行删除操作 * 显示确认对话框，用户确认后执行删除操作
*/ */
const deleteData = (data) => { const deleteData = (data) => {
console.log("000000---2---------0000000000",data) console.log("000000---2---------0000000000", data)
ElMessageBox.confirm( ElMessageBox.confirm(
'删除操作不可逆，是否继续?', '删除操作不可逆，是否继续?',
'删除', '删除',
...@@ -136,20 +140,20 @@ const deleteData = (data) => { ...@@ -136,20 +140,20 @@ const deleteData = (data) => {
} }
) )
.then(() => { .then(() => {
console.log("000000---1-456464564------0000000000","我是确认") console.log("000000---1-456464564------0000000000", "我是确认")
try { try {
const res = staffRemoveInfoApi({id:data.id}); const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) { if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' }); ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh(); tableDataRefresh();
} else { } else {
ElMessage({ type: 'error', message: '删除失败：' + res.msg }); ElMessage({ type: 'error', message: '删除失败：' + res.msg });
} }
} catch (err) { } catch (err) {
// API 请求失败时在此捕获，不向上冒泡 // API 请求失败时在此捕获，不向上冒泡
ElMessage({ type: 'error', message: '删除失败（网络错误）' }); ElMessage({ type: 'error', message: '删除失败（网络错误）' });
// console.error('删除接口失败：', err); // console.error('删除接口失败：', err);
} }
}) })
.catch(() => { .catch(() => {
...@@ -184,20 +188,20 @@ const closeResetPasswordDialogFn = () => { ...@@ -184,20 +188,20 @@ const closeResetPasswordDialogFn = () => {
} }
const resetPasswordData = ref({}); const resetPasswordData = ref({});
const resetData = (data) => { const resetData = (data) => {
console.log("000000-----3-------0000000000",data) console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true; isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data; resetPasswordData.value = data;
} }
const showuserinfodata = ref({}) const showuserinfodata = ref({})
const userData = (data) => { const userData = (data) => {
console.log("000000------4------0000000000",data) console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true isUserInfoDialogVisible.value = true
showuserinfodata.value = data showuserinfodata.value = data
} }
const uavseedetails = (data) => { const uavseedetails = (data) => {
console.log(data,'---------5---------') console.log(data, '---------5---------')
// router.push({ // router.push({
// path: '/dialog_infoShow_img_vid/uavseedetails', // path: '/dialog_infoShow_img_vid/uavseedetails',
// query: { data: JSON.stringify(data) }, // query: { data: JSON.stringify(data) },
...@@ -205,29 +209,29 @@ const uavseedetails = (data) => { ...@@ -205,29 +209,29 @@ const uavseedetails = (data) => {
} }
const tableShowData = ref([{ const tableShowData = ref([{
tableHeader:[ tableHeader: [
{label: '序号', prop: 'id'}, { label: '序号', prop: 'id' },
{label: '无人机编号', prop: 'uavid'}, { label: '无人机编号', prop: 'uavid' },
{label: '无人机机型', prop: 'uavtype'}, { label: '无人机机型', prop: 'uavtype' },
{label: '无人机状态', prop: 'uavstate'}, { label: '无人机状态', prop: 'uavstate' },
{label: '无人机载弹数量', prop: 'uavpayloadcapacity'}, { label: '无人机载弹数量', prop: 'uavpayloadcapacity' },
{label: '上次维护时间', prop: 'premaintenancetime'}, { label: '上次维护时间', prop: 'premaintenancetime' },
{label: '弹药信息', prop: 'ammunitioninfo'}, { label: '弹药信息', prop: 'ammunitioninfo' },
{label: '操作', prop: 'Operation'} { label: '操作', prop: 'Operation' }
], ],
tableBody:[ tableBody: [
{id: 1, uavid: 'UAV-0001', uavtype: 'UAV-M100', uavstate: '正常', uavpayloadcapacity: '10', premaintenancetime: '2023-05-01', ammunitioninfo: '弹药数量：1000',Operation:[ { label: '查看详情', type: 'primary', icon: 'EditPen', click: uavseedetails }]} { id: 1, uavid: 'UAV-0001', uavtype: 'UAV-M100', uavstate: '正常', uavpayloadcapacity: '10', premaintenancetime: '2023-05-01', ammunitioninfo: '弹药数量：1000', Operation: [{ label: '查看详情', type: 'primary', icon: 'EditPen', click: uavseedetails }] }
] ]
} }
]) ])
const Operation = ref( [ { label: '查看详情', type: 'primary', icon: 'EditPen', click: uavseedetails }]) const Operation = ref([{ label: '查看详情', type: 'primary', icon: 'EditPen', click: uavseedetails }])
const initTableData = () => { const initTableData = () => {
// 这里要使用无人机列表接口 // 这里要使用无人机列表接口
// staffGetPageInfoApi({ // staffGetPageInfoApi({
// "currentPageNum": 1, // "currentPageNum": 1,
// "currentPageSize": 10, // "currentPageSize": 10,
// }).then(res => { // }).then(res => {
// if(res.code === 200){ // if(res.code === 200){
// let tempData = res.data.list // let tempData = res.data.list
...@@ -237,26 +241,26 @@ const initTableData = () => { ...@@ -237,26 +241,26 @@ const initTableData = () => {
// tempData = tempData.filter(element => { // tempData = tempData.filter(element => {
// return element.isDeleted === 0; // return element.isDeleted === 0;
// }); // });
// tempData.forEach(element => { // tempData.forEach(element => {
// element.Operation = [...Operation.value] // element.Operation = [...Operation.value]
// }); // });
// tableShowData.value[0].tableBody = tempData // tableShowData.value[0].tableBody = tempData
// tableShowData.value[0].total = res.data.total // tableShowData.value[0].total = res.data.total
// tableShowData.value[0].pageSize = res.data.pageSize // tableShowData.value[0].pageSize = res.data.pageSize
// console.log(tableShowData.value, '展示数据'); // console.log(tableShowData.value, '展示数据');
// } // }
// }).catch(err => { // }).catch(err => {
// message.error(err.message) // message.error(err.message)
// }) // })
} }
onMounted(() => { onMounted(() => {
// console.log(tableShowData.value, '错误'); // console.log(tableShowData.value, '错误');
initTableData() initTableData()
}) })
...@@ -332,24 +336,28 @@ const containerStyle = computed(() => ({ ...@@ -332,24 +336,28 @@ const containerStyle = computed(() => ({
padding: 10px; padding: 10px;
} }
.title{
.title {
width: 70%; width: 70%;
} }
.card-actions { .card-actions {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* margin-bottom: 1rem; */ /* margin-bottom: 1rem; */
height: 8%; height: 8%;
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -365,30 +373,36 @@ const containerStyle = computed(() => ({ ...@@ -365,30 +373,36 @@ const containerStyle = computed(() => ({
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
/* 文本样式 */ /* 文本样式 */
.page-text { .page-text {
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
white-space: nowrap; /* 防止文本换行 */ white-space: nowrap;
/* 防止文本换行 */
} }
/* 修复 Element Plus 分页组件默认的块级布局问题 */ /* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; /* 清除默认外边距 */ margin: 0;
/* 清除默认外边距 */
} }
.pagination-block{
.pagination-block {
height: 8%; height: 8%;
} }
.card-table{
.card-table {
width: 100%; width: 100%;
/* display: flex; */ /* display: flex; */
/* background-color: #000000; */ /* background-color: #000000; */
flex:1; flex: 1;
overflow: hidden; overflow: hidden;
border-radius: 8PX; border-radius: 8PX;
} }
...@@ -398,7 +412,7 @@ const containerStyle = computed(() => ({ ...@@ -398,7 +412,7 @@ const containerStyle = computed(() => ({
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
vite.config.js
浏览文件 @ 92be75d4
...@@ -5,7 +5,7 @@ import AutoImport from 'unplugin-auto-import/vite'; ...@@ -5,7 +5,7 @@ import AutoImport from 'unplugin-auto-import/vite';
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue(), plugins: [vue(),
AutoImport({ AutoImport({
dts: './auto-imports.d.ts', // 项目根目录生成auto-imports.d.ts配置文件 dts: './auto-imports.d.ts', // 项目根目录生成auto-imports.d.ts配置文件
...@@ -25,7 +25,7 @@ export default defineConfig({ ...@@ -25,7 +25,7 @@ export default defineConfig({
open: true,//自动在默认浏览器上打开 open: true,//自动在默认浏览器上打开
proxy: { proxy: {
'/api': { '/api': {
target: 'http://117.89.29.251:18083/api', //test----------------------尾部214,2,31,12,11都可以,登不上时换个试试 target: 'http://117.89.29.251:18083/api', //
// target: 'http://172.16.34.76:18088', // target: 'http://172.16.34.76:18088',
ws: false,//代理websocked ws: false,//代理websocked
changeOrigin: true, //是否跨域 changeOrigin: true, //是否跨域
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论