ly-front/src/views/contentData/headerTop/index.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="header-logo"></div>
    </div>
    <div class="header-main">
      <div class="textTile">
        <img src="@/assets/img/title.svg" alt="" />
      </div>
    </div>
    <div class="header-menu">
      <div class="menuItem" v-if="isAdmins">
        <div
          class="menuFor"
          v-for="(item, index) in menuList"
          :key="index"
          @click="handleMenuClick(item)"
        >
          <div class="itemIcon">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.name"
              placement="bottom"
            >
              <img
                :src="activeId === item.id ? item.iconActive : item.icon"
                :alt="item.name"
              />
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="menuItemQuanping">
        <div
          class="menuFor"
          v-for="(item, index) in quanping"
          :key="index"
          @click="handlefdClick(item)"
        >
          <div class="itemIcon">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.name"
              placement="bottom"
            >
              <img :src="item.icon" :alt="item.name" />
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="user">
        <el-dropdown trigger="click">
          <img :size="30" src="@/assets/img/menu/iconUser.png" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>{{ userName }}</el-dropdown-item>
            <el-dropdown-item @click.native="passClick">
              修改密码
            </el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="time">
        <div class="top">
          <div class="time_date">{{ currentTime }}</div>
          <div class="weather">
            <img src="@/assets/img/menu/tianqi.png" alt="" />
            <div class="weather_text">
              {{ homeView.weather?.now.temperature + "°C" }}
            </div>
          </div>
        </div>
        <div class="date">{{ currentDate }}</div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      :before-close="handleClose"
      append-to-body
    >
      <!-- 对话框组件 -->
      <component :is="currentDialog"></component>
    </el-dialog>
    <el-dialog
      :title="titleDialog"
      :visible.sync="dialog"
      :before-close="handleClose"
      append-to-body
      class="el-dialog-center"
    >
      <my-form
        :formNewList="formDrawerList"
        :fromItem="fromItem"
        dialogImageUrl
        @determine="determine"
        @handleClose="handleClose"
        labelWidth="120px"
      >
      </my-form>
    </el-dialog>
  </div>
</template>

<script>
// 导入各个对话框组件
import PermissionDialog from "../../menuData/PermissionDialog.vue"; // ID: 1
import DeviceDialog from "../../menuData/DeviceDialog.vue"; // ID: 2
import LogDialog from "../../menuData/LogDialog.vue"; // ID: 3
import AlertDialog from "../../menuData/AlertDialog.vue"; // ID: 5
import PositionDialog from "../../menuData/PositionDialog.vue"; // ID: 6
import AnalysisDialog from "../../menuData/AnalysisDialog.vue"; // ID: 7
import WhitListDialog from "../../menuData/WhitListDialog.vue"; // ID: 8
import { userUpdatepwd } from "@/api/user.js";
export default {
  name: "header-top",
  components: {
    PermissionDialog,
    DeviceDialog,
    LogDialog,
    AlertDialog,
    PositionDialog,
    AnalysisDialog,
    WhitListDialog
  },
  props: {
    homeData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      menuList: [
        {
          id: 1,
          name: "人员",
          icon: require("@/assets/img/menu/xitongquanxian.png"),
          iconActive: require("@/assets/img/menu/xitongquanxian-hove.png")
        },
        {
          id: 2,
          name: "设备",
          icon: require("@/assets/img/menu/shebei.png"),
          iconActive: require("@/assets/img/menu/shebei-hove.png")
        },
        {
          id: 3,
          name: "日志",
          icon: require("@/assets/img/menu/rizhi.png"),
          iconActive: require("@/assets/img/menu/rizhi-hove.png")
        },
        {
          id: 4,
          name: "首页",
          icon: require("@/assets/img/menu/tongji.png"),
          iconActive: require("@/assets/img/menu/tongji-hove.png")
        },
        {
          id: 5,
          name: "预警",
          icon: require("@/assets/img/menu/yujing.png"),
          iconActive: require("@/assets/img/menu/yujing-hove.png")
        },
        {
          id: 6,
          name: "防区",
          icon: require("@/assets/img/menu/zhendi.png"),
          iconActive: require("@/assets/img/menu/zhendi-hove.png")
        },
        {
          id: 7,
          name: "统计分析",
          icon: require("@/assets/img/menu/tjfx.png"),
          iconActive: require("@/assets/img/menu/tjfx-hove.png")
        },
        {
          id: 8,
          name: "白名单",
          icon: require("@/assets/img/menu/bmd.png"),
          iconActive: require("@/assets/img/menu/bmd-hove.png")
        }
      ],
      quanping: [
        {
          id: 8,
          name: "全屏",
          icon: require("@/assets/img/menu/quanping.png"),
          iconActive: require("@/assets/img/menu/quanping.png")
        }
      ],
      activeId: 4,
      currentTime: "",
      currentDate: "",
      currentDialog: "",
      showDialog: false,
      title: "",
      titleDialog: "",
      homeView: {
        weather: {
          now: {
            temperature: 0
          }
        }
      },
      formDrawerList: [
        {
          label: "原密码",
          type: "input",
          model: "oldPwd",
          rules: [{ required: true, message: "请输入原密码" }],
          showPassword: true
        },
        {
          label: "新密码",
          type: "input",
          model: "newPwd",
          rules: [{ required: true, message: "请输入新密码" }],
          showPassword: true
        }
      ],
      fromItem: {},
      dialog: false,
      isAdmins: false,
      userName: ""
    };
  },
  created() {},
  watch: {
    homeData: {
      handler(newVal) {
        this.homeView = newVal;
      },
      deep: true
    }
  },
  mounted() {
    this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次时间
    this.userName = localStorage.getItem("userName");
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString(); // 获取当前时间，格式为本地时间格式
      this.currentDate = now.toLocaleDateString(); // 获取当前日期，格式为本地日期格式
    },
    passClick() {
      this.fromItem = {};
      this.titleDialog = "修改密码";
      // 修改密码的逻辑
      this.dialog = true;
      console.log("修改密码");
    },
    logout() {
      // 退出登录的逻辑
      localStorage.removeItem("setToken");
      localStorage.removeItem("userId");
      localStorage.removeItem("userName");
      localStorage.removeItem("isAdmin");
      this.$router.push("/login");
    },
    // 确定按钮
    determine(value) {
      let params = {};
      params = value;
      params.id = localStorage.getItem("userId");
      userUpdatepwd(params).then((res) => {
        if (res.code === 0) {
          this.$message.success("修改成功");
        }
      });
      this.dialog = false;
    },
    handlefdClick(value) {
      if (document.fullscreenElement) {
        document
          .exitFullscreen()
          .then(() => {
            console.log("退出全屏模式");
          })
          .catch((err) => {
            console.error(`退出全屏模式失败: ${err.message}`);
          });
      } else {
        document.documentElement
          .requestFullscreen()
          .then(() => {
            console.log("进入全屏模式");
          })
          .catch((err) => {
            console.error(`进入全屏模式失败: ${err.message}`);
          });
      }
    },

    handleMenuClick(value) {
      this.activeId = value.id; // 点击时更新激活的ID
      this.title = value.name; // 点击时更新对话框标题
      // 根据ID决定显示哪个对话框
      switch (value.id) {
        case 1:
          this.currentDialog = "PermissionDialog";
          this.showDialog = true;
          break;
        case 2:
          this.currentDialog = "DeviceDialog";
          this.showDialog = true;
          break;
        case 3:
          this.currentDialog = "LogDialog";
          this.showDialog = true;
          break;
        case 4:
          this.showDialog = false;
          break;
        case 5:
          this.currentDialog = "AlertDialog";
          this.showDialog = true;
          break;
        case 6:
          this.currentDialog = "PositionDialog";
          this.showDialog = true;
          break;
        case 7:
          this.currentDialog = "AnalysisDialog";
          this.showDialog = true;
          break;
        case 8:
          this.currentDialog = "WhitListDialog";
          this.showDialog = true;
          break;
      }
    },
    handleClose() {
      // 关闭对话框时清空激活的ID
      this.activeId = 4;
      this.showDialog = false;
      this.dialog = false;
    }
  }
};
</script>

<style scoped>
.logo {
  font-size: 20px;
  font-weight: bold;
}

.time {
  font-size: 14px;
}

.actions span {
  margin-left: 10px;
  cursor: pointer;
}
</style>