sgxt_web/src/App.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>