From 8b0a709a5b67eefd575cbe593b44a9ed8396804a Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期四, 01 四月 2021 14:31:54 +0800 Subject: [PATCH] 公共文件修改 --- src/components/panel/topicSearch/SolidWasteSearch.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 183 insertions(+), 0 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index e69de29..31267fe 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -0,0 +1,183 @@ +<template> + <div class="sewers-search" v-if="judgeVisible"> + <div class="search-title"> + <span>鍥哄簾</span> + </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.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-form-item :label="form.pipelineType+'锛�'" size="mini"> + <el-select style="width: 100%" v-model="form.dataType" @change="handleDataType" :popper-class="'select-down'"> + <el-option + v-for="item in dataTypeOptions" + :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> + </el-form> + </div> + <el-scrollbar style="height:100%"> + <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 id="waybillNumber" class="" :title="item.properties.pipename"> + <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span> + </span> + </div> + </div> + </div> + <div class="B-TMD-table-list-content"> + + <div v-for="itm in labelList" :key="itm.label"> + <span>{{ itm.label }}锛�</span> + <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> + </div> + </div> + </div> + </el-scrollbar> + <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> +// 寮曞叆鍙�夋嫨鏁版嵁 +import { SolidWasteTypeOptions } from '@/conf/layers/LayerSolidWaste' + +import WfsHelper from '@components/helpers/WfsHelper' +import AjaxUtils from '@utils/AjaxUtils' + +export default { + name: 'SolidWasteSearch', + data () { + return { + judgeVisible: true, + list: [], + labelList: SolidWasteTypeOptions[0].labelList, + total: 0, + SolidWasteTypeOptions: SolidWasteTypeOptions, + dataTypeOptions: SolidWasteTypeOptions[0].options, + form: { + pipelineType: SolidWasteTypeOptions[0].label, + dataType: SolidWasteTypeOptions[0].options[0].label, + query: SolidWasteTypeOptions[0].options[0], + keyword: '鍥哄簾闈㈡澘鏁版嵁鏌ヨ' + }, + isWaybillHover: true, + isRouteHover: false + } + }, + props: ['title'], + 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 + }, + handleDataType (val) { + this.dataTypeOptions.forEach((itm) => { + if (val === itm.value) { + this.form.query = itm + } + }) + }, + 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 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> + +.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