最新无人机代码

src/components/searchTable/search.vue

+<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

@@ -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/commentcomponents/searchtop/index.vue

@@ -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

@@ -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

 <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