Skip to content

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

最新无人机代码

上级 e00a0c56
显示空白字符变更
内嵌 并排
正在显示 包含 708 行增加 和 254 行删除
src/components/searchTable/search.vue 0 → 100644
浏览文件 @ 2f01ee12
<template>
<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" class="inputs" />
<el-select v-else-if="items.type === 'select'" v-model="items.content" :placeholder="items.placeholder"
class="selects" 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="结束日期"
@change="getAllListInfoFn" style="max-width: 220px;" class="picks" />
</div>
</div>
<div class="operation-buttons" v-if="isShow">
<!-- 操作按钮组 -->
<div class="search-buttons">
<el-button type="default" style="width: 45%;" @click="resetSearchForm">
重置
</el-button>
<el-button type="primary" style="width: 45%;" @click="submitSearch">
查询
</el-button>
</div>
</div>
</div>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import { ElInput, ElSelect, ElOption, ElButton, ElMessage, dayjs } from 'element-plus';
const props = defineProps({
searchShowData: {
default: [],
}
})
//默认是有搜索和重置
const isShow = ref(true)
const emit = defineEmits(['searchFn', 'updateTree'])
// 提交搜索
const submitSearch = () => {
emit('searchFn', searchForm.value)
};
// 定义一个重置搜索表单的函数
const resetSearchForm = () => {
emit('updateTree', searchForm.value)
}
//选择时间触发函数
const getAllListInfoFn = () => {
}
</script>
<style scoped>
.fire-search-container {
display: flex;
flex-direction: row;
/* gap: 15px; */
color: #b3b3b4;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
}
.search-row {
/* background-color: #606266; */
display: flex;
/* flex: 1; */
align-items: center;
/* justify-items: center; */
justify-content: flex-start;
/* justify-content: space-between; */
gap: 10px;
flex-wrap: wrap;
}
.search-item {
/* flex: 1; */
display: flex;
flex-direction: column;
}
.search-label {
width: 80px;
margin-right: 8px;
/* color: #606266; */
font-size: 14px;
}
/* 使用深度选择器覆盖Element Plus默认样式 */
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
border-radius: 4px;
}
.search-buttons {
display: flex;
gap: 10px;
margin-left: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.operation-buttons {
width: 20%;
padding-left: 5%;
}
/* 响应式适配 */
@media (max-width: 768px) {
.search-row {
flex-direction: column;
align-items: flex-start;
}
.search-buttons {
margin-left: 0;
margin-top: 10px;
width: 100%;
justify-content: flex-end;
}
}
.inputs,
.selects {
width: 180px;
border-radius: 0px !important;
}
:deep() .el-input__wrapper {
background-color: #1c1c1f;
}
</style>
\ No newline at end of file
src/views/areafiremanage/firerecord/index.vue
浏览文件 @ 2f01ee12
......@@ -7,13 +7,11 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData"></searchtop>
<searchVue :searchShowData="searchShowData"></searchVue>
</div>
</div>
<!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts">
<div class="card-tabs">
<span class="title">火情上报记录</span>
<el-button type="primary" @click="archiveHandleAddInfoFn">归档</el-button>
......@@ -27,13 +25,12 @@
</main>
<!-- 归档区域 -->
</div>
</template>
<script setup>
import { reactive, computed, ref, onMounted } from 'vue';
import searchtop from '../../commentcomponents/searchtop/index.vue';
import searchVue from '../../../components/searchTable/search.vue';
// import tabledata from '../../commentcomponents/tabledata/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { staffGetPageInfoApi } from "../../../api/staff.js";
......@@ -47,6 +44,10 @@ const searchShowData = ref([
{ 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: 'select', content: '', isShow: true, options: [{ label: '一级火情', value: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
{ label: '火情等级', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '一级火情', value: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
{ label: '火情等级', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '一级火情', value: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
{ label: '火情等级', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '一级火情', value: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
]);
const layoutConfig = reactive({
......@@ -174,7 +175,7 @@ const containerStyle = computed(() => ({
<style scoped>
.dashboard-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: rgba(0, 0, 0, 0.05);
background-color: #252529;
color: #333;
overflow: hidden;
}
......@@ -200,9 +201,7 @@ const containerStyle = computed(() => ({
}
.info-card {
background-color: #fff;
padding: 1rem;
border-radius: 8px;
background-color: #222222;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: auto;
......
src/views/areafiremanage/historyfire/index.vue
浏览文件 @ 2f01ee12
......@@ -4,21 +4,111 @@
<main class="main-content">
<!-- 左侧区域 -->
<div class="left-section">
<!-- 左侧上部分 -->
<!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts">
<!-- <div class="card-tong card-show">
<currentFire :currentFireData="currentFireData"></currentFire>
</div>
<div class="card-tong">
</div> -->
<div class="info-card current-situation">
<div class="situationMain">
<!-- 火情告警 -->
<div style="width: 100%;height: 100%;overflow-y: auto;z-index: 11;">
<div v-for="(item, index) in currentFireData" :key="index" class="left-item" @click="detailClick(item)"
:class="item.clickStatus ? 'click1' : ''">
<div class="situation-item"
:class="item.isXFOk ? 'jiechu' : item.severity == 1 ? 'oneji' : item.severity == 2 ? 'twoji' : item.severity == 3 ? 'threeji' : ''">
<div class="itemtop">
<div style="display: flex;">
<div class="itemtop0 onejiColor"
:class="item.severity == 1 ? 'onejiColor' : item.severity == 2 ? 'twojiColor' : item.severity == 3 ? 'threejiColor' : ''">
<img v-if="item.severity == 3" src="../../../static/ui/huo1.png" class="itemimg" alt="">
<img v-else src="../../../static/ui/huo0.png" class="itemimg" alt="">
<div :style="{ color: item.severity == 3 ? '#000000' : '#ffffff' }">{{ item.severity == 1 ? '一级'
:
item.severity == 2 ? '二级' : item.severity == 3 ? '三级' : '' }}
</div>
</div>
<div class="itemtop0 itemjiechu">已解除</div>
</div>
<div style="color: #ffffff;">{{ item.time }}</div>
</div>
<div>
<div>输入框</div>
<div>按钮</div>
<div>归档</div>
<div style="display: flex;align-items: center;">
<img class="itemimgs" src="../../../static/ui/dingwei.png" alt="">
<div>{{ item.location }}</div>
</div>
<div style="display: flex;align-items: center;margin-top: 5px;">
<img class="itemimgs" src="../../../static/ui/zhuangtai.png" alt="">
<div>{{ item.status }}</div>
</div>
<div style="display: flex;align-items: center;margin-top: 5px;">
<img class="itemimgs" src="../../../static/ui/renyaun.png" alt="">
<div>{{ item.personnel }}</div>
</div>
<div style="display: flex;align-items: center;margin-top: 5px;">
<img class="itemimgs" src="../../../static/ui/wurenji.png" alt="">
<div>{{ item.drone }}</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="leftSize">
<el-pagination layout="total, prev, pager, next" :total="pages.total" :page-size="firePageSize"
v-model:current-page="pages.pageNum" @size-change="pages.pageSize"
@current-change="handleFireCurrentChange" />
</div>
</div>
<div class="right-section">
<!-- 右侧上部分 -->
<div class="right-one">
<div class="tight_Title">火情信息</div>
<div class="tight_TitleFiex">
<div class="tight_Title1">
<div class="fons1">火情ID</div>
<div class="fons2">Fire-6165463154</div>
</div>
<div class="tight_Title1">
<div class="fons1">火情等级</div>
<div class="level">
<img src="../../../static/ui/huo0.png" class="itemimg1" alt="">
<div>一级</div>
</div>
</div>
<div class="tight_Title1">
<div class="fons1">告警时间</div>
<div class="fons2">2023-05-15 14:30</div>
</div>
<div class="tight_Title1">
<div class="fons1">火情等级</div>
<div class="fons2">阳光新城小区二单元 五号楼 8楼</div>
</div>
<div>列表</div>
</div>
<div class="tight_TitleFiex">
<div class="tight_Title1">
<div class="fons1">处理进度</div>
<div class="fons2">消防人员待出发</div>
</div>
<div class="tight_Title1">
<div class="fons1">告警无人机ID</div>
<div class="fons2 fons3">UAV_5320</div>
</div>
<div class="tight_Title1">
<div class="fons1">无人机作业数</div>
<div class="fons2">2023-05-15 14:30</div>
</div>
<div class="tight_Title1">
<div class="fons1">描述</div>
<div class="fons2">阳光新城小区二单元 五号楼 8楼是的发生烦都烦死防守打法四大分三大发手打</div>
</div>
</div>
</div>
<div class="right-two">
<video :src="src" controls class="video-player"></video>
</div>
<div class="right-three">
<div class="rightThreeDiv">
</div>
<div class="rightThreeDiv"></div>
</div>
</div>
</main>
......@@ -26,127 +116,98 @@
</template>
<script setup>
import { reactive, computed, onMounted, watch } from 'vue';
// import { ChatDotSquare } from '@element-plus/icons-vue';
import currentFire from './components/currentFirecard.vue';
// import uav from '../components/uav.vue';
// import meanList from '../components/menuList.vue';
import useAppStore from '../../../store/module/app';
import { useRouter, useRoute } from 'vue-router';
const useAppStoreInstance = useAppStore();
const curruserInfo = computed(() => (useAppStoreInstance.userInfo));
import * as echarts from 'echarts';
import { ref, onMounted, nextTick, reactive, onUnmounted, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const detailClick = (its) => {
currentFireData.value.map(item => {
item.clickStatus = false
})
its.clickStatus = true
}
//分页
const pages = ref({
total: 0,
pageNum: 1,
pageSize: 10
})
//切换页码
const handleFireCurrentChange = () => {
}
const router = useRouter();
const route = useRoute();
// 响应式高度配置，方便统一修改
const heightConfig = reactive({
containerMinHeight: '100vh',
leftTopHeight: '350px',
cardSpacing: '1rem',
headerHeight: '40px',
chartMinHeight: '250px'
});
// 定义一个ref变量，用于存储当前的火灾数据
// 计算容器样式
const containerStyle = computed(() => ({
minHeight: heightConfig.containerMinHeight,
'--card-spacing': heightConfig.cardSpacing,
'--header-height': heightConfig.headerHeight,
'--chart-min-height': heightConfig.chartMinHeight
}));
// 定义一个响应式变量currentFireData，存储火灾数据
const currentFireData = ref([
// 火灾数据1
{
location: "红色 四单元 七号搂 3楼",
severity: "四级 (大规模)",
status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现",
fireLevel: 0,
isXFOk: false
},
// 火灾数据2
{
location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)",
status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现",
fireLevel: 1,
isXFOk: true
severity: 1,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: false,//是否已解除
},
// 火灾数据3
{
location: "金色家园小区 四单元 七号搂 3楼",
severity: "四级 (大规模)",
status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现",
fireLevel: 0,
isXFOk: false
severity: 2,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: false,//是否已解除
},
{
location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)",
status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现",
fireLevel: 2,
isXFOk: true
severity: 3,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: false,//是否已解除
},
{
location: "金色家园小区 四单元 七号搂 3楼",
severity: "四级 (大规模)",
status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现",
fireLevel: 0,
isXFOk: false
severity: 2,//级别
time: "2025-8-7 11:14:36",
location: "红色 四单元 七号搂 3楼",//位置
status: "消防人员已到达现场",//状态
personnel: '刘诗涵',//人员
drone: 'DR569',//无人机编号
isXFOk: true,//是否已解除
},
{
location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)",
status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现",
fireLevel: 2,
isXFOk: true
}
]);
// 定义一个uavRepairData的ref，里面包含了多个无人机维修数据
const uavRepairData = ref([
// 第一个无人机维修数据，已经维修
{ isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第二个无人机维修数据，已经维修
{ isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第三个无人机维修数据，未维修
{ isRepaid: false, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第四个无人机维修数据，已经维修
{ isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第五个无人机维修数据，未维修
{ isRepaid: false, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第六个无人机维修数据，已经维修
{ isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
])
const menuItems = ref([
{ name: '首页', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/dashboard/analysis' },
{ name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' },
{ name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areabuildmanage' },
{ name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/uavshowdate' },
{ name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areafiremanage/firesurveillance' },
{ name: '数字孪生管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/digital-twin' },
{ name: '个人信息', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' }
]);
// 响应式配置
const layoutConfig = reactive({
containerMinHeight: '100vh',
cardSpacing: '1rem',
topCardHeight: '120px', // 固定顶部卡片高度
statsMinHeight: '300px' // 确保统计区域最小高度
});
// 计算容器样式
const containerStyle = computed(() => ({
minHeight: layoutConfig.containerMinHeight,
'--card-spacing': layoutConfig.cardSpacing,
}));
]);
// 挂载时初始化
onMounted(() => {
nextTick(() => {
useAppStoreInstance.initavatarUrlFn()
})
});
// 监听路由变化
watch(route, () => {
useAppStoreInstance.initavatarUrlFn()
}, { immediate: true });
// 组件卸载时清理
onUnmounted(() => {
});
</script>
<style scoped>
/* 基础样式 - 使用CSS变量方便调整 */
.dashboard-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: rgba(0, 0, 0, 0.05);
......@@ -154,152 +215,328 @@ watch(route, () => {
overflow: hidden;
}
/* 主内容区样式 */
.main-content {
display: flex;
gap: var(--card-spacing);
/* padding: 0.4rem 0; */
height: 100vh;
box-sizing: border-box;
overflow: hidden;
}
.left-section {
flex: 2;
/* 卡片通用样式 - 核心优化 */
.info-card {
background-color: #2d2d34;
/* border-radius: 8px; */
/* padding: 1rem; */
display: flex;
flex-direction: column;
gap: var(--card-spacing);
height: 100%;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
/* 顶部卡片容器 */
.left-top {
display: flex;
height: auto;
/* 取消固定高度，改为内容自适应 */
.info-card:hover {
/* transform: translateY(2px); */
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
}
/* 通用卡片样式 */
.info-card {
/* background-color: #fff; */
/* padding: 1rem; */
box-sizing: border-box;
.map-image:hover {
/* transform: translateY(4px); */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
/* 用户信息卡片 */
.region-overview {
/* 右侧区域样式 */
.left-section {
flex: 1;
min-width: 200px;
/* 确保最小宽度 */
}
/* 用户信息布局 */
.info-grid {
display: flex;
align-items: center;
gap: 0.8rem;
flex-direction: column;
/* gap: var(--card-spacing); */
/* height: calc(100vh - 100px); */
overflow: hidden;
}
.info-item {
/* 右侧卡片 - 使用flex布局自动分配高度 */
.current-situation {
display: flex;
flex-direction: column;
padding: 0.5rem;
height: calc(95vh - 146px);
background-color: #2d2d34;
}
.situationMain {
overflow-y: auto;
/* padding: 10px; */
/* padding-right: 5px; */
/* height: calc(100% - 50px); */
color: #ffffff;
/* box-shadow: inset 0 -20px rgba(0, 0, 0, 1); */
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 1); */
}
/* 待办事项卡片 */
.region-map {
flex: 0.5;
.leftSize {
width: 100%;
height: 5vh;
/* border: 1px solid red; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-width: 150px;
/* 确保最小宽度 */
background-color: rgba(100, 149, 237, 0.30);
}
.click1 {
background-image: url(../../../static/ui/click1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.region-map:hover .menu_left-icon {
animation: infiniteRotate 1s linear infinite;
.isXFOk {
color: #10b981;
}
@keyframes infiniteRotate {
0% {
transform: rotate(0deg);
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
25% {
transform: rotate(45deg);
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
50% {
transform: rotate(0deg);
}
::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 10px;
}
75% {
transform: rotate(-45deg);
::-webkit-scrollbar-thumb:hover {
background: #999;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.main-content {
flex-direction: column;
height: auto;
min-height: 100vh;
}
100% {
transform: rotate(0deg);
.region-overview,
.region-map {
height: 300px;
margin-bottom: var(--card-spacing);
}
}
.region-map span {
margin-left: 0.5rem;
font-weight: 500;
@media (max-width: 768px) {}
/* 火情告警 */
/* 火情解除 */
.jiechu {
background-image: url(../../../static/ui/jiechu.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 统计区域卡片 */
.stats-alerts {
/* display: flex; */
gap: 1rem;
/* border-radius: 8px; */
height: calc(100vh - 150px);
border: 1px solid red;
.oneji {
background-image: url(../../../static/ui/oneji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.onejiColor {
background: linear-gradient(to right, #fe473e 40%, #df2d39 100%);
}
/* 统计方块样式 */
.card-tong {
flex: 1;
border-radius: 10px;
height: 100%;
box-shadow: 2px 0 rgba(0, 0, 0, 0.1);
overflow: auto;
.twojiColor {
background: linear-gradient(to right, #f08f20 40%, #e56b00 100%);
}
.card-show {
flex: 0.5;
.threejiColor {
background: linear-gradient(to right, #ffe263 40%, #ffcc25 100%);
}
.card-tong-large {
flex: 2;
/* 第三个方块宽度是其他两个的两倍 */
.twoji {
background-image: url(../../../static/ui/twoji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 响应式适配 */
@media (max-width: 1024px) {
.left-top {
.threeji {
background-image: url(../../../static/ui/threeji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.itemtop {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #4d4642;
align-items: center;
margin-bottom: 5px;
}
.itemtop0 {
margin: 10px 0;
width: 65px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 14px;
color: #ffffff;
border-radius: 3px;
padding: 2px 5px;
cursor: pointer;
}
.itemjiechu {
border: 1px solid #37ba6d;
color: #37ba6d;
margin-left: 10px;
}
.itemimg {
width: 13px;
height: 18px;
}
.itemimgs {
width: 30px;
height: 30px;
margin-right: 10px;
}
.left-item {
padding: 10px;
}
/* 右侧样式 */
/* 左侧区域样式 */
.right-section {
/* background-color: #10b981; */
flex: 3.5;
display: flex;
flex-direction: column;
}
/* gap: var(--card-spacing); */
height: calc(100vh - 146px);
overflow: hidden;
color: #ffffff;
/* border: 1px solid red; */
}
.region-overview,
.region-map {
.right-one {
margin-bottom: 10px;
}
.tight_TitleFiex {
display: flex;
align-items: center;
padding-left: 10px;
margin-bottom: 10px;
}
.tight_Title {
border-left: 3px solid #5a52c2;
padding-left: 10px;
margin-bottom: 10px;
}
.tight_Title1 {
width: 25%;
height: 50px;
}
.fons1 {
color: #747476;
font-size: 14px;
}
.fons2 {
font-size: 14px;
}
.fons3 {
color: #5a52c2;
}
.level {
display: flex;
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 5px;
background-color: #f9433d;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 5px;
}
.itemimg1 {
width: 13px;
height: 18px;
}
/* 视频弹框 */
.right-two {
width: 100%;
flex: none;
}
flex: 4;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.stats-alerts {
flex-direction: column;
}
.right-three {
flex: 1;
/* border: 1px solid blue; */
display: flex;
}
.card-tong-large {
flex: none;
height: 150px;
/* 在移动端保持高度 */
}
.video-player {
width: 100%;
height: 100%;
border-radius: 4px;
/* aspect-ratio: 16/9; */
background: #000;
}
.rightThreeDiv {
width: 150px;
height: 100%;
border: 1px solid red;
margin-right: 5px;
}
/* 分页-------------------------------------- */
.el-pagination {}
:deep() .btn-prev {
margin-right: 5px;
background-color: #2f2f34 !important;
border: 1px solid #56565a;
color: #ffffff !important;
}
:deep() .el-pagination__total {
color: #ffffff;
}
:deep() .btn-next {
margin-left: 5px;
background-color: #2f2f34 !important;
border: 1px solid #56565a;
color: #ffffff !important;
}
:deep() .el-pager>.is-active {
background-color: #6c62f5 !important;
color: #ffffff;
}
/* 分页结束-------------------------------------- */
</style>
\ No newline at end of file
src/views/commentcomponents/searchtop/index.vue
浏览文件 @ 2f01ee12
......@@ -17,12 +17,10 @@
<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 class="operation-buttons" v-if="isShow">
<!-- 操作按钮组 -->
<div class="search-buttons">
<el-button type="default" style="width: 45%;" @click="resetSearchForm">
重置
......
src/views/dashboard/analysis/index.vue
浏览文件 @ 2f01ee12
......@@ -131,7 +131,7 @@
<div class="info-card current-situation1">
<div class="card-headers">
<div class="headTitle">火情告警</div>
<div class="headTitle">配备无人机统计</div>
<div class="titleR">
<img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
<div>更多</div>
......@@ -372,7 +372,7 @@ const initChart2 = () => {
grid: {
left: '3%',
right: '3%',
bottom: '3%',
bottom: '10%',
top: '3%',
containLabel: true // 确保标签不被裁剪
},
......
src/views/login/index.vue
浏览文件 @ 2f01ee12
<template>
<div class="login">
<div class="login-container">
<img src="../../static/ui/loginbac.png" alt="" class="loginBac">
<!-- 左侧标题区域 -->
<div class="left-panel">
<img style="width: 100%;height: 100%;" src="../../static/image/login_bg.png" alt="logo"></img>
<!-- <div class="title-group">
<h1 class="main-title">智能消防灭火信息管控平台</h1>
<p class="sub-title">高效·智能·安全</p>
</div> -->
<img style="width: 100%;height: 100%;" src="../../static/ui/login.png" alt="logo">
<div class="title-group">
<h1 class="main-title">无人灭火机器人数字孪生后台管理系统</h1>
<p class="sub-title">Unmanned Firefighting Robot Digital Twin Back-end Management System</p>
</div>
</div>
<!-- 右侧登录表单区域 -->
<div class="right-panel">
<div class="login-card">
<h2 class="welcome-text">欢迎回来</h2>
<p class="login-desc">请输入您的账号和密码登录</p>
<h2 class="welcome-text">登录</h2>
<!-- <p class="login-desc">请输入您的账号和密码登录</p> -->
<el-form ref="formref" :model="form" :rules="rules" class="login-form">
<el-form-item prop="phone">
<el-input v-model="form.phone" placeholder="输入手机号码" prefix-icon="Phone" clearable class="custom-input"
<el-input v-model="form.phone" placeholder="输入手机号码" prefix-icon="User" clearable class="custom-input"
@keyup.enter="commit" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" placeholder="输入密码" type="password" prefix-icon="Lock" clearable
class="custom-input" @keyup.enter="commit" />
<el-input v-model="form.password" placeholder="输入密码" type="password" prefix-icon="Lock" show-password
clearable class="custom-input" @keyup.enter="commit" />
</el-form-item>
<div class="form-options">
<el-checkbox v-model="rememberMe" class="remember-checkbox">记住账号</el-checkbox>
<el-button type="text" class="forgot-password">忘记密码?</el-button>
<!-- <el-button type="text" class="forgot-password">忘记密码?</el-button> -->
</div>
<el-button type="primary" class="login-button" @click="commit" :loading="loginLoading">
......@@ -132,7 +129,7 @@ initFormData();
<style scoped lang="scss">
.login {
padding: 10rem;
// padding: 8rem;
width: 100vw;
height: 100vh;
overflow: hidden;
......@@ -161,56 +158,105 @@ initFormData();
z-index: 1;
}
/* 左侧区域样式 */
.left-panel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
// padding: 0 5vw;
color: #fff;
// background-image: url(../../static/image/loginback.png);
// background-color: #1d2129;
// background: linear-gradient(90deg, rgba(0, 47, 108, 0.8), rgba(0, 47, 108, 0.6) 70%, transparent);
position: relative;
overflow: hidden;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.title-group {
// background-color: #165dff;
max-width: 500px;
position: absolute;
top: 2rem;
left: 2rem;
color: #fff;
z-index: 1;
background-image: url('../../static//image//bg_title_bg.png');
}
.main-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
font-size: 1.5rem;
font-weight: 600;
margin: 0 1rem;
margin-bottom: 0.1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.sub-title {
font-size: 1rem;
opacity: 0.9;
font-size: 0.5rem;
opacity: 0.6;
margin: 0 1rem;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
// .left-panel {
// flex: 1;
// display: flex;
// flex-direction: column;
// justify-content: center;
// // padding: 0 5vw;
// color: #fff;
// // background-image: url(../../static/image/loginback.png);
// // background-color: #1d2129;
// // background: linear-gradient(90deg, rgba(0, 47, 108, 0.8), rgba(0, 47, 108, 0.6) 70%, transparent);
// }
// .title-group {
// // background-color: #165dff;
// max-width: 500px;
// }
// .main-title {
// font-size: 2.5rem;
// font-weight: 700;
// margin-bottom: 1rem;
// line-height: 1.3;
// text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
// }
// .sub-title {
// font-size: 1rem;
// opacity: 0.9;
// }
.right-panel {
width: 380px;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
background-color: #2D2D34;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);
position: relative;
}
.login-card {
position: absolute;
width: 100%;
padding: 2.5rem;
max-width: 320px;
z-index: 100;
}
.welcome-text {
width: 100%;
height: 45px;
line-height: 45px;
font-size: 1.5rem;
font-weight: 600;
color: #1d2129;
margin-bottom: 0.5rem;
color: #ffffff;
display: flex;
align-content: center;
justify-content: center;
margin-bottom: 2.5rem;
background-image: url('../../static/image/topTitle.png');
}
.login-desc {
......@@ -231,7 +277,8 @@ initFormData();
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.5rem 0 1.5rem;
// margin: 0.5rem 0 1.5rem;
margin-bottom: 0.5rem;
}
.remember-checkbox {
......@@ -249,7 +296,7 @@ initFormData();
width: 100%;
height: 48px;
font-size: 1rem;
background-color: #165dff;
background-color: #6C62F5;
border-radius: 6px;
}
......@@ -289,4 +336,28 @@ initFormData();
height: calc(100vh - 200px);
}
}
.loginBac {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
:deep() .el-input .el-input__wrapper {
background-color: rgba(10, 12, 16, 0.1) !important;
}
:deep(.el-input__inner:-webkit-autofill) {
-webkit-text-fill-color: #fff !important;
transition: background-color 5000s ease-in-out 0s !important;
-webkit-box-shadow: 0 0 0 1000px #292931 inset;
}
:deep() .el-form-item {
margin-bottom: 0px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论