- <template>
- <!-- 智慧水务大脑 头部tab -->
- <div class="TopTab">
- <div class="headBox">
- <div class="logoText">智慧水务大脑</div>
- <div class="leftBox">
- <div class="timeText">
- <div class="weekText">{{ currentWeek }}</div>
- <div class="time">{{ time }}</div>
- </div>
- <div class="leftTab">
- <div
- class="eachLink"
- :class="activeName == item.value ? 'activeTab' : ''"
- v-for="item in leftMenuArr"
- :key="item.value"
- :style="{ right: item.posSum + '%' }"
- @click="TabClick(item)"
- >
- {{ item.label }}
- </div>
- </div>
- </div>
- <div class="rightBox">
- <div class="rightTab">
- <div
- class="eachLink"
- :class="activeName == item.value ? 'activeTab' : ''"
- v-for="item in rightMenuArr"
- :key="item.value"
- :style="{ right: item.posSum + '%' }"
- @click="TabClick(item)"
- >
- {{ item.label }}
- </div>
- </div>
- <div class="RongYun_icon" @click="dialogShow = !dialogShow"></div>
- <div class="linkicon" @click="Tojiance"></div>
-
- <!-- <div class="weatherBox">
- <img class="weatherImg" :src="getImageUrl(weatherdata?.code || '02', 'pictureOnMap/weather/day')" />
- <div class="weatherText">
- <div class="weatherCase">{{weatherdata?.text}}</div>
- <div class="temperature">{{weatherdata?.low}}℃ <span>~</span> {{weatherdata?.high}}℃</div>
- </div>
- </div> -->
- </div>
- </div>
-
- <ModelRongYun :RYdialogShow="dialogShow" @OneDialogHide="dialogHide"></ModelRongYun>
-
- <!-- <div v-show="activeName == 2" class="headBoxTwo">
- <div class="centerbox" @click="BackHouse"></div>
- </div> -->
- </div>
- </template>
- <script setup>
- import { ref, reactive, onMounted, onUnmounted } from 'vue';
- import moment from 'moment';
- import { getImageUrl } from '@/utils/ruoyi';
- import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
-
- import { getweather } from '@/api/MonitorAssetsOnMap';
- import { useRouter } from 'vue-router';
- const router = useRouter();
- import bus from '@/bus';
- const { proxy } = getCurrentInstance();
- const weatherdata = ref('');
-
- const activeName = ref('2');
- const lastActived = ref(2);
-
- const leftMenuArr = ref([
- // {
- // label: '防洪安全',
- // value: '1',
- // posSum: '53.5',
- // link: '/FloodControlSafety',
- // },
- {
- label: '水资产',
- value: '2',
- posSum: '28.6',
- link: '/WaterAssets',
- },
- {
- label: '排水体系',
- value: '3',
- posSum: '-2',
- link: '/MonitoringAnalysis',
- },
- ]);
- const rightMenuArr = ref([
- {
- label: '水安全',
- value: '4',
- posSum: '24.2',
- link: '/FloodControlAndDrainage',
- },
- {
- label: '水政务',
- value: '5',
- posSum: '16.9',
- link: '/PublicOpinionAnalysis',
- },
- // {
- // label: '河湖生态',
- // value: '6',
- // posSum: '10.9',
- // link: '/RiverAndLakeEcology',
- // },
- ]);
- const TabClick = item => {
- console.log('itemitemitem2', item);
-
- newfiberMap.map.easeTo(newfiberMap.config_.params.init);
- bus.emit('clearTemporaryData');
- if (item.link == '/WaterAssets') {
- lastActived.value = activeName.value;
- }
- if (item.link != '/PublicOpinionAnalysis') {
- bus.emit('YQ_head', true);
- }
- activeName.value = item.value;
- localStorage.setItem('WB_Brad_in_actived', activeName.value);
- localStorage.setItem('WB_Brad_in_Link', item.link);
- console.log('item.link', item.link);
- router.push({
- path: item.link,
- });
- };
-
- const BackHouse = () => {
- if (lastActived.value == 2) {
- activeName.value = leftMenuArr.value[1].value;
- router.push({
- path: leftMenuArr.value[1].link,
- });
- } else {
- router.go(-1);
- activeName.value = lastActived.value;
- }
-
- localStorage.setItem('WB_Brad_in_actived', activeName.value);
- };
- const time = ref('');
- // 更新当前时间
- const updateTime = () => {
- const now = new Date();
- time.value = now.toLocaleTimeString(); // 格式为hh:mm:ss
- };
- const currentWeek = computed(() => {
- const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
- return days[new Date().getDay()];
- });
-
- const Tojiance = () => {
- localStorage.setItem('WB_Brad_in_actived', 2);
- let herf = `${window.location.origin}/MonitoringAssets/MonitorAssetsOnMap#/portalPage`;
- window.open(herf, '_self');
- };
- function weatherForecast() {
- let type = 4;
- let time = moment().format('YYYY-MM-DD');
- getweather(type, time).then(res => {
- console.log('weatherForecast', res);
- if (res.code == 200 && res.data.length) {
- weatherdata.value = res.data[0].weatherResultVO.dailyFcsts[0];
- let Hours = new Date().getHours();
- let name = Hours <= 17 ? 'day' : 'night';
- let code = Hours <= 17 ? weatherdata.value.code_day : weatherdata.value.code_night;
- weatherdata.value.codeurl = `/static/images/weather/${name}/${code}.png`;
-
- console.log('allData.weatherdata', weatherdata.value);
- localStorage.setItem('weather', JSON.stringify(weatherdata.value));
- }
- });
- }
- const dialogShow = ref(false);
-
- const dialogHide = val => {
- if (!val) {
- dialogShow.value = false;
- }
- };
-
- onBeforeUnmount(() => {
- bus.off('changeHeadePath');
- });
-
- onMounted(() => {
- bus.on('changeHeadePath', e => {
- let newarr = [...leftMenuArr.value, ...rightMenuArr.value];
- let Getitem = newarr.filter(item => {
- return item.link == e;
- })[0];
- if (Getitem) {
- console.log(Getitem);
- TabClick(Getitem);
- }
- });
-
- activeName.value = localStorage.getItem('WB_Brad_in_actived') || 2;
- // lastActived.value = 2;
- let item = {
- link: localStorage.getItem('WB_Brad_in_Link') || '/WaterAssets',
- value: localStorage.getItem('WB_Brad_in_actived') || 2,
- };
- TabClick(item);
- updateTime();
- // weatherForecast()
- });
- const interval = setInterval(updateTime, 1000); // 每秒更新一次时间
- // 清理定时器,防止内存泄漏
- onUnmounted(() => {
- clearInterval(interval);
- localStorage.setItem('WB_Brad_in_actived', 1);
- });
- </script>
- <style lang="scss" scoped>
- .TopTab {
- position: fixed;
- z-index: 10;
- top: 0;
- left: 0;
- right: 0;
- overflow: hidden;
- .headBox {
- width: 100%;
- height: 90px;
- background: url('@/assets/images/pictureOnMap/topBgc.png') no-repeat center;
- background-size: 100% 100%;
- position: relative;
- display: flex;
- justify-content: space-between;
- .logoText {
- position: absolute;
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 46px;
- color: #ffffff;
- line-height: 1px;
- text-shadow: 0px 6px 3px #013660;
- background: linear-gradient(0deg, rgba(43, 156, 248, 0.83) 0%, rgba(232, 254, 255, 0.83) 100%);
- -webkit-background-clip: text;
- letter-spacing: 10px;
- // -webkit-text-fill-color: transparent;
- transform: translate(-50%, -50%);
- position: absolute;
- top: 40%;
- left: 50%;
- }
- .leftBox {
- display: flex;
- .timeText {
- height: 60px;
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 16px;
- color: #ffffff;
- display: flex;
- padding-left: 29px;
- margin-top: 25px;
- .time {
- min-width: 80px;
- }
- .weekText {
- padding-right: 31px;
- }
- }
- .leftTab {
- width: 450px;
- height: 60px;
- display: flex;
- align-content: center;
- position: relative;
- .eachLink {
- width: 178px;
- height: 45px;
- line-height: 45px;
- text-align: center;
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 22px;
- color: #94ceff;
- text-shadow: 0px 6px 3px #021625;
- background: url('@/assets/images/pictureOnMap/topTabBgcL.png') no-repeat center;
- background-size: 100% 100%;
- position: absolute;
- top: 11px;
- cursor: pointer;
- }
- .activeTab {
- background: url('@/assets/images/pictureOnMap/activeTabL.png') no-repeat center;
- background-size: 100% 100%;
- color: #ffffff;
- }
- }
- }
- .rightBox {
- display: flex;
- .rightTab {
- width: 450px;
- height: 90px;
- display: flex;
- align-content: center;
- }
- .eachLink {
- width: 178px;
- height: 45px;
- line-height: 45px;
- text-align: center;
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 22px;
- color: #94ceff;
- text-shadow: 0px 6px 3px #021625;
- background: url('@/assets/images/pictureOnMap/topTabBgcR.png') no-repeat center;
- background-size: 100% 100%;
- position: absolute;
- top: 13px;
- cursor: pointer;
- }
- .activeTab {
- background: url('@/assets/images/pictureOnMap/activeTabR.png') no-repeat center;
- background-size: 100% 100%;
- color: #ffffff;
- }
- .weatherBox {
- display: flex;
- margin-top: 18px;
- padding-right: 12px;
- .weatherImg {
- margin-top: 5px;
- width: 23px;
- height: 23px;
- // background: url('@/assets/images/pictureOnMap/weather/xiaoyu.png') no-repeat center;
- // background-size: 100% 100%;
- margin-right: 10px;
- }
- .weatherText {
- text-align: center;
- .weatherCase {
- font-family: AlibabaPuHuiTi;
- font-weight: 400;
- font-size: 13px;
- color: #bfdfff;
- text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
- }
- .temperature {
- font-family: PangMenZhengDao;
- font-weight: 400;
- font-size: 16px;
- color: #aecaf5;
- text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
- // background: linear-gradient(0deg, rgba(172,221,255,0.13) 0%, rgba(255,255,255,0.13) 100%);
- opacity: 0.9;
- display: flex;
- align-items: center;
- }
- }
- }
- }
- }
-
- .headBoxTwo {
- position: relative;
- width: 100%;
- height: 90px;
- background: url('@/assets/images/shuiwuzichan/swzc-top-head.png') no-repeat center;
- background-size: 100% 100%;
- position: relative;
- display: flex;
- justify-content: space-between;
-
- .centerbox {
- cursor: pointer;
- position: absolute;
- left: 50%;
- transform: translate(-50%);
- width: 36%;
- height: 100%;
- border-radius: 0 0px 40px 40px;
- }
- }
-
- .linkicon {
- margin-top: 23px;
- margin-right: 20px;
- cursor: pointer;
- width: 23px;
- height: 23px;
- background: url('@/assets/images/pictureOnMap/TOjiance.png') no-repeat;
- background-size: 100% 100%;
- }
-
- .RongYun_icon {
- margin-top: 23px;
- margin-right: 20px;
- cursor: pointer;
- width: 25px;
- height: 25px;
- background: url('@/assets/images/rongYunImg/RongYun_icon.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- </style>
-
- <style lang="scss">
- @import '@/assets/styles/pictureOnMap.scss';
- </style>