From 8e5167a6b2fb0ac1852b1302875bab0cc5f5a639 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期二, 13 四月 2021 16:41:22 +0800
Subject: [PATCH] 添加管道变更搜索，管道信息搜索
---
src/components/panel/RightSearchPanel.vue | 9 +
src/components/panel/topicSearch/pipeChangesSearch.vue | 157 ++++++++++++++++++++++++++
src/components/panel/topicSearch/pipeInformationSearch.vue | 139 +++++++++++++++++++++++
src/conf/Topic.js | 14 ++
4 files changed, 319 insertions(+), 0 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index afdd752..fb58637 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -57,6 +57,9 @@
import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
import SewersSearch from '@components/panel/topicSearch/SewersSearch'
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
+import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
+import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'
+
import bus from '@/eventBus'
export default {
@@ -143,6 +146,12 @@
case '绠＄嚎':
this.gcComp = SewersSearch
break
+ case '绠￠亾鍙樻洿':
+ this.gcComp = PipeChangesSearch
+ break
+ case '绠￠亾淇℃伅':
+ this.gcComp = PipeInformationSearch
+ break
}
},
handlePage (page) {
diff --git a/src/components/panel/topicSearch/pipeChangesSearch.vue b/src/components/panel/topicSearch/pipeChangesSearch.vue
new file mode 100644
index 0000000..dbd4bee
--- /dev/null
+++ b/src/components/panel/topicSearch/pipeChangesSearch.vue
@@ -0,0 +1,157 @@
+<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,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <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,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <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,index) in areaTypeOptions2" :key="index" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <div class="rightButtonSearch">
+ <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input>
+ <el-button class="el-icon-search" @click="handleSearch"></el-button>
+ </div>
+ </el-form>
+ </div>
+ <el-scrollbar style="height:416.44px">
+ <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
+ <i class="state"></i>
+ <div>
+ <h3>绠＄嚎鍚嶇О1 <button style="float:right">闄勫睘璁炬柦</button></h3>
+ <p>绠＄嚎闀垮害锛�<span>751绫�</span></p>
+ <p>鎶曡繍骞撮檺锛�<span style="display: inline-block;margin-right: 10px">5骞�</span> 浠嬭川锛�<span>鐢熸椿姹℃按</span></p>
+ </div>
+ </div>
+ <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
+ <i class="state"></i>
+ <div>
+ <h3>绠＄嚎鍚嶇О1</h3>
+ <p>绠＄嚎闀垮害锛�<span>751绫�</span></p>
+ <p>鎶曡繍骞撮檺锛�<span style="display: inline-block;margin-right: 10px">5骞�</span> 浠嬭川锛�<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 { PipelineTypeOptions } from '@/conf/layers/LayerSewers'
+
+import WfsHelper from '@components/helpers/WfsHelper'
+import AjaxUtils from '@utils/AjaxUtils'
+export default {
+ name: 'DischargeSearch',
+ data () {
+ return {
+ gdVisible: true,
+ list: [],
+ labelList: PipelineTypeOptions[0].labelList,
+ total: 0,
+ form: {
+ areaVal: '',
+ type: ''
+ },
+ // pageSize: 10,
+ // current: 1,
+ isWaybillHover: true,
+ isRouteHover: false,
+ areaTypeOptions: [
+ { label: '鐢熸椿姹℃按绠＄嚎', value: '1' },
+ { label: '鍚洂绠＄嚎', value: '2' },
+ { label: '闆ㄦ按绠＄嚎', value: '3' },
+ { label: '鍚补绠＄嚎', value: '4' },
+ { label: '浜嬫晠姘寸绾�', value: '5' },
+ { label: '鍚⒈绠＄嚎', value: '6' },
+ { label: '寰幆姘寸绾�', value: '7' },
+ { label: '鍑�鍖栨按绠＄嚎', value: '8' }
+ ],
+ areaTypeOptions1: [
+ { label: '2016', value: '1' },
+ { label: '2017', value: '2' },
+ { label: '2018', value: '3' },
+ { label: '2019', value: '4' },
+ { label: '2020', value: '5' },
+ { label: '2016', value: '6' }
+ ],
+ areaTypeOptions2: [
+ { label: '鍏ㄩ儴', value: '1' },
+ { label: '鍦ㄧ敤', value: '2' },
+ { label: '鍋滅敤', value: '3' },
+ { label: '搴熷純', value: '4' },
+ { label: '鎷嗛櫎', value: '5' },
+ { label: '鍏朵粬', value: '6' }
+ ]
+ }
+ },
+ props: ['title'],
+ methods: {
+ // 鍖哄煙绛涢��
+ areaType (val) {
+ this.pipelineTypeOptions.forEach((itm) => {
+ if (val === itm.value) {
+
+ }
+ })
+ },
+ async handleSearch () {
+ const param = {
+ pipelineType: this.form.pipelineType,
+ dataType: this.form.dataType
+ }
+ console.log(param)
+ var wfsHelper = new WfsHelper()
+ wfsHelper.addTypeName(this.form.query.layerName)
+ wfsHelper.addLike(this.form.query.key, this.form.keyword)
+ // const _this = this
+ const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
+ if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
+ this.list = res.data.features
+ }
+ },
+ 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)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/components/panel/topicSearch/pipeInformationSearch.vue b/src/components/panel/topicSearch/pipeInformationSearch.vue
new file mode 100644
index 0000000..916f4d2
--- /dev/null
+++ b/src/components/panel/topicSearch/pipeInformationSearch.vue
@@ -0,0 +1,139 @@
+<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,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <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,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <div class="rightButtonSearch">
+ <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input>
+ <el-button class="el-icon-search" @click="handleSearch"></el-button>
+ </div>
+ </el-form>
+ </div>
+ <el-scrollbar style="height:416.44px">
+ <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
+ <i class="state"></i>
+ <div>
+ <h3>绠＄嚎鍚嶇О1 <button style="float:right">闄勫睘璁炬柦</button></h3>
+ <p>绠＄嚎闀垮害锛�<span>751绫�</span></p>
+ <p>鎶曡繍骞撮檺锛�<span style="display: inline-block;margin-right: 10px">5骞�</span> 浠嬭川锛�<span>鐢熸椿姹℃按</span></p>
+ </div>
+ </div>
+ <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
+ <i class="state"></i>
+ <div>
+ <h3>绠＄嚎鍚嶇О1</h3>
+ <p>绠＄嚎闀垮害锛�<span>751绫�</span></p>
+ <p>鎶曡繍骞撮檺锛�<span style="display: inline-block;margin-right: 10px">5骞�</span> 浠嬭川锛�<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 { PipelineTypeOptions } from '@/conf/layers/LayerSewers'
+
+import WfsHelper from '@components/helpers/WfsHelper'
+import AjaxUtils from '@utils/AjaxUtils'
+export default {
+ name: 'DischargeSearch',
+ data () {
+ return {
+ gdVisible: true,
+ list: [],
+ labelList: PipelineTypeOptions[0].labelList,
+ total: 0,
+ form: {
+ areaVal: '',
+ type: ''
+ },
+ // pageSize: 10,
+ // current: 1,
+ isWaybillHover: true,
+ isRouteHover: false,
+ areaTypeOptions: [
+ { label: '绠＄嚎鏈綋', value: '1' }, { label: '闄勫睘璁炬柦', value: '2' }, { label: '鐜繚璁炬柦', value: '3' }
+ ],
+ areaTypeOptions1: [
+ { label: '鍏ㄩ儴绠＄嚎', value: '1' },
+ { label: '鐢熸椿姹℃按绠＄嚎', value: '1' },
+ { label: '鍚洂绠＄嚎', value: '1' },
+ { label: '闆ㄦ按绠＄嚎', value: '1' },
+ { label: '鍚补绠＄嚎', value: '1' },
+ { label: '浜嬫晠姘寸绾�', value: '1' },
+ { label: '鍚⒈绠＄嚎', value: '1' },
+ { label: '寰幆姘寸绾�', value: '1' },
+ { label: '鍑�鍖栨按绠＄嚎', value: '1' }
+ ]
+ }
+ },
+ props: ['title'],
+ methods: {
+ // 鍖哄煙绛涢��
+ areaType (val) {
+ this.pipelineTypeOptions.forEach((itm) => {
+ if (val === itm.value) {
+
+ }
+ })
+ },
+ async handleSearch () {
+ const param = {
+ pipelineType: this.form.pipelineType,
+ dataType: this.form.dataType
+ }
+ console.log(param)
+ var wfsHelper = new WfsHelper()
+ wfsHelper.addTypeName(this.form.query.layerName)
+ wfsHelper.addLike(this.form.query.key, this.form.keyword)
+ // const _this = this
+ const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
+ if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
+ this.list = res.data.features
+ }
+ },
+ 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)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
index bcf296e..7162c42 100644
--- a/src/conf/Topic.js
+++ b/src/conf/Topic.js
@@ -60,4 +60,18 @@
isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
+}, {
+ name: '绠￠亾鍙樻洿',
+ id: 8,
+ checked: false,
+ isShow: true,
+ icon: '/assets/images/menu/special.png',
+ comp: ''
+}, {
+ name: '绠￠亾淇℃伅',
+ id: 9,
+ checked: false,
+ isShow: true,
+ icon: '/assets/images/menu/special.png',
+ comp: ''
}]
--
Gitblit v1.8.0