sgxt_web/src/components/fzq/index.vue

<template>
  <Fxq :initial-position="{ x: position.x, y: position.y }" v-if="showFxq" :snapThreshold="50">
    <div class="badge-container">
      <div>
        <div>
          <el-tooltip effect="dark" content="林小警" placement="left-start">
            <img style="width: 34px;height: 34px;"
              @click.stop="skipIframe(`https://tyyy.lz.dsj.xz/embed/home?userId=${userId}&clientKey=${clientKey}&avatar=''`)"
              class="box-item" src="@/assets/images/streetBi/lxj.png" />
          </el-tooltip>
          <el-tooltip effect="dark" content="切换门户" placement="left-start">
            <img style="width: 34px;height: 34px;" @click.stop="SwitchSysDialogShow = true" class="box-item"
              src="@/assets/images/streetBi/sst.png" />
          </el-tooltip>
          <el-tooltip effect="dark" content="蜂群消息" placement="left-start">
            <img style="width: 34px;height: 34px; margin-bottom: 14px;"
              @click.stop="skipIframe('https://fqxt.lz.dsj.xz:9020/fqxt/?source=other')" class="box-item"
              src="@/assets/images/streetBi/fq.png" />
          </el-tooltip>
        </div>
        <el-badge :value="xxListData.xtxxNumber" class="item badge-top-left">
          <div class='fxq fxq1' @click.stop="opneMsg('xtxx')">
            <div class="title">
              <img src="@/assets/images/streetBi/xtxx.png" />
              <span>系统消息</span>
            </div>
          </div>
        </el-badge>
        <el-badge :value="xxListData.tztgNumber" class="item badge-top-left">
          <div class='fxq fxq2' @click.stop="opneMsg('tztg')">
            <div class="title">
              <img src="@/assets/images/streetBi/tztg.png" />
              <span>通知通报</span>
            </div>
          </div>
        </el-badge>
      </div>
    </div>
  </Fxq>
  <Iframe v-model='showIframe' :src='src' />
  <SwitchSysDialog v-model="SwitchSysDialogShow" />
  <Information v-model='showDialog' :title='title'>
    <systemMessages :dict="{ BD_D_XXLX, BD_D_XXLY }" :idEntityCard='idEntityCard' :xxlx="showMsgLx" />
  </Information>
</template>

<script setup>
import { ref, nextTick, provide, onMounted, reactive, getCurrentInstance, onUnmounted } from "vue";
import { queryWdxxPageList, queryWdxxDetail } from '@/api/commit.js'
import SwitchSysDialog from '@/components/fzq/SwitchSysDialog.vue'
import systemMessages from '@/components/fzq/systemMessages.vue'
import Information from '@/components/fzq/information.vue'
import Fxq from '@/components/fzq/fxq.vue'
import { getItem } from '@/utils/storage.js'
import { getCookie } from '@/utils/cookie'
import Iframe from '@/components/fzq/iframe.vue'
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const { BD_D_XXLX, BD_D_XXLY } = proxy.$dict('BD_D_XXLX', 'BD_D_XXLY'); //获取字典
const position = reactive({
  x: window.innerWidth - 30,
  y: window.innerHeight - 160
})
const idEntityCard = ref('')
const xxListData = reactive({
  xtxxNumber: 0,
  tztgNumber: 0
})
//请求数据
const handleClick = () => {
  let promes = {
    page: 1,
    rows: 1,
    jsrid: idEntityCard.value,
    xxlx: ""
  }
  queryWdxxPageList({ ...promes, xxlx: 100 }).then((res) => {
    xxListData.xtxxNumber = res.total
  });
  queryWdxxPageList({ ...promes, xxlx: 200 }).then((res) => {
    xxListData.tztgNumber = res.total
  });
}

const userId = getItem('USERID')
const clientKey = getCookie('clientKey')
const SwitchSysDialogShow = ref(false)

const src = ref()
const showIframe = ref(false)
const skipIframe = (val) => {
  src.value = val
  showIframe.value = true
}
const title = ref('系统消息')
const showDialog = ref(false)
const showMsgLx = ref('')
const showFxq = ref(true)
const opneMsg = (val) => {
  showDialog.value = true
  showMsgLx.value = val
  switch (val) {
    case 'xtxx':
      title.value = '系统消息'
      break;
    case 'tztg':
      title.value = '通知通告'
      break;
  }
}
const intTime = ref(null)
onMounted(() => {
  if (window.parent !== window.self) {
    showFxq.value = false
  } else {
    showFxq.value = true
  }
  emitter.on("handleClick", () => {
    idEntityCard.value = getItem('idEntityCard')
    handleClick()
    intTime.value = setInterval(() => {
      handleClick()
    }, 60000)
  });

})
onUnmounted(() => {
  clearInterval(intTime.value)
  emitter.off("handleClick")
})
</script>
<style lang="scss" scoped>
// 蜂群组件样式
.fxqx {
  border-radius: 34px;
  width: 34px;
  background-color: rgb(1, 127, 245);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  position: relative;

  .title {
    height: 34px;
    line-height: 34px;
    display: flex;
    align-items: center;
    white-space: nowrap;

    img {
      margin-left: 9.5px;
      width: 16px;
      margin-right: 10px;
      vertical-align: middle;
      height: 16px;
      flex-shrink: 0;
    }

    span {
      opacity: 0;
      transition: opacity 0.2s ease 0.1s;
      padding-right: 15px;
    }
  }
}

.fxq {
  border-radius: 34px;
  width: 34px;
  transition: width 0.3s ease;
  background-color: rgb(1, 127, 245);
  // overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;

  .title {
    height: 34px;
    line-height: 34px;
    display: flex;
    align-items: center;
    white-space: nowrap;

    img {
      margin-left: 9.5px;
      width: 16px;
      margin-right: 10px;
      vertical-align: middle;
      height: 16px;
      flex-shrink: 0;
    }

    span {
      opacity: 0;
      transition: opacity 0.2s ease 0.1s;
      padding-right: 15px;
    }
  }
}

.fxq2 {
  background-color: #9d88f9;
}

.fxq3 {
  background-color: #00c07f;
}

.fxq:hover {
  width: 120px;
}

.fxq:hover .title span {
  opacity: 1;
}

.item {
  margin-bottom: 10px;
}



.box-item {

  margin-bottom: 10px;
}

.badge-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  max-height: 200px;
  /* 默认展开的最大高度 */
  min-height: 0;
  /* 确保收缩时有足够空间显示第一个图标 */
}

.badge-content:not(.expanded) {
  max-height: 0;
}

/* 收缩时只显示第一个图标，隐藏其他内容 */
.badge-content:not(.expanded)> :not(:first-child) {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

::v-deep .el-badge__content.is-fixed {
  right: calc(100% + 6px);
}
</style>