From a2cf1dafa47139ef92135376db24ece72d2b51d2 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期一, 17 五月 2021 17:19:41 +0800 Subject: [PATCH] 管线分析 --- src/components/panel/topicSearch/WaterWasteSearch.vue | 320 ++++++++++++++++++++++------------------------------- 1 files changed, 134 insertions(+), 186 deletions(-) diff --git a/src/components/panel/topicSearch/WaterWasteSearch.vue b/src/components/panel/topicSearch/WaterWasteSearch.vue index 1a1f807..f49cd6d 100644 --- a/src/components/panel/topicSearch/WaterWasteSearch.vue +++ b/src/components/panel/topicSearch/WaterWasteSearch.vue @@ -1,115 +1,118 @@ <template> - <div class="sewers-search" v-if="gdVisible"> - <div class="panel-title">{{title}}</div> - <div class="search-panel "> - <el-form ref="form" :model="form" label-width="90px" class="search-form"> - <el-form-item label="鍖哄煙锛�" size="mini" class="search-panel-item"> - <el-select style="width: 100%" v-model="form.areaVal" @change="areaType" :popper-class="'select-down'"> - <el-option - v-for="item in inareaTypeOptions" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="浼佷笟鍚嶇О锛�" size="mini"> - <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" :popper-class="'select-down'"> - <el-option - v-for="item in enterpriseTypeOptions" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="浜岀骇鍗曚綅锛�" size="mini"> - <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> - <el-option - v-for="item in enterpriseSubunitsTypeOptions" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="涓夌骇鍗曚綅锛�" size="mini"> - <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> - <el-option - v-for="item in enterpriseSubunitsTypeOptions" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - <!-- <el-form-item label="椋庨櫓绾у埆" size="mini"></el-form-item>--> - <el-radio-group v-model="form.type" class="levelOfRisk"> - <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio> - </el-radio-group> - <!-- <el-form-item >--> - <div class="rightButtonSearch"> - <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"> - <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>--> - <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> - <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> --> - </el-input> - <el-button class="el-icon-search" @click="handleSearch"></el-button> + <div class="sewers-search" v-if="gdVisible"> + <div class="panel-title">{{title}}</div> + <div class="search-panel "> + <el-form ref="form" :model="form" label-width="90px" class="search-form"> + <el-form-item label="鍖哄煙锛�" size="mini" class="search-panel-item"> + <el-select style="width: 100%" v-model="form.areaVal" @change="areaType" + :popper-class="'select-down'"> + <el-option + v-for="item in inareaTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="浼佷笟鍚嶇О锛�" size="mini"> + <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" + :popper-class="'select-down'"> + <el-option + v-for="item in enterpriseTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="浜岀骇鍗曚綅锛�" size="mini"> + <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" + :popper-class="'select-down'"> + <el-option + v-for="item in enterpriseSubunitsTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="涓夌骇鍗曚綅锛�" size="mini"> + <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" + :popper-class="'select-down'"> + <el-option + v-for="item in enterpriseSubunitsTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <!-- <el-form-item label="椋庨櫓绾у埆" size="mini"></el-form-item>--> + <el-radio-group v-model="form.type" class="levelOfRisk"> + <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span + class="levelOfRisk-type">{{item.name}}</span></el-radio> + </el-radio-group> + <!-- <el-form-item >--> + <div class="rightButtonSearch"> + <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"> + <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>--> + <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> + <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> --> + </el-input> + <el-button class="el-icon-search" @click="handleSearch"></el-button> + </div> + <!-- </el-form-item>--> + <!-- <el-form-item>--> + <!-- <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">--> + <!-- <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">--> + <!-- </el-form-item>--> + </el-form> </div> - <!-- </el-form-item>--> - <!-- <el-form-item>--> - <!-- <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">--> - <!-- <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">--> - <!-- </el-form-item>--> - </el-form> - </div> - <el-scrollbar style="height:264px"> - <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" @click="handleLocation(item)"><!-- --> - <img src="../../../../public/assets/images/map/exhaust/fq_green2.png" alt="" class="state"/> - <div> - <h3>{{ item.Name }}</h3> - <p>鎵�灞為儴闂細<span>{{ item.porltName }}</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> + <el-scrollbar style="height:264px"> + <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" + @click="handleLocation(item)"><!-- --> + <img src="../../../../public/assets/images/map/exhaust/fq_green2.png" alt="" class="state"/> + <div> + <h3>{{ item.Name }}</h3> + <p>鎵�灞為儴闂細<span>{{ item.porltName }}</span></p> + <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> + </div> + </div> - </el-scrollbar> - <!-- <span class="location-btn" @click="handleLocation(item)">588</span> --> - <el-card class="footer-page" v-if="total > 10"> - <el-pagination - small - @current-change="handlePage" - :page-size=pageSize - layout="prev, pager, next" - :total=total - :current-page=current - class="warnPagination" - > - </el-pagination> - </el-card> - </div> - <!-- <div class="monitor2" v-if="hbVisible">--> - <!-- <env-protect-search></env-protect-search>--> - <!-- </div>--> - <!-- <div class="monitor2" v-if="pkVisible">--> - <!-- <discharge-search></discharge-search>--> - <!-- </div>--> + </el-scrollbar> + <!-- <span class="location-btn" @click="handleLocation(item)">588</span> --> + <el-card class="footer-page" v-if="total > 10"> + <el-pagination + small + @current-change="handlePage" + :page-size=pageSize + layout="prev, pager, next" + :total=total + :current-page=current + class="warnPagination" + > + </el-pagination> + </el-card> + </div> + <!-- <div class="monitor2" v-if="hbVisible">--> + <!-- <env-protect-search></env-protect-search>--> + <!-- </div>--> + <!-- <div class="monitor2" v-if="pkVisible">--> + <!-- <discharge-search></discharge-search>--> + <!-- </div>--> </template> <script> import mapApi from '@/api/mapApi' -import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'// import WfsHelper from '@components/helpers/WfsHelper' -import ImagGreen from '../../../../public/assets/images/map/wastewater/fs_bright_green.png' +import WasteWaterIndex from '../../BaseNav/WasteWater/WasteWaterIndex' +import { pulseEffect, setPanTo } from '../../../utils/utils' export default { name: 'WaterWasteSearch', props: ['title'], data () { return { - layer: window.map, - L: window.L, gdVisible: true, - instance: null, list: [], total: 0, inareaTypeOptions: [], @@ -126,11 +129,26 @@ isWaybillHover: true, isRouteHover: false, levelOfRisk: [ - { name: '鍏ㄩ儴', value: '1' }, - { name: '姝e父', value: '2' }, - { name: '瓒呮爣', value: '3' }, - { name: '寮傚父', value: '4' }, - { name: '鍋滀骇', value: '5' } + { + name: '鍏ㄩ儴', + value: '1' + }, + { + name: '姝e父', + value: '2' + }, + { + name: '瓒呮爣', + value: '3' + }, + { + name: '寮傚父', + value: '4' + }, + { + name: '鍋滀骇', + value: '5' + } ] } }, @@ -168,92 +186,22 @@ console.log(this.list) }, // 寮圭獥灞曠ず - async handleLocation (val) { + handleLocation (val) { console.log(val) const pos = [val.Latitude, val.Longitude] - window.map.flyTo(pos, 15) - const positionX = val.Latitude - const positionY = val.Longitude - - // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� 1.鎺ュ彛鎺ュ彛鏁版嵁鏉ヨ繘琛屾暟鎹殑鍒ゆ柇 2.鏍规嵁鏁版嵁绫诲瀷鐨勪笉鍚岋紝杩涜涓嶅悓绫诲瀷鐨勫浘鐗囨樉绀� - const testValue = val.testValue - var iconUrl = this.differentTypes(testValue) - - const marker = this.L.marker([positionX, positionY], { - icon: this.L.icon({ - iconUrl: iconUrl, - iconSize: [30, 30], - iconAnchor: [15, 15] - }) + window.map.setView(pos, 15) + window.$layer.open({ + content: { + content: WasteWaterIndex, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + storagePlaceId: val + } + }, + title: '澶╂触鐭冲寲 ' + val.Name }) - this.layer.addLayer(marker) - const t1 = setTimeout(async () => { - const dataValue = { - StoragePlaceId: val.StoragePlaceId - } - // 寮规鏍囬 - const title = val - console.log(title) - // 鍩烘湰淇℃伅 tabs - const detailData = await mapApi.getWasteWater(dataValue) - const WaterOnlinedata = { - onLineMonEmissPointId: '23', - monItemId: '28,31', - beginTime: '2020-04-06 15:13:20', - endTime: '2020-04-07 15:13:20', - dataType: '1' - } - const WaterManualData = { - companyId: '3900100145', - labMonPointId: '219', - beginTime: '2020-04-06 15:13:20', - endTime: ' 2020-04-07 15:13:20' - } - const dateData = await mapApi.getQueryLabMonData(WaterManualData) - const hourData = await mapApi.getQueryOnlineMonData(WaterOnlinedata) - // 缁戝畾寮规瀹炰緥 - this.instance && this.instance.closePopup() - const PublicBounced = window.Vue.extend(publicBounced) - this.instance = new PublicBounced().$mount() - document.body.appendChild(this.instance.$el) - // document.body.removeChild(instance.$el) - // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� - this.instance.setWaterData(title, detailData.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo, 'feishui') - console.log(title, detailData.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo) - // this.setPanTo(pos, 250) - }, 100) - console.log(t1) - }, - // 涓嶅悓绫诲瀷鍥剧墖鍔犺浇 - differentTypes (testValue) { - const testChange = ImagGreen - // switch (testValue) { - // case 1: - // testChange = NormalImg - // break - // case 2: - // testChange = OffImg - // break - // case 3: - // testChange = AbnormalImg - // break - // case 4: - // testChange = MissImg - // break - // case 5: - // testChange = NormalImg - // break - // case 6: - // testChange = AlarmImg - // break - // case 7: - // testChange = AbnormalImg - // break - // case 8: - // testChange = WarnImg - // break - // } - return testChange + pulseEffect([val.Latitude, val.Longitude]) + setPanTo(pos, 250) } } } -- Gitblit v1.8.0