From 16064d395121113d9a68fed1b83612b60385b282 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Tue, 27 May 2025 15:20:44 +0800
Subject: [PATCH] feat: 增加标段下拉
---
src/components/Header.vue | 161 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 100 insertions(+), 61 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f9625c4..3fc3799 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -8,40 +8,50 @@
-->
<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 tabWrapper" >
+ <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>
+ <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'">
+ <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]">
- <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="">
+ <el-select v-model="projectSelected" placeholder="请选择" class="mr-[24px]">
+ <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>
@@ -51,20 +61,9 @@
</template>
<script>
-
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,
@@ -75,35 +74,20 @@
default: () => [],
},
},
- 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}`;
- }
+ data() {
+ return {
+ projectSelected: "",
+ options: [
+ { value: "project1", label: "项目1" },
+ { value: "project2", label: "项目2" },
+ { value: "project3", label: "项目3" },
+ ],
+ activeTab: "home",
+ currentTime: "",
+ currentDate: "",
+ timer: null,
+ backgroundImage: new URL("@/assets/images/backgrounds/logo.png", import.meta.url).href,
+ };
},
mounted() {
this.updateTime();
@@ -113,11 +97,66 @@
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}`;
+ },
+ },
};
</script>
<style lang="scss" scoped>
.tabWrapper {
margin-left: 150px;
}
- </style>
+ ::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>
--
Gitblit v1.9.3