feat: 增加设备分类

Gary Gu

7 days ago 36e044280298d6f6b37b1295f9eba25584ef66a2

 src/components/Header.vue

@@ -2,37 +2,56 @@
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:18
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-26 15:50:22
 * @LastEditTime: 2025-03-17 11:05:39
 * @FilePath: \北京交通大学\src\components\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <header class="headerWrapper">
    <div class="relative z-[100] w-full h-[80px]" :style="{
      backgroundImage: `url(${backgroundImage})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center center',
      backgroundSize: '100% 100%'
    }">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between">
    <div
      class="relative z-[100] w-full h-[80px]"
      :style="{
        backgroundImage: `url(${backgroundImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%',
      }"
    >
      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full px-[16px] flex items-center justify-between tabWrapper">
        <div class="flex flex-col items-center cursor-pointer relative" @click="onHomeClick('home')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'home' ? 'home_active.png' : 'home.png')" alt="">
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{'text-[#FFBF00]': activeTab === 'home'}">项目首页</div>
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'home' ? 'home_active.png' : 'home.png')" alt="" />
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'home' }">项目首页</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'home'">
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'home'" />
        </div>
        <div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('xietong')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'xietong' ? 'xietong_active.png' : 'xietong.png')" alt="" />
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'xietong' }">协同平台</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'xietong'" />
        </div>

        <div class="flex flex-col items-center ml-[78px] cursor-pointer relative" @click="onHomeClick('zhihui')">
          <div class="flex items-center">
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'zhihui' ? 'zhihui_active.png' : 'zhihui.png')" alt="">
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{'text-[#FFBF00]': activeTab === 'zhihui'}">智慧工地</div>
            <img class="w-[20px] h-[20px]" :src="getImageUrl(activeTab === 'zhihui' ? 'zhihui_active.png' : 'zhihui.png')" alt="" />
            <div class="text-[20px] text-[#C8C8C8] ml-[8px]" :class="{ 'text-[#FFBF00]': activeTab === 'zhihui' }">智慧工地</div>
          </div>
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'zhihui'">
          <img class="w-[116px] h-[8px] absolute bottom-[-4px]" :src="getImageUrl('home_line.png')" alt="" v-if="activeTab === 'zhihui'" />
        </div>
      </div>
      <div class="absolute top-0 right-0">
        <div class="flex items-center h-[80px] mr-[20px]">
          <img class="w-[20px] h-[20px]" :src="getImageUrl('time.png')" alt="">
          <el-select v-model="bindSelected" placeholder="请选择" class="mr-[24px]" @change="handleSelect">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <i
            class="el-icon-full-screen cursor-pointer text-[#00FFFF] text-[24px]"
            @click="handleFullscreen"
            :title="$fullscreen.isFullscreen ? '退出全屏' : '全屏'"
          ></i>
          <img class="w-[20px] h-[20px] ml-[8px]" :src="getImageUrl('time.png')" alt="" />
          <div class="text-[24px] text-[#FFBF00] ml-[8px]">{{ currentTime }}</div>
          <div class="text-[16px] text-[#C8C8C8] ml-[20px]">{{ currentDate }}</div>
        </div>
@@ -42,20 +61,12 @@
</template>

<script>
  import { HomeAPI } from "@/api/home";
  import { mapActions } from "vuex";

  export default {
    name: "AppHeader",
    components: {
    },
    data() {
      return {
        activeTab: 'home',
        currentTime: '',
        currentDate: '',
        timer: null,
        backgroundImage: new URL('@/assets/images/backgrounds/logo.png', import.meta.url).href
      }
    },
    components: {},
    props: {
      selectedId: {
        type: String,
@@ -66,36 +77,112 @@
        default: () => [],
      },
    },
    methods: {
      getImageUrl(name) {
        return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href
      },
      onHomeClick(tab) {
        this.activeTab = tab;
      },
      updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        this.currentTime = `${hours}:${minutes}:${seconds}`;

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
        const weekDay = weekDays[now.getDay()];
        this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
      }
    data() {
      return {
        bindSelected: "",
        options: [],
        activeTab: "home",
        currentTime: "",
        currentDate: "",
        timer: null,
        backgroundImage: new URL("@/assets/images/backgrounds/logo.png", import.meta.url).href,
      };
    },
    mounted() {
      this.updateTime();
      this.getBinds();
      this.timer = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
    },
    methods: {
      handleFullscreen() {
        if (this.$fullscreen.isFullscreen) {
          this.$fullscreen.exit();
        } else {
          this.$fullscreen.request();
        }
      },
      getImageUrl(name) {
        return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href;
      },
      onHomeClick(tab) {
        this.activeTab = tab;
        this.$emit("onHomeClick", tab);
      },
      updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, "0");
        const minutes = String(now.getMinutes()).padStart(2, "0");
        const seconds = String(now.getSeconds()).padStart(2, "0");
        this.currentTime = `${hours}:${minutes}:${seconds}`;

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, "0");
        const day = String(now.getDate()).padStart(2, "0");
        const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
        const weekDay = weekDays[now.getDay()];
        this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
      },
      /**
       * 获取标段信息
       */
      getBinds() {
        HomeAPI.GetBindSelect().then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result.length > 0) {
              this.options = result.map((item) => ({
                value: item.Id,
                label: item.BindName,
              }));
              this.bindSelected = this.options[0].value; // 默认选中第一个项目
              this.handleSelect(this.bindSelected);
            } else {
              this.options = [];
            }
          }
        });
      },
      /**
       * 处理选择变化
       */
      handleSelect(val) {
        this.$emit("onSelectChange", val);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .tabWrapper {
    margin-left: 150px;
  }
  ::v-deep(.el-select) {
    width: 160px;
    height: 28px;
    background: rgba(33, 72, 115, 0.9);
    border-radius: 2px;
    .el-input {
      align-items: center;
      display: flex;
      height: 28px;
      .el-input__inner {
        height: 28px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
      .el-input__suffix {
        align-items: center;
        display: flex;
      }
    }
  }
</style>