385 lines
9.3 KiB
Vue
385 lines
9.3 KiB
Vue
<template>
|
||
<router-view v-slot="{ Component }" v-if="isRouterAlive">
|
||
|
||
<keep-alive :include="store.getters.keepLiiveRoute">
|
||
<Watermark :text="content" :color="'rgba(0, 0, 0, .15)'">
|
||
<Component :is="Component"></Component>
|
||
</Watermark>
|
||
</keep-alive>
|
||
</router-view>
|
||
|
||
|
||
<Fxq :initial-position="{ x: position.x, y: position.y }">
|
||
<el-badge value="0" class="item badge-top-left">
|
||
<div class="badge-container">
|
||
<!-- :class="{ 'expanded': isExpanded }" -->
|
||
<div class="badge-content expanded">
|
||
<div class='fxq fxq1' @click.stop="opneMsg('xtxx')">
|
||
<div class="title"> <img src="@/assets/images/xtxx.png" /> 系统消息</div>
|
||
</div>
|
||
<!-- <div class='fxq fxq2'>
|
||
<div class="title" @click.stop="opneMsg('tztg')"> <img src="@/assets/images/tztg.png" /> 通知通报</div>
|
||
</div>
|
||
<div class='fxq fxq3'>
|
||
<div class="title"> <img src="@/assets/images/xxxt.png" /> 消息协同</div>
|
||
</div> -->
|
||
<div style="margin-bottom: 8px;" title="蜂群"
|
||
@click.stop="skipIframe('https://fqxt.lz.dsj.xz:9020/index.html?source=other')">
|
||
<img src="@/assets/images/logo-1.png" alt="" srcset="">
|
||
</div>
|
||
<div title="林小警"
|
||
@click.stop="skipIframe(`https://tyyy.lz.dsj.xz/embed/home?userId=${userId}&clientKey=${clientKey}&avatar=''`)">
|
||
<img src="@/assets/images/lxj.png" alt="" srcset="" style="width: 34px;height: 38px">
|
||
</div>
|
||
<div title="三视图" @click.stop="SwitchSysDialogShow = true">
|
||
<img src="@/assets/images/sst.png" alt="" srcset="" style="width: 34px;height: 38px">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-badge>
|
||
</Fxq>
|
||
<Iframe v-model='showIframe' :src='src' />
|
||
<Information v-model='showDialog' :title='title'>
|
||
<systemMessages :dict="{ BD_D_XXLX, BD_D_XXLY }" :idEntityCard='idEntityCard' :xxlx="showMsgLx" />
|
||
</Information>
|
||
<SwitchSysDialog v-model="SwitchSysDialogShow"/>
|
||
</template>
|
||
<script setup>
|
||
import * as ocr from "@paddlejs-models/ocr";
|
||
import Watermark from "@/components/Watermark.vue";
|
||
import { ref, reactive, nextTick, provide, onMounted, getCurrentInstance, onBeforeUnmount } from "vue";
|
||
import { useStore } from "vuex";
|
||
import { queryXxTj } from '@/api/commit.js'
|
||
import { getItem, setItem } from "@/utils/storage";
|
||
import { generateNewStyle, writeNewStyle } from "@/utils/theme";
|
||
import { timeValidate } from "@/utils/tools";
|
||
import Information from '@/views/home/model/information.vue'
|
||
import SwitchSysDialog from '@/components/SwitchSysDialog.vue'
|
||
import systemMessages from '@/views/home/model/mesgSwitch/systemMessages.vue'
|
||
import Fxq from '@/views/home/model/fxq.vue'
|
||
import Iframe from '@/views/home/model/iframe.vue'
|
||
import { getCookie } from '@/utils/cookie'
|
||
const { proxy } = getCurrentInstance();
|
||
const idEntityCard = getItem('idEntityCard')
|
||
const { BD_D_XXLX, BD_D_XXLY } = proxy.$dict('BD_D_XXLX', 'BD_D_XXLY'); //获取字典数据
|
||
const SwitchSysDialogShow=ref(false)
|
||
const userId = getItem('USERID')
|
||
const clientKey = getCookie('clientKey')
|
||
const showMsgLx = ref('')
|
||
const showDialog = ref(false)
|
||
//消息
|
||
const position = reactive({
|
||
x: window.innerWidth - 120,
|
||
y: window.innerHeight - 140
|
||
})
|
||
|
||
const title = ref('系统消息')
|
||
const opneMsg = (val) => {
|
||
showDialog.value = true
|
||
showMsgLx.value = val
|
||
switch (val) {
|
||
case 'xtxx':
|
||
title.value = '系统消息'
|
||
break;
|
||
case 'tztg':
|
||
title.value = '通知通告'
|
||
break;
|
||
case 'xxxt':
|
||
title.value = '消息协同'
|
||
break;
|
||
}
|
||
}
|
||
const src = ref()
|
||
const showIframe = ref(false)
|
||
const skipIframe = (val) => {
|
||
src.value = val
|
||
showIframe.value = true
|
||
}
|
||
// 展开收缩状态
|
||
const isExpanded = ref(false)
|
||
const toggleExpand = () => {
|
||
isExpanded.value = !isExpanded.value
|
||
}
|
||
const queryXxTjList = () => {
|
||
queryXxTj({}).then((res) => {
|
||
console.log(res);
|
||
}).catch((err) => {
|
||
|
||
});
|
||
}
|
||
queryXxTjList()
|
||
|
||
|
||
|
||
const store = useStore();
|
||
generateNewStyle(store.getters.mainColor).then((newStyle) => {
|
||
writeNewStyle(newStyle);
|
||
});
|
||
const isRouterAlive = ref(true);
|
||
const reload = () => {
|
||
isRouterAlive.value = false;
|
||
nextTick(() => {
|
||
isRouterAlive.value = true;
|
||
});
|
||
};
|
||
provide("reload", reload);
|
||
// 处理页面可见性变化的函数
|
||
const handleVisibilityChange = () => {
|
||
// 只在页面变得可见时触发
|
||
if (document.visibilityState === 'visible') {
|
||
// 获取会话信息 - 带上所有cookies
|
||
fetch('https://pcs.lz.dsj.xz:9020/getSession', {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
// 确保发送所有cookies，包括跨域cookies
|
||
credentials: 'include',
|
||
})
|
||
.then((response) => {
|
||
// 检查响应状态
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
return response.json();
|
||
})
|
||
.then((data) => {
|
||
console.log('会话信息:', data);
|
||
// 这里可以根据返回的数据进行后续处理
|
||
})
|
||
.catch((error) => {
|
||
console.error('获取会话信息失败:', error);
|
||
// 可以添加错误通知或重试逻辑
|
||
})
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
window.addEventListener("visibilitychange", handleVisibilityChange);
|
||
document.title = "林芝";
|
||
frashJs()
|
||
// initPage()
|
||
});
|
||
|
||
// 在组件卸载前移除事件监听器
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("visibilitychange", handleVisibilityChange);
|
||
})
|
||
|
||
|
||
|
||
/**
|
||
*@Descripttion:图片页面初始化
|
||
*@Author: PengShuai
|
||
*/
|
||
const initPage = async () => {
|
||
try {
|
||
await ocr.init();// 模型初始化
|
||
imgIsLoad = true;
|
||
proxy.$message({ type: "success", message: "加载成功" });
|
||
} catch (err) {
|
||
proxy.$message({ type: "error", message: "加载失败，请刷新页面" });
|
||
imgIsLoad = false;
|
||
}
|
||
}
|
||
const content = ref([])
|
||
const frashJs = () => {
|
||
const sfzh = getItem("idEntityCard")
|
||
const userName = getItem("USERNAME")
|
||
const time = timeValidate()
|
||
content.value = [userName, sfzh, time, "林芝哨岗系统", "禁止泄露公民个人信息和警务工作秘密"]
|
||
}
|
||
// 监听标签页切换
|
||
|
||
</script>
|
||
<style lang="scss">
|
||
@import "./styles/index.scss";
|
||
|
||
body {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
ul {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
|
||
li {
|
||
list-style-type: none;
|
||
}
|
||
|
||
#app {
|
||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
|
||
Microsoft YaHei, SimSun, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
color: #fff;
|
||
overflow-x: auto;
|
||
// background: #263445;
|
||
background: #fff;
|
||
}
|
||
|
||
//只显示一排内容
|
||
.one_text_detail {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
//只显示二排内容
|
||
.two_text_detail {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
//只显示三排内容
|
||
.text_detail {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
// 不显示滚动条
|
||
.noScollLine::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
}
|
||
|
||
v-deep .el-loading-mask {
|
||
background: rgba(0, 0, 0, 0.5) !important;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "DigifaceWide";
|
||
src: url("~@/assets/font/DigifaceWide.ttf");
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "HANYILINGXINTIJIAN";
|
||
src: url("~@/assets/font/HANYILINGXINTIJIAN-1.TTF");
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "YSBTH";
|
||
src: url("~@/assets/font/YSBTH.ttf");
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
.bk_drawer_box {
|
||
.el-drawer__header {
|
||
background: #fff !important;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
text-transform: none;
|
||
margin-bottom: 0;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.fxq {
|
||
border-radius: 35px;
|
||
width: 35px;
|
||
transition: transform 0.5s ease, width 0.5s ease;
|
||
background-color: rgb(1, 127, 245);
|
||
transform-origin: left center;
|
||
overflow: hidden;
|
||
margin-bottom: 10px;
|
||
|
||
.icon {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 35px;
|
||
height: 35px;
|
||
justify-content: center;
|
||
line-height: 35px;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.title {
|
||
height: 35px;
|
||
line-height: 35px;
|
||
|
||
img {
|
||
margin-left: 9.5px;
|
||
width: 16px;
|
||
margin-right: 10px;
|
||
margin-top: -3px;
|
||
vertical-align: middle;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fxq2 {
|
||
background-color: #9d88f9;
|
||
}
|
||
|
||
.fxq1:hover {
|
||
width: 120px;
|
||
}
|
||
|
||
.fxq2:hover {
|
||
width: 120px;
|
||
|
||
// background-color: red;
|
||
}
|
||
|
||
.fxq3:hover {
|
||
width: 120px;
|
||
}
|
||
|
||
::v-deep .badge-top-left .el-badge__content {
|
||
top: 0;
|
||
right: auto;
|
||
left: -10px;
|
||
transform: translateY(-50%) translateX(-50%);
|
||
}
|
||
|
||
.badge-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
max-height: 200px;
|
||
/* 默认展开的最大高度 */
|
||
min-height: 45px;
|
||
/* 确保收缩时有足够空间显示第一个图标 */
|
||
}
|
||
|
||
.badge-content:not(.expanded) {
|
||
max-height: 45px;
|
||
}
|
||
|
||
/* 收缩时只显示第一个图标，隐藏其他内容 */
|
||
.badge-content:not(.expanded)> :not(:first-child) {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.badge-container {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
</style>
|