From 1da76d05ebba28eeebef8af3832680143d5699c5 Mon Sep 17 00:00:00 2001
From: seatonwan9 <seatonwan9@163.com>
Date: 星期一, 31 五月 2021 17:12:37 +0800
Subject: [PATCH] 查询条件补充，治理设施优化
---
src/components/panel/topicSearch/EnvRiskSearch.vue | 274 ++++++++++++++++++------------------------------------
1 files changed, 93 insertions(+), 181 deletions(-)
diff --git a/src/components/panel/topicSearch/EnvRiskSearch.vue b/src/components/panel/topicSearch/EnvRiskSearch.vue
index 1edb27e..fa3b96e 100644
--- a/src/components/panel/topicSearch/EnvRiskSearch.vue
+++ b/src/components/panel/topicSearch/EnvRiskSearch.vue
@@ -1,118 +1,88 @@
<template>
<div class="sewers-search" v-if="gdVisible">
- <div class="search-title">
- 鐜椋庨櫓
- </div>
+ <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 areaTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
+ v-for="item in areaTypeOptions"
+ :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 label="鏉垮潡锛�" size="mini" class="search-panel-item">
+ <el-select style="width: 100%" v-model="form.plateVal" @change="plateType" :popper-class="'select-down'">
+ <el-option
+ v-for="item in plateTypeOptions"
+ :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">
+ 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-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">
+ 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-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}}<i :style="'background:'+item.color"></i></span></el-radio>
+ <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index">
+ <span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span>
+ </el-radio>
</el-radio-group>
- <!-- <el-form-item >-->
- <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-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>-->
+ <div class="page_total">
+ <p>鍏辫
+ <span>{{total}}</span>
+ 鏉¤褰�
+ </p>
+ </div>
+ <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:300px">
- <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
+ <el-scrollbar style="height:264px">
+ <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
+ @click="handleLocation(item)">
+ <img :src='iconUrl[item.riskLevel]' alt="" class="state"/>
<div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
+ <h3>{{ item.riskname }}</h3>
+ <p>浜岀骇鍗曚綅锛�<span>{{ item.unitname }}</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"
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ layout="prev, pager, next"
+ :total=total
+ :current-page=current
+ class="warnPagination"
>
</el-pagination>
</el-card>
@@ -126,29 +96,31 @@
</template>
<script>
-import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'
-import WfsHelper from '@components/helpers/WfsHelper'
-import AjaxUtils from '@utils/AjaxUtils'
+import { pulseEffect, setPanTo } from '@utils/utils'
+import RiskSourceIndex from '@components/base-page/RiskSource/RiskSourceIndex'
+const mapApi = require('../../../api/mapApi').default
+
export default {
- name: 'SewersSearch',
+ name: 'EnvRiskSearch',
data () {
return {
gdVisible: true,
list: [],
- labelList: PipelineTypeOptions[0].labelList,
total: 0,
- inareaTypeOptions: [],
+ areaTypeOptions: [],
+ plateTypeOptions: [],
enterpriseTypeOptions: [],
enterpriseSubunitsTypeOptions: [],
form: {
areaVal: '',
+ plateVal: '',
enterpriseVal: '',
enterpriseSubunitsVal: '',
type: ''
},
- // pageSize: 10,
- // current: 1,
+ pageSize: 10,
+ current: 1,
isWaybillHover: true,
isRouteHover: false,
levelOfRisk: [
@@ -156,6 +128,12 @@
{ name: '涓�绾ч闄�', value: '2', color: 'sandybrown' },
{ name: '浜岀骇椋庨櫓', value: '3', color: 'yellow' },
{ name: '涓夌骇椋庨櫓', value: '4', color: 'green' }
+ ],
+ iconUrl: ['',
+ require('../../../../public/assets/images/map/environmentRisk/risk_red.png'),
+ require('../../../../public/assets/images/map/environmentRisk/risk_sandybrown.png'),
+ require('../../../../public/assets/images/map/environmentRisk/risk_yellow.png'),
+ require('../../../../public/assets/images/map/environmentRisk/risk_green.png')
]
}
},
@@ -169,6 +147,10 @@
}
})
},
+ // 鏉垮潡绛涢��
+ plateType (val) {
+
+ },
// 浼佷笟绛涢��
enterpriseType (val) {
this.dataTypeOptions.forEach((itm) => {
@@ -181,104 +163,34 @@
enterpriseSubunitsType (val) {
},
+
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
- }
+ const res = await mapApi.getEnvironmentRiskPoint(param)
+ this.list = res[0].concat(res[1], res[2], res[3]) // 涓存椂鏁版嵁
},
+
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)
+ const pos = [val.Latitude, val.Longitude]
+ window.map.setView(pos, 15)
+ window.$layer.open({
+ content: {
+ comp: RiskSourceIndex, // 缁勪欢
+ parent: this, // 鐖剁粍浠�
+ data: { // 浼犻�掔殑鍙傛暟
+ riskSourceId: val.no
+ }
+ },
+ title: '澶╂触鐭冲寲' + val.riskname
+ })
+ pulseEffect([val.Latitude, val.Longitude])
+ setPanTo(pos, 250)
}
}
}
</script>
<style lang="less" scoped>
- .levelOfRisk-type{
- display: inline-block;
- position: relative;
- padding-right: 5px;
- color:#f5f5f5;
- i{
- display: block;
- width: 15px;
- height: 10px;
- position: absolute;
- top:50%;
- right: -15px;
- margin-top: -5px;
- }
- }
- .el-radio.is-checked .levelOfRisk-type{color:#409EFF}
- .levelOfRisk{padding-left:20px}
- .levelOfRisk .el-radio{padding-bottom:6px}
-.environmental-risk-list{
- border:1px solid @color;
- margin-right: 10px;
- margin-bottom: 15px;
- position: relative;
- padding-left:50px;
- padding-top:3px;
- padding-bottom:3px;
- color: #f5f5f5;
- .state{
- width: 30px;
- height: 30px;
- position: absolute;
- top:50%;
- left:10px;
- margin-top: -15px;
- border-radius: 50%;
- box-shadow: 0 0 3px #000;
- background: #0B3B6D;
- }
-}
-/******************浠ヤ笅鍏叡閮ㄥ垎**********/
- .sewers-search{
- position: relative;
- overflow: hidden;
- .search-panel{
- background-color: transparent;
- border: 1px solid @background-color-split;
- padding: 10px;
- /deep/ input {
- border-radius: 0;
- background-color: @background-color-split ;
- border: solid 1px @color ;
- color: @color-gray;
- font-size: 0.01rem;
- .el-select .el-input.is-focus .el-input__inner{
- border-color: @color;
- }
- }
- /deep/ input:focus{
- border-color: @color;
- }
- }
- .search-btn{
-
- }
- //location-btn{
- //
- //}
- .location-btn:hover,.el-input__icon:hover{
- color: @color;
- cursor: pointer;
- }
- }
</style>
--
Gitblit v1.8.0