Skip to content

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

去除警告

上级 1e443c8e
显示空白字符变更
内嵌 并排
正在显示 包含 407 行增加 和 425 行删除
package-lock.json
浏览文件 @ 92be75d4
......@@ -22,8 +22,8 @@
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vuedraggable": "4.1.0",
"vxe-pc-ui": "^4.8.20",
"vxe-table": "^4.15.9"
"vxe-pc-ui": "~4.8.20",
"vxe-table": "~4.15.9"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
......
src/views/areabuildmanage/onefloor/index.vue
浏览文件 @ 92be75d4
......@@ -33,9 +33,9 @@ import { message } from 'ant-design-vue';
// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([
{ 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: '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: '巡查员' }] },
])
// 响应式布局配置
const layoutConfig = reactive({
......@@ -76,7 +76,7 @@ const editData = (data) => {
// 设置要编辑的数据
rowData.value = data
console.log("000000-------1-----0000000000",data)
console.log("000000-------1-----0000000000", data)
}
/**
......@@ -85,7 +85,7 @@ const editData = (data) => {
* 显示确认对话框，用户确认后执行删除操作
*/
const deleteData = (data) => {
console.log("000000---2---------0000000000",data)
console.log("000000---2---------0000000000", data)
ElMessageBox.confirm(
'删除操作不可逆，是否继续?',
'删除',
......@@ -97,9 +97,9 @@ const deleteData = (data) => {
}
)
.then(() => {
console.log("000000---1-456464564------0000000000","我是确认")
console.log("000000---1-456464564------0000000000", "我是确认")
try {
const res = staffRemoveInfoApi({id:data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -143,50 +143,50 @@ const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的
const resetPasswordData = ref({});
const resetData = (data) => {
console.log("000000-----3-------0000000000",data)
console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data;
}
const showuserinfodata = ref({})
const userData = (data) => {
console.log("000000------4------0000000000",data)
console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true
showuserinfodata.value = data
}
const tableShowData = ref([{
tableHeader:[
{label: '姓名', prop: 'name'},
{label: '电话', prop: 'phone'},
{label: '是否可用', prop: 'status'},
{label: '用户权限', prop: 'role'},
{label: '创建时间', prop: 'createTime'},
{label: '更新时间', prop: 'updateTime'},
{label: '操作', prop: 'Operation'}
],
tableBody:[
tableHeader: [
{ label: '姓名', prop: 'name' },
{ label: '电话', prop: 'phone' },
{ label: '是否可用', prop: 'status' },
{ label: '用户权限', prop: 'role' },
{ label: '创建时间', prop: 'createTime' },
{ label: '更新时间', prop: 'updateTime' },
{ label: '操作', prop: 'Operation' }
],
tableBody: [
]
}
])
const Operation = ref( [ { 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 }]
const Operation = ref([{ 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 }]
)
)
const initTableData = () => {
staffGetPageInfoApi({
"currentPageNum": 1,
"currentPageSize": 10,
}).then(res => {
if(res.code === 200){
if (res.code === 200) {
let tempData = res.data.list
tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据
console.log(res.data,"--------999999999----")
console.log(res.data, "--------999999999----")
tempData = tempData.filter(element => {
return element.isDeleted === 0;
});
......@@ -287,9 +287,11 @@ const containerStyle = computed(() => ({
padding: 10px;
}
.title{
.title {
width: 70%;
}
.card-actions {
display: flex;
flex: 1;
......@@ -301,10 +303,12 @@ const containerStyle = computed(() => ({
padding: 1.5rem;
}
.operation-button {
width: 15%;
}
.card-tabs-footer {
display: flex;
......@@ -322,28 +326,34 @@ const containerStyle = computed(() => ({
align-items: center;
}
/* 文本样式 */
.page-text {
color: #606266;
font-size: 14px;
white-space: nowrap; /* 防止文本换行 */
white-space: nowrap;
/* 防止文本换行 */
}
/* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination {
:deep(.el-pagination) {
display: flex;
align-items: center;
margin: 0; /* 清除默认外边距 */
margin: 0;
/* 清除默认外边距 */
}
.pagination-block{
.pagination-block {
height: 8%;
}
.card-table{
.card-table {
width: 100%;
/* display: flex; */
/* background-color: #000000; */
flex:1;
flex: 1;
overflow: hidden;
border-radius: 8PX;
}
......
src/views/areafiremanage/historyfire/components/floordetail.vue
浏览文件 @ 92be75d4
......@@ -8,7 +8,7 @@
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<div class="card-tabs">
<span class="title" >历史火情详情</span>
<span class="title">历史火情详情</span>
</div>
<div class="first-card-content">
<img src="https://picsum.photos/300/200" alt="">
......@@ -19,27 +19,25 @@
<!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts">
<div class="card-tabs">
<span class="title" >火情汇报列表</span>
<span class="title">火情汇报列表</span>
<div class="card-actions">
<!-- <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="primary" @click="addFireInfoDataImportFn" >新增</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>
</div>
</div>
<div class="card-table">
<!-- 表格 -->
<Tableshowdetail :tableShowData="tableShowData" @fireInfoDataImportBackcallFn="fireInfoDataImportBackcallFn"></Tableshowdetail>
<Tableshowdetail :tableShowData="tableShowData"
@fireInfoDataImportBackcallFn="fireInfoDataImportBackcallFn"></Tableshowdetail>
</div>
</div>
</div>
</main>
<!-- 新增添加框 -->
<el-drawer
v-model="addFireInfoDataImportFndrawer"
:with-header="false"
>
<el-drawer v-model="addFireInfoDataImportFndrawer" :with-header="false">
<addFireInfo></addFireInfo>
</el-drawer>
</div>
......@@ -65,19 +63,19 @@ const fireInfoDataImportBackcallFn = (info) => {
}
const fireInfoDataDeleteFn = () => {
if ( fireInfoDataImport ===undefined ||fireInfoDataImport.value===null || fireInfoDataImport.value.length<=0 ) {
if (fireInfoDataImport === undefined || fireInfoDataImport.value === null || fireInfoDataImport.value.length <= 0) {
ElMessage.warning("没有勾选数据")
}else {
console.log("删除数据",fireInfoDataImport.value)
} else {
console.log("删除数据", fireInfoDataImport.value)
fireInfoDataImport.value = null
}
}
const fireInfoDataImportFn = () => {
if ( fireInfoDataImport ===undefined ||fireInfoDataImport.value===null || fireInfoDataImport.value.length<=0 ) {
if (fireInfoDataImport === undefined || fireInfoDataImport.value === null || fireInfoDataImport.value.length <= 0) {
ElMessage.warning("没有勾选数据")
}else {
console.log("导入数据",fireInfoDataImport.value)
} else {
console.log("导入数据", fireInfoDataImport.value)
fireInfoDataImport.value = null
}
......@@ -86,9 +84,9 @@ const fireInfoDataImportFn = () => {
// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([
{ 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: '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: '巡查员' }] },
])
// 响应式布局配置
const layoutConfig = reactive({
......@@ -132,7 +130,7 @@ const editData = (data) => {
// 设置要编辑的数据
rowData.value = data
console.log("000000-------1-----0000000000",data)
console.log("000000-------1-----0000000000", data)
}
/**
......@@ -141,7 +139,7 @@ const editData = (data) => {
* 显示确认对话框，用户确认后执行删除操作
*/
const deleteData = (data) => {
console.log("000000---2---------0000000000",data)
console.log("000000---2---------0000000000", data)
ElMessageBox.confirm(
'删除操作不可逆，是否继续?',
'删除',
......@@ -153,9 +151,9 @@ const deleteData = (data) => {
}
)
.then(() => {
console.log("000000---1-456464564------0000000000","我是确认")
console.log("000000---1-456464564------0000000000", "我是确认")
try {
const res = staffRemoveInfoApi({id:data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -201,48 +199,48 @@ const closeResetPasswordDialogFn = () => {
}
const resetPasswordData = ref({});
const resetData = (data) => {
console.log("000000-----3-------0000000000",data)
console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data;
}
const showuserinfodata = ref({})
const userData = (data) => {
console.log("000000------4------0000000000",data)
console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true
showuserinfodata.value = data
}
const tableShowData =[ {
const tableShowData = [{
id: 1,
fireNo:12,
updataTime:'2016-05-04',
fireNo: 12,
updataTime: '2016-05-04',
name: 'Aleyna Kutzner',
floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
reporter:"张三",
reporter: "张三",
discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis',
fireLevel: '1级',
firePoint: '厨房',
},
{
},
{
id: 1,
fireNo:12,
updataTime:'2016-05-04',
fireNo: 12,
updataTime: '2016-05-04',
name: 'Aleyna Kutzner',
floorcount: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
reporter:"张三",
reporter: "张三",
discription: 'Lorem ipsum dolor sit ametisl nisl nisl nisl nisl nisl nisl nisl nis',
fireLevel: '1级',
firePoint: '厨房',
}]
}]
const Operation = ref( [ { 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 }]
const Operation = ref([{ 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 }]
)
)
const initTableData = () => {
// staffGetPageInfoApi({
// "currentPageNum": 1,
......@@ -354,16 +352,19 @@ const containerStyle = computed(() => ({
padding: 1rem;
}
.first-card-content{
.first-card-content {
width: 100%;
height: 100%;
padding-top: 1rem ;
padding-top: 1rem;
}
.title{
.title {
/* width: 100%; */
/* background-color: #000000; */
}
.card-actions {
display: flex;
/* flex: 1; */
......@@ -375,11 +376,13 @@ const containerStyle = computed(() => ({
padding: 1.5rem;
}
.operation-button {
/* width: 15%; */
width: 100%;
}
.card-tabs-footer {
display: flex;
......@@ -397,23 +400,29 @@ const containerStyle = computed(() => ({
align-items: center;
}
/* 文本样式 */
.page-text {
color: #606266;
font-size: 14px;
white-space: nowrap; /* 防止文本换行 */
white-space: nowrap;
/* 防止文本换行 */
}
/* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination {
:deep(.el-pagination) {
display: flex;
align-items: center;
margin: 0; /* 清除默认外边距 */
margin: 0;
/* 清除默认外边距 */
}
.pagination-block{
.pagination-block {
height: 8%;
}
.card-table{
.card-table {
width: 100%;
/* display: flex; */
......
src/views/buildManage/index.vue
浏览文件 @ 92be75d4
......@@ -5,12 +5,13 @@
<div class="contenterTitle" style="height: 95%;">
<div class="title">
<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 class="container" >
<div class="container">
<div class="titleimg" >
<div class="titleimg">
<img class="titleimg1" @click="bigImgFn" src="../../static/image/loginback.png" alt="">
</div>
<div style="width: 100%;height: 100%;">
......@@ -49,9 +50,13 @@
<!-- </div> -->
</div>
<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="add-btn" size="large" style="width: 100%;height: 15%; color: #fff;margin-top: 40%;" color="#06B0E1" @click="updateBuildInfoFn()">新增建筑</el-button>
<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="add-btn" size="large"
style="width: 100%;height: 15%; color: #fff;margin-top: 40%;" color="#06B0E1"
@click="updateBuildInfoFn()">新增建筑</el-button>
</div>
<!-- <div class="buildfilter" >
<div class="buildf1" >
......@@ -85,9 +90,9 @@
</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">
<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">
......@@ -116,28 +121,20 @@
<el-table-column property="btn" label="操作" width="200" align="center">
<template #default="scope">
<div >
<div>
<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: 10% ;color: #fff;" color="#06B0E1" @click="updateBuildInfoFn(scope)">修改</el-button>
<el-button type="primary" size="large" style="width: 40%; color: #fff;"
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-popconfirm
:icon="InfoFilled"
icon-color="red"
title="确定要删除这条记录吗？"
@cancel="onCancel"
>
<el-popconfirm :icon="InfoFilled" icon-color="red" title="确定要删除这条记录吗？" @cancel="onCancel">
<template #reference>
<el-button style="width: 20%;color: #fff;height: 42px;" color="#06B0E1">删除</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="deleteCancel(cancel)">取消</el-button>
<el-button
type="danger"
size="small"
@click="deleteConfirm(confirm)"
>
<el-button type="danger" size="small" @click="deleteConfirm(confirm)">
确认
</el-button>
</template>
......@@ -155,59 +152,33 @@
</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
v-model="isChangeBuildAerialView"
title="更换鸟瞰图"
width="500px"
:before-close="handleClose"
>
<updataImgInfo :file="aerialViewUrl" @changeAerialView="changeAerialView" :updataImageCount="1" ></updataImgInfo>
<el-dialog v-model="isChangeBuildAerialView" title="更换鸟瞰图" width="500px" :before-close="handleClose">
<updataImgInfo :file="aerialViewUrl" @changeAerialView="changeAerialView" :updataImageCount="1"></updataImgInfo>
</el-dialog>
<!-- 展示鸟瞰图 -->
<el-dialog
v-model="isShowAerialView"
width="900px"
custom-class="left-slide-dialog"
style="background-color: rgba(0, 0, 0, 0)"
>
<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
v-model="isShowChangeInfo"
width="900px"
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"
>
<el-dialog v-model="isShowChangeInfo" width="900px" 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">
<el-collapse v-model="activeNames" class="transparent-collapse">
<!-- 移除 accordion 属性，并设置 activeNames 包含所有项 -->
<!-- 建筑名称 -->
<el-collapse-item title="建筑名称" name="1" >
<el-collapse-item title="建筑名称" name="1">
<div class="form-item">
<el-form-item prop="name">
<el-input
v-model="updataFormData.name"
placeholder="请输入建筑名称"
clearable
/>
<el-input v-model="updataFormData.name" placeholder="请输入建筑名称" clearable />
</el-form-item>
</div>
</el-collapse-item>
......@@ -216,12 +187,7 @@
<el-collapse-item title="建筑层数" name="2">
<div class="form-item">
<el-form-item prop="floors">
<el-input-number
v-model="updataFormData.floors"
:min="1"
:max="100"
controls-position="right"
/>
<el-input-number v-model="updataFormData.floors" :min="1" :max="100" controls-position="right" />
</el-form-item>
<span class="unit">层</span>
</div>
......@@ -231,37 +197,23 @@
<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 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 type="danger" size="small" circle @click="removeImage(index)">
<el-icon>
<Delete />
</el-icon>
</el-button>
</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 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>
......@@ -270,15 +222,8 @@
<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-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>
......@@ -286,10 +231,14 @@
<div class="form-actions">
<el-button v-if="!isAddBuild" type="primary" @click="handleSubmit('update')">
<el-icon><Edit /></el-icon>确认修改
<el-icon>
<Edit />
</el-icon>确认修改
</el-button>
<el-button v-else type="success" @click="handleSubmit('create')">
<el-icon><Plus /></el-icon>确认新增
<el-icon>
<Plus />
</el-icon>确认新增
</el-button>
</div>
</div>
......@@ -307,7 +256,7 @@ import imgupload from '../../components/ImageUpload/index.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import updataImgInfo from './updataImgInfo.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';
onMounted(() => {
......@@ -323,15 +272,15 @@ onMounted(() => {
})
const changeAerialView = (url)=>{
const changeAerialView = (url) => {
//通过子组件调用了父组件的funcToSon()方法，获取服务器的返回地址，更新到aerialViewUrl中
console.log("子组件调用了父组件的funcToSon()方法",url)
console.log("子组件调用了父组件的funcToSon()方法", url)
aerialViewUrl.value = url
isChangeBuildAerialView.value = false
}
const isAddBuild = ref(false) // 是否是新增建筑按钮
const activeNames = ref(['1','2', '3', '4' ]) // 默认展开第一项
const activeNames = ref(['1', '2', '3', '4']) // 默认展开第一项
const updataFormData = reactive({
name: '',
......@@ -406,13 +355,13 @@ const showChangeInfohandleClose = (done) => {
// 通过新增或者修改的方式更新建筑列表信息
const updateBuildInfoFn = (info) => {
isShowChangeInfo.value = true
console.log("------------可获取到当前的需要修改的建筑信息",info);
console.log("------------可获取到当前的需要修改的建筑信息", info);
if (info === '' || info === undefined) {
isAddBuild.value = true
console.log("------------我是新增",);
} else{
} else {
// 修改这里的info和formData的字段不一致的问题
updataFormData.value= info,
updataFormData.value = info,
isAddBuild.value = false
console.log("------------我是修改",);
......@@ -428,7 +377,7 @@ const imgUrl = ref('')//图片地址
const images = ref([])
const bigImgFn = () => {
isShowAerialView.value = true
aerialViewUrl.value ='../../static/image/loginback.png'
aerialViewUrl.value = '../../static/image/loginback.png'
console.log(aerialViewUrl.value)
}
const aerialViewUrl = ref('')//展示的鸟瞰图url
......@@ -477,7 +426,7 @@ const detailBuildListShow = () => {
type: 'warning',
})
} else {
console.log('detailBuildListShow',build)
console.log('detailBuildListShow', build)
}
}
......@@ -487,7 +436,7 @@ const build = ref({
})
// 用于展示查询建筑列表的条件信息
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([
{
aaa0: '建筑1',
......@@ -572,16 +521,20 @@ const buildchangeFn = () => {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
font-size: 16px;
color: #FFFFFF ;
color: #FFFFFF;
}
.container {
/* background-color: #06a0cf; */
height: 36%;
display: flex;
/* 可选的对齐方式 */
align-items: center; /* 垂直居中对齐 */
gap: 10px; /* 两个div之间的间距 */
align-items: center;
/* 垂直居中对齐 */
gap: 10px;
/* 两个div之间的间距 */
}
.titleimg {
width: 30vw;
height: 30vh;
......@@ -598,15 +551,20 @@ const buildchangeFn = () => {
display: flex;
width: 60%;
/* height: 100%; */
flex-direction: row; /* 垂直排列 */
flex-direction: row;
/* 垂直排列 */
}
.buildButton {
display: flex;
flex-direction: column; /* 垂直排列 */
flex-direction: column;
/* 垂直排列 */
gap: 75%;
width: 200px; /* 给容器一个宽度 */
width: 200px;
/* 给容器一个宽度 */
}
.query-btn {
width: 100%;
margin-top: 30%;
......@@ -619,7 +577,8 @@ const buildchangeFn = () => {
margin-left: -16%;
color: #fff;
}
.button2_container{
.button2_container {
width: 40%;
position: absolute;
......@@ -634,15 +593,18 @@ const buildchangeFn = () => {
display: flex;
margin-left: 10%;
/* align-items: center; */
flex-direction: column; /* 垂直排列 */
flex-direction: column;
/* 垂直排列 */
}
.form_row {
margin-bottom: 5%;
width: 70%;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: left; /* 水平居中 */
align-items: center;
/* 垂直居中 */
justify-content: left;
/* 水平居中 */
/* gap: 12px; 元素间距 */
}
......@@ -653,8 +615,7 @@ const buildchangeFn = () => {
text-align: center;
}
.buildf2 {
}
.buildf2 {}
/*
......@@ -794,7 +755,7 @@ const buildchangeFn = () => {
margin-left: 5px;
}
.left-slide-dialog{
.left-slide-dialog {
background-color: #072547;
}
......
src/views/commentcomponents/searchtop/index.vue
浏览文件 @ 92be75d4
......@@ -2,46 +2,21 @@
<div class="fire-search-container">
<div class="search-row">
<!-- 火情描述输入框 -->
<div class="search-item" v-for="(items, index) in searchShowData" :key="index" >
<label class="search-label">{{items.label}}</label>
<el-input v-if="items.type === 'input'"
v-model="items.content"
clearable
:disabled="!isShow"
:placeholder="items.placeholder"
/>
<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"
/>
<div class="search-item" v-for="(items, index) in searchShowData" :key="index">
<label class="search-label">{{ items.label }}</label>
<el-input v-if="items.type === 'input'" v-model="items.content" clearable :disabled="!isShow"
:placeholder="items.placeholder" />
<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-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;"
/>
<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>
......@@ -49,18 +24,10 @@
<!-- 操作按钮组 -->
<div class="search-buttons">
<el-button
type="default"
style="width: 45%;"
@click="resetSearchForm"
>
<el-button type="default" style="width: 45%;" @click="resetSearchForm">
重置
</el-button>
<el-button
type="primary"
style="width: 45%;"
@click="submitSearch"
>
<el-button type="primary" style="width: 45%;" @click="submitSearch">
查询
</el-button>
</div>
......@@ -71,17 +38,17 @@
<script setup>
import { computed, reactive, ref, watch } from 'vue';
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 useAppStore from '../../../store/module/app';
const useAppStoreInstance = useAppStore()
const props = defineProps(["searchShowData"])
const isShow = computed(() => {
console.log("按钮操作显示标识",props.searchShowData)
console.log("按钮操作显示标识", props.searchShowData)
if (props.searchShowData.length > 0) {
return props.searchShowData[0].isShow
}else{
} else {
ElMessage.error('按钮操作显示标识错误')
}
......@@ -156,27 +123,27 @@ const getAllListInfoFn = (item) => {
}
const buildingGetBuildListByBuildNameFn = (item) => {
// console.log(item,'buildingGetBuildCodeListFn被触发')
buildingGetBuildListByBuildNameApi({buildName:item.content}).then(res => {
buildingGetBuildListByBuildNameApi({ buildName: item.content }).then(res => {
// console.log(res,'buildingGetBuildCodeListFn返回数据')
if(res.code == 200) {
if (res.code == 200) {
restaurants.value = res.data
// console.log(restaurants.value,'buildingGetBuildCodeListFn8999999999999返回数据')
}
})
};
const buildCodeTraverse = (item)=>{
const buildCodeTraverse = (item) => {
let buildCodeList = []
item.forEach(item => {
// console.log(item,'buildCodeTraverse被触发')
buildCodeList.push({value:item})
buildCodeList.push({ value: item })
})
return buildCodeList
}
const buildingGetBuildCodeListApiFn = (item) => {
buildingGetBuildCodeListApi({buildCode:item.content}).then(res => {
buildingGetBuildCodeListApi({ buildCode: item.content }).then(res => {
// console.log(res,'buildingGetBuildCodeListFn返回数据')
if(res.code == 200) {
if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data)
// console.log(restaurants.value,'buildingGetBuildCodeListFn8999999999999返回数据')
}
......@@ -184,19 +151,19 @@ const buildingGetBuildCodeListApiFn = (item) => {
};
// 返回的数据不对应当[楼层数]不是【建筑名称】
const buildingGetTotalFloorNumListFn = (item) => {
buildingGetTotalFloorNumListApi({totalFloorNum:item.content}).then(res => {
console.log(res,'buildingGetTotalFloorNumListFn返回数据')
if(res.code == 200) {
buildingGetTotalFloorNumListApi({ totalFloorNum: item.content }).then(res => {
console.log(res, 'buildingGetTotalFloorNumListFn返回数据')
if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data)
console.log(restaurants.value,'buildingGetTotalFloorNumListFn8999999999999返回数据')
console.log(restaurants.value, 'buildingGetTotalFloorNumListFn8999999999999返回数据')
}
})
}
const buildingGetBuildNameListFn = (item) => {
buildingGetBuildNameListApi({buildName:item.content}).then(res => {
buildingGetBuildNameListApi({ buildName: item.content }).then(res => {
// console.log(res,'buildingGetBuildNameListFn返回数据')
if(res.code == 200) {
if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data)
// console.log(restaurants.value,'buildingGetBuildNameListFn8999999999999返回数据')
}
......@@ -204,9 +171,9 @@ const buildingGetBuildNameListFn = (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返回数据')
if(res.code == 200) {
if (res.code == 200) {
restaurants.value = buildCodeTraverse(res.data)
// console.log(restaurants.value,'floorGetFloorNoListFn8999999999999返回数据')
}
......@@ -277,8 +244,8 @@ const resetSearchForm = () => {
}
/* 使用深度选择器覆盖Element Plus默认样式 */
:deep .el-input__wrapper,
:deep .el-select__wrapper {
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
border-radius: 4px;
}
......@@ -291,9 +258,10 @@ const resetSearchForm = () => {
justify-content: space-between;
}
.operation-buttons {
width: 20%;
padding-left: 5%;
width: 20%;
padding-left: 5%;
}
......
src/views/systemmanage/staffManage/index.vue
浏览文件 @ 92be75d4
......@@ -7,25 +7,30 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop>
<searchtop :searchShowData="searchShowData"></searchtop>
</div>
</div>
<!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts">
<div class="card-tabs">
<span class="title" >用户列表</span>
<span class="title">用户列表</span>
<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">导出</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"><el-icon><FullScreen /></el-icon></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"><el-icon>
<FullScreen />
</el-icon></el-button>
</div>
</div>
<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>
......@@ -33,31 +38,24 @@
</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>
</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>
</el-drawer>
<!-- 用户信息弹窗 -->
<el-dialog
v-model="isUserInfoDialogVisible"
title="用户信息"
width="800"
>
<el-dialog v-model="isUserInfoDialogVisible" title="用户信息" width="800">
<userinfo :userInfo="showuserinfodata" :isUserInfoDialogVisible="isUserInfoDialogVisible"></userinfo>
</el-dialog>
<!-- 重置密码弹窗 -->
<el-dialog
v-model="isResetPasswordDialogVisible"
title="重置密码"
width="800"
close="beforCloseAddDrawer"
:close-on-click-modal = false
:show-close = 'false'
>
<resetpassword :userInfo="resetPasswordData" @closeResetPasswordDialogFn="closeResetPasswordDialogFn" :isResetPasswordDialogVisible="isResetPasswordDialogVisible"></resetpassword>
<el-dialog v-model="isResetPasswordDialogVisible" title="重置密码" width="800" close="beforCloseAddDrawer"
:close-on-click-modal=false :show-close='false'>
<resetpassword :userInfo="resetPasswordData" @closeResetPasswordDialogFn="closeResetPasswordDialogFn"
:isResetPasswordDialogVisible="isResetPasswordDialogVisible"></resetpassword>
</el-dialog>
</div>
</template>
......@@ -71,7 +69,7 @@ import resetpassword from '../components/resetpassword.vue'
import editinfo from '../components/editinfo.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
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 { useRoute } from 'vue-router';
import useAppStore from '../../../store/module/app.js';
......@@ -81,9 +79,9 @@ const route = useRoute()
// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([
{ 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: '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: '巡查员' }] },
])
// 响应式布局配置
const layoutConfig = reactive({
......@@ -100,7 +98,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示
* 控制添加抽屉的显示状态
* @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
*/
const isAddDrawer= ref(false)
const isAddDrawer = ref(false)
const closeAddDrawer = () => {
console.log("000000-------3-----0000000000")
// 关闭添加抽屉
......@@ -119,7 +117,7 @@ const beforCloseAddDrawer = () => {
const tableDataRefresh = () => {
initTableData({
currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum,
currentPageSize:useAppStoreInstance.pageCountInfo.currentPageSize,
currentPageSize: useAppStoreInstance.pageCountInfo.currentPageSize,
})
console.log("000000-------2-----0000000000,这里获取到最新的数据")
......@@ -141,14 +139,14 @@ const rowData = ref([])
*/
const editData = (data) => {
try {
if(useAppStoreInstance.chackCurPersionOpition()){
if (useAppStoreInstance.chackCurPersionOpition()) {
// 打开编辑抽屉
isEditDrawer.value = true
// 设置要编辑的数据
rowData.value = data
console.log("000000-------1-----0000000000",data)
}else{
console.log("000000-------1-----0000000000", data)
} else {
ElMessage.error("没有权限打开编辑抽屉")
}
} catch (error) {
......@@ -174,8 +172,8 @@ const closeEditDrawer = () => {
const deleteData = (data) => {
try {
if(useAppStoreInstance.chackCurPersionOpition()){
console.log("000000---2---------0000000000",data)
if (useAppStoreInstance.chackCurPersionOpition()) {
console.log("000000---2---------0000000000", data)
ElMessageBox.confirm(
'删除操作不可逆，是否继续?',
'删除',
......@@ -191,7 +189,7 @@ const deleteData = (data) => {
try {
let submitData = {id:data.id};
let submitData = { id: data.id };
staffRemoveInfoApi(submitData).then(res => {
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
......@@ -211,7 +209,7 @@ const deleteData = (data) => {
message: '取消删除',
})
})
}else{
} else {
ElMessage.error("没有权限打开编辑抽屉")
}
} catch (error) {
......@@ -230,16 +228,16 @@ const closeResetPasswordDialogFn = () => {
}
const resetPasswordData = ref({});
const resetData = (data) => {
if(useAppStoreInstance.userInfo.id === data.id){
if (useAppStoreInstance.userInfo.id === data.id) {
ElMessage.error("不能重置自己的密码")
}else{
} else {
try {
console.log(useAppStoreInstance.chackCurPersionOpition(),"********useAppStoreInstance.chackCurPersionOpition()***************")
if(useAppStoreInstance.chackCurPersionOpition() ){
console.log("000000-----3-------0000000000",data)
console.log(useAppStoreInstance.chackCurPersionOpition(), "********useAppStoreInstance.chackCurPersionOpition()***************")
if (useAppStoreInstance.chackCurPersionOpition()) {
console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data;
}else{
} else {
ElMessage.error("没有权限打开重置密码抽屉")
}
} catch (error) {
......@@ -250,43 +248,43 @@ const resetData = (data) => {
const showuserinfodata = ref({})
const userData = (data) => {
console.log("000000------4------0000000000",data)
console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true
showuserinfodata.value = data
}
const tableShowData = ref([{
tableHeader:[
{label: '姓名', prop: 'name'},
{label: '电话', prop: 'phone'},
{label: '是否可用', prop: 'status'},
{label: '用户权限', prop: 'role'},
{label: '创建时间', prop: 'createTime'},
{label: '更新时间', prop: 'updateTime'},
{label: '操作', prop: 'Operation'}
],
tableBody:[
tableHeader: [
{ label: '姓名', prop: 'name' },
{ label: '电话', prop: 'phone' },
{ label: '是否可用', prop: 'status' },
{ label: '用户权限', prop: 'role' },
{ label: '创建时间', prop: 'createTime' },
{ label: '更新时间', prop: 'updateTime' },
{ label: '操作', prop: 'Operation' }
],
tableBody: [
]
}
])
const Operation = ref( [ { 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 }]
const Operation = ref([{ 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 }]
)
)
const initTableData = (parameter) => {
staffGetPageInfoApi({
currentPageNum: parameter.currentPageNum,
currentPageSize: parameter.currentPageSize,
}).then(res => {
if(res.code === 200){
if (res.code === 200) {
let tempData = res.data.list
tableShowData.value[0].tableBody = []
//获取未逻辑删除的数据
console.log(res.data,"--------999999999----")
console.log(res.data, "--------999999999----")
tempData = tempData.filter(element => {
return element.isDeleted === 0;
});
......@@ -401,9 +399,11 @@ watch(route, () => {
padding: 10px;
}
.title{
.title {
width: 70%;
}
.card-actions {
display: flex;
flex: 1;
......@@ -415,10 +415,12 @@ watch(route, () => {
padding: 1.5rem;
}
.operation-button {
width: 15%;
}
.card-tabs-footer {
display: flex;
......@@ -436,28 +438,34 @@ watch(route, () => {
align-items: center;
}
/* 文本样式 */
.page-text {
color: #606266;
font-size: 14px;
white-space: nowrap; /* 防止文本换行 */
white-space: nowrap;
/* 防止文本换行 */
}
/* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination {
:deep(.el-pagination) {
display: flex;
align-items: center;
margin: 0; /* 清除默认外边距 */
margin: 0;
/* 清除默认外边距 */
}
.pagination-block{
.pagination-block {
height: 8%;
}
.card-table{
.card-table {
width: 100%;
/* display: flex; */
/* background-color: #000000; */
flex:1;
flex: 1;
overflow: hidden;
border-radius: 8PX;
}
......
src/views/uavshowdate/index.vue
浏览文件 @ 92be75d4
......@@ -10,7 +10,7 @@
<div class="card-tabs">
<span class="tab-btn">历史火情统计</span>
</div>
<div class="content" >
<div class="content">
<Uavcard :drone="drones"></Uavcard>
</div>
......@@ -96,11 +96,11 @@ const drones = ref([
// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
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: '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: '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: '火灾1', value: '烟雾1' }, { label: '烟雾1', value: '火灾1' }, { label: '烟雾1', value: '火灾1' }] },
])
// 响应式布局配置
const layoutConfig = reactive({
......@@ -117,7 +117,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示
* 控制添加抽屉的显示状态
* @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
*/
const isAddDrawer= ref(false)
const isAddDrawer = ref(false)
const closeAddDrawer = () => {
console.log("000000-------3-----0000000000")
// 关闭添加抽屉
......@@ -134,7 +134,7 @@ const beforCloseAddDrawer = () => {
* 当调用此方法时，会触发表格数据的重新加载
*/
const tableDataRefresh = () => {
console.log("000000-------2-----0000000000",这里获取到最新的数据)
console.log("000000-------2-----0000000000", 这里获取到最新的数据)
}
/**
* 控制编辑抽屉的显示状态
......@@ -155,7 +155,7 @@ const editData = (data) => {
isEditDrawer.value = true
// 设置要编辑的数据
rowData.value = data
console.log("000000-------1-----0000000000",data)
console.log("000000-------1-----0000000000", data)
}
/**
* 关闭编辑抽屉的方法
......@@ -172,7 +172,7 @@ const closeEditDrawer = () => {
* 显示确认对话框，用户确认后执行删除操作
*/
const deleteData = (data) => {
console.log("000000---2---------0000000000",data)
console.log("000000---2---------0000000000", data)
ElMessageBox.confirm(
'是否删除该用户？此操作将无法撤销',
'删除',
......@@ -199,42 +199,42 @@ const deleteData = (data) => {
const isResetPasswordDialogVisible = ref(false); // 控制重置密码弹窗的显示状态
const resetPasswordData = ref({});
const resetData = (data) => {
console.log("000000-----3-------0000000000",data)
console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data;
}
const showuserinfodata = ref({})
const userData = (data) => {
console.log("000000------4------0000000000",data)
console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true
showuserinfodata.value = data
}
const tableShowData = ref([{
tableHeader:[
{label: '姓名', prop: 'userName'},
{label: '电话', prop: 'phone'},
{label: '是否可用', prop: 'isUse'},
{label: '用户权限', prop: 'userPermission'},
{label: '创建时间', prop: 'createTime'},
{label: '更新时间', prop: 'updataTime'},
{label: '操作', prop: 'Operation'}
],
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: 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:'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:[]},
tableHeader: [
{ label: '姓名', prop: 'userName' },
{ label: '电话', prop: 'phone' },
{ label: '是否可用', prop: 'isUse' },
{ label: '用户权限', prop: 'userPermission' },
{ label: '创建时间', prop: 'createTime' },
{ label: '更新时间', prop: 'updataTime' },
{ label: '操作', prop: 'Operation' }
],
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: 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: '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: [] },
]
}
])
......@@ -292,9 +292,10 @@ const containerStyle = computed(() => ({
min-width: 200px;
}
.card-title{
.card-title {
height: 5%;
background-color:#0b07ff;
background-color: #0b07ff;
border-radius: 8px 0;
display: flex;
align-items: center;
......@@ -304,7 +305,8 @@ const containerStyle = computed(() => ({
font-weight: bold;
border-bottom: #606266 1px solid;
}
.content{
.content {
height: 95%;
background-color: #000000;
display: flex;
......@@ -351,9 +353,11 @@ const containerStyle = computed(() => ({
padding: 10px;
}
.title{
.title {
width: 70%;
}
.card-actions {
display: flex;
flex: 1;
......@@ -365,10 +369,12 @@ const containerStyle = computed(() => ({
padding: 1.5rem;
}
.operation-button {
width: 15%;
}
.card-tabs-footer {
display: flex;
......@@ -386,28 +392,34 @@ const containerStyle = computed(() => ({
align-items: center;
}
/* 文本样式 */
.page-text {
color: #606266;
font-size: 14px;
white-space: nowrap; /* 防止文本换行 */
white-space: nowrap;
/* 防止文本换行 */
}
/* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination {
:deep(.el-pagination) {
display: flex;
align-items: center;
margin: 0; /* 清除默认外边距 */
margin: 0;
/* 清除默认外边距 */
}
.pagination-block{
.pagination-block {
height: 8%;
}
.card-table{
.card-table {
width: 100%;
/* display: flex; */
/* background-color: #000000; */
flex:1;
flex: 1;
overflow: hidden;
border-radius: 8PX;
}
......
src/views/uavshowdate/uavmanage/index.vue
浏览文件 @ 92be75d4
......@@ -7,20 +7,24 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop>
<searchtop :searchShowData="searchShowData"></searchtop>
</div>
</div>
<!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts">
<div class="card-tabs">
<span class="title" >用户列表</span>
<span class="title">用户列表</span>
<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">导出</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"><el-icon><FullScreen /></el-icon></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"><el-icon>
<FullScreen />
</el-icon></el-button>
</div>
</div>
......@@ -48,9 +52,9 @@ import { message } from 'ant-design-vue';
// import Operation from 'ant-design-vue/es/transfer/operation';
// 定义一个名为searchShowData的ref变量，它是一个数组，数组中的每个元素都是一个对象，对象中包含了label、placeholder、type、content和options等属性
const searchShowData = ref([
{ 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: '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: '巡查员' }] },
])
// 响应式布局配置
const layoutConfig = reactive({
......@@ -67,7 +71,7 @@ const isUserInfoDialogVisible = ref(false); // 控制用户信息弹窗的显示
* 控制添加抽屉的显示状态
* @type {Ref<boolean>} - 响应式布尔值，用于控制添加抽屉的显示
*/
const isAddDrawer= ref(false)
const isAddDrawer = ref(false)
const closeAddDrawer = () => {
console.log("000000-------3-----0000000000")
// 关闭添加抽屉
......@@ -106,7 +110,7 @@ const editData = (data) => {
// 设置要编辑的数据
rowData.value = data
console.log("000000-------1-----0000000000",data)
console.log("000000-------1-----0000000000", data)
}
/**
* 关闭编辑抽屉的方法
......@@ -124,7 +128,7 @@ const closeEditDrawer = () => {
* 显示确认对话框，用户确认后执行删除操作
*/
const deleteData = (data) => {
console.log("000000---2---------0000000000",data)
console.log("000000---2---------0000000000", data)
ElMessageBox.confirm(
'删除操作不可逆，是否继续?',
'删除',
......@@ -136,9 +140,9 @@ const deleteData = (data) => {
}
)
.then(() => {
console.log("000000---1-456464564------0000000000","我是确认")
console.log("000000---1-456464564------0000000000", "我是确认")
try {
const res = staffRemoveInfoApi({id:data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -184,20 +188,20 @@ const closeResetPasswordDialogFn = () => {
}
const resetPasswordData = ref({});
const resetData = (data) => {
console.log("000000-----3-------0000000000",data)
console.log("000000-----3-------0000000000", data)
isResetPasswordDialogVisible.value = true;
resetPasswordData.value = data;
}
const showuserinfodata = ref({})
const userData = (data) => {
console.log("000000------4------0000000000",data)
console.log("000000------4------0000000000", data)
isUserInfoDialogVisible.value = true
showuserinfodata.value = data
}
const uavseedetails = (data) => {
console.log(data,'---------5---------')
console.log(data, '---------5---------')
// router.push({
// path: '/dialog_infoShow_img_vid/uavseedetails',
// query: { data: JSON.stringify(data) },
......@@ -205,23 +209,23 @@ const uavseedetails = (data) => {
}
const tableShowData = ref([{
tableHeader:[
{label: '序号', prop: 'id'},
{label: '无人机编号', prop: 'uavid'},
{label: '无人机机型', prop: 'uavtype'},
{label: '无人机状态', prop: 'uavstate'},
{label: '无人机载弹数量', prop: 'uavpayloadcapacity'},
{label: '上次维护时间', prop: 'premaintenancetime'},
{label: '弹药信息', prop: 'ammunitioninfo'},
{label: '操作', prop: 'Operation'}
],
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 }]}
tableHeader: [
{ label: '序号', prop: 'id' },
{ label: '无人机编号', prop: 'uavid' },
{ label: '无人机机型', prop: 'uavtype' },
{ label: '无人机状态', prop: 'uavstate' },
{ label: '无人机载弹数量', prop: 'uavpayloadcapacity' },
{ label: '上次维护时间', prop: 'premaintenancetime' },
{ label: '弹药信息', prop: 'ammunitioninfo' },
{ label: '操作', prop: 'Operation' }
],
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 }] }
]
}
])
const Operation = ref( [ { label: '查看详情', type: 'primary', icon: 'EditPen', click: uavseedetails }])
const Operation = ref([{ label: '查看详情', type: 'primary', icon: 'EditPen', click: uavseedetails }])
const initTableData = () => {
// 这里要使用无人机列表接口
// staffGetPageInfoApi({
......@@ -332,9 +336,11 @@ const containerStyle = computed(() => ({
padding: 10px;
}
.title{
.title {
width: 70%;
}
.card-actions {
display: flex;
flex: 1;
......@@ -346,10 +352,12 @@ const containerStyle = computed(() => ({
padding: 1.5rem;
}
.operation-button {
width: 15%;
}
.card-tabs-footer {
display: flex;
......@@ -367,28 +375,34 @@ const containerStyle = computed(() => ({
align-items: center;
}
/* 文本样式 */
.page-text {
color: #606266;
font-size: 14px;
white-space: nowrap; /* 防止文本换行 */
white-space: nowrap;
/* 防止文本换行 */
}
/* 修复 Element Plus 分页组件默认的块级布局问题 */
:deep .el-pagination {
:deep(.el-pagination) {
display: flex;
align-items: center;
margin: 0; /* 清除默认外边距 */
margin: 0;
/* 清除默认外边距 */
}
.pagination-block{
.pagination-block {
height: 8%;
}
.card-table{
.card-table {
width: 100%;
/* display: flex; */
/* background-color: #000000; */
flex:1;
flex: 1;
overflow: hidden;
border-radius: 8PX;
}
......
vite.config.js
浏览文件 @ 92be75d4
......@@ -25,7 +25,7 @@ export default defineConfig({
open: true,//自动在默认浏览器上打开
proxy: {
'/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',
ws: false,//代理websocked
changeOrigin: true, //是否跨域
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论