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