Files
lz_web_qwgl/src/views/largeScreen/home/layout/header.vue
2025-07-28 10:26:51 +08:00

245 lines
6.8 KiB
Vue

<template>
<div class="headBox">
<div class="top">
<div class="top-left">
<div class="time">
<!-- {{ hour + ":" + minute +':'+ second }} {{ datatime }} {{weekenday}} -->
{{ hour + ":" + minute }} {{ datatime }} {{ weekenday }}
</div>
<div class="qwbox">
<span v-if="qwlevel == null">常态勤务</span>
<span v-if="qwlevel == '01'">一级勤务</span>
<span v-if="qwlevel == '02'">二级勤务</span>
<span v-if="qwlevel == '03'">三级勤务</span>
</div>
</div>
<!-- -->
<div class="top-center" @click="goToHome">林芝公安智慧街面巡防</div>
<div class="top-right">
<!-- <div class="meun" @click="modularShowFn" title="后台">
菜单
</div> -->
<!-- <el-popover trigger="click" placement="bottom" v-model:visible="showVisible" :append-to-body="false">
<template #reference>
<div class="meun" @click="showVisible = !showVisible">
设置
</div>
</template>
<div @click="handleRhtx" class="settingItem">
<el-icon>
<Notification />
</el-icon>融合通信
</div>
<div @click="handleJxkh" class="settingItem">
<el-icon>
<Notification />
</el-icon>数据分析
</div>
<div @click="downloadBao" class="settingItem">
<el-icon>
<Notification />
</el-icon>
<a href="http://80.93.7.13:9009/myga/林芝巡防.exe"> 安装包下载 </a>
</div>
<div @click="openWarning('YJZX')" class="settingItem">
<el-icon>
<Notification />
</el-icon>预警中心
</div>
<div @click="openWarning('JQTJ')" class="settingItem">
<el-icon>
<Notification />
</el-icon>警情统计
</div>
</el-popover> -->
<div class="info">
<img class="photo" src="@/assets/my/photo.png" width="40" />
<div class="text">
<div style="color: #3877f2">
{{ username }}
<el-dropdown :hide-on-click="false">
<el-icon style="top: 2px" :size="18" color="#3877f2">
<ArrowRight />
</el-icon>
<template #dropdown>
<el-dropdown-menu class="loginOut" @click="logout">
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="dept f12">
<el-tooltip :content="deptName">{{ deptName }}</el-tooltip>
</div>
</div>
</div>
</div>
</div>
<Performance v-model="modelValue" />
</div>
</template>
<script setup>
// import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
import { currentQwdj } from "@/api/xffile.js";
import emitter from "@/utils/eventBus.js";
import { getRecentDay, timeValidate } from "@/utils/tools.js";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import { useStore } from "vuex";
import { ref, onMounted, defineEmits, onUnmounted } from "vue";
import Performance from "./performance.vue";
const modelValue = ref(false);
const showVisible = ref(false);
const store = useStore();
const router = useRouter();
const route = useRoute();
const username = ref("");
const weekenday = ref(""); //星期几
const datatime = ref(getRecentDay(0));
const minute = ref("00"); //分
const second = ref("00"); //秒
const hour = ref("00"); //时
const day = ref(0);
const deptName = ref(JSON.parse(localStorage.getItem("deptId"))[0].deptName);
const modularShow = ref(false);
const timersfm = ref(null);
const qwlevel = ref(null);
onMounted(() => {
getWeek();
getQwLevel(); // 获取勤务等级
username.value = localStorage.getItem("USERNAME");
timersfm.value = setInterval(() => {
CurrentTime();
}, 1000);
});
// 打开融合通信页面
function handleRhtx(params) {
const DDZHhref = router.resolve({
name: "rhtx", //这里是跳转页面的name
path: "/rhtx"
});
window.open(DDZHhref.href, "_blank");
}
// 获取勤务等级s
function getQwLevel() {
currentQwdj({ dateTime: timeValidate() }).then((res) => {
qwlevel.value = res ? res.qwdj : null;
});
// qcckGet({},'/mosty-qwzx/tbQwQwdj/currentQwdj?dateTime='+timeValidate()).then(res=>{
//
// })
}
// 打开绩效考核
function handleJxkh() {
modelValue.value = true;
showVisible.value = false;
}
function getWeek() {
let week = new Date().getDay();
switch (week) {
case 0:
return (weekenday.value = "星期日");
break;
case 1:
return (weekenday.value = "星期一");
break;
case 2:
return (weekenday.value = "星期二");
break;
case 3:
return (weekenday.value = "星期三");
break;
case 4:
return (weekenday.value = "星期四");
break;
case 5:
return (weekenday.value = "星期五");
break;
case 6:
return (weekenday.value = "星期六");
break;
}
}
// 获取时分秒
function CurrentTime() {
const date = new Date();
hour.value = date.getHours();
minute.value = date.getMinutes();
second.value = date.getSeconds();
day.value = day.value < 10 ? "0" + day.value : day.value;
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
second.value = second.value < 10 ? "0" + second.value : second.value;
}
// 打开菜单弹窗
function modularShowFn(val) {
router.replace("/editPassword");
}
// 退出
const logout = () => {
window.opener = null;
window.open('', '_self');
window.close();
store.commit("app/clearTag", null, { immediate: true });
store.commit("permission/deleteRouter", { immediate: true });
store.commit("user/deleteKeepLiiveRoute", "home");
};
// 路由跳转
function goToHome() {
window.location.href = "/";
}
const openWarning = (val) => {
showVisible.value = false;
emitter.emit("showWarning", val);
};
const downInfo = () => {
showVisible.value = false;
emitter.emit("showZlDetail");
};
onUnmounted(() => {
clearInterval(timersfm.value);
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreens.scss";
::v-deep .el-dialog {
--el-dialog-bg-color: #10295b;
}
::v-deep .el-dialog__title {
color: #140101;
}
.settingItem {
color: #000000;
display: flex;
align-items: center;
height: 30px;
border-bottom: 1px solid #143d91;
padding-left: 10px;
box-sizing: border-box;
cursor: pointer;
.el-icon {
margin-right: 10px;
}
}
.settingItem:hover {
background: #143d91;
}
::v-deep .el-popper.is-light {
background: #00314e;
border: 1px solid #00314e;
}
</style>