From 1f3ff3b71913580db9910f7078a6e319d35ad6dc Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 15 四月 2021 17:48:02 +0800
Subject: [PATCH] 附属设施查询 图标
---
src/components/panel/topicSearch/GasWasteSearch.vue | 412 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 208 insertions(+), 204 deletions(-)
diff --git a/src/components/panel/topicSearch/GasWasteSearch.vue b/src/components/panel/topicSearch/GasWasteSearch.vue
index 245b226..b4d485f 100644
--- a/src/components/panel/topicSearch/GasWasteSearch.vue
+++ b/src/components/panel/topicSearch/GasWasteSearch.vue
@@ -1,183 +1,243 @@
<template>
- <div class="solidwaste-search" v-if="judgeVisible">
- <div class="search-title">
- <span>搴熸皵</span>
- <!-- <span>{{ title }}</span>-->
- </div>
+ <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 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-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 solidWasteTypeOptions"
+ v-for="item in inareaTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
- <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�">
- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i>
- </el-input>
- <div class="search-radio">
- <el-radio v-model="radio" label="1">鍏ㄩ儴</el-radio>
- <el-radio v-model="radio" label="2">姝ｅ父</el-radio>
- <el-radio v-model="radio" label="3">瓒呮爣</el-radio>
- <el-radio v-model="radio" label="4">寮傚父</el-radio>
- <el-radio v-model="radio" label="5">鍋滀骇</el-radio>
+ <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-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>
+ <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/exhaust/fq_green2.png'
export default {
- name: 'SolidWasteSearch',
- props: ['title'],
+ name: 'GasWasteSearch',
data () {
return {
- 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',
+ layer: window.map,
+ L: window.L,
+ gdVisible: true,
+ instance: null,
+ list: [],
+ total: 0,
+ inareaTypeOptions: [],
+ enterpriseTypeOptions: [],
+ enterpriseSubunitsTypeOptions: [],
form: {
- keyword: '杈撳叆鍏抽敭瀛�'
+ areaVal: '',
+ enterpriseVal: '',
+ enterpriseSubunitsVal: '',
+ type: ''
},
- searchDataDisplay: [],
- total: 0
+ // pageSize: 10,
+ // current: 1,
+ isWaybillHover: true,
+ isRouteHover: false,
+ levelOfRisk: [
+ { name: '鍏ㄩ儴', value: '1' },
+ { name: '姝ｅ父', value: '2' },
+ { name: '瓒呮爣', value: '3' },
+ { name: '寮傚父', value: '4' },
+ { name: '鍋滀骇', value: '5' }
+ ]
}
},
+ props: ['title'],
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.getWasteGas()
- 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.getWasteGas(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 ContrLevel = val.ContrLevel
+ var iconUrl = this.differentTypes(ContrLevel)
+
+ 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 result = await mapApi.getWasteGas(dataValue)
+ const GasOnlinedata = {
+ onLineMonEmissPointId: '23',
+ monItemId: '28,31',
+ beginTime: '2020-04-06 15:13:20',
+ endTime: '2020-04-07 15:13:20',
+ dataType: '1'
+ }
+ const GasManualData = {
+ companyId: '3900100145',
+ labMonPointId: '219',
+ beginTime: '2020-04-06 15:13:20',
+ endTime: ' 2020-04-07 15:13:20'
+ }
+ const ManualData = await mapApi.getWasteGasManualData(GasManualData)
+ const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
+ // 缁戝畾寮规瀹炰緥
+ 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.setGasData(title, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
+ // console.log(title, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo)
+ // this.setPanTo(pos, 250)
+ }, 100)
+ console.log(t1)
+ },
+ // 涓嶅悓绫诲瀷鍥剧墖鍔犺浇
+ differentTypes (ContrLevel) {
+ // effectOfChange
+ /*
+ if (ContrLevel === 1) {
+ effectOfChange = ImgBlue
+ } else if (ContrLevel === 2) {
+ */
+ const effectOfChange = ImagGreen
+ // } else if (ContrLevel === 3) {
+ // effectOfChange = ImagBright
+ // } else {
+ // effectOfChange = ImgGray
+ // }
+ return effectOfChange
}
}
}
@@ -185,60 +245,4 @@
<style lang="less" scoped>
-.solidwaste-search {
- position: relative;
- overflow: hidden;
- background-color: #365e60;
-
- .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;
- margin-top: 13px;
- }
- }
-
- /deep/ input:focus {
- border-color: @color;
- }
- }
-
- .search-btn {
-
- }
-
- /deep/.search-radio {
- margin: 6px 0;
- display: flex;
- flex-wrap: wrap;
- //justify-content: flex-end;
- //align-content: space-between;
- .el-radio {
- color: #ffffff!important;
- line-height: 2;
- .el-radio__label{
- padding-left: 0px;
- }
- }
- }
-
- .location-btn:hover, .el-input__icon:hover {
- color: @color;
- cursor: pointer;
- }
-
- .box-card {
- margin: 15px auto;
- }
-}
</style>
--
Gitblit v1.8.0