From a3e27f5cab583debe11a9c62d8cc0115783b0791 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 16:59:43 +0800
Subject: [PATCH] fix: 优化实况UI放大缩小
---
src/components/Header.vue | 165 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 116 insertions(+), 49 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f9625c4..0d724cd 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="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>
@@ -51,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,
@@ -75,16 +77,39 @@
default: () => [],
},
},
+ 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()
+ this.$fullscreen.exit();
+ this.$emit("fullscreenChange", false);
} else {
- this.$fullscreen.request()
+ this.$emit("fullscreenChange", true);
+ this.$fullscreen.request();
}
},
getImageUrl(name) {
- return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href
+ return new URL(`../assets/images/backgrounds/${name}`, import.meta.url).href;
},
onHomeClick(tab) {
this.activeTab = tab;
@@ -92,32 +117,74 @@
},
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');
+ 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 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);
+ },
},
- mounted() {
- this.updateTime();
- this.timer = setInterval(this.updateTime, 1000);
- },
- beforeDestroy() {
- if (this.timer) {
- clearInterval(this.timer);
- }
- }
};
</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