提交 8b7268d4 authored 作者: 刘佳星-公司's avatar 刘佳星-公司

左侧和头部样式

上级 e79e30ac
差异被折叠。
......@@ -240,7 +240,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -230,7 +230,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -232,7 +232,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -7,26 +7,27 @@
<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>
<el-button type="primary" @click="archiveHandleAddInfoFn">归档</el-button>
</div>
<div class="card-table">
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow>
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
</tableshow>
</div>
</div>
</div>
</main>
<!-- 归档区域 -->
</div>
</template>
......@@ -40,12 +41,12 @@ import tableshow from './components/tableshow.vue';
const searchShowData = ref([
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '',isShow: true },
{ label: '上报人', placeholder: "请输入", type: 'input', content: '' ,isShow: true},
{ label: '上报时间', placeholder: "请输入", type: 'datepicker', 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: '1'}, {label: '二级火情', value: '2'}, {label: '三级火情', value: '3'}]},
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '上报人', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '上报时间', placeholder: "请输入", type: 'datepicker', 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: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
]);
const layoutConfig = reactive({
......@@ -63,19 +64,19 @@ const resetPasswordData = ref({});
const showuserinfodata = ref({});
const tableShowData = ref([
{id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'},
{id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'},
{id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'},
{id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'},
{ id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{ id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
{ id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{ id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
]);
const archiveInfoDateBackcallFn = (row) => {
console.log("archiveInfoFn需要归档的数据",row)
const archiveInfoDateBackcallFn = (row) => {
console.log("archiveInfoFn需要归档的数据", row)
};
const archiveHandleAddInfoFn = (row) => {
// archiveInfoDate.value = null
// archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据')
};
const archiveHandleAddInfoFn = (row) => {
// archiveInfoDate.value = null
// archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据')
};
// const archiveInfoDate = ref(null)
// const archiveInfoDateBackcallFn = (row) => {
// archiveInfoDate.value = null
......@@ -112,7 +113,7 @@ const deleteData = (data) => {
}
).then(() => {
try {
const res = staffRemoveInfoApi({id: data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -137,7 +138,7 @@ const userData = (data) => {
showuserinfodata.value = data;
}
const initTableData = () => {
const initTableData = () => {
// staffGetPageInfoApi({
// "currentPageNum": 1,
// "currentPageSize": 10,
......@@ -146,11 +147,11 @@ const initTableData = () => {
// let tempData = res.data.list
// tableShowData.value[0].tableBody = []
// tempData = tempData.filter(element => element.isDeleted === 0);
// // tempData.forEach(element => {
// // element.Operation = [...Operation.value];
// // });
// tableShowData.value[0].tableBody = tempData;
// tableShowData.value[0].total = res.data.total;
// tableShowData.value[0].pageSize = res.data.pageSize;
......@@ -160,7 +161,7 @@ const initTableData = () => {
// });
}
onMounted(() => {
onMounted(() => {
initTableData();
});
......@@ -181,7 +182,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......@@ -244,9 +245,9 @@ const containerStyle = computed(() => ({
}
.operation-button {
flex: 1;
display: flex;
justify-self: end;
flex: 1;
display: flex;
justify-self: end;
}
.card-table {
......@@ -260,7 +261,7 @@ const containerStyle = computed(() => ({
.left-top {
flex-direction: column;
}
.region-overview {
width: 100%;
flex: none;
......
......@@ -7,7 +7,7 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop>
<searchtop :searchShowData="searchShowData"></searchtop>
</div>
</div>
......@@ -16,23 +16,20 @@
<div class="card-tabs">
<span class="title">历史火情</span>
<div class="card-actions">
<el-button class="operation-button" type="primary" @cliick="archiveInfoFn" >归档</el-button>
<el-button class="operation-button" type="primary" @cliick="archiveInfoFn1" >归档1</el-button>
<el-button class="operation-button" type="primary" @cliick="archiveInfoFn">归档</el-button>
<el-button class="operation-button" type="primary" @cliick="archiveInfoFn1">归档1</el-button>
</div>
</div>
<div class="card-table">
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow>
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
</tableshow>
</div>
</div>
</div>
</main>
<!-- 归档窗口 -->
<el-drawer
v-model="archiveInfoDrawer"
direction="rtl"
:before-close="handleClose"
>
asdada
<el-drawer v-model="archiveInfoDrawer" direction="rtl" :before-close="handleClose">
asdada
</el-drawer>
</div>
......@@ -48,11 +45,11 @@ import tableshow from './components/tableshow.vue';
const searchShowData = ref([
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '' ,isShow: true},
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '建筑编号', placeholder: "请选择", type: 'autocomplete',cliick:'', content: '',isShow: true, options: [{label: '启用', value: '启用'}, {label: '禁用', value: '禁用'}] },
{ label: '归档编号', placeholder: "请选择", type: 'autocomplete', content: '',isShow: true, options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]},
{ label: '归档时间', placeholder: "请选择", type: 'datepicker', content: '',isShow: true, options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]},
{ label: '建筑编号', placeholder: "请选择", type: 'autocomplete', cliick: '', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '归档编号', placeholder: "请选择", type: 'autocomplete', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
{ label: '归档时间', placeholder: "请选择", type: 'datepicker', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]);
const layoutConfig = reactive({
......@@ -70,35 +67,35 @@ const resetPasswordData = ref({});
const showuserinfodata = ref({});
const tableShowData = ref([
{id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'},
{id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'},
{id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'},
{id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'},
{ id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{ id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
{ id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{ id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
]);
const archiveInfoDate = ref(null)
const archiveInfoDateBackcallFn = (row) => {
archiveInfoDate.value = null
archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据',archiveInfoDate.value)
const archiveInfoDateBackcallFn = (row) => {
archiveInfoDate.value = null
archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据', archiveInfoDate.value)
};
const archiveInfoDrawer = ref(false)
const archiveInfoFn = () => {
if ( archiveInfoDate ===undefined ||archiveInfoDate.value===null || archiveInfoDate.value.length<=0 ) {
const archiveInfoFn = () => {
if (archiveInfoDate === undefined || archiveInfoDate.value === null || archiveInfoDate.value.length <= 0) {
ElMessage.warning("没有勾选数据")
}else {
console.log('archiveInfoFn归档的数据',archiveInfoDate.value)
} else {
console.log('archiveInfoFn归档的数据', archiveInfoDate.value)
// archiveInfoDrawer.value = true
fireInfoDataImport.value = null
}
}
const archiveInfoFn1 = () => {
ElMessage.warning("没有勾选数据")
const archiveInfoFn1 = () => {
ElMessage.warning("没有勾选数据")
}
const handleAddInfoFn = () => {
......@@ -126,7 +123,7 @@ const deleteData = (data) => {
}
).then(() => {
try {
const res = staffRemoveInfoApi({id: data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -151,7 +148,7 @@ const userData = (data) => {
showuserinfodata.value = data;
}
const initTableData = () => {
const initTableData = () => {
// staffGetPageInfoApi({
// "currentPageNum": 1,
// "currentPageSize": 10,
......@@ -160,11 +157,11 @@ const initTableData = () => {
// let tempData = res.data.list
// tableShowData.value[0].tableBody = []
// tempData = tempData.filter(element => element.isDeleted === 0);
// // tempData.forEach(element => {
// // element.Operation = [...Operation.value];
// // });
// tableShowData.value[0].tableBody = tempData;
// tableShowData.value[0].total = res.data.total;
// tableShowData.value[0].pageSize = res.data.pageSize;
......@@ -174,7 +171,7 @@ const initTableData = () => {
// });
}
onMounted(() => {
onMounted(() => {
initTableData();
});
......@@ -195,7 +192,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......@@ -260,9 +257,9 @@ const containerStyle = computed(() => ({
}
.operation-button {
flex: 1;
display: flex;
justify-self: end;
flex: 1;
display: flex;
justify-self: end;
}
.card-table {
......@@ -276,7 +273,7 @@ const containerStyle = computed(() => ({
.left-top {
flex-direction: column;
}
.region-overview {
width: 100%;
flex: none;
......
......@@ -296,7 +296,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -154,7 +154,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -182,7 +182,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -345,7 +345,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -259,7 +259,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
......@@ -282,7 +282,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论