From 28b3be6343168d07d5bd3783fd01388a18e90b8c Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期二, 06 四月 2021 15:25:14 +0800 Subject: [PATCH] 修改图层控制配置 --- src/components/panel/topicSearch/SolidWasteSearch.vue | 147 +++++++++++++++---------------------------------- 1 files changed, 45 insertions(+), 102 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index 87b3911..9145c0b 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -1,5 +1,5 @@ <template> - <div class="solidwaste-search" v-if="judgeVisible"> + <div class="query-search" v-if="judgeVisible"> <div class="search-title"> <span>鍥哄簾</span> <!-- <span>{{ title }}</span>--> @@ -18,37 +18,35 @@ </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> + <el-radio-group v-model="radio" 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> + <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-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 }} + <el-scrollbar style="height:300px"> + <div class="environmental-risk-list"> + <i class="state"></i> + <div> + <h3>###鐐煎寲閮�</h3> + <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> + <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> + </div> </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 class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index"> + <i class="state"></i> + <div> + <h3>{{ item.StoragePlaceTypeName }}</h3> + <p>鎵�灞為儴闂細<span>{{ item.CompanyName }}</span></p> + <p>椋庨櫓绾у埆锛�<span>{{ item.StoragePlaceTypeName }}</span></p> + </div> + </div> + </el-scrollbar> </div> - <!-- <el-scrollbar style="height:100%">--> - <!-- </el-scrollbar>--> </div> </template> @@ -61,6 +59,20 @@ props: ['title'], data () { return { + levelOfRisk: [ + { + name: '鍏ㄩ儴', + value: '1' + }, + { + name: '姝e父', + value: '2' + }, + { + name: '棰勮', + value: '3' + } + ], judgeVisible: true, solidWasteTypeOptions: [{ value: '1', @@ -133,35 +145,14 @@ // 鏁版嵁鐨勪紶閫� transferData: '' }, - searchDataDisplay: [], - // 榛樿鏄剧ず绗嚑椤� - currentPage: 1, - // 鎬绘潯鏁帮紝鏍规嵁鎺ュ彛鑾峰彇鏁版嵁闀垮害(娉ㄦ剰锛氳繖閲屼笉鑳戒负绌�) - totalCount: 1, - // 涓暟閫夋嫨鍣紙鍙慨鏀癸級 - pageSizes: [1, 2, 3, 4], - // 榛樿姣忛〉鏄剧ず鐨勬潯鏁帮紙鍙慨鏀癸級 - PageSize: 1 + // 鏁版嵁鎼滅储涔嬪悗锛屽瓨鍌ㄦ暟鎹殑 + searchDataDisplay: [] } }, 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) } }) @@ -172,7 +163,6 @@ const result = await mapApi.getSolidWasteSurveyDetail(data) // console.log(result) this.searchDataDisplay = result.Result.DataInfo - this.totalCount = result.Result.DataInfo.length } } } @@ -180,55 +170,8 @@ <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; - } +.el-scrollbar { + margin: 15px auto; } + </style> -- Gitblit v1.8.0