- <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 useUserStore from "@/store/modules/user";
- const appStore = useUserStore();
-
- 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: "59.2",
- link: "/DrainageSystem",
- },
- {
- 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);
-
- appStore.Set_TiXiType("");
- 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", 2);
- });
- </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>