From 3bfe1e5779946a5a3c09621219c0890e8c286868 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期一, 31 五月 2021 14:08:47 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/topicSearch/EnvRiskSearch.vue | 262 ++++++++++++++++++++++++++-------------------------- 1 files changed, 130 insertions(+), 132 deletions(-) diff --git a/src/components/panel/topicSearch/EnvRiskSearch.vue b/src/components/panel/topicSearch/EnvRiskSearch.vue index 135274d..49e056f 100644 --- a/src/components/panel/topicSearch/EnvRiskSearch.vue +++ b/src/components/panel/topicSearch/EnvRiskSearch.vue @@ -1,88 +1,69 @@ <template> - <div> - <div class="search-title"> - 姹¢洦姘� - </div> - <el-card class="search-panel"> + <div class="sewers-search" v-if="gdVisible"> + <div class="panel-title">{{title}}</div> + <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> - <el-form-item label="绫诲瀷锛�"> - <el-select v-model="form.pipelineType" @change="handlePipelineType"> +<!-- <el-form-item label="鍖哄煙锛�" size="mini" class="search-panel-item"> + <el-select style="width: 100%" v-model="form.areaVal" @change="areaType" :popper-class="'select-down'"> <el-option - v-for="item in pipelineTypeOptions" + v-for="item in areaTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item>--> + <el-form-item label="浼佷笟鍚嶇О锛�" size="mini"> + <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" :popper-class="'select-down'"> + <el-option + v-for="item in enterpriseTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> - <el-form-item label="鏁版嵁绫诲瀷锛�"> - <el-select v-model="form.dataType"> + <el-form-item label="鍗曚綅閮ㄩ棬锛�" size="mini"> + <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" + :popper-class="'select-down'"> <el-option - v-for="item in dataTypeOptions" + v-for="item in enterpriseSubunitsTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> - <el-form-item label="妯$硦鎼滅储锛�"> - <el-input v-model="form.key" size="mini" - placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></el-input> - </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-item label="椋庨櫓绾у埆锛�" size="mini"></el-form-item> + <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}}<i :style="'background:'+item.color"></i></span> + </el-radio> + </el-radio-group> + <div class="page_total"> + <p>鍏辫 + <span>{{total}}</span> + 鏉¤褰� + </p> + </div> + <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-form> - </el-card> - <el-card class="search-result" style="height:271px;"> - <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="B-TMD-table-list-title-y-num" - :title="item.transNo"> - <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span> - </span> - </div> - <div class="B-TMD-table-list-title-c"> - 杞藉叿鍙凤細 - <span id="plateNumber_p"> - <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</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> - <span>鍙戣揣浼佷笟锛�</span> - <span id="b_twe_consignment" :title="item.outWarehouseName">{{ - item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName - }}</span> - </div> - <div> - <span>鎵� 杩� 鍟嗭細</span> - <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</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> + <el-scrollbar style="height:264px"> + <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" + @click="handleLocation(item)"> + <img :src='iconUrl[item.riskLevel]' alt="" class="state"/> + <div> + <h3>{{ item.riskname }}</h3> + <p>鎵�灞為儴闂細<span>{{ item.unitname }}</span></p> </div> </div> - </el-card> - + </el-scrollbar> + <!-- <span class="location-btn" @click="handleLocation(item)">588</span> --> <el-card class="footer-page" v-if="total > 10"> <el-pagination small @@ -96,88 +77,105 @@ </el-pagination> </el-card> </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>--> </template> <script> + +import { pulseEffect, setPanTo } from '@utils/utils' +import RiskSourceIndex from '@components/base-page/RiskSource/RiskSourceIndex' +const mapApi = require('../../../api/mapApi').default + export default { - name: 'MonitorAreaTips', - components: {}, + name: 'EnvRiskSearch', data () { return { - isPanelVisible: false, - total: 0, + gdVisible: true, list: [], + total: 0, + // inareaTypeOptions: [], + enterpriseTypeOptions: [], + enterpriseSubunitsTypeOptions: [], form: { - name: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '' - } + areaVal: '', + enterpriseVal: '', + enterpriseSubunitsVal: '', + type: '' + }, + pageSize: 10, + current: 1, + isWaybillHover: true, + isRouteHover: false, + levelOfRisk: [ + { name: '閲嶅ぇ椋庨櫓', value: '1', color: 'red' }, + { name: '涓�绾ч闄�', value: '2', color: 'sandybrown' }, + { name: '浜岀骇椋庨櫓', value: '3', color: 'yellow' }, + { name: '涓夌骇椋庨櫓', value: '4', color: 'green' } + ], + areaTypeOptions: [], + iconUrl: ['', + require('../../../../public/assets/images/map/environmentRisk/risk_red.png'), + require('../../../../public/assets/images/map/environmentRisk/risk_sandybrown.png'), + require('../../../../public/assets/images/map/environmentRisk/risk_yellow.png'), + require('../../../../public/assets/images/map/environmentRisk/risk_green.png') + ] } }, + props: ['title'], methods: { - handleClose (done) { - console.log(done) - }, - handleClick (tab, event) { - console.log(tab, event) - }, - handleSearch () { + // 鍖哄煙绛涢�� + /* areaType (val) { + this.pipelineTypeOptions.forEach((itm) => { + if (val === itm.value) { + } + }) + }, */ + // 浼佷笟绛涢�� + enterpriseType (val) { + this.dataTypeOptions.forEach((itm) => { + if (val === itm.value) { + + } + }) + }, + // 浜岀骇鍗曚綅绛涢�� + enterpriseSubunitsType (val) { + + }, + + async handleSearch () { + const param = { + } + const res = await mapApi.getEnvironmentRiskPoint(param) + this.list = res[0].concat(res[1], res[2], res[3]) // 涓存椂鏁版嵁 + }, + + handleLocation (val) { + const pos = [val.Latitude, val.Longitude] + window.map.setView(pos, 15) + window.$layer.open({ + content: { + comp: RiskSourceIndex, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + riskSourceId: val.no + } + }, + title: '澶╂触鐭冲寲' + val.riskname + }) + pulseEffect([val.Latitude, val.Longitude]) + setPanTo(pos, 250) } - }, - mounted () { - this.handleSearch() } } </script> -<style lang="less"> -.monitorHz { - .el-message-box__content { - background-color: #030D2E; - } +<style lang="less" scoped> - .search-form .el-form-item { - margin: 0px; - } - - .search-form .el-icon-search { - display: grid; - line-height: 30px; - font-size: 18px; - } - - .search-panel { - border: #07325B; - background-color: #07325B; - } - - .search-result { - margin: 5px 0px 0px 0px; - padding: 0px; - border: #051842; - overflow-y: scroll; - background-color: #051842; - } - - .B-TMD-table-list { - margin-top: 10px; - text-align: left; - padding-left: 10px; - color: #328EB5; - width: 100%; - line-height: 25px; - background-color: #0B3B6D; - } - - .footer-page { - position: absolute; - bottom: 5px; - } -} </style> -- Gitblit v1.8.0