From 36e044280298d6f6b37b1295f9eba25584ef66a2 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 09:13:42 +0800
Subject: [PATCH] feat: 增加设备分类
---
src/components/Header.vue | 189 +++++++++++++++++++++++++++++++++-------------
1 files changed, 134 insertions(+), 55 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 3e8d552..979b004 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -8,32 +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">
+ <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]">
- <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="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>
@@ -43,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,
@@ -67,43 +77,112 @@
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;
- },
- 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>
--
Gitblit v1.9.3