Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabSelect.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <!-- 站点搜索 -->
  3. <div class="centerWarn">
  4. <el-select v-model="searchText" placeholder="请输入关键字搜索" style="width: 230px" filterable @change="selectStation">
  5. <el-option v-for="item in bsType" :key="item.id" :label="item.siteName" :value="item.id" />
  6. </el-select>
  7. <el-button type="warning" @click="clearSelectedStation">清除</el-button>
  8. </div>
  9. <div class="changeTabList">
  10. <div
  11. :class="['changeTab', currentIndex === item.index ? 'active' : '']"
  12. v-for="item in toolList"
  13. @click="checkInfo(item.index)"
  14. :key="item.index"
  15. >
  16. {{ item.name }}
  17. </div>
  18. </div>
  19.  
  20. <!-- 风险研判图例 -->
  21. <div class="tuliTSYP" v-if="currentIndex == 4">
  22. <div class="titleT">积水风险等级</div>
  23. <div class="tuli_img">
  24. <p class="low"></p>
  25. <div>低风险(0.15-0.3m)</div>
  26. </div>
  27. <div class="tuli_img">
  28. <p class="middle"></p>
  29. <div>中风险(0.3-0.5m)</div>
  30. </div>
  31. <div class="tuli_img">
  32. <p class="high"></p>
  33. <div>高风险(>0.5m)</div>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import bus from '@/bus';
  39. import { artificialSiteSearch } from '@/api/floodSys/floodStation.js';
  40. export default {
  41. components: {},
  42. props: {},
  43. setup(props, context) {
  44. const allData = reactive({
  45. currentIndex: 1,
  46. toolList: [
  47. { index: 1, name: '排水设施' },
  48. { index: 2, name: '物联感知' },
  49. { index: 3, name: '监测告警' },
  50. { index: 4, name: '态势研判' },
  51. // { index: 5, name: '长效养护' },
  52. ],
  53. bsType: [],
  54. searchText: '',
  55. });
  56. const { proxy } = getCurrentInstance();
  57. // 类型切换
  58. const checkInfo = async val => {
  59. allData.currentIndex = val;
  60. bus.emit('changeTableContent', val);
  61. bus.emit('changeTableContent2', val);
  62. };
  63. //获取所有站点
  64. const getAllStationInfo = async () => {
  65. let res = await artificialSiteSearch();
  66. if (res && res.code == 200) {
  67. allData.bsType = res.data;
  68. }
  69. };
  70. //选择站点触发事件
  71. const selectStation = () => {
  72. let types = [
  73. 'RainPort',
  74. 'Overflow',
  75. 'rain_water',
  76. 'sewage_water',
  77. 'drain_flooded',
  78. 'rainfall',
  79. 'pipeline',
  80. 'drain_outlet',
  81. 'waterlogging',
  82. 'river',
  83. 'typical_land',
  84. ];
  85. let fy = [
  86. 'paiKou_1',
  87. 'drainOutlet_1',
  88. 'YSBZ_1',
  89. 'WSBZ_1',
  90. 'PLBZ_1',
  91. 'rainStation_1',
  92. 'pipeSupervise_1',
  93. 'PKsupervise_1',
  94. 'waterlog_1',
  95. 'riverLake_1',
  96. 'orinign_1',
  97. ];
  98. let selectedStation = allStationList.filter(item => item.id == allData.searchText)[0];
  99. selectedStation.type = null;
  100. let selectedStationJson = getGeojsonData(selectedStation);
  101. if (JSON.stringify(selectedStationJson.features[0]) == '{}') {
  102. proxy.$modal.msgError('站点坐标缺失');
  103. return;
  104. } else {
  105. bus.emit('removeMapDatas', fy);
  106. let layerName = fy[types.indexOf(selectedStation.pumpType || selectedStation.pointType || selectedStation.monitorTargetType)];
  107. bus.emit('setGeoJSON', { json: selectedStationJson, key: layerName });
  108. bus.emit('setLayerVisible', { layername: layerName, isCheck: true });
  109. newfiberMapbox.map.easeTo({
  110. center: [selectedStationJson.features[0].geometry.coordinates[0], selectedStationJson.features[0].geometry.coordinates[1]],
  111. zoom: 15,
  112. });
  113. }
  114. return;
  115. };
  116. //构建geojson格式
  117. const getGeojsonData = data => {
  118. let features = [];
  119. let feature = {};
  120. if (data.lonLat) {
  121. let lonlat = data.lonLat.split(',');
  122. feature = {
  123. type: 'Feature',
  124. geometry: {
  125. type: 'Point',
  126. coordinates: [Number(lonlat[0]), Number(lonlat[1])],
  127. },
  128. properties: data,
  129. };
  130. } else if (data.geometrys) {
  131. let geometry = Terraformer.WKT.parse(data.geometrys);
  132. feature = {
  133. type: 'Feature',
  134. geometry: geometry,
  135. properties: data,
  136. };
  137. } else if (data.lon && data.lat) {
  138. feature = {
  139. type: 'Feature',
  140. geometry: {
  141. type: 'Point',
  142. coordinates: [Number(data.lon), Number(data.lat)],
  143. },
  144. properties: data,
  145. };
  146. } else if (data.originalX && data.originalY) {
  147. feature = {
  148. type: 'Feature',
  149. geometry: {
  150. type: 'Point',
  151. coordinates: [Number(data.originalX), Number(data.originalY)],
  152. },
  153. properties: data,
  154. };
  155. }
  156. features.push(feature);
  157. return {
  158. type: 'FeatureCollection',
  159. features: features,
  160. };
  161. };
  162. //清除选中站点
  163. const clearSelectedStation = () => {
  164. let fy = [
  165. 'paiKou_1',
  166. 'drainOutlet_1',
  167. 'YSBZ_1',
  168. 'WSBZ_1',
  169. 'PLBZ_1',
  170. 'WSCLC_1',
  171. 'rainStation_1',
  172. 'pipeSupervise_1',
  173. 'PKsupervise_1',
  174. 'waterlog_1',
  175. 'riverLake_1',
  176. 'orinign_1',
  177. ];
  178. bus.emit('removeMapDatas', fy);
  179. };
  180. onMounted(() => {
  181. getAllStationInfo();
  182. });
  183. onBeforeUnmount(() => {
  184. allData.buildingModels = null;
  185. });
  186. return {
  187. ...toRefs(allData),
  188. checkInfo,
  189. getAllStationInfo,
  190. selectStation,
  191. getGeojsonData,
  192. clearSelectedStation,
  193. // openBuilding,
  194. //clearFeature,
  195. };
  196. },
  197. };
  198. </script>
  199. <style lang="scss">
  200. @import '@/assets/styles/variables.module.scss';
  201. .tuliTSYP {
  202. bottom: 100px;
  203. right: 540px;
  204. z-index: 111;
  205. position: absolute;
  206. background: #00314e;
  207. color: #fff;
  208. padding: 10px;
  209. .titleT {
  210. text-align: center;
  211. font-size: 18px;
  212. width: 100%;
  213. }
  214. .tuli_img {
  215. display: flex;
  216. align-items: center;
  217. margin-top: 15px;
  218. p {
  219. width: 20px;
  220. height: 20px;
  221. margin-right: 5px;
  222. }
  223. .low {
  224. background: #10e8a1;
  225. }
  226. .middle {
  227. background: #1e97f0;
  228. }
  229. .high {
  230. background: #ff2603;
  231. }
  232. }
  233. }
  234. .changeTabList {
  235. display: flex;
  236. align-items: center;
  237. width: 941px;
  238. bottom: 1%;
  239. left: 450px;
  240. position: absolute;
  241. z-index: 115;
  242. .changeTab {
  243. width: 175px;
  244. height: 43px;
  245. line-height: 43px;
  246. background: url('@/assets/images/setting/psflBg.png') no-repeat;
  247. background-size: 100% 100%;
  248. text-align: center;
  249. margin: 10px;
  250. cursor: pointer;
  251. color: #73c7e1;
  252. font-family: YouSheBiaoTiHei;
  253. font-size: 18px;
  254. font-style: normal;
  255. font-weight: 400;
  256. &:hover {
  257. color: #fff;
  258. }
  259. }
  260. .active {
  261. background: url('@/assets/images/setting/psflBgAct.png') no-repeat;
  262. background-size: 100% 100%;
  263. color: #fff;
  264. }
  265. }
  266. .isOpenBuilding {
  267. position: absolute;
  268. top: 7%;
  269. display: flex;
  270. z-index: 115;
  271. align-items: center;
  272. .switchName {
  273. margin-right: 10px;
  274. color: #00d1ff;
  275. text-align: center;
  276. font-family: PingFang SC;
  277. font-size: 14px;
  278. font-weight: 400;
  279. }
  280. }
  281. .centerWarn {
  282. background: $mainColor1;
  283. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  284. border-radius: 8px;
  285. top: 10px;
  286. right: 5px;
  287. z-index: 120;
  288. padding: 0px 10px;
  289. display: flex;
  290. align-items: center;
  291. width: 270px;
  292. height: 50px;
  293. position: absolute;
  294. margin-left: 10px;
  295. }
  296. </style>