From cb4ce544a38a4720b88946949b3258705d5ae2da Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期五, 02 四月 2021 17:07:37 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/topicSearch/SolidWasteSearch.vue | 254 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 254 insertions(+), 0 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index e69de29..b283cb1 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -0,0 +1,254 @@ +<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-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> + + <div class="rightButtonSearch"> + <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> + <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> + </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-scrollbar style="height:500px"> + <div class="environmental-risk-list"> + <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> + <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> + <!-- <el-card class="box-card"--> + <!-- v-for="(item,index) in searchDataDisplay"--> + <!-- :key="index">--> + <!-- <div>--> + <!-- {{ item.CompanyName }}--> + <!-- </div>--> + <!-- </el-card>--> + </div> + <!-- <el-scrollbar style="height:100%">--> + <!-- </el-scrollbar>--> + </div> +</template> + +<script> + +import mapApi from '@/api/mapApi' + +export default { + name: 'SolidWasteSearch', + props: ['title'], + data () { + return { + levelOfRisk: [ + { name: '鍏ㄩ儴', value: '1' }, + { name: '姝e父', value: '2' }, + { name: '棰勮', value: '3' } + ], + 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: [] + } + }, + methods: { + 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 + } + } +} +</script> + +<style lang="less" scoped> +.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; + top: 50%; + left: 10px; + margin-top: -15px; + border-radius: 50%; + box-shadow: 0 0 3px #000; + background: #0B3B6D; + } +} + +.el-input { + margin: 15px auto; +} + +</style> -- Gitblit v1.8.0