lcw
This commit is contained in:
256
src/components/fzq/index.vue
Normal file
256
src/components/fzq/index.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user