Files
sgxt_web/src/views/home/index.vue

201 lines
4.8 KiB
Vue
Raw Normal View History

2025-04-12 14:54:02 +08:00
<template>
<div class="homeBox">
2025-08-01 17:16:03 +08:00
<!-- <GdMap></GdMap> -->
2025-04-12 14:54:02 +08:00
<!-- 头部 -->
2025-08-01 17:16:03 +08:00
2025-04-12 14:54:02 +08:00
<Head></Head>
2025-04-15 14:38:12 +08:00
<!-- 内容 -->
2025-04-16 09:33:29 +08:00
<!-- 左边 -->
<div class="home-aside asideL">
2025-05-20 16:06:20 +08:00
<div class="asideL-top">
<DbCount></DbCount>
2025-04-15 14:38:12 +08:00
</div>
2025-05-20 16:06:20 +08:00
<div class="asideL-Bottom">
2025-08-01 17:16:03 +08:00
<div class="commom-aside">
<QbsbCount></QbsbCount>
</div>
<div class="commom-aside">
<QblyType></QblyType>
</div>
<div class="commom-aside">
<QbfkCount></QbfkCount>
</div>
2025-04-15 14:38:12 +08:00
</div>
2025-05-20 16:06:20 +08:00
</div>
<!-- 右边 -->
<div class="home-aside asideR">
2025-08-01 17:16:03 +08:00
<div class="commom-aside-big">
2025-08-16 16:54:03 +08:00
<SituationAssessment />
2025-08-01 17:16:03 +08:00
</div>
<div class="commom-aside-big">
2025-08-16 16:54:03 +08:00
<GroupWarning />
2025-08-01 17:16:03 +08:00
</div>
<div class="commom-aside-small">
2025-08-16 16:54:03 +08:00
<Experience />
2025-08-01 17:16:03 +08:00
</div>
2025-05-20 16:06:20 +08:00
</div>
<!-- 中间 -->
2025-08-01 17:16:03 +08:00
<div class="home-center">
<div class="middle-top">
<Yszs />
</div>
<div class="flex middle-bottom mt10">
<div class="mr10" style="width: 50%;">
<DeployControl />
</div>
<div class="flex-1" style="flex: 1;">
<ZdryWarning />
</div>
</div>
</div>
2025-05-20 16:06:20 +08:00
<!-- 底部 -->
<div class="home-foot-t">
<Bkcz></Bkcz>
</div>
2025-04-12 14:54:02 +08:00
</div>
2025-07-14 17:31:24 +08:00
<!-- 左边弹窗 -->
2025-07-14 18:15:09 +08:00
<LeftDialog></LeftDialog>
2025-08-16 16:54:03 +08:00
<Fxq :initial-position="{ x: position.x, y: position.y }">
<el-badge value="0" class="item badge-top-left">
<div class='fxq fxq1'>
<div class="title" @click.stop="opneMsg('xtxx')"> <img src="@/assets/images/xtxx.png" /> 系统消息</div>
</div>
</el-badge>
<!-- <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> -->
</Fxq>
<Information v-model='showDialog' :title='title'>
<systemMessages :dict="{ BD_D_XXLX, BD_D_XXLY }" :idEntityCard='idEntityCard' :xxlx="showMsgLx" />
</Information>
2025-04-12 14:54:02 +08:00
</template>
<script setup>
2025-08-16 16:54:03 +08:00
import { ref, getCurrentInstance, reactive } from 'vue'
2025-07-14 18:15:09 +08:00
import LeftDialog from './dialog/leftDialog'
2025-04-22 16:39:00 +08:00
import GdMap from "@/components/GdMap/index.vue";
2025-04-12 14:54:02 +08:00
import Head from './layout/head.vue'
2025-04-15 14:38:12 +08:00
import DbCount from './model/dbCount.vue'
import QbfkCount from './model/qbfkCount.vue'
import QbsbCount from './model/qbsbCount.vue'
import QblyType from './model/qblyType.vue'
import Bkcz from './model/bkcz.vue'
import ZdryWarning from './model/zdryWarning.vue'
2025-08-01 17:16:03 +08:00
import GroupWarning from './model/groupWarning.vue'
2025-04-15 14:38:12 +08:00
import Yszs from './model/yszs.vue'
2025-08-01 17:16:03 +08:00
import DeployControl from './model/deployControl.vue';
import SituationAssessment from './model/situationAssessment.vue'
import Experience from './model/experience.vue'
2025-08-16 16:54:03 +08:00
import Fxq from './model/fxq.vue'
import Information from './model/information.vue'
import systemMessages from './model/mesgSwitch/systemMessages.vue'
import { getItem } from '@/utils/storage.js'
import { queryXxTj} from '@/api/commit.js'
const { proxy } = getCurrentInstance();
const { BD_D_XXLX, BD_D_XXLY } = proxy.$dict('BD_D_XXLX', 'BD_D_XXLY'); //获取字典数据
const idEntityCard = getItem('idEntityCard')
const position = reactive({
x: window.innerWidth - 120,
y: window.innerHeight - 100
})
//消息
const title = ref('系统消息')
const showDialog = ref(false)
const showMsgLx = 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 queryXxTjList = () => {
queryXxTj({}).then((res) => {
console.log(res);
}).catch((err) => {
});
}
queryXxTjList()
2025-04-12 14:54:02 +08:00
</script>
2025-04-15 14:38:12 +08:00
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
2025-08-01 17:16:03 +08:00
2025-08-16 16:54:03 +08:00
.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%);
2025-04-14 19:48:42 +08:00
}
2025-08-01 17:16:03 +08:00
</style>