<template>
<!-- 海绵综合一张图首页 -->
<div class="hmMainPage">
<!-- 地图 -->
<GisMapMF v-if="menuIndex != 3"></GisMapMF>
<!-- 图例 -->
<Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeInUp' : 'animate__fadeInUp']"></Legend>
<!-- 控制面板按钮 -->
<div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
<img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
<img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
</div>
<!-- 内容-头部 -->
<div class="headHM flex">
<img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
<div class="title">海绵城市综合一张图</div>
<div class="menuBtn">
<p
v-for="item in menuList"
:key="item.id"
:class="['btnPart', menuIndex == item.id ? 'btnActive' : '']"
@click="menuClick(item.id)"
>
{{ item.name }}
</p>
</div>
<div class="weather flex">
<el-select clearable v-model="stationCode" placeholder="全局搜索站点名称" class="stationSel">
<el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
</el-select>
<p class="weathers">{{ weatherInfo.text }} {{ weatherInfo.temp }}℃</p>
<p class="date">{{ dateNow }}</p>
</div>
</div>
<!-- 内容-内容切换区 -->
<div class="contHM">
<City v-if="menuIndex == 1" :showPanel="showPanel"></City>
<ProjectHM v-if="menuIndex == 2" :showPanel="showPanel"></ProjectHM>
<EvaluationKH v-if="menuIndex == 3" :showPanel="showPanel"></EvaluationKH>
<WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
<LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
</div>
<!-- 底部装饰 -->
<div class="bottomHM" v-if="menuIndex != 3"></div>
</div>
</template>
<script setup>
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
import bus from '@/bus';
import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况
import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设
import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
import axios from 'axios';
const { proxy } = getCurrentInstance();
const router = useRouter();
const weatherInfo = ref({});
const stationList = ref([]);
const stationCode = ref('');
const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
const menuList = ref([
{ name: '城市概况', id: 1 },
{ name: '项目建设', id: 2 },
{ name: '考核评估', id: 3 },
{ name: '排水防涝', id: 4 },
{ name: '长效运维', id: 5 },
]);
const menuIndex = ref(1);
const showPanel = ref(false);
const showLegend = ref(false);
// 跳转业务系统
function goSystem() {
router.push({ path: '/index' });
}
// 菜单跳转
function menuClick(id) {
menuIndex.value = id;
}
// 图例控制
function controlLegend() {
showLegend.value = !showLegend.value;
}
// 展开收起
function controlPanel() {
showPanel.value = !showPanel.value;
if (showPanel.value) {
showLegend.value = false;
}
}
// 获取天气信息
const getWeather = () => {
axios
.get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=101180801`)
.then(res => {
weatherInfo.value = res.data.result.realtime;
})
.catch(error => {});
};
onMounted(() => {
getWeather();
});
</script>
<style scoped lang="scss">
.hmMainPage {
width: 100%;
height: 100%;
background: #010e22;
position: relative;
.headHM {
position: absolute;
top: 0px;
left: 0px;
z-index: 220;
width: 1920px;
height: 100px;
background: url('@/assets/newImgs/HMScreen/headBg.png') no-repeat;
background-size: 100% 100%;
.weather {
height: 58px;
align-items: center;
flex: 1;
justify-content: flex-end;
padding-right: 40px;
.weathers {
margin: 0px 20px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 20px;
border-right: 3px solid rgba(170, 206, 255, 0.2);
padding-right: 20px;
}
.date {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #b8ecff;
}
}
.mainYW {
width: 50px;
height: 44px;
cursor: pointer;
margin: 10px 10px 0px 30px;
}
.title {
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 40px;
letter-spacing: 10px;
color: #ffffff;
text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47);
margin-top: 5px;
}
.menuBtn {
display: flex;
margin-left: 50px;
.btnPart {
width: 136px;
height: 36px;
background: url('@/assets/newImgs/HMScreen/btnBg.png') no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 36px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 22px;
color: #c9dfff;
cursor: pointer;
margin-left: 20px;
margin-top: 10px;
&:hover {
color: #f7faff;
opacity: 1;
}
}
.btnActive {
background: url('@/assets/newImgs/HMScreen/btnActive.png') no-repeat;
background-size: 100% 100%;
color: #f7faff;
opacity: 1;
}
}
}
.contHM {
position: relative;
top: 100px;
left: 0px;
z-index: 220;
}
.right30 {
right: 30px;
}
.right520 {
right: 480px;
}
.controlHM {
position: absolute;
bottom: 50px;
z-index: 320;
width: 32px;
img {
width: 32px;
height: 32px;
cursor: pointer;
margin-bottom: 10px;
}
}
.bottomHM {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 180;
width: 1920px;
height: 100px;
background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
background-size: 100% 100%;
}
}
</style>
<!-- 弹框同统一样式 -->
<style lang="scss">
.pmpSitNewDialog {
border-radius: 7px;
background: linear-gradient(0deg, #005CBA 0%, #000F26 100%);
pointer-events: all;
.el-dialog__header {
height: 46px;
border-bottom: none;
padding: 10px 0px;
width: 100%;
border-radius: 8px;
background: url('@/assets/images/Sponge_screen/qipaotankuan.png') no-repeat;
background-size: 100% 100%;
position: relative;
.el-dialog__title {
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
margin-left: 20px;
}
.el-dialog__headerbtn {
width: 46px;
height: 46px;
top: 2px;
.el-dialog__close {
color: #1096db;
font-size: 20px;
}
}
&::after {
display: none;
}
}
.el-dialog__body {
width: 100%;
background: linear-gradient(0deg, #005CBA 0%, #000F26 100%);
}
&.monitor {
.el-dialog__body {
height: 600px;
}
}
}
</style>
