From 48c4a38d875f85f1d2de1dd844ca871308b39638 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期二, 13 四月 2021 17:29:19 +0800 Subject: [PATCH] 右侧管线/历史 --- src/components/panel/topicSearch/SewersSearch.vue | 184 ++++++++++++++++++++------------------------- 1 files changed, 82 insertions(+), 102 deletions(-) diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue index 46e94a3..b659cfa 100644 --- a/src/components/panel/topicSearch/SewersSearch.vue +++ b/src/components/panel/topicSearch/SewersSearch.vue @@ -1,106 +1,73 @@ <template> - <div class="sewers-search" v-if="gdVisible"> - <div class="search-title">{{title}}</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 pipelineTypeOptions" - :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-form-item >--> - <div class="rightButtonSearch"> - <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-buttom class="el-icon-search" @click="handleSearch"></el-buttom> - </div> - <!-- </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> - </div> - <el-scrollbar style="height:380.44px;" > - <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="" - :title="item.properties.pipename"> - <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span> - </span> - </div> - <!-- <div class="B-TMD-table-list-title-c">--> - <!-- {{ labelList[0] }}锛�--> - <!-- <span id="plateNumber_p">--> - <!-- <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</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 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><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 class="sewers-search" v-if="gdVisible"> + <div class="panel-title">{{ title }}</div> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="鏌ヨ" name="first"> + <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 pipelineTypeOptions" + :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> + <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-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> + </el-form> </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>--> + <el-scrollbar style="height:380.44px;"> + <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"> + <div @click="handleLocation(item)"> + <h3 class="B-TMD-table-list-title-y" + :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]"> + {{ item.properties.pipename }}</h3> + <p v-for="itm in labelList" :key="itm.label"> + <span>{{ itm.label }}锛�</span> + <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> + </p> + </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> + </el-tab-pane> + <el-tab-pane label="鍒嗘瀽" name="second"> + <SewersAnalysis></SewersAnalysis> + </el-tab-pane> + <el-tab-pane label="鍘嗗彶" name="third"> + <SewersHistory></SewersHistory> + </el-tab-pane> + </el-tabs> + </div> </template> <script> @@ -108,10 +75,20 @@ import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' + +// 寮曞叆鍒嗘瀽缁勪欢鍐呭 +import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis' +import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory' + export default { name: 'SewersSearch', + components: { + SewersAnalysis, + SewersHistory + }, data () { return { + activeName: 'first', gdVisible: true, list: [], labelList: PipelineTypeOptions[0].labelList, @@ -135,6 +112,9 @@ }, props: ['title'], methods: { + handleClick (tab, event) { + console.log(tab, event) + }, handlePipelineType (val) { this.pipelineTypeOptions.forEach((itm) => { if (val === itm.value) { @@ -164,8 +144,8 @@ 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 + if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { + this.list = res.features } }, handleLocation (val) { -- Gitblit v1.8.0