yjxp-web/src/views/worker/index.vue

<template>
  <div class="container">
    <div class="container-header">
      <div ref="searchBoxRef" class="search-box">
        <van-search
          v-model="queryParams.keywords"
          class="common-search"
          :left-icon="searchImg"
          :right-icon="closeImg"
          placeholder="请输入搜索内容"
          @search="on_search_keyword"
          @click-right-icon.stop="on_search_cancel"
        />
        <div v-show="showSearch" class="search-list">
          <van-list
            v-model:loading="loading"
            v-model:error="error"
            error-text="请求失败，点击重新加载"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="getSearchList"
          >
            <div
              v-for="(item, index) in searchList"
              :key="index"
              class="item"
              @click="handleClickItem(item)"
            >
              {{ item.name }}
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <div class="notice-bar">
      <!-- 静态的预警信息 -->
      <div class="notice-item">
        <div class="notice-header">
          <div class="notice-label-box">
            <div class="notice-label">预警信息</div>
          </div>
          <!-- 查看更多的链接 -->
          <div class="notice-more" @click="goToInformationReception">查看更多 >></div>
        </div>
        <div class="notice-content">
          这里是静态的预警信息内容，不需要从变量中获取。
        </div>
        <div class="notice-time">2023-10-10 10:00:00</div>
      </div>
    </div>
    <div class="container-content">
      <div class="padding-content">
        <van-grid :column-num="2">
          <van-grid-item
            v-for="(item, index) in menu"
            :key="index"
            @click="handleClickMenu(item.url)"
          >
            <div class="card">
              <div :class="item.icon" />
              <van-badge :content="item.num" max="99" :show-zero="false">
                <div class="card-title">{{ item.name }}</div>
              </van-badge>
            </div>
          </van-grid-item>
        </van-grid>
        <div class="app_panel">
          <div class="app_panel_title">综合应用</div>
          <div v-for="(item, index) in menu2" :key="index" class="box">
            <div class="box-title">{{ item.name }}</div>
            <div class="box-content">
              <div
                v-for="(item2, index2) in item.children"
                :key="index2"
                class="box-item"
                @click="handleClickMenu(item2.url)"
              >
                <img class="icon" :src="getImageUrl(item2.icon)" alt="" />
                <span>{{ item2.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <OnlineRollCall />
  </div>
</template>

<script lang="ts" setup>
import { onClickOutside } from "@vueuse/core";
import { onMounted, reactive, ref } from "vue";
import { selectTask } from "@/api/emergencyCommandMap/JointDuty";
import searchImg from "@/assets/images/search.png";
import { useRouter } from "vue-router";
import closeImg from "@/assets/images/close.png";
import { getPointInfoComprehensiveSearch } from "@/api/globalMap";
import OnlineRollCall from "@/components/OnlineRollCall/index.vue";

const router = useRouter();
const noticeBarState = reactive({
  show: false,
  latestMessages: []
});

const goToInformationReception = () => {
  router.push({ name: "InformationReception" });
};
// 菜单数据
const menu = ref([
  { name: "巡查工作", icon: "icon1", num: 0, url: "inspectionWork" },
  { name: "风险防控", icon: "icon2", num: 0, url: "riskManagement" },
  { name: "数据管理", icon: "icon3", num: 0, url: "" },
  { name: "在线点名", icon: "icon4", num: 0, url: "rollCallRecord2" }
]);

// 综合应用菜单
const menu2 = ref([
  {
    name: "自然灾害风险监测",
    children: [
      { name: '预警态势', icon: 'monitor', url: 'WarningSituation' },
      { name: '大风灾害', icon: 'wind', url: 'GaleDisaster' },
      { name: '森林火灾', icon: 'forestFire', url: 'ForestFireWarn' },
      { name: '台风实况', icon: 'typhoon', url: 'TyphoonPath' },
      { name: '水文监测', icon: 'hydrology', url: 'HydrologicalMonitor' },
    ]
  },
  {
    name: "应急事件场景专题",
    children: [
      { name: "自然灾害", icon: "nature", url: "" },
      { name: "事故灾害", icon: "accident", url: "" },
      { name: "城市应急事件专题", icon: "city", url: "CityEmergencyEvent" }
    ]
  }
]);
const handleClickMenu = url => {
  if (!url) return;
  router.push({ name: url });
};
const getImageUrl = name => {
  return new URL(`../../assets/images/index/${name}.png`, import.meta.url).href;
};

// 请求数据
const initData = async () => {
  try {
    const sortOrder = "desc";
    const sortBy = "creation_time";
    const event_code = "YJSJ0000000001";

    console.log("请求任务数据:", event_code);
    const res = await selectTask({
      sortOrder: sortOrder,
      sortBy: sortBy,
      event_code: event_code
    });
    if (res && res.data) {
      noticeBarState.latestMessages = res.data.slice(0, 3).map(msg => ({
        event_title: msg.event_title,
        event_time: msg.event_time
      }));
      noticeBarState.show = true;
    } else {
      console.error("API response data is empty or invalid");
    }
  } catch (error) {
    console.error("请求任务数据失败:", error);
    noticeBarState.show = false; // 如果请求失败，不显示通知栏
  }
};
// 搜索
const searchBoxRef = ref();
let showSearch = ref();
const total = ref(0);
let loading = ref(false);
let error = ref(false);
let finished = ref(false);
const queryParams = reactive({
  page: 0,
  page_size: 15,
  keywords: ""
});
const searchList = ref([]);
onClickOutside(searchBoxRef, event => {
  showSearch.value = false;
});
const getSearchList = () => {
  if (!queryParams.keywords) {
    return (loading.value = false);
  }
  queryParams.page++;
  getPointInfoComprehensiveSearch(queryParams)
    .then(res => {
      const items = res.data.list || [];
      total.value = res.data.total;
      if (queryParams.page == 1) {
        searchList.value = [];
      }
      items.forEach(val => {
        searchList.value.push(val);
      });
      finished.value = queryParams.page_size * queryParams.page >= total.value;
      showSearch.value = true;
    })
    .catch(() => {
      error.value = true;
      finished.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
};
const on_search_keyword = val => {
  queryParams.keywords = val;
  queryParams.page = 0;
  getSearchList();
};
const on_search_cancel = () => {
  showSearch.value = false;
  queryParams.keywords = "";
  queryParams.page = 0;
  finished.value = false;
  searchList.value = [];
};
const handleClickItem = item => {
  showSearch.value = false;
  queryParams.keywords = "";
  queryParams.page = 0;
  finished.value = false;
  searchList.value = [];
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.container {
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
}
.container-header {
  width: 100%;
  height: 370px;
  background: url("@/assets/images/index/banner.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 70px;
  .search-box {
    width: 100%;
    position: relative;
  }
  .van-search {
    width: 100%;
  }
}
.container-content {
  .padding-content {
    padding: 0 16px;
  }
  .van-hairline--top:after {
    border-top-width: 0 !important;
  }
  :deep(.van-grid) {
    .van-grid-item {
      &:nth-child(1) {
        padding-right: 12px;
        padding-bottom: 12px;
      }
      &:nth-child(2) {
        padding-bottom: 12px;
      }
      &:nth-child(3) {
        padding-right: 12px;
      }
      .card {
        width: 100%;
        height: 89px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 15px 9px 0;
        font-size: 14px;
        background: url(@/assets/images/index/cardBg1.png) no-repeat;
        background-size: 100% 100%;
        &:nth-child(2) {
          background: url(@/assets/images/index/cardBg2.png) no-repeat;
          background-size: 100% 100%;
        }
        &:nth-child(3) {
          background: url(@/assets/images/index/cardBg3.png) no-repeat;
          background-size: 100% 100%;
        }
        &:nth-child(4) {
          background: url(@/assets/images/index/cardBg4.png) no-repeat;
          background-size: 100% 100%;
        }
        .card-title {
          font-size: 14px;
          color: #414f64;
        }
      }
      .icon1 {
        background: url(@/assets/images/index/icon1.png) no-repeat;
      }
      .icon2 {
        background: url(@/assets/images/index/icon2.png) no-repeat;
      }
      .icon3 {
        background: url(@/assets/images/index/icon3.png) no-repeat;
      }
      .icon4 {
        background: url(@/assets/images/index/icon4.png) no-repeat;
      }
      .icon1,
      .icon2,
      .icon3,
      .icon4 {
        width: 67px;
        height: 67px;
        background-size: 100% 100%;
      }
    }
    .van-grid-item__content {
      padding: 0;
      background: transparent;
      &::after {
        border: none;
      }
    }
  }
}

.app_panel {
  padding-top: 12px;
  .app_panel_title {
    height: 26px;
    font-weight: bold;
    font-size: 18px;
    color: #414f64;
    letter-spacing: 0;
    margin-bottom: 4px;
  }
  .box {
    width: 100%;
    height: 72px;
    background: url("@/assets/images/index/boxBg.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
    .box-title {
      font-size: 12px;
      color: #3687fe;
      padding: 0 10px;
    }
    .box-content {
      display: flex;
      flex-wrap: wrap;
      padding-top: 3px;
      .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 20%;
        font-size: 12px;
        .icon {
          width: 32px;
          height: 34px;
        }
      }
    }
  }
}
.search-list {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 9;
  width: 100%;
  height: calc(100vh - 400px);
  overflow-y: auto;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  .item {
    padding: 8px 15px;
    border-bottom: 1px solid #eeeeee;
  }
}
.common-search {
  :deep(.van-field__left-icon) {
    .van-icon__image {
      width: 12px;
      height: 12px;
    }
  }
  :deep(.van-field__right-icon) {
    width: 30px;
    height: 30px;
    padding: 0;
    .van-icon__image {
      width: 30px;
      height: 30px;
    }
  }
}
.notice-bar {
  width: 100%;
  background-color: #f4f8ff;
  padding: 0 10px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: -60px;
  border: 1px solid #EEEEEE;
}

.notice-item {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
  .notice-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
  }
}

.notice-label-box {
  position: absolute;
  top: -3px;
  left: 0;
  background-color: #ffffff;
  padding: 5px;
  transform: skewX(-20deg); /* 斜切变形 */
  .notice-label {
    color: #FFAF00;
    font-size: 14px;
    transform: skewX(20deg);
  }
}


.notice-content {
  color: #414F64;
  font-size: 14px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.notice-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  width: 100%;
  text-align: right;
  line-height: 22px;
}

.notice-more {
  font-size: 14px;
  color: #2C81FF;
  cursor: pointer;
}
</style>