- <template>
- <!-- 站点搜索 -->
- <div class="centerWarn">
- <el-select v-model="searchText" placeholder="请输入关键字搜索" style="width: 230px" filterable @change="selectStation">
- <el-option v-for="item in bsType" :key="item.id" :label="item.siteName" :value="item.id" />
- </el-select>
- <el-button type="warning" @click="clearSelectedStation">清除</el-button>
- </div>
- <div class="changeTabList">
- <div
- :class="['changeTab', currentIndex === item.index ? 'active' : '']"
- v-for="item in toolList"
- @click="checkInfo(item.index)"
- :key="item.index"
- >
- {{ item.name }}
- </div>
- </div>
-
- <!-- 风险研判图例 -->
- <div class="tuliTSYP" v-if="currentIndex == 4">
- <div class="titleT">积水风险等级</div>
- <div class="tuli_img">
- <p class="low"></p>
- <div>低风险(0.15-0.3m)</div>
- </div>
- <div class="tuli_img">
- <p class="middle"></p>
- <div>中风险(0.3-0.5m)</div>
- </div>
- <div class="tuli_img">
- <p class="high"></p>
- <div>高风险(>0.5m)</div>
- </div>
- </div>
- </template>
- <script>
- import bus from '@/bus';
- import { artificialSiteSearch } from '@/api/floodSys/floodStation.js';
- export default {
- components: {},
- props: {},
- setup(props, context) {
- const allData = reactive({
- currentIndex: 1,
- toolList: [
- { index: 1, name: '排水设施' },
- { index: 2, name: '物联感知' },
- { index: 3, name: '监测告警' },
- { index: 4, name: '态势研判' },
- // { index: 5, name: '长效养护' },
- ],
- bsType: [],
- searchText: '',
- });
- const { proxy } = getCurrentInstance();
- // 类型切换
- const checkInfo = async val => {
- allData.currentIndex = val;
- bus.emit('changeTableContent', val);
- bus.emit('changeTableContent2', val);
- };
- //获取所有站点
- const getAllStationInfo = async () => {
- let res = await artificialSiteSearch();
- if (res && res.code == 200) {
- allData.bsType = res.data;
- }
- };
- //选择站点触发事件
- const selectStation = () => {
- let types = [
- 'RainPort',
- 'Overflow',
- 'rain_water',
- 'sewage_water',
- 'drain_flooded',
- 'rainfall',
- 'pipeline',
- 'drain_outlet',
- 'waterlogging',
- 'river',
- 'typical_land',
- ];
- let fy = [
- 'paiKou_1',
- 'drainOutlet_1',
- 'YSBZ_1',
- 'WSBZ_1',
- 'PLBZ_1',
- 'rainStation_1',
- 'pipeSupervise_1',
- 'PKsupervise_1',
- 'waterlog_1',
- 'riverLake_1',
- 'orinign_1',
- ];
- let selectedStation = allStationList.filter(item => item.id == allData.searchText)[0];
- selectedStation.type = null;
- let selectedStationJson = getGeojsonData(selectedStation);
- if (JSON.stringify(selectedStationJson.features[0]) == '{}') {
- proxy.$modal.msgError('站点坐标缺失');
- return;
- } else {
- bus.emit('removeMapDatas', fy);
- let layerName = fy[types.indexOf(selectedStation.pumpType || selectedStation.pointType || selectedStation.monitorTargetType)];
- bus.emit('setGeoJSON', { json: selectedStationJson, key: layerName });
- bus.emit('setLayerVisible', { layername: layerName, isCheck: true });
- newfiberMapbox.map.easeTo({
- center: [selectedStationJson.features[0].geometry.coordinates[0], selectedStationJson.features[0].geometry.coordinates[1]],
- zoom: 15,
- });
- }
- return;
- };
- //构建geojson格式
- const getGeojsonData = data => {
- let features = [];
- let feature = {};
- if (data.lonLat) {
- let lonlat = data.lonLat.split(',');
- feature = {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [Number(lonlat[0]), Number(lonlat[1])],
- },
- properties: data,
- };
- } else if (data.geometrys) {
- let geometry = Terraformer.WKT.parse(data.geometrys);
- feature = {
- type: 'Feature',
- geometry: geometry,
- properties: data,
- };
- } else if (data.lon && data.lat) {
- feature = {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [Number(data.lon), Number(data.lat)],
- },
- properties: data,
- };
- } else if (data.originalX && data.originalY) {
- feature = {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [Number(data.originalX), Number(data.originalY)],
- },
- properties: data,
- };
- }
- features.push(feature);
- return {
- type: 'FeatureCollection',
- features: features,
- };
- };
- //清除选中站点
- const clearSelectedStation = () => {
- let fy = [
- 'paiKou_1',
- 'drainOutlet_1',
- 'YSBZ_1',
- 'WSBZ_1',
- 'PLBZ_1',
- 'WSCLC_1',
- 'rainStation_1',
- 'pipeSupervise_1',
- 'PKsupervise_1',
- 'waterlog_1',
- 'riverLake_1',
- 'orinign_1',
- ];
- bus.emit('removeMapDatas', fy);
- };
- onMounted(() => {
- getAllStationInfo();
- });
- onBeforeUnmount(() => {
- allData.buildingModels = null;
- });
- return {
- ...toRefs(allData),
- checkInfo,
- getAllStationInfo,
- selectStation,
- getGeojsonData,
- clearSelectedStation,
- // openBuilding,
- //clearFeature,
- };
- },
- };
- </script>
- <style lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .tuliTSYP {
- bottom: 100px;
- right: 540px;
- z-index: 111;
- position: absolute;
- background: #00314e;
- color: #fff;
- padding: 10px;
- .titleT {
- text-align: center;
- font-size: 18px;
- width: 100%;
- }
- .tuli_img {
- display: flex;
- align-items: center;
- margin-top: 15px;
- p {
- width: 20px;
- height: 20px;
- margin-right: 5px;
- }
- .low {
- background: #10e8a1;
- }
- .middle {
- background: #1e97f0;
- }
- .high {
- background: #ff2603;
- }
- }
- }
- .changeTabList {
- display: flex;
- align-items: center;
- width: 941px;
- bottom: 1%;
- left: 450px;
- position: absolute;
- z-index: 115;
- .changeTab {
- width: 175px;
- height: 43px;
- line-height: 43px;
- background: url('@/assets/images/setting/psflBg.png') no-repeat;
- background-size: 100% 100%;
- text-align: center;
- margin: 10px;
- cursor: pointer;
- color: #73c7e1;
- font-family: YouSheBiaoTiHei;
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- &:hover {
- color: #fff;
- }
- }
- .active {
- background: url('@/assets/images/setting/psflBgAct.png') no-repeat;
- background-size: 100% 100%;
- color: #fff;
- }
- }
- .isOpenBuilding {
- position: absolute;
- top: 7%;
- display: flex;
- z-index: 115;
- align-items: center;
- .switchName {
- margin-right: 10px;
- color: #00d1ff;
- text-align: center;
- font-family: PingFang SC;
- font-size: 14px;
- font-weight: 400;
- }
- }
- .centerWarn {
- background: $mainColor1;
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
- border-radius: 8px;
- top: 10px;
- right: 5px;
- z-index: 120;
- padding: 0px 10px;
- display: flex;
- align-items: center;
- width: 270px;
- height: 50px;
- position: absolute;
- margin-left: 10px;
- }
- </style>