335 lines
8.8 KiB
Vue
335 lines
8.8 KiB
Vue
<template>
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<img src="@/assets/img/logo.png" alt="" />
|
|
</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">
|
|
<img
|
|
:src="activeId === item.id ? item.iconActive : item.icon"
|
|
:alt="item.name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menuItemQuanping">
|
|
<div
|
|
class="menuFor"
|
|
v-for="(item, index) in quanping"
|
|
:key="index"
|
|
@click="handlefdClick(item)"
|
|
>
|
|
<div class="itemIcon">
|
|
<img :src="item.icon" :alt="item.name" />
|
|
</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 @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 { userUpdatepwd } from "@/api/user.js";
|
|
export default {
|
|
name: "header-top",
|
|
components: {
|
|
PermissionDialog,
|
|
DeviceDialog,
|
|
LogDialog,
|
|
AlertDialog,
|
|
PositionDialog,
|
|
AnalysisDialog
|
|
},
|
|
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")
|
|
}
|
|
],
|
|
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
|
|
};
|
|
},
|
|
created() {},
|
|
watch: {
|
|
homeData: {
|
|
handler(newVal) {
|
|
this.homeView = newVal;
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
|
|
this.updateTime();
|
|
setInterval(this.updateTime, 1000); // 每秒更新一次时间
|
|
},
|
|
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 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 4:
|
|
case 8:
|
|
this.showDialog = false;
|
|
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>
|