From 175db8fd0f26c8f7b01c7bc717cbf46cebad9805 Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期四, 01 四月 2021 18:10:14 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop --- src/components/panel/topicSearch/SolidWasteSearch.vue | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 234 insertions(+), 0 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index e69de29..87b3911 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -0,0 +1,234 @@ +<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> + <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> + </div> + <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> + <el-card class="box-card" + v-for="(item,index) in searchDataDisplay.slice((currentPage-1)*PageSize,currentPage*PageSize)" + :key="index"> + <div v-if="totalCount > 0"> + {{ item.CompanyName }} + </div> + </el-card> + <div class="search-pagination"> + <el-pagination + small + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[1, 2, 3]" + :page-size="1" + layout="total, sizes, prev, pager, next, jumper" + :total='totalCount'> + </el-pagination> + </div> + </div> + <!-- <el-scrollbar style="height:100%">--> + <!-- </el-scrollbar>--> + </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: '鍥哄簾闈㈡澘鏁版嵁鏌ヨ', + // 鏁版嵁鐨勪紶閫� + transferData: '' + }, + searchDataDisplay: [], + // 榛樿鏄剧ず绗嚑椤� + currentPage: 1, + // 鎬绘潯鏁帮紝鏍规嵁鎺ュ彛鑾峰彇鏁版嵁闀垮害(娉ㄦ剰锛氳繖閲屼笉鑳戒负绌�) + totalCount: 1, + // 涓暟閫夋嫨鍣紙鍙慨鏀癸級 + pageSizes: [1, 2, 3, 4], + // 榛樿姣忛〉鏄剧ず鐨勬潯鏁帮紙鍙慨鏀癸級 + PageSize: 1 + } + }, + methods: { + // 姣忛〉鏄剧ず鐨勬潯鏁� + handleSizeChange (val) { + this.PageSize = val + this.currentPage = 1 + }, + // 鏄剧ず绗嚑椤� + handleCurrentChange (val) { + this.currentPage = val + }, + handlePipelineType (val) { + // console.log(val) + this.solidWasteTypeOptions.forEach(item => { + // console.log(item.value) + if (val === item.value) { + // console.log('鏁版嵁閫夋嫨鐩稿悓') + // 鎺ユ敹鏁版嵁 鐢ㄤ簬涔嬪悗鎺ュ彛鏁版嵁鐨勮皟鐢� + // this.form.transferData = item.value + this.handleSearch(item.value) + } + }) + }, + // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀� + async handleSearch (data) { + // console.log(this.form.keyword) + const result = await mapApi.getSolidWasteSurveyDetail(data) + // console.log(result) + this.searchDataDisplay = result.Result.DataInfo + this.totalCount = result.Result.DataInfo.length + } + } +} +</script> + +<style lang="less" scoped> + +.solidwaste-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 { + + } + + .search-radio { + margin: 15px auto; + display: flex; + align-items: center; + justify-content: space-around; + } + + .location-btn:hover, .el-input__icon:hover { + color: @color; + cursor: pointer; + } + + .box-card { + margin: 15px auto; + } + + .search-pagination { + padding: 0; + margin: 15px auto; + } +} +</style> -- Gitblit v1.8.0