From d3ece4cef58a075c8182cf98f107bd5dfcfc34d5 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期四, 01 四月 2021 18:16:23 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/topicSearch/EnvRiskSearch.vue | 379 +++++++++++++++-------- src/components/panel/topicSearch/WaterWasteSearch.vue | 244 +++++++++++++++ src/conf/Topic.js | 5 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 45 ++ src/assets/css/map/map-panel-style.less | 42 ++ src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue | 1 src/base/BaseVectorLayer.js | 1 src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue | 14 src/components/LayerController/modules/LcServiceLayer.vue | 31 + src/components/panel/topicSearch/SoilGroundWaterSearch.vue | 173 ++++++++++ 10 files changed, 763 insertions(+), 172 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 2a9b8ee..aa623c9 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -1,5 +1,15 @@ @import "_map-variable"; +/*鍏ㄥ眬璁剧疆***********/ +h1,h2,h3,h4,h5,h6,ul,li,p{ + padding: 0; + margin: 0; + list-style: none; +} + + + + .el-button--primary { color: @color; background-color: @background-color; @@ -12,7 +22,6 @@ text-align: center; height: 20px; line-height: 20px; - color: @color; cursor: pointer; -ms-flex-negative: 0; @@ -202,3 +211,34 @@ } + +/***************Company 鍥惧眰 鎮诞妗嗘牱寮忋��*********************************/ +.company-bindTooltip{ + background:none; + border:none; + color:red; + font-size: 16px; + font-weight: 900 !important; + text-shadow: 0 0 5px #fff; + box-shadow: none; +} +.company-bindTooltip-hover h3{ + text-align: center; + border-bottom:1px solid #0B3B6D; + margin: 0; + padding:0; +} +.company-bindTooltip-hover ul{ + list-style: none; + margin: 0; + padding:0; + width: 260px; + display: flex; + flex-wrap: wrap; +} +.company-bindTooltip-hover ul li{ + margin: 0; + padding:3px 0; + width: 50%; +} + diff --git a/src/base/BaseVectorLayer.js b/src/base/BaseVectorLayer.js index 0cef3f5..bf1479d 100644 --- a/src/base/BaseVectorLayer.js +++ b/src/base/BaseVectorLayer.js @@ -1,5 +1,4 @@ - /** * 鍩虹鍥惧眰绫伙紝 鍖呭惈鍥惧眰鐨勫垱寤猴紝鍔犺浇鍜屾竻闄ょ瓑鍩虹鍔熻兘銆� */ diff --git a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue index 614e424..0fc0cfb 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue @@ -193,6 +193,7 @@ background-color: rgba(0, 255, 246, 0.14); color: #00d0f9; border: none; + padding: 0 15px; } #echarts{ margin: 0; diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue index 002bd92..db99764 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue @@ -4,14 +4,13 @@ <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"></div> <div class="border_corner border_corner_right_bottom"></div> - <el-tabs type="card" v-model="activeName"> - <el-tab-pane label="瀹炶瘯鏁版嵁" name="first"></el-tab-pane> - <el-tab-pane label="鏃ユ暟鎹�" name="second"> - <ECharts></ECharts> - </el-tab-pane> - <el-tab-pane label="鏈堟暟鎹�" name="third"></el-tab-pane> - <el-tab-pane label="浜哄伐鏁版嵁" name="fourth"></el-tab-pane> - </el-tabs> + <ul class="tab"> + <li @click='tabTaggle("ECharts")'>瀹炶瘯鏁版嵁</li> + <li @click='tabTaggle("ECharts")'>鏃ユ暟鎹�</li> + <li @click='tabTaggle("ECharts")'>鏈堟暟鎹�</li> + <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li> + </ul> + <component :is="currentTab"></component> </div> </template> @@ -25,16 +24,24 @@ }, data () { return { - activeName: 'second' + currentTab: 'ECharts' } }, methods: { + tabTaggle (taggleMenu) { + this.currentTab = taggleMenu + } } } </script> <style scoped> + *{ + margin: 0; + padding: 0; + list-style: none; + } .win { position: relative; margin-bottom: 13px; @@ -73,4 +80,24 @@ border-left: none; border-top: none; } + .tab{ + display: flex; + border-bottom: 1px solid #396d83; + margin-bottom: 10px; + } + li{ + background-color: #243a55; + margin: 10px 10px 2px 10px; + /*padding: 5px 10px;*/ + width: 90px; + height: 25px; + line-height: 25px; + text-align: center; + border-radius: 5px; + } + ul li:hover{ + background-color: #0e639e; + color: #682000; + cursor: pointer; + } </style> diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue index 80723ff..b8ea76b 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue @@ -32,16 +32,16 @@ <el-col :span="8">鍐�/澶栨帓鍙�:{{ displayContentTab2.StorageDate }}</el-col> </el-row> </div> - <div v-else-if="value == 'feishui'"> + <div v-else-if="value === 'feishui'"> <el-row type="flex" class="row-bg row-item-one" justify="space-around"> - <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ displayContentTab.Name }}</el-col> - <el-col :span="8">鐢熶骇鍗曚綅:{{ displayContentTab.porltName }}</el-col> - <el-col :span="8">鎺掓斁绫诲瀷鍚嶇О:{{ displayContentTab.MonTypeName }}</el-col> + <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</el-col> + <el-col :span="8">鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</el-col> + <el-col :span="8">鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</el-col> </el-row> <el-row type="flex" class="row-bg" justify="space-around"> - <el-col :span="8">鎺掓斁鍘诲悜:{{ displayContentTab.EmissDirecti }}</el-col> - <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ displayContentTab.ContrLevelShowName }}</el-col> - <el-col :span="8">鍐�/澶栨帓鍙�:{{ displayContentTab.OrOutPortName }}</el-col> + <el-col :span="8">鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</el-col> + <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</el-col> + <el-col :span="8">鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</el-col> </el-row> </div> </div> diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 01bfe83..81b4278 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -4,19 +4,21 @@ 鍥惧眰鎺у埗 </div> <div class="wms-panel"> - <div v-for="item in serviceLayers" :key="item.code" class="layerbox"> - <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" - @change="swAllLayers(item)"/>{{ item.name }} - </div> - <div class="layerbox-item"> - <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" - :name="'wmsSublayers_'+item.code+'_'+itm.code" - :checked="itm.checked" - :value="itm.code" - @change="swWmsLayer(itm)"/>{{ itm.name }} + <el-scrollbar class="wms-panel-scrollbar"> + <div v-for="item in serviceLayers" :key="item.code" class="layerbox"> + <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" + @change="swAllLayers(item)"/>{{ item.name }} + </div> + <div class="layerbox-item"> + <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" + :name="'wmsSublayers_'+item.code+'_'+itm.code" + :checked="itm.checked" + :value="itm.code" + @change="swWmsLayer(itm)"/>{{ itm.name }} + </div> </div> </div> - </div> + </el-scrollbar> </div> <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter> </div> @@ -110,8 +112,11 @@ } .wms-panel { - width: 250px; - + width: 1.79167rem; + .wms-panel-scrollbar{ + height: 50vh; + width: 100%; + } .layerbox { width: 100%; diff --git a/src/components/panel/topicSearch/EnvRiskSearch.vue b/src/components/panel/topicSearch/EnvRiskSearch.vue index 135274d..1edb27e 100644 --- a/src/components/panel/topicSearch/EnvRiskSearch.vue +++ b/src/components/panel/topicSearch/EnvRiskSearch.vue @@ -1,183 +1,284 @@ <template> - <div> + <div class="sewers-search" v-if="gdVisible"> <div class="search-title"> - 姹¢洦姘� + 鐜椋庨櫓 </div> - <el-card class="search-panel"> + <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> - <el-form-item label="绫诲瀷锛�"> - <el-select v-model="form.pipelineType" @change="handlePipelineType"> + <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 pipelineTypeOptions" - :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="鏁版嵁绫诲瀷锛�"> - <el-select v-model="form.dataType"> + <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 dataTypeOptions" - :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="妯$硦鎼滅储锛�"> - <el-input v-model="form.key" size="mini" - placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></el-input> + <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> - <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ"> - <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆"> - </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-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>--> </el-form> - </el-card> - <el-card class="search-result" style="height:271px;"> - <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index"> - <div class="B-TMD-table-list-title"> - <div class="B-TMD-table-list-head"> - <div class="B-TMD-table-list-title-y" - :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]"> - <span>杩愬崟鍙凤細</span> - <span id="waybillNumber" class="B-TMD-table-list-title-y-num" - :title="item.transNo"> - <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span> - </span> - </div> - <div class="B-TMD-table-list-title-c"> - 杞藉叿鍙凤細 - <span id="plateNumber_p"> - <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span> - </span> - </div> - </div> - <div class="B-TMD-table-icons" style="float:right"> - <ul> - <li class="B-TMD-table-list-title-y-adress" - @click="handleLocation(item)"></li> - <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li> - </ul> - </div> - </div> - <div class="B-TMD-table-list-content"> - <div> - <span>鍙戣揣浼佷笟锛�</span> - <span id="b_twe_consignment" :title="item.outWarehouseName">{{ - item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName - }}</span> - </div> - <div> - <span>鎵� 杩� 鍟嗭細</span> - <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span> - </div> - <div><span>鏀惰揣浼佷笟锛�</span> <span - id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div> - </div> - <div class="B-TMD-table-list-bottom"> - <div class="B-TMD-table-list-bottom-name"> - 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div> + </div> + <el-scrollbar style="height:300px"> + <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> - </el-card> - + <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> + </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> </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: 'MonitorAreaTips', - components: {}, + name: 'SewersSearch', data () { return { - isPanelVisible: false, - total: 0, + gdVisible: true, list: [], + labelList: PipelineTypeOptions[0].labelList, + total: 0, + inareaTypeOptions: [], + enterpriseTypeOptions: [], + enterpriseSubunitsTypeOptions: [], form: { - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '' - } + areaVal: '', + enterpriseVal: '', + enterpriseSubunitsVal: '', + type: '' + }, + // pageSize: 10, + // current: 1, + isWaybillHover: true, + isRouteHover: false, + levelOfRisk: [ + { name: '閲嶅ぇ椋庨櫓', value: '1', color: 'red' }, + { name: '涓�绾ч闄�', value: '2', color: 'sandybrown' }, + { name: '浜岀骇椋庨櫓', value: '3', color: 'yellow' }, + { name: '涓夌骇椋庨櫓', value: '4', color: 'green' } + ] } }, + props: ['title'], methods: { - handleClose (done) { - console.log(done) - }, - handleClick (tab, event) { - console.log(tab, event) - }, - handleSearch () { + // 鍖哄煙绛涢�� + areaType (val) { + this.pipelineTypeOptions.forEach((itm) => { + if (val === itm.value) { + } + }) + }, + // 浼佷笟绛涢�� + enterpriseType (val) { + this.dataTypeOptions.forEach((itm) => { + if (val === itm.value) { + + } + }) + }, + // 浜岀骇鍗曚綅绛涢�� + 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 + } + }, + 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) } - }, - mounted () { - this.handleSearch() } } </script> -<style lang="less"> -.monitorHz { - .el-message-box__content { - background-color: #030D2E; +<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; + } } - - .search-form .el-form-item { - margin: 0px; - } - - .search-form .el-icon-search { - display: grid; - line-height: 30px; - font-size: 18px; - } - - .search-panel { - border: #07325B; - background-color: #07325B; - } - - .search-result { - margin: 5px 0px 0px 0px; - padding: 0px; - border: #051842; - overflow-y: scroll; - background-color: #051842; - } - - .B-TMD-table-list { - margin-top: 10px; - text-align: left; - padding-left: 10px; - color: #328EB5; - width: 100%; - line-height: 25px; - background-color: #0B3B6D; - } - - .footer-page { + .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; - bottom: 5px; + 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> diff --git a/src/components/panel/topicSearch/SoilGroundWaterSearch.vue b/src/components/panel/topicSearch/SoilGroundWaterSearch.vue index e69de29..392a8b5 100644 --- a/src/components/panel/topicSearch/SoilGroundWaterSearch.vue +++ b/src/components/panel/topicSearch/SoilGroundWaterSearch.vue @@ -0,0 +1,173 @@ +<template> + <div class="sewers-search"> + <div class="search-title"> + 鍦熷¥鍙婂湴涓嬫按 + </div> + <el-card class="search-panel"> + <el-form ref="form" :model="form" label-width="90px" class="search-form"> + <el-form-item label="绫诲瀷锛�"> + <el-select v-model="form.pipelineType" @change="handlePipelineType"> + <el-option + v-for="item in pipelineTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="鏁版嵁绫诲瀷锛�"> + <el-select v-model="form.dataType"> + <el-option + v-for="item in dataTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="妯$硦鎼滅储锛�"> + <el-input v-model="form.key" size="mini" + placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></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> + </el-form> + </el-card> + <el-card class="search-result" style="height:271px;"> + <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index"> + <div class="B-TMD-table-list-title"> + <div class="B-TMD-table-list-head"> + <div class="B-TMD-table-list-title-y" + :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]"> + <span>杩愬崟鍙凤細</span> + <span id="waybillNumber" class="B-TMD-table-list-title-y-num" + :title="item.transNo"> + <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span> + </span> + </div> + <div class="B-TMD-table-list-title-c"> + 杞藉叿鍙凤細 + <span id="plateNumber_p"> + <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span> + </span> + </div> + </div> + <div class="B-TMD-table-icons" style="float:right"> + <ul> + <li class="B-TMD-table-list-title-y-adress" + @click="handleLocation(item)"></li> + <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li> + </ul> + </div> + </div> + <div class="B-TMD-table-list-content"> + <div> + <span>鍙戣揣浼佷笟锛�</span> + <span id="b_twe_consignment" :title="item.outWarehouseName">{{ + item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName + }}</span> + </div> + <div> + <span>鎵� 杩� 鍟嗭細</span> + <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span> + </div> + <div><span>鏀惰揣浼佷笟锛�</span> <span + id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div> + </div> + <div class="B-TMD-table-list-bottom"> + <div class="B-TMD-table-list-bottom-name"> + 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div> + </div> + </div> + </el-card> + + <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> +</template> + +<script> +export default { + name: 'MonitorAreaTips', + components: {}, + data () { + return { + isPanelVisible: false, + total: 0, + list: [], + form: { + name: '', + region: '', + date1: '', + date2: '', + delivery: false, + type: [], + resource: '', + desc: '' + } + } + }, + methods: { + handleClose (done) { + console.log(done) + }, + handleClick (tab, event) { + console.log(tab, event) + }, + handleSearch () { + + } + }, + mounted () { + this.handleSearch() + } +} +</script> + +<style lang="less"> + .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> diff --git a/src/components/panel/topicSearch/WaterWasteSearch.vue b/src/components/panel/topicSearch/WaterWasteSearch.vue index e69de29..90234cb 100644 --- a/src/components/panel/topicSearch/WaterWasteSearch.vue +++ b/src/components/panel/topicSearch/WaterWasteSearch.vue @@ -0,0 +1,244 @@ +<template> + <div class="solidwaste-search" v-if="judgeVisible"> + <div class="search-title"> + <span>搴熸按</span> + <!-- <span>{{ title }}</span>--> + </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-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">姝e父</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> + </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> + </div> +</template> + +<script> + +import mapApi from '@/api/mapApi' + +export default { + name: 'SolidWasteSearch', + props: ['title'], + 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', + form: { + keyword: '杈撳叆鍏抽敭瀛�' + }, + searchDataDisplay: [], + total: 0 + } + }, + methods: { + handlePipelineType (val) { + this.solidWasteTypeOptions.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 + }, + // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀� + 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 + }, + 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> + + .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> diff --git a/src/conf/Topic.js b/src/conf/Topic.js index da2e42f..cf856cf 100644 --- a/src/conf/Topic.js +++ b/src/conf/Topic.js @@ -7,6 +7,7 @@ export const TopicComp = { dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'), envProtectSearch: () => import('@components/panel/topicSearch/EnvRiskSearch'), + soilGroundWaterSearch: () => import('@components/panel/topicSearch/SoilGroundWaterSearch'), sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue') } @@ -39,13 +40,13 @@ id: 5, checked: false, icon: '/assets/images/menu/special.png', - comp: 'dischargeSearch' + comp: 'envProtectSearch' }, { name: '鍦熷¥鍙婂湴涓嬫按', id: 6, checked: false, icon: '/assets/images/menu/special.png', - comp: 'dischargeSearch' + comp: 'soilGroundWaterSearch' }, { name: '姹¢洦姘寸缃�', id: 7, -- Gitblit v1.8.0