feat: 添加登录页回车事件监听和地图背景色优化

hejianhao

2026-01-19 c72471648756cd8fc563bb5a2408dc6ca77ba012

feat: 添加登录页回车事件监听和地图背景色优化

- 在登录页添加回车键事件监听，优化用户体验
- 为地图容器添加背景色#001635
- 优化项目首页和人员值班页面的样式和交互
- 添加新的图片资源用于分类筛选图标状态
- 优化AMapLoader的加载逻辑，避免重复加载

 screen/src/assets/img/home/11Combined Shape@2x.png

 screen/src/assets/img/home/11Shape@2x.png

 screen/src/view/home/index.vue

@@ -1,7 +1,10 @@
<template>
  <div class="relative">
    <HeaderBox />
    <div id="container" style="width: 1920px; height: 995px"></div>
    <div
      id="container"
      style="width: 1920px; height: 995px; background-color: #001635"
    ></div>
    <!-- 类型切换tab -->
    <div
      class="flex a-center absolute postion-center top--109 br--16 c-fff fs--14 bgcolor4 SSHR"
@@ -55,20 +58,32 @@
          @click="toggleCategory('municipal')"
        >
          <img
            v-if="categoryFilter.municipal"
            src="../../assets/img/home/Combined Shape@2x.png"
            class="w--16 h--16 shrink0"
          />
          <div>市政</div>
          <img
            v-else
            src="../../assets/img/home/11Combined Shape@2x.png"
            class="w--16 h--16 shrink0"
          />
          <div :class="!categoryFilter.municipal && 'gray-text'">市政</div>
        </div>
        <div
          class="flex a-center gap--14 cursor-pointer"
          @click="toggleCategory('house')"
        >
          <img
            v-if="categoryFilter.house"
            src="../../assets/img/home/Shape@2x (4).png"
            class="w--18 h--16 shrink0"
          />
          <div>房建</div>
          <img
            v-else
            src="../../assets/img/home/11Shape@2x.png"
            class="w--18 h--16 shrink0"
          />
          <div :class="!categoryFilter.house && 'gray-text'">房建</div>
        </div>
      </div>
      <div class="flex a-center j-between gap--23 px--13 fs--12 SHSR mt--26">
@@ -76,22 +91,31 @@
          class="flex a-center flex-column cursor-pointer"
          @click="toggleLevel('A')"
        >
          <div class="w--8 h--8 mb--5 br50 bgcolor8"></div>
          <div class="color8">A类</div>
          <div
            class="w--8 h--8 mb--5 br50"
            :class="levelFilter.A ? 'bgcolor8' : 'gray-bg'"
          ></div>
          <div :class="levelFilter.A ? 'color8' : 'gray-text'">A类</div>
        </div>
        <div
          class="flex a-center flex-column cursor-pointer"
          @click="toggleLevel('B')"
        >
          <div class="w--8 h--8 mb--5 br50 bgcolor9"></div>
          <div class="color9">B类</div>
          <div
            class="w--8 h--8 mb--5 br50"
            :class="levelFilter.B ? 'bgcolor9' : 'gray-bg'"
          ></div>
          <div :class="levelFilter.B ? 'color9' : 'gray-text'">B类</div>
        </div>
        <div
          class="flex a-center flex-column cursor-pointer"
          @click="toggleLevel('C')"
        >
          <div class="w--8 h--8 mb--5 br50 bgcolor10"></div>
          <div class="color10">C类</div>
          <div
            class="w--8 h--8 mb--5 br50"
            :class="levelFilter.C ? 'bgcolor10' : 'gray-bg'"
          ></div>
          <div :class="levelFilter.C ? 'color10' : 'gray-text'">C类</div>
        </div>
      </div>
    </div>
@@ -399,6 +423,7 @@
  data() {
    return {
      mapView: null,
      mapPromise: null,
      dateRange: [moment().startOf("month"), moment().endOf("month")], //默认本月
      dateTxt: "",
      activeTab: 1,
@@ -432,7 +457,12 @@
      immediate: true,
    },
  },
  created() {},
  created() {
    this.mapPromise = AMapLoader.load({
      key: "232929db1cb31f26d42b3645a7456154",
      version: "2.0",
    });
  },
  mounted() {
    this.setMapload();
    this.$nextTick(() => {
@@ -623,10 +653,13 @@
    },

    setMapload() {
      AMapLoader.load({
        key: "232929db1cb31f26d42b3645a7456154",
        version: "2.0",
      })
      if (!this.mapPromise) {
        this.mapPromise = AMapLoader.load({
          key: "232929db1cb31f26d42b3645a7456154",
          version: "2.0",
        });
      }
      this.mapPromise
        .then((AMap) => {
          // 微信建筑图层
          let satellite = new AMap.TileLayer.Satellite();
@@ -634,7 +667,7 @@
          let roadNet = new AMap.TileLayer.RoadNet();
          this.mapView = new AMap.Map("container", {
            zoom: 13,
            center: [108.357471, 22.828643], // 初始化地图中心点
            center: [104.065617, 30.656952], // 初始化地图中心点
            mapStyle: "amap://styles/darkblue",
            // layers: [satellite],
          });
@@ -650,32 +683,32 @@
      }
      const points = [
        {
          position: [108.357471, 22.828643],
          position: [104.05, 30.65],
          category: "municipal",
          level: "A",
        },
        {
          position: [108.367471, 22.828643],
          position: [104.051, 30.651],
          category: "municipal",
          level: "B",
        },
        {
          position: [108.347471, 22.828643],
          position: [104.052, 30.652],
          category: "municipal",
          level: "C",
        },
        {
          position: [108.357471, 22.838643],
          position: [104.037471, 30.658643],
          category: "house",
          level: "A",
        },
        {
          position: [108.367471, 22.838643],
          position: [104.067471, 30.658643],
          category: "house",
          level: "B",
        },
        {
          position: [108.347471, 22.838643],
          position: [104.057471, 30.658643],
          category: "house",
          level: "C",
        },
@@ -782,6 +815,14 @@
.bgimg5 {
  background-image: url("../../assets/img/home/25@2x.png");
  background-size: 100% 100%;
}

.gray-text {
  color: rgba(255, 255, 255, 0.5) !important;
}

.gray-bg {
  background: rgba(255, 255, 255, 0.5) !important;
}

.color5 {
@@ -930,9 +971,9 @@
      display: none;
    }

  ::v-deep .el-range-separator {
    display: none;
  }
    ::v-deep .el-range-separator {
      display: none;
    }

    ::v-deep .el-input__inner {
      background: transparent;

 screen/src/view/login/index.vue

@@ -216,7 +216,9 @@
  created() {
    this.generateCaptcha();
  },
  mounted() {},
  mounted() {
    document.addEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    // 生成验证码
    generateCaptcha() {
@@ -338,6 +340,17 @@
      }
    },

    // 监听当前页面是否按下了回车
    handleKeyDown(event) {
      if (event.key === "Enter") {
        if (this.showLoginBox) {
          this.handleLogin();
        } else {
          this.confirmSelect();
        }
      }
    },

    // 验证码点击事件
    onCaptchaClick() {
      this.refreshCaptcha();
@@ -383,6 +396,11 @@
          type: "warning",
        });
      }
    },

    beforeDestroy() {
      // 组件销毁前移除事件监听器，避免内存泄漏
      document.removeEventListener("keydown", this.handleKeyDown);
    },
  },
};
@@ -467,6 +485,10 @@
      color: rgba(255, 255, 255, 0.2);
    }

    ::-ms-reveal {
      display: none;
    }

    input:focus {
      outline: none;
    }

 screen/src/view/personnelOnDuty/index.vue

@@ -207,63 +207,63 @@
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">岗位：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
        </div>
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">问题备注：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">在岗情况：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">岗位：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">检查时间：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
                2020-12-12
              </div>
        </div>
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">问题备注：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">图片：</div>
              <div class="flex a-center oa gap--14">
                <img
                  v-for="item in 6"
                  :key="item"
                  src="../../assets/img/home/@3x@2x.png"
                  class="w--150 h--120"
                />
              </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">在岗情况：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检查时间：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              2020-12-12
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">图片：</div>
            <div class="flex a-center oa gap--14">
              <img
                v-for="item in 6"
                :key="item"
                src="../../assets/img/home/@3x@2x.png"
                class="w--150 h--120"
              />
            </div>
          </div>
        </div>

 screen/src/view/projectHome/index.vue

@@ -2,7 +2,7 @@
  <div class="relative">
    <HeaderBox title="石盘安置C地块项目" />
    <!-- 地图 -->
    <div id="container" style="width: 1920px; height: 995px"></div>
    <div id="container" style="width: 1920px; height: 995px; background-color: #001635"></div>
    <!-- 左边 内容 -->
    <div class="left-card">
      <div class="mt--16">
@@ -104,7 +104,7 @@
        <TitleBox>
          <template #title>各分项隐患趋势 </template>
          <template #right>
            <div class="card-more">
            <div @click="toRiskTrend()" class="card-more">
              <span>详情</span>
              <img src="../../assets/img/project/more.png" />
            </div>
@@ -298,7 +298,7 @@
          </template>
        </TitleBox>
      </div>
      <div class="mt--30" @click="toRiskTrend()">
      <div class="mt--30">
        <TitleBox>
          <template #title>项目风险趋势 </template>
          <template #right>
@@ -338,6 +338,7 @@
  data() {
    return {
      mapView: null,
      mapPromise: null,
      dateRange: [moment().startOf("month"), moment().endOf("month")], //默认本月
      markers: [],

@@ -419,7 +420,12 @@
      immediate: true,
    },
  },
  created() { },
  created() {
    this.mapPromise = AMapLoader.load({
      key: "232929db1cb31f26d42b3645a7456154",
      version: "2.0",
    });
  },
  mounted() {
    this.setMapload()
    this.initPie3D()
@@ -474,10 +480,13 @@
      });
    },
    setMapload() {
      AMapLoader.load({
        key: "232929db1cb31f26d42b3645a7456154",
        version: "2.0",
      })
      if (!this.mapPromise) {
        this.mapPromise = AMapLoader.load({
          key: "232929db1cb31f26d42b3645a7456154",
          version: "2.0",
        });
      }
      this.mapPromise
        .then((AMap) => {
          // 微信建筑图层
          let satellite = new AMap.TileLayer.Satellite();