Newer
Older
DH_Apicture / src / views / pictureOnMap / TopTab / index.vue
@zhangqy zhangqy on 27 Dec 11 KB 优化逻辑
  1. <template>
  2. <!-- 智慧水务大脑 头部tab -->
  3. <div class="TopTab">
  4. <div class="headBox">
  5. <div class="logoText">智慧水务大脑</div>
  6. <div class="leftBox">
  7. <div class="timeText">
  8. <div class="weekText">{{ currentWeek }}</div>
  9. <div class="time">{{ time }}</div>
  10. </div>
  11. <div class="leftTab">
  12. <div
  13. class="eachLink"
  14. :class="activeName == item.value ? 'activeTab' : ''"
  15. v-for="item in leftMenuArr"
  16. :key="item.value"
  17. :style="{ right: item.posSum + '%' }"
  18. @click="TabClick(item)"
  19. >
  20. {{ item.label }}
  21. </div>
  22. </div>
  23. </div>
  24. <div class="rightBox">
  25. <div class="rightTab">
  26. <div
  27. class="eachLink"
  28. :class="activeName == item.value ? 'activeTab' : ''"
  29. v-for="item in rightMenuArr"
  30. :key="item.value"
  31. :style="{ right: item.posSum + '%' }"
  32. @click="TabClick(item)"
  33. >
  34. {{ item.label }}
  35. </div>
  36. </div>
  37. <div class="RongYun_icon" @click="dialogShow = !dialogShow"></div>
  38. <div class="linkicon" @click="Tojiance"></div>
  39.  
  40. <!-- <div class="weatherBox">
  41. <img class="weatherImg" :src="getImageUrl(weatherdata?.code || '02', 'pictureOnMap/weather/day')" />
  42. <div class="weatherText">
  43. <div class="weatherCase">{{weatherdata?.text}}</div>
  44. <div class="temperature">{{weatherdata?.low}}℃ <span>~</span> {{weatherdata?.high}}℃</div>
  45. </div>
  46. </div> -->
  47. </div>
  48. </div>
  49.  
  50. <ModelRongYun :RYdialogShow="dialogShow" @OneDialogHide="dialogHide"></ModelRongYun>
  51.  
  52. <!-- <div v-show="activeName == 2" class="headBoxTwo">
  53. <div class="centerbox" @click="BackHouse"></div>
  54. </div> -->
  55. </div>
  56. </template>
  57. <script setup>
  58. import { ref, reactive, onMounted, onUnmounted } from "vue";
  59. import moment from "moment";
  60. import { getImageUrl } from "@/utils/ruoyi";
  61. import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
  62. import useUserStore from "@/store/modules/user";
  63. const appStore = useUserStore();
  64.  
  65. import { getweather } from "@/api/MonitorAssetsOnMap";
  66. import { useRouter } from "vue-router";
  67. const router = useRouter();
  68. import bus from "@/bus";
  69. const { proxy } = getCurrentInstance();
  70. const weatherdata = ref("");
  71.  
  72. const activeName = ref("2");
  73. const lastActived = ref(2);
  74.  
  75. const leftMenuArr = ref([
  76. {
  77. label: "排水体系",
  78. value: "1",
  79. posSum: "59.2",
  80. link: "/DrainageSystem",
  81. },
  82. {
  83. label: "水资产",
  84. value: "2",
  85. posSum: "28.6",
  86. link: "/WaterAssets",
  87. },
  88. {
  89. label: "监测分析",
  90. value: "3",
  91. posSum: "-2",
  92. link: "/MonitoringAnalysis",
  93. },
  94. ]);
  95. const rightMenuArr = ref([
  96. {
  97. label: "排涝调度",
  98. value: "4",
  99. posSum: "24.2",
  100. link: "/FloodControlAndDrainage",
  101. },
  102. {
  103. label: "舆情分析",
  104. value: "5",
  105. posSum: "16.9",
  106. link: "/PublicOpinionAnalysis",
  107. },
  108. // {
  109. // label: '河湖生态',
  110. // value: '6',
  111. // posSum: '10.9',
  112. // link: '/RiverAndLakeEcology',
  113. // },
  114. ]);
  115. const TabClick = (item) => {
  116. console.log("itemitemitem2", item);
  117.  
  118. appStore.Set_TiXiType("");
  119. newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  120. bus.emit("clearTemporaryData");
  121. if (item.link == "/WaterAssets") {
  122. lastActived.value = activeName.value;
  123. }
  124. if (item.link != "/PublicOpinionAnalysis") {
  125. bus.emit("YQ_head", true);
  126. }
  127. activeName.value = item.value;
  128. localStorage.setItem("WB_Brad_in_actived", activeName.value);
  129. localStorage.setItem("WB_Brad_in_Link", item.link);
  130. console.log("item.link", item.link);
  131. router.push({
  132. path: item.link,
  133. });
  134. };
  135.  
  136. const BackHouse = () => {
  137. if (lastActived.value == 2) {
  138. activeName.value = leftMenuArr.value[1].value;
  139. router.push({
  140. path: leftMenuArr.value[1].link,
  141. });
  142. } else {
  143. router.go(-1);
  144. activeName.value = lastActived.value;
  145. }
  146.  
  147. localStorage.setItem("WB_Brad_in_actived", activeName.value);
  148. };
  149. const time = ref("");
  150. // 更新当前时间
  151. const updateTime = () => {
  152. const now = new Date();
  153. time.value = now.toLocaleTimeString(); // 格式为hh:mm:ss
  154. };
  155. const currentWeek = computed(() => {
  156. const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  157. return days[new Date().getDay()];
  158. });
  159.  
  160. const Tojiance = () => {
  161. localStorage.setItem("WB_Brad_in_actived", 2);
  162. let herf = `${window.location.origin}/MonitoringAssets/MonitorAssetsOnMap#/portalPage`;
  163. window.open(herf, "_self");
  164. };
  165. function weatherForecast() {
  166. let type = 4;
  167. let time = moment().format("YYYY-MM-DD");
  168. getweather(type, time).then((res) => {
  169. console.log("weatherForecast", res);
  170. if (res.code == 200 && res.data.length) {
  171. weatherdata.value = res.data[0].weatherResultVO.dailyFcsts[0];
  172. let Hours = new Date().getHours();
  173. let name = Hours <= 17 ? "day" : "night";
  174. let code = Hours <= 17 ? weatherdata.value.code_day : weatherdata.value.code_night;
  175. weatherdata.value.codeurl = `/static/images/weather/${name}/${code}.png`;
  176.  
  177. console.log("allData.weatherdata", weatherdata.value);
  178. localStorage.setItem("weather", JSON.stringify(weatherdata.value));
  179. }
  180. });
  181. }
  182. const dialogShow = ref(false);
  183.  
  184. const dialogHide = (val) => {
  185. if (!val) {
  186. dialogShow.value = false;
  187. }
  188. };
  189.  
  190. onBeforeUnmount(() => {
  191. bus.off("changeHeadePath");
  192. });
  193.  
  194. onMounted(() => {
  195. bus.on("changeHeadePath", (e) => {
  196. let newarr = [...leftMenuArr.value, ...rightMenuArr.value];
  197. let Getitem = newarr.filter((item) => {
  198. return item.link == e;
  199. })[0];
  200. if (Getitem) {
  201. console.log(Getitem);
  202. TabClick(Getitem);
  203. }
  204. });
  205.  
  206. activeName.value = localStorage.getItem("WB_Brad_in_actived") || 2;
  207. // lastActived.value = 2;
  208. let item = {
  209. link: localStorage.getItem("WB_Brad_in_Link") || "/WaterAssets",
  210. value: localStorage.getItem("WB_Brad_in_actived") || 2,
  211. };
  212. TabClick(item);
  213. updateTime();
  214. // weatherForecast()
  215. });
  216. const interval = setInterval(updateTime, 1000); // 每秒更新一次时间
  217. // 清理定时器,防止内存泄漏
  218. onUnmounted(() => {
  219. clearInterval(interval);
  220. localStorage.setItem("WB_Brad_in_actived", 2);
  221. });
  222. </script>
  223. <style lang="scss" scoped>
  224. .TopTab {
  225. position: fixed;
  226. z-index: 10;
  227. top: 0;
  228. left: 0;
  229. right: 0;
  230. overflow: hidden;
  231. .headBox {
  232. width: 100%;
  233. height: 90px;
  234. background: url("@/assets/images/pictureOnMap/topBgc.png") no-repeat center;
  235. background-size: 100% 100%;
  236. position: relative;
  237. display: flex;
  238. justify-content: space-between;
  239. .logoText {
  240. position: absolute;
  241. font-family: PangMenZhengDao;
  242. font-weight: 400;
  243. font-size: 46px;
  244. color: #ffffff;
  245. line-height: 1px;
  246. text-shadow: 0px 6px 3px #013660;
  247. background: linear-gradient(
  248. 0deg,
  249. rgba(43, 156, 248, 0.83) 0%,
  250. rgba(232, 254, 255, 0.83) 100%
  251. );
  252. -webkit-background-clip: text;
  253. letter-spacing: 10px;
  254. // -webkit-text-fill-color: transparent;
  255. transform: translate(-50%, -50%);
  256. position: absolute;
  257. top: 40%;
  258. left: 50%;
  259. }
  260. .leftBox {
  261. display: flex;
  262. .timeText {
  263. height: 60px;
  264. font-family: PangMenZhengDao;
  265. font-weight: 400;
  266. font-size: 16px;
  267. color: #ffffff;
  268. display: flex;
  269. padding-left: 29px;
  270. margin-top: 25px;
  271. .time {
  272. min-width: 80px;
  273. }
  274. .weekText {
  275. padding-right: 31px;
  276. }
  277. }
  278. .leftTab {
  279. width: 450px;
  280. height: 60px;
  281. display: flex;
  282. align-content: center;
  283. position: relative;
  284. .eachLink {
  285. width: 178px;
  286. height: 45px;
  287. line-height: 45px;
  288. text-align: center;
  289. font-family: PangMenZhengDao;
  290. font-weight: 400;
  291. font-size: 22px;
  292. color: #94ceff;
  293. text-shadow: 0px 6px 3px #021625;
  294. background: url("@/assets/images/pictureOnMap/topTabBgcL.png") no-repeat center;
  295. background-size: 100% 100%;
  296. position: absolute;
  297. top: 11px;
  298. cursor: pointer;
  299. }
  300. .activeTab {
  301. background: url("@/assets/images/pictureOnMap/activeTabL.png") no-repeat center;
  302. background-size: 100% 100%;
  303. color: #ffffff;
  304. }
  305. }
  306. }
  307. .rightBox {
  308. display: flex;
  309. .rightTab {
  310. width: 450px;
  311. height: 90px;
  312. display: flex;
  313. align-content: center;
  314. }
  315. .eachLink {
  316. width: 178px;
  317. height: 45px;
  318. line-height: 45px;
  319. text-align: center;
  320. font-family: PangMenZhengDao;
  321. font-weight: 400;
  322. font-size: 22px;
  323. color: #94ceff;
  324. text-shadow: 0px 6px 3px #021625;
  325. background: url("@/assets/images/pictureOnMap/topTabBgcR.png") no-repeat center;
  326. background-size: 100% 100%;
  327. position: absolute;
  328. top: 13px;
  329. cursor: pointer;
  330. }
  331. .activeTab {
  332. background: url("@/assets/images/pictureOnMap/activeTabR.png") no-repeat center;
  333. background-size: 100% 100%;
  334. color: #ffffff;
  335. }
  336. .weatherBox {
  337. display: flex;
  338. margin-top: 18px;
  339. padding-right: 12px;
  340. .weatherImg {
  341. margin-top: 5px;
  342. width: 23px;
  343. height: 23px;
  344. // background: url('@/assets/images/pictureOnMap/weather/xiaoyu.png') no-repeat center;
  345. // background-size: 100% 100%;
  346. margin-right: 10px;
  347. }
  348. .weatherText {
  349. text-align: center;
  350. .weatherCase {
  351. font-family: AlibabaPuHuiTi;
  352. font-weight: 400;
  353. font-size: 13px;
  354. color: #bfdfff;
  355. text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
  356. }
  357. .temperature {
  358. font-family: PangMenZhengDao;
  359. font-weight: 400;
  360. font-size: 16px;
  361. color: #aecaf5;
  362. text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
  363. // background: linear-gradient(0deg, rgba(172,221,255,0.13) 0%, rgba(255,255,255,0.13) 100%);
  364. opacity: 0.9;
  365. display: flex;
  366. align-items: center;
  367. }
  368. }
  369. }
  370. }
  371. }
  372.  
  373. .headBoxTwo {
  374. position: relative;
  375. width: 100%;
  376. height: 90px;
  377. background: url("@/assets/images/shuiwuzichan/swzc-top-head.png") no-repeat center;
  378. background-size: 100% 100%;
  379. position: relative;
  380. display: flex;
  381. justify-content: space-between;
  382.  
  383. .centerbox {
  384. cursor: pointer;
  385. position: absolute;
  386. left: 50%;
  387. transform: translate(-50%);
  388. width: 36%;
  389. height: 100%;
  390. border-radius: 0 0px 40px 40px;
  391. }
  392. }
  393.  
  394. .linkicon {
  395. margin-top: 23px;
  396. margin-right: 20px;
  397. cursor: pointer;
  398. width: 23px;
  399. height: 23px;
  400. background: url("@/assets/images/pictureOnMap/TOjiance.png") no-repeat;
  401. background-size: 100% 100%;
  402. }
  403.  
  404. .RongYun_icon {
  405. margin-top: 23px;
  406. margin-right: 20px;
  407. cursor: pointer;
  408. width: 25px;
  409. height: 25px;
  410. background: url("@/assets/images/rongYunImg/RongYun_icon.png") no-repeat;
  411. background-size: 100% 100%;
  412. }
  413. }
  414. </style>
  415.  
  416. <style lang="scss">
  417. @import "@/assets/styles/pictureOnMap.scss";
  418. </style>