提交 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,7 +7,7 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop>
<searchtop :searchShowData="searchShowData"></searchtop>
</div>
</div>
......@@ -19,7 +19,8 @@
<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>
......@@ -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,13 +64,13 @@ 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)
console.log("archiveInfoFn需要归档的数据", row)
};
const archiveHandleAddInfoFn = (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();
......@@ -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;
}
......
......@@ -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,22 +16,19 @@
<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"
>
<el-drawer v-model="archiveInfoDrawer" direction="rtl" :before-close="handleClose">
asdada
</el-drawer>
......@@ -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,10 +67,10 @@ 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' },
]);
......@@ -81,14 +78,14 @@ const archiveInfoDate = ref(null)
const archiveInfoDateBackcallFn = (row) => {
archiveInfoDate.value = null
archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据',archiveInfoDate.value)
console.log('archiveInfoFn需要归档的数据', archiveInfoDate.value)
};
const archiveInfoDrawer = ref(false)
const archiveInfoFn = () => {
if ( archiveInfoDate ===undefined ||archiveInfoDate.value===null || archiveInfoDate.value.length<=0 ) {
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
}
......@@ -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();
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -2,48 +2,20 @@
<div class="task-schedule-container">
<!-- 表格主体 -->
<el-table
:data="taskScheduleData"
size="small"
class="task-table"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
:row-class-name="tableRowClassName"
highlight-current-row
@row-click="handleRowClick"
style="height: 420px;"
>
<el-table :data="taskScheduleData" size="small" class="task-table" :header-cell-style="headerCellStyle"
:cell-style="cellStyle" :row-class-name="tableRowClassName" highlight-current-row @row-click="handleRowClick"
style="height: 420px;">
<!-- 序号列 -->
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column type="index" label="序号" width="60" align="center" />
<!-- 任务调度时间 -->
<el-table-column
prop="scheduleTime"
label="任务调度时间"
width="120"
align="center"
/>
<el-table-column prop="scheduleTime" label="任务调度时间" width="120" align="center" />
<!-- 任务调度目标 -->
<el-table-column
prop="target"
label="任务调度目标"
width="120"
align="center"
/>
<el-table-column prop="target" label="任务调度目标" width="120" align="center" />
<!-- 目标内容 -->
<el-table-column
prop="content"
label="目标内容"
min-width="220"
>
<el-table-column prop="content" label="目标内容" min-width="220">
<template #default="scope">
<div class="content-cell">
<el-tooltip effect="dark" :content="scope.row.content">
......@@ -54,12 +26,7 @@
</el-table-column>
<!-- 任务持续时间 -->
<el-table-column
prop="duration"
label="任务持续时间"
width="140"
align="center"
>
<el-table-column prop="duration" label="任务持续时间" width="140" align="center">
<template #default="scope">
<div class="content-cell">
<el-tooltip effect="dark" :content="scope.row.duration">
......@@ -70,12 +37,7 @@
</el-table-column>
<!-- 损伤记录 -->
<el-table-column
prop="damageRecord"
label="损伤记录"
width="100"
align="center"
>
<el-table-column prop="damageRecord" label="损伤记录" width="100" align="center">
<template #default="scope">
<span class="record-text">
{{ scope.row.damageRecord || '-' }}
......@@ -87,12 +49,7 @@
</el-table-column>
<!-- 维修记录 -->
<el-table-column
prop="repairRecord"
label="维修记录"
width="100"
align="center"
>
<el-table-column prop="repairRecord" label="维修记录" width="100" align="center">
<template #default="scope">
<span class="record-text">
{{ scope.row.repairRecord || '-' }}
......@@ -104,36 +61,18 @@
</el-table-column>
<!-- 记录视频 -->
<el-table-column
label="记录视频"
width="90"
align="center"
>
<el-table-column label="记录视频" width="90" align="center">
<template #default="scope">
<el-button
type="text"
class="view-btn"
@click="handleViewVideo(scope.row)"
:icon="VideoPlay"
>
<el-button type="text" class="view-btn" @click="handleViewVideo(scope.row)" :icon="VideoPlay">
查看
</el-button>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column
label="操作"
width="140"
align="center"
>
<el-table-column label="操作" width="140" align="center">
<template #default="scope">
<el-button
type="text"
class="export-btn"
@click="handleExportFile(scope.row)"
:icon="Download"
>
<el-button type="text" class="export-btn" @click="handleExportFile(scope.row)" :icon="Download">
导出文件
</el-button>
</template>
......@@ -141,10 +80,10 @@
</el-table>
<div>
<el-dialog class="dialogbig" v-model="img_video_dialogVisible" style="background-color: rgba(0, 0, 0, 0) ;" >
<el-dialog class="dialogbig" v-model="img_video_dialogVisible" style="background-color: rgba(0, 0, 0, 0) ;">
<div class="media-container">
<!-- 图片展示行 -->
<div class="image-row" >
<div class="image-row">
<h3>图片</h3>
<div class="image-list" v-if="images.length">
<div v-for="item in images" class="image-item">
......@@ -306,7 +245,7 @@ const handleRowClick = (row) => {
// 查看视频按钮事件
const handleViewVideo = (rowFnfo) => {
// 查看视频逻辑
console.log('补充查看视频逻辑',rowFnfo)
console.log('补充查看视频逻辑', rowFnfo)
img_video_dialogVisible.value = true
}
......@@ -314,7 +253,7 @@ const handleViewVideo = (rowFnfo) => {
// 导出文件按钮事件
const handleExportFile = (rowFnfo) => {
// 导出文件逻辑
console.log('补充导出文件逻辑',rowFnfo)
console.log('补充导出文件逻辑', rowFnfo)
ElMessage({
type: 'info',
message: `正在请求${rowFnfo.target}文件: `,
......@@ -323,24 +262,27 @@ const handleExportFile = (rowFnfo) => {
</script>
<style scoped lang="scss">
.task-schedule-container {
background: rgba(16, 42, 77, 0.7); /* 修改容器背景色 */
background: rgba(16, 42, 77, 0.7);
/* 修改容器背景色 */
border-radius: 8px;
// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* 加深阴影增强对比 */
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 2px; /* 添加内边距 */
padding: 2px;
/* 添加内边距 */
}
/* 修改表头样式 */
:deep(.el-table__header) {
th {
background-color: rgb(11, 31, 58) !important; /* 加深表头背景 */
color: #ffffff !important; /* 浅色文字 */
background-color: rgb(11, 31, 58) !important;
/* 加深表头背景 */
color: #ffffff !important;
/* 浅色文字 */
// border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
......@@ -353,13 +295,15 @@ const handleExportFile = (rowFnfo) => {
max-height: 600px;
overflow: auto;
// background-color: transparent !important; /* 透明背景 */
color: #ffffff; /* 浅色文字 */
color: #ffffff;
/* 浅色文字 */
/* 修改单元格样式 */
:deep(.el-table__body) {
tr {
td {
background-color: rgba(16, 42, 77);;
background-color: rgba(16, 42, 77);
;
// border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
// padding: 10px 0;
......@@ -384,6 +328,7 @@ const handleExportFile = (rowFnfo) => {
/* 修改按钮样式 */
.view-btn {
color: #69c0ff !important;
&:hover {
color: #40a9ff !important;
}
......@@ -391,6 +336,7 @@ const handleExportFile = (rowFnfo) => {
.export-btn {
color: #ffc069 !important;
&:hover {
color: #ffa940 !important;
}
......@@ -402,10 +348,14 @@ const handleExportFile = (rowFnfo) => {
color: #ffffff !important;
max-height: 30px;
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
max-width: 100%; /* 设置最大宽度,可以根据需要调整 */
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 使用省略号表示被截断的文本 */
max-width: 100%;
/* 设置最大宽度,可以根据需要调整 */
}
}
......@@ -418,7 +368,9 @@ const handleExportFile = (rowFnfo) => {
:deep(.el-pagination) {
color: #ffffff;
.btn-prev, .btn-next, .el-pager li {
.btn-prev,
.btn-next,
.el-pager li {
// background-color: transparent;
color: #ffffff;
}
......@@ -440,8 +392,10 @@ const handleExportFile = (rowFnfo) => {
.horizontal-container {
margin: 20px 0 10px 0;
display: flex;
align-items: center; /* 垂直居中对齐 */
align-items: center;
/* 垂直居中对齐 */
}
.media-container {
padding: 20px;
max-width: 1200px;
......@@ -449,6 +403,7 @@ const handleExportFile = (rowFnfo) => {
background: rgb(4, 33, 54);
border-radius: 10px;
}
/* 图片行样式 */
.image-row {
margin-bottom: 40px;
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论