Newer
Older
DH_Apicture / src / views / pictureOnMap / page / WaterAssets / shuziluanshengBottom / index.vue
@wudi wudi on 20 Dec 10 KB 1
  1. <template>
  2. <!-- 水务资产 右侧 -->
  3. <div class="centerbottmBox">
  4. <div class="TOP_Title shuziluansheng">
  5. <div class="flex_sbc p56 pbottom">
  6. <div class="top-title">数字孪生</div>
  7. <div class="tabData flex">
  8. <div
  9. class="eachClick"
  10. :class="active == item.value ? 'active' : ''"
  11. v-for="item in rightTabArr"
  12. :key="item.value"
  13. @click="tabClick(item)"
  14. >
  15. {{ item.label }}
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="luanshengBottom">
  21. <div
  22. class="bottomitem"
  23. :class="bottomactive == item.value ? 'active' : ''"
  24. @click="bottomClick(item)"
  25. v-for="item in bottomshowArr"
  26. :key="item"
  27. >
  28. {{ item.label }}
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <script setup name="shuziluanshengBox">
  34. import bus from '@/bus';
  35. import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
  36. const { proxy } = getCurrentInstance();
  37. import { getImageUrl } from '@/utils/ruoyi';
  38. const rightTabArr = ref([
  39. {
  40. label: '三维社区',
  41. value: '1',
  42. },
  43. {
  44. label: '三维泵站',
  45. value: '2',
  46. },
  47. {
  48. label: '三维管线',
  49. value: '3',
  50. },
  51. {
  52. label: '三维场景',
  53. value: '4',
  54. },
  55. ]);
  56.  
  57. const bottomshowArr = ref();
  58.  
  59. const shequArr = ref([
  60. {
  61. label: '水蓝郡',
  62. value: '1',
  63. easeTo: { center: [114.37237559831908, 30.465690931728275],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  64. },
  65. {
  66. label: '锦绣良缘',
  67. value: '2',
  68. easeTo: { center: [114.36116641690938, 30.465031212461284],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  69. },
  70. {
  71. label: '赵家池明渠',
  72. value: '3',
  73. easeTo: { center: [114.37933973676917, 30.448914882223832], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  74. },
  75. {
  76. label: '三维雨水管道',
  77. value: '4',
  78. },
  79. {
  80. label: '三维污水管道',
  81. value: '5',
  82. },
  83. ]);
  84. const bengzhanArr = ref([
  85. {
  86. label: '五家湖排江泵站',
  87. value: '1',
  88. values: 'rain_water_pump_station_info',
  89. easeTo: { center: [114.60260472329406, 30.55206252978222],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  90. },
  91. {
  92. label: '光谷转盘鲁磨路泵站',
  93. value: '2',
  94. values: 'rain_water_pump_station_info',
  95. easeTo: { center: [114.39394626017497, 30.508365555418536], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  96. },
  97. {
  98. label: '谷转盘珞喻路泵站',
  99. value: '3',
  100. values: 'rain_water_pump_station_info',
  101. easeTo: { center: [114.40368321715408, 30.507588862101528], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  102. },
  103. {
  104. label: '光谷一路泵站',
  105. value: '4',
  106. values: 'rain_water_pump_station_info',
  107. easeTo: { center: [114.43310730417937, 30.49480696122025], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  108. }
  109. ]);
  110. const guanxianArr = ref([
  111. {
  112. label: '南湖片区三维雨水',
  113. value: '1',
  114. values: '南湖汇水区',
  115. easeTo: { center: [114.39293842299662, 30.482790194236813], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  116. },
  117. {
  118. label: '南湖片区三维污水',
  119. value: '2',
  120. values: '龙王嘴污水系',
  121. easeTo: { center: [114.39293842299662, 30.482790194236813], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
  122. },
  123. {
  124. label: '豹澥片区三维雨水',
  125. value: '3',
  126. values: '豹澥湖汇水区',
  127. easeTo: { center: [114.45895478865708, 30.459740968619386], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17 },
  128. },
  129. {
  130. label: '豹澥片区三维污水',
  131. value: '4',
  132. values: '豹澥污水系统',
  133. easeTo: { center: [114.45895478865708, 30.459740968619386], zoom: 13.25419672401314, pitch: 45.95516160507156 },
  134. },
  135. ]);
  136. const changjingArr = ref([
  137. /* {
  138. label: '江南泵站',
  139. value: 'q1',
  140. values: '江南泵站',
  141. url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v1.json',
  142. easeTo: { center: [114.26285547941757, 30.49905022989863], zoom: 17.5, pitch: 60.137987545556804, bearing: 108.7 },
  143. },
  144. {
  145. label: '汤逊湖泵站',
  146. value: 'q2',
  147. values: '汤逊湖泵站',
  148. url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v2.json',
  149. easeTo: { center: [114.22880212973843, 30.45179545680257], zoom: 17.5, pitch: 64.69055791957466, bearing: 108.7 },
  150. },
  151. {
  152. label: '白沙洲长江大桥',
  153. value: 'q3',
  154. values: '白沙洲长江大桥',
  155. url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v3.json',
  156. easeTo: { center: [114.25047535415115, 30.48219212521819], zoom: 17.5, pitch: 76.24070062592385, bearing: 108.7 },
  157. },
  158. {
  159. label: '管网',
  160. value: '管网',
  161. values: '管网',
  162. url: 'http://localhost:9992/WSL12191440/3dtiles/tileset.json',
  163. easeTo: {"zoom": 16.59407171571377, "center": [114.390913858453,30.4432351724798], "pitch": 64.9999999999998, "bearing": 0},
  164. },*/
  165. {
  166. label: '龙王嘴污水处理厂',
  167. value: '龙王嘴污水处理厂',
  168. values: '龙王嘴污水处理厂',
  169. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/1fenqu/tileset.json',
  170. easeTo: {"zoom": 16.59407171571377, "center": [114.3705429075477, 30.492439863093296], "pitch": 64.9999999999998, "bearing": 0},
  171. },
  172. {
  173. label: '洪山高级中学',
  174. value: '洪山高级中学',
  175. values: '洪山高级中学',
  176. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/2fenqu/tileset.json',
  177. easeTo: {"zoom": 17.81287927129665, "center": [114.38089058306196, 30.49322975938621], "pitch": 73.1403666953906, "bearing": 29.79517258244755},
  178. },
  179. {
  180. label: '中南民族大学',
  181. value: '中南民族大学',
  182. values: '中南民族大学',
  183. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/3fenqu/tileset.json',
  184. easeTo: {"zoom": 17.233580151793813, "center": [114.38786465157301, 30.49109786555684], "pitch": 64.99999999999974, "bearing": -14.399999999999864},
  185. },
  186. {
  187. label: '武汉纺织大学南湖校区',
  188. value: '武汉纺织大学南湖校区',
  189. values: '武汉纺织大学南湖校区',
  190. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/4fenqu/tileset.json',
  191. easeTo: {"zoom": 18.116267047007025, "center": [114.3927768535928, 30.48824237671211], "pitch": 71.44305293120455, "bearing": 37.51014089090722},
  192. },
  193. {
  194. label: '中建大公馆',
  195. value: '中建大公馆',
  196. values: '中建大公馆',
  197. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/5fenqu/tileset.json',
  198. // url: 'http://localhost:9992/1214/3dtile-x/5fenqu/tileset.json',
  199. easeTo: {"zoom": 17.251138347641298, "center": [114.4020023147911, 30.484443483567972], "pitch": 66.99999999999989, "bearing": -25.600000000000136},
  200. },
  201. {
  202. label: '保利国际中心',
  203. value: '保利国际中心',
  204. values: '保利国际中心',
  205. // url: 'http://localhost:9992/1214/3dtile-x/6fenqu/tileset.json',
  206. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/6fenqu/tileset.json',
  207. easeTo: {"zoom": 17.687188362054506, "center": [114.40307345195083, 30.493463072026188], "pitch": 71.99999999999976, "bearing": -38.39999999999998},
  208. },
  209. {
  210. label: '北辰光谷里',
  211. value: '北辰光谷里',
  212. values: '北辰光谷里',
  213. // url: 'http://localhost:9992/1214/3dtile-x/7fenqu/tileset.json',
  214. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/7fenqu/tileset.json',
  215. easeTo: {"zoom": 17.06523812182194, "center": [114.41040402249132, 30.484048091956765], "pitch": 59.4999999999999, "bearing": -37.36697917780225},
  216. },
  217. {
  218. label: 'K11Select',
  219. value: 'K11Select',
  220. values: 'K11Select',
  221. // url: 'http://localhost:9992/1214/3dtile-x/8fenqu/tileset.json',
  222. url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/8fenqu/tileset.json',
  223. easeTo: {"zoom": 16.779971941533105, "center": [114.40929977258014, 30.492555333756428], "pitch": 65.17673025474492, "bearing": 50.399999999999864},
  224. }
  225. ]);
  226. const active = ref(1);
  227. const bottomactive = ref(1);
  228.  
  229. const tabClick = item => {
  230. active.value = item.value;
  231. switch (item.value) {
  232. case '1':
  233. bottomshowArr.value = shequArr.value;
  234. bottomactive.value = '1';
  235. break;
  236. case '2':
  237. bottomshowArr.value = bengzhanArr.value;
  238. bottomactive.value = '1';
  239. break;
  240. case '3':
  241. bottomshowArr.value = guanxianArr.value;
  242. bottomactive.value = '1';
  243. case '4':
  244. bottomshowArr.value = changjingArr.value;
  245. bottomactive.value = '1';
  246. break;
  247. }
  248. };
  249. const bottomClick = item => {
  250. bottomactive.value = item.value;
  251. if (active.value == '4') return operationScene(item);
  252. [...bengzhanArr.value, ...guanxianArr.value]
  253. .map(i => (i.values || '').split(','))
  254. .flat()
  255. .forEach(key => operationLayer(key, false));
  256. (item.values || '').split(',').forEach(key => operationLayer(key, true));
  257. item.easeTo && newfiberMap.map.easeTo(item.easeTo);
  258. };
  259.  
  260. const operationScene = item => {
  261. bus.emit('load3DTiles', { id: item.label, url: item.url });
  262. item.easeTo && newfiberMap.map.easeTo(item.easeTo);
  263. };
  264.  
  265. const events_params = {
  266. setHighlight: { key: 'setHighlight' },
  267. setLayerVisible: { key: 'setLayerVisible' },
  268. };
  269. const operationLayer = (name, visible) => {
  270. const { setLayerVisible, setHighlight } = events_params;
  271. bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
  272. };
  273.  
  274. function change3Dtiles(e) {
  275. // bus.emit('change3Dtiles');
  276. }
  277.  
  278. onMounted(() => {
  279. bottomshowArr.value = shequArr.value;
  280.  
  281. bus.on('changeThreedimensional', e => {
  282. console.log('收到来自语音调度的修改', e);
  283. change3Dtiles(e);
  284. });
  285. });
  286.  
  287. onBeforeUnmount(() => {
  288. bus.off('changeThreedimensional');
  289.  
  290. [...bengzhanArr.value, ...guanxianArr.value]
  291. .map(i => (i.values || '').split(','))
  292. .flat()
  293. .forEach(key => operationLayer(key, false));
  294.  
  295. bus.emit('remove3Dtiles');
  296. });
  297. </script>
  298. <style lang="scss" scoped>
  299. @import '@/assets/styles/WaterAssets.scss';
  300.  
  301. .luanshengBottom {
  302. width: 100%;
  303. display: -webkit-box;
  304. overflow: hidden;
  305. overflow-x: auto;
  306. padding-top: 15px;
  307. padding-left: 15px;
  308.  
  309. .bottomitem {
  310. cursor: pointer;
  311. width: 136px;
  312. height: 30px;
  313. line-height: 30px;
  314. text-align: center;
  315. margin-left: 10px;
  316. background: linear-gradient(180deg, #0c2156 0%, #2291e1 100%);
  317. border-radius: 15px;
  318. border: 1px solid #2291e1;
  319. // border-image: linear-gradient(0deg, #308fee, #2abffa, #308fee) 10 10;
  320. font-family: Source Han Sans CN;
  321. font-weight: bold;
  322. font-size: 14px;
  323. color: #e0e5fa;
  324.  
  325. &.active {
  326. background: linear-gradient(0deg, #0c3f57 0%, #1dd0c7 100%);
  327. border-radius: 15px;
  328. border: 1px solid #27f1c6;
  329. font-family: Source Han Sans CN;
  330. font-weight: bold;
  331. font-size: 14px;
  332. color: #ffffff;
  333. }
  334. }
  335. }
  336. </style>