From e955287ac83d12c1545db512d9af7ed5a15db21c Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期一, 10 五月 2021 15:05:47 +0800
Subject: [PATCH] 管线搜索弹框整体调整
---
src/components/panel/topicSearch/WaterWasteSearch.vue | 383 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 229 insertions(+), 154 deletions(-)
diff --git a/src/components/panel/topicSearch/WaterWasteSearch.vue b/src/components/panel/topicSearch/WaterWasteSearch.vue
index 59f9330..1a1f807 100644
--- a/src/components/panel/topicSearch/WaterWasteSearch.vue
+++ b/src/components/panel/topicSearch/WaterWasteSearch.vue
@@ -1,184 +1,259 @@
<template>
- <div class="sewers-search" v-if="judgeVisible">
- <div class="search-title">{{title}}</div>
- <div class="search-panel ">
- <el-form ref="form" :model="form" label-width="90px" class="search-form">
- <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'锛�'" size="mini"
- class="search-panel-item">
- <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
- :popper-class="'select-down'">
- <el-option
- v-for="item in solidWasteTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </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>
- <div class="rightButtonSearch">
- <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input>
- <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
- </div>
- </el-form>
- <div>
- <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index">
- <div v-if="total > 3">
- {{ item.CompanyName }}
- </div>
- </el-card>
- <!-- <el-pagination-->
- <!-- small-->
- <!-- layout="prev, pager, next"-->
- <!-- :total=total-->
- <!-- :current-page=1-->
- <!-- class="warnPagination"-->
- <!-- >-->
- <!-- </el-pagination>-->
- </div>
- <!-- <el-scrollbar style="height:100%">-->
- <!-- <el-card class="footer-page">-->
- <!-- <ul>-->
- <!-- {{ searchDataDisplay }}-->
- <!-- <li v-for="(item,index) in searchDataDisplay" :key="index">-->
- <!-- {{ item.CompanyName }}-->
- <!-- </li>-->
- <!-- </ul>-->
- <!-- </el-card>-->
- <!-- <el-pagination-->
- <!-- small-->
- <!-- @current-change="handlePage"-->
- <!-- :page-size=pageSize-->
- <!-- layout="prev, pager, next"-->
- <!-- :total=total-->
- <!-- :current-page=current-->
- <!-- class="warnPagination"-->
- <!-- >-->
- <!-- </el-pagination>-->
- <!-- </el-card>-->
- <!-- </el-scrollbar>-->
+ <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>
-</template>
+ <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>-->
+</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'
export default {
- name: 'SolidWasteSearch',
+ name: 'WaterWasteSearch',
props: ['title'],
data () {
return {
+ layer: window.map,
+ L: window.L,
+ gdVisible: true,
+ instance: null,
+ list: [],
+ total: 0,
+ inareaTypeOptions: [],
+ enterpriseTypeOptions: [],
+ enterpriseSubunitsTypeOptions: [],
+ form: {
+ areaVal: '',
+ enterpriseVal: '',
+ enterpriseSubunitsVal: '',
+ type: '1'
+ },
+ // pageSize: 10,
+ // current: 1,
+ isWaybillHover: true,
+ isRouteHover: false,
levelOfRisk: [
{ name: '鍏ㄩ儴', value: '1' },
{ name: '姝ｅ父', value: '2' },
{ name: '瓒呮爣', value: '3' },
{ name: '寮傚父', value: '4' },
{ name: '鍋滀骇', value: '5' }
- ],
- judgeVisible: true,
- solidWasteTypeOptions: [{
- value: '1',
- label: '鍖哄煙',
- options: [{
- value: '1',
- layerName: '鍥哄簾',
- key: 'pipename',
- label: '鍏ㄩ儴鍥哄簾'
- }],
- labelList: [{
- label: '杈撻�佷粙璐�',
- key: 'mediumtype'
- }, {
- label: '闀垮害(m)',
- key: 'length'
- }]
- }, {
- value: '2',
- label: '浼佷笟鍚嶇О',
- options: [{
- value: '1',
- layerName: '鍥哄簾',
- key: 'pipename',
- label: '鍏ㄩ儴鍥哄簾'
- }],
- labelList: [{
- label: '杈撻�佷粙璐�',
- key: 'mediumtype'
- }, {
- label: '闀垮害(m)',
- key: 'length'
- }]
- }, {
- value: '3',
- label: '浜岀骇鍗曚綅',
- options: [{
- value: '1',
- layerName: '鍥哄簾',
- key: 'pipename',
- label: '鍏ㄩ儴鍥哄簾'
- }],
- labelList: [{
- label: '杈撻�佷粙璐�',
- key: 'mediumtype'
- }, {
- label: '闀垮害(m)',
- key: 'length'
- }]
- }, {
- value: '4',
- label: '浼佷笟鍚嶇О',
- options: [{
- value: '1',
- layerName: '鍥哄簾',
- key: 'pipename',
- label: '鍏ㄩ儴鍥哄簾'
- }],
- labelList: [{
- label: '杈撻�佷粙璐�',
- key: 'mediumtype'
- }, {
- label: '闀垮害(m)',
- key: 'length'
- }]
- }],
- radio: '1',
- form: {
- keyword: '杈撳叆鍏抽敭瀛�'
- },
- searchDataDisplay: [],
- total: 0
+ ]
}
},
methods: {
- handlePipelineType (val) {
- this.solidWasteTypeOptions.forEach((itm) => {
+ // 鍖哄煙绛涢��
+ areaType (val) {
+ this.pipelineTypeOptions.forEach((itm) => {
if (val === itm.value) {
- this.dataTypeOptions = itm.options
- this.form.pipelineType = itm.label
- this.form.labelList = itm.labelList
+
}
})
- this.form.dataType = this.dataTypeOptions[0].label
- this.form.key = this.dataTypeOptions[0].key
},
- // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀�
+ // 浼佷笟绛涢��
+ enterpriseType (val) {
+ this.dataTypeOptions.forEach((itm) => {
+ if (val === itm.value) {
+
+ }
+ })
+ },
+ // 浜岀骇鍗曚綅绛涢��
+ enterpriseSubunitsType (val) {
+
+ },
+ // 涓夌骇鍗曚綅绛涢��
async handleSearch () {
- // console.log(this.form.keyword)
- const result = await mapApi.getWasteWater()
- console.log(result)
- this.searchDataDisplay = result.Result.DataInfo
- this.total = result.Result.DataInfo.length
+ const param = {
+ pipelineType: this.form.pipelineType,
+ dataType: this.form.dataType
+ }
+ // console.log(param)
+ const res = await mapApi.getWasteWater(param)
+ // console.log(res)
+ this.list = res.Result.DataInfo
+ console.log(this.list)
},
- handleLocation (val) {
- // console.log(val)
- const bound = this.L.geoJSON([val], {}).getBounds()
- var layer = window.serviceLayerHelper.getByLayerId(val.id)
- layer && layer.openPopup()
- this.$store.state.map.map.flyToBounds(bound)
+ // 寮圭獥灞曠ず
+ async 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]
+ })
+ })
+ 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
}
}
}
--
Gitblit v1.8.0