提交 92be75d4 authored 作者: 刘佳星-公司's avatar 刘佳星-公司

去除警告

上级 1e443c8e
...@@ -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",
......
...@@ -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,9 +97,9 @@ const deleteData = (data) => { ...@@ -97,9 +97,9 @@ 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();
...@@ -143,50 +143,50 @@ const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的 ...@@ -143,50 +143,50 @@ 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 => { }).then(res => {
if(res.code === 200){ if (res.code === 200) {
let tempData = res.data.list let tempData = res.data.list
tableShowData.value[0].tableBody = [] tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据 //获取未逻辑删除的数据
console.log(res.data,"--------999999999----") console.log(res.data, "--------999999999----")
tempData = tempData.filter(element => { tempData = tempData.filter(element => {
return element.isDeleted === 0; return element.isDeleted === 0;
}); });
...@@ -287,9 +287,11 @@ const containerStyle = computed(() => ({ ...@@ -287,9 +287,11 @@ 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;
...@@ -301,10 +303,12 @@ const containerStyle = computed(() => ({ ...@@ -301,10 +303,12 @@ const containerStyle = computed(() => ({
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -322,28 +326,34 @@ const containerStyle = computed(() => ({ ...@@ -322,28 +326,34 @@ const containerStyle = computed(() => ({
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;
} }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<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="">
...@@ -19,27 +19,25 @@ ...@@ -19,27 +19,25 @@
<!-- 左侧下部分:统计区域 --> <!-- 左侧下部分:统计区域 -->
<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>
...@@ -65,19 +63,19 @@ const fireInfoDataImportBackcallFn = (info) => { ...@@ -65,19 +63,19 @@ const fireInfoDataImportBackcallFn = (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
} }
...@@ -86,9 +84,9 @@ const fireInfoDataImportFn = () => { ...@@ -86,9 +84,9 @@ const fireInfoDataImportFn = () => {
// 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,9 +151,9 @@ const deleteData = (data) => { ...@@ -153,9 +151,9 @@ 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();
...@@ -201,48 +199,48 @@ const closeResetPasswordDialogFn = () => { ...@@ -201,48 +199,48 @@ 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,
...@@ -354,16 +352,19 @@ const containerStyle = computed(() => ({ ...@@ -354,16 +352,19 @@ 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; */
...@@ -375,11 +376,13 @@ const containerStyle = computed(() => ({ ...@@ -375,11 +376,13 @@ const containerStyle = computed(() => ({
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;
...@@ -397,23 +400,29 @@ const containerStyle = computed(() => ({ ...@@ -397,23 +400,29 @@ const containerStyle = computed(() => ({
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; */
......
...@@ -5,12 +5,13 @@ ...@@ -5,12 +5,13 @@
<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%;">
...@@ -49,9 +50,13 @@ ...@@ -49,9 +50,13 @@
<!-- </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" >
...@@ -85,9 +90,9 @@ ...@@ -85,9 +90,9 @@
</div> </div>
<div style="margin: 20px 0 10px 0;" >详细建筑列表</div> <div style="margin: 20px 0 10px 0;">详细建筑列表</div>
<el-table stripe :data="buildData" width="1000" class="table___" <el-table stripe :data="buildData" width="1000" class="table___" element-loading-background="rgba(0, 0, 0, 0.3)"
element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="360" :row-style="{ height: '5px' }" style="overflow: auto"> :max-height="360" :row-style="{ height: '5px' }" style="overflow: auto">
<el-table-column label="建筑名称" align="center"> <el-table-column label="建筑名称" align="center">
<template #default="scope"> <template #default="scope">
...@@ -116,28 +121,20 @@ ...@@ -116,28 +121,20 @@
<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">
:icon="InfoFilled"
icon-color="red"
title="确定要删除这条记录吗?"
@cancel="onCancel"
>
<template #reference> <template #reference>
<el-button style="width: 20%;color: #fff;height: 42px;" color="#06B0E1">删除</el-button> <el-button style="width: 20%;color: #fff;height: 42px;" color="#06B0E1">删除</el-button>
</template> </template>
<template #actions="{ confirm, cancel }"> <template #actions="{ confirm, cancel }">
<el-button size="small" @click="deleteCancel(cancel)">取消</el-button> <el-button size="small" @click="deleteCancel(cancel)">取消</el-button>
<el-button <el-button type="danger" size="small" @click="deleteConfirm(confirm)">
type="danger"
size="small"
@click="deleteConfirm(confirm)"
>
确认 确认
</el-button> </el-button>
</template> </template>
...@@ -155,59 +152,33 @@ ...@@ -155,59 +152,33 @@
</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="更换鸟瞰图"
width="500px"
:before-close="handleClose"
>
<updataImgInfo :file="aerialViewUrl" @changeAerialView="changeAerialView" :updataImageCount="1" ></updataImgInfo>
</el-dialog> </el-dialog>
<!-- 展示鸟瞰图 --> <!-- 展示鸟瞰图 -->
<el-dialog <el-dialog v-model="isShowAerialView" width="900px" custom-class="left-slide-dialog"
v-model="isShowAerialView" style="background-color: rgba(0, 0, 0, 0)">
width="900px"
custom-class="left-slide-dialog"
style="background-color: rgba(0, 0, 0, 0)"
>
<div> <div>
<img style="width: 100%;height: auto;" :src="aerialViewUrl" alt="加载失败"> <img style="width: 100%;height: auto;" :src="aerialViewUrl" alt="加载失败">
</div> </div>
</el-dialog> </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"
style="background-color: rgba(0, 0, 0, 0);
margin-top: 5%;"
@close="showChangeInfohandleClose"
>
<el-form
:model="updataFormData"
:rules="updataFormRules"
ref="updataFormRef"
>
<div class="building-form-container"> <div class="building-form-container">
<el-collapse v-model="activeNames" class="transparent-collapse"> <el-collapse v-model="activeNames" class="transparent-collapse">
<!-- 移除 accordion 属性,并设置 activeNames 包含所有项 --> <!-- 移除 accordion 属性,并设置 activeNames 包含所有项 -->
<!-- 建筑名称 --> <!-- 建筑名称 -->
<el-collapse-item title="建筑名称" name="1" > <el-collapse-item title="建筑名称" name="1">
<div class="form-item"> <div class="form-item">
<el-form-item prop="name"> <el-form-item prop="name">
<el-input <el-input v-model="updataFormData.name" placeholder="请输入建筑名称" clearable />
v-model="updataFormData.name"
placeholder="请输入建筑名称"
clearable
/>
</el-form-item> </el-form-item>
</div> </div>
</el-collapse-item> </el-collapse-item>
...@@ -216,12 +187,7 @@ ...@@ -216,12 +187,7 @@
<el-collapse-item title="建筑层数" name="2"> <el-collapse-item title="建筑层数" name="2">
<div class="form-item"> <div class="form-item">
<el-form-item prop="floors"> <el-form-item prop="floors">
<el-input-number <el-input-number v-model="updataFormData.floors" :min="1" :max="100" controls-position="right" />
v-model="updataFormData.floors"
:min="1"
:max="100"
controls-position="right"
/>
</el-form-item> </el-form-item>
<span class="unit"></span> <span class="unit"></span>
</div> </div>
...@@ -231,37 +197,23 @@ ...@@ -231,37 +197,23 @@
<el-collapse-item title="内部结构" name="3"> <el-collapse-item title="内部结构" name="3">
<div class="image-uploader"> <div class="image-uploader">
<div class="image-preview-container"> <div class="image-preview-container">
<div <div v-for="(img, index) in updataFormData.images" :key="index" class="image-preview">
v-for="(img, index) in updataFormData.images" <el-image :src="img.url" fit="cover" class="preview-image" />
:key="index"
class="image-preview"
>
<el-image
:src="img.url"
fit="cover"
class="preview-image"
/>
<div class="image-actions"> <div class="image-actions">
<el-button <el-button type="danger" size="small" circle @click="removeImage(index)">
type="danger" <el-icon>
size="small" <Delete />
circle </el-icon>
@click="removeImage(index)"
>
<el-icon><Delete /></el-icon>
</el-button> </el-button>
</div> </div>
</div> </div>
</div> </div>
<el-upload <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleImageChange"
action="#" :show-file-list="false">
list-type="picture-card" <el-icon>
:auto-upload="false" <Plus />
:on-change="handleImageChange" </el-icon>
:show-file-list="false"
>
<el-icon><Plus /></el-icon>
</el-upload> </el-upload>
</div> </div>
</el-collapse-item> </el-collapse-item>
...@@ -270,15 +222,8 @@ ...@@ -270,15 +222,8 @@
<el-collapse-item title="建筑描述" name="4"> <el-collapse-item title="建筑描述" name="4">
<div class="form-item"> <div class="form-item">
<el-form-item prop="description" style="background-color: blue;"> <el-form-item prop="description" style="background-color: blue;">
<el-input <el-input v-model="updataFormData.description" type="textarea" :rows="4" placeholder="请输入建筑描述(5-500字)"
v-model="updataFormData.description" :minlength="10" :maxlength="500" show-word-limit />
type="textarea"
:rows="4"
placeholder="请输入建筑描述(5-500字)"
:minlength="10"
:maxlength="500"
show-word-limit
/>
</el-form-item> </el-form-item>
</div> </div>
</el-collapse-item> </el-collapse-item>
...@@ -286,10 +231,14 @@ ...@@ -286,10 +231,14 @@
<div class="form-actions"> <div class="form-actions">
<el-button v-if="!isAddBuild" type="primary" @click="handleSubmit('update')"> <el-button v-if="!isAddBuild" type="primary" @click="handleSubmit('update')">
<el-icon><Edit /></el-icon>确认修改 <el-icon>
<Edit />
</el-icon>确认修改
</el-button> </el-button>
<el-button v-else type="success" @click="handleSubmit('create')"> <el-button v-else type="success" @click="handleSubmit('create')">
<el-icon><Plus /></el-icon>确认新增 <el-icon>
<Plus />
</el-icon>确认新增
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -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,13 +355,13 @@ const showChangeInfohandleClose = (done) => { ...@@ -406,13 +355,13 @@ 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("------------我是修改",);
...@@ -428,7 +377,7 @@ const imgUrl = ref('')//图片地址 ...@@ -428,7 +377,7 @@ 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
...@@ -477,7 +426,7 @@ const detailBuildListShow = () => { ...@@ -477,7 +426,7 @@ const detailBuildListShow = () => {
type: 'warning', type: 'warning',
}) })
} else { } else {
console.log('detailBuildListShow',build) console.log('detailBuildListShow', build)
} }
} }
...@@ -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,15 +551,20 @@ const buildchangeFn = () => { ...@@ -598,15 +551,20 @@ 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%; gap: 75%;
width: 200px; /* 给容器一个宽度 */ width: 200px;
/* 给容器一个宽度 */
} }
.query-btn { .query-btn {
width: 100%; width: 100%;
margin-top: 30%; margin-top: 30%;
...@@ -619,7 +577,8 @@ const buildchangeFn = () => { ...@@ -619,7 +577,8 @@ const buildchangeFn = () => {
margin-left: -16%; margin-left: -16%;
color: #fff; color: #fff;
} }
.button2_container{
.button2_container {
width: 40%; width: 40%;
position: absolute; position: absolute;
...@@ -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;
} }
......
...@@ -2,46 +2,21 @@ ...@@ -2,46 +2,21 @@
<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'"
v-model="items.content"
:placeholder="items.placeholder"
clearable
>
<el-option
v-for="building in items.options"
:key="building.value"
:label="building.label"
:value="building.value"
/>
</el-select> </el-select>
<el-autocomplete v-else-if="items.type === 'autocomplete'" <el-autocomplete v-else-if="items.type === 'autocomplete'" v-model="items.content"
v-model="items.content" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable class="inline-input w-50"
:fetch-suggestions="querySearch" placeholder="请输入" @input="getAllListInfoFn(items)" />
:trigger-on-focus="false" <el-date-picker v-else v-model="items.content" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
clearable :default-value="defaultDateRange" @change="getAllListInfoFn" :disabled-date="disableFutureDates"
class="inline-input w-50" style="max-width: 220px;" />
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>
...@@ -49,18 +24,10 @@ ...@@ -49,18 +24,10 @@
<!-- 操作按钮组 --> <!-- 操作按钮组 -->
<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,17 +38,17 @@ ...@@ -71,17 +38,17 @@
<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('按钮操作显示标识错误')
} }
...@@ -156,27 +123,27 @@ const getAllListInfoFn = (item) => { ...@@ -156,27 +123,27 @@ const getAllListInfoFn = (item) => {
} }
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返回数据')
} }
...@@ -184,19 +151,19 @@ const buildingGetBuildCodeListApiFn = (item) => { ...@@ -184,19 +151,19 @@ const buildingGetBuildCodeListApiFn = (item) => {
}; };
// 返回的数据不对应当[楼层数]不是【建筑名称】 // 返回的数据不对应当[楼层数]不是【建筑名称】
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返回数据')
} }
...@@ -204,9 +171,9 @@ const buildingGetBuildNameListFn = (item) => { ...@@ -204,9 +171,9 @@ const buildingGetBuildNameListFn = (item) => {
} }
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返回数据')
} }
...@@ -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;
} }
...@@ -291,9 +258,10 @@ const resetSearchForm = () => { ...@@ -291,9 +258,10 @@ const resetSearchForm = () => {
justify-content: space-between; justify-content: space-between;
} }
.operation-buttons { .operation-buttons {
width: 20%; width: 20%;
padding-left: 5%; padding-left: 5%;
} }
......
...@@ -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,31 +38,24 @@ ...@@ -33,31 +38,24 @@
</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%;"
:before-close="beforCloseAddDrawer">
<editinfo :rowData="rowData" @closeEditDrawer="closeEditDrawer" @tableDataRefresh="tableDataRefresh"></editinfo> <editinfo :rowData="rowData" @closeEditDrawer="closeEditDrawer" @tableDataRefresh="tableDataRefresh"></editinfo>
</el-drawer> </el-drawer>
<!-- 用户信息弹窗 --> <!-- 用户信息弹窗 -->
<el-dialog <el-dialog v-model="isUserInfoDialogVisible" title="用户信息" width="800">
v-model="isUserInfoDialogVisible"
title="用户信息"
width="800"
>
<userinfo :userInfo="showuserinfodata" :isUserInfoDialogVisible="isUserInfoDialogVisible"></userinfo> <userinfo :userInfo="showuserinfodata" :isUserInfoDialogVisible="isUserInfoDialogVisible"></userinfo>
</el-dialog> </el-dialog>
<!-- 重置密码弹窗 --> <!-- 重置密码弹窗 -->
<el-dialog <el-dialog v-model="isResetPasswordDialogVisible" title="重置密码" width="800" close="beforCloseAddDrawer"
v-model="isResetPasswordDialogVisible" :close-on-click-modal=false :show-close='false'>
title="重置密码" <resetpassword :userInfo="resetPasswordData" @closeResetPasswordDialogFn="closeResetPasswordDialogFn"
width="800" :isResetPasswordDialogVisible="isResetPasswordDialogVisible"></resetpassword>
close="beforCloseAddDrawer"
:close-on-click-modal = false
:show-close = 'false'
>
<resetpassword :userInfo="resetPasswordData" @closeResetPasswordDialogFn="closeResetPasswordDialogFn" :isResetPasswordDialogVisible="isResetPasswordDialogVisible"></resetpassword>
</el-dialog> </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,7 +117,7 @@ const beforCloseAddDrawer = () => { ...@@ -119,7 +117,7 @@ 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) {
...@@ -174,8 +172,8 @@ const closeEditDrawer = () => { ...@@ -174,8 +172,8 @@ 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(
'删除操作不可逆,是否继续?', '删除操作不可逆,是否继续?',
'删除', '删除',
...@@ -191,7 +189,7 @@ const deleteData = (data) => { ...@@ -191,7 +189,7 @@ const deleteData = (data) => {
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: '已删除' });
...@@ -211,7 +209,7 @@ const deleteData = (data) => { ...@@ -211,7 +209,7 @@ const deleteData = (data) => {
message: '取消删除', message: '取消删除',
}) })
}) })
}else{ } else {
ElMessage.error("没有权限打开编辑抽屉") ElMessage.error("没有权限打开编辑抽屉")
} }
} catch (error) { } catch (error) {
...@@ -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,43 +248,43 @@ const resetData = (data) => { ...@@ -250,43 +248,43 @@ 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 => { }).then(res => {
if(res.code === 200){ if (res.code === 200) {
let tempData = res.data.list let tempData = res.data.list
tableShowData.value[0].tableBody = [] tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据 //获取未逻辑删除的数据
console.log(res.data,"--------999999999----") console.log(res.data, "--------999999999----")
tempData = tempData.filter(element => { tempData = tempData.filter(element => {
return element.isDeleted === 0; return element.isDeleted === 0;
}); });
...@@ -401,9 +399,11 @@ watch(route, () => { ...@@ -401,9 +399,11 @@ watch(route, () => {
padding: 10px; padding: 10px;
} }
.title{
.title {
width: 70%; width: 70%;
} }
.card-actions { .card-actions {
display: flex; display: flex;
flex: 1; flex: 1;
...@@ -415,10 +415,12 @@ watch(route, () => { ...@@ -415,10 +415,12 @@ watch(route, () => {
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -436,28 +438,34 @@ watch(route, () => { ...@@ -436,28 +438,34 @@ watch(route, () => {
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;
} }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<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>
...@@ -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: [] },
] ]
} }
]) ])
...@@ -292,9 +292,10 @@ const containerStyle = computed(() => ({ ...@@ -292,9 +292,10 @@ const containerStyle = computed(() => ({
min-width: 200px; min-width: 200px;
} }
.card-title{
.card-title {
height: 5%; height: 5%;
background-color:#0b07ff; background-color: #0b07ff;
border-radius: 8px 0; border-radius: 8px 0;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -304,7 +305,8 @@ const containerStyle = computed(() => ({ ...@@ -304,7 +305,8 @@ const containerStyle = computed(() => ({
font-weight: bold; font-weight: bold;
border-bottom: #606266 1px solid; border-bottom: #606266 1px solid;
} }
.content{
.content {
height: 95%; height: 95%;
background-color: #000000; background-color: #000000;
display: flex; display: flex;
...@@ -351,9 +353,11 @@ const containerStyle = computed(() => ({ ...@@ -351,9 +353,11 @@ 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;
...@@ -365,10 +369,12 @@ const containerStyle = computed(() => ({ ...@@ -365,10 +369,12 @@ const containerStyle = computed(() => ({
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -386,28 +392,34 @@ const containerStyle = computed(() => ({ ...@@ -386,28 +392,34 @@ const containerStyle = computed(() => ({
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;
} }
......
...@@ -7,20 +7,24 @@ ...@@ -7,20 +7,24 @@
<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>
...@@ -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,9 +140,9 @@ const deleteData = (data) => { ...@@ -136,9 +140,9 @@ 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();
...@@ -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,23 +209,23 @@ const uavseedetails = (data) => { ...@@ -205,23 +209,23 @@ 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({
...@@ -332,9 +336,11 @@ const containerStyle = computed(() => ({ ...@@ -332,9 +336,11 @@ 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;
...@@ -346,10 +352,12 @@ const containerStyle = computed(() => ({ ...@@ -346,10 +352,12 @@ const containerStyle = computed(() => ({
padding: 1.5rem; padding: 1.5rem;
} }
.operation-button { .operation-button {
width: 15%; width: 15%;
} }
.card-tabs-footer { .card-tabs-footer {
display: flex; display: flex;
...@@ -367,28 +375,34 @@ const containerStyle = computed(() => ({ ...@@ -367,28 +375,34 @@ const containerStyle = computed(() => ({
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;
} }
......
...@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论