派生自 wuyushui/SewerAndRainNetwork
src/components/panel/RightSearchPanel.vue
@@ -1,304 +1,396 @@ <template> <div id="right-panel"> <div class="panel-tab"> <div class="btn-stretch" @click="toggleMonitorPanel"></div> <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div> <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div> <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div> </div> <div class="right-control"> <div class="el-message-box__header panel_header"> <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span> </div> </div> <div class="el-message-box__content" style="padding:6px;font-size: 13px;"> <div class="monitor1" v-if="gdVisible"> <div> <el-card 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-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="数据类型："> <el-select v-model="form.dataType"> <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 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> </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 class="panel-right" v-show="isShow"> <transition name="searchPanelChange"> <div style=" display: inline-flex;"> <div class="panel-tab"> <div class="container"> <!-- <ul> <li style="text-align: right"> <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default"> <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i> <i class=" el-icon-d-arrow-left" v-else ></i> </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> </div> </el-card> <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> </li> </ul> --> <ul v-for="item in list" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" v-show="item.isShow"> <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left"> <li> <!-- <img src="../../assets/images/map-pages/icon/sl.png" class="icon"> --> <i class="icon iconfont" :class="item.icon"></i> </li> </el-tooltip> </ul> </div> </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 class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " v-if="gcComp!=''"> <div class="panel-fold-btn" @click="toggleMonitorPanel"> <div :class="[isCollapse? 'btn-stretch':'btn-shrink']"></div> </div> <div :class="'search-container map-background'" v-show="selectGroup"> <div @click="setSearchPanelChange" class="el-button special-button el-button--default "> <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i> <i class=" el-icon-d-arrow-left" v-else></i> </div> <div class="el-message-box__content" style="padding:0;font-size: 13px;"> <component :title="title" :is="gcComp"></component> </div> </div> </div> </div> </div> </transition> <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup"> <div :class="selectGroup === true ?'active-button':''" class="iconBtn" @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" > <i class="el-icon-search icon"></i> </div> </el-tooltip> --> </div> </template> <script> import $ from 'jquery' import EnvProtectSearch from './EnvProtectSearch' import DischargeSearch from './DischargeSearch' import EnvRiskSearch from './topicSearch/EnvRiskSearch' import DischargeSearch from './topicSearch/DischargeSearch' import { topicList } from '../../conf/Topic' import GasWasteSearch from '@components/panel/topicSearch/GasWasteSearch' import WaterWasteSearch from '@components/panel/topicSearch/WaterWasteSearch' import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch' import SewersSearch from '@components/panel/topicSearch/SewersSearch' import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue' import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue' import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue' import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch' export default { name: 'MonitorPanel', components: { EnvProtectSearch, DischargeSearch }, components: { GasWasteSearch, WaterWasteSearch, SolidWasteSearch, EnvRiskSearch, DischargeSearch, EnterpriseEmergencySearch }, data () { return { isShow: true, topicMenu: [], list: topicList, topicCheckedList: [], isPanelVisible: false, gcComp: SewersSearch, gdVisible: true, hbVisible: false, pkVisible: false, toggleMonitorStyle: 'right:0px', list: [], title: '管道信息查询', pipelineTypeOptions: [{ value: '1', label: '管线本体' }, { value: '2', label: '附属设施' }], dataTypeOptions: [], attachOptions: [{ value: '1', label: '阀门' }, { value: '2', label: '管廊' }, { value: '3', label: '管架' }, { value: '4', label: '三通' }, { value: '5', label: '四通' }, { value: '6', label: '弯头' }], pipelineOptions: [{ value: '1', label: '管线' }, { value: '2', label: '雨水管段' }, { value: '3', label: '含盐管段' }, { value: '4', label: '含油管段' }, { value: '5', label: '事故水管段' }, { value: '6', label: '含碱管段' }, { value: '7', label: '循环水管段' }, { value: '8', label: '净化水管段' }, { value: '9', label: '生活污水管段' }], form: { transNo: null, carrierName: null, transMode: null, vehicleNo: null, orderState: null, size: 10, current: 1 }, pageSize: 10, current: 1, isWaybillHover: true, isRouteHover: false title: '污雨水管网', isCollapse: true, selectGroup: false } }, computed: {}, watch: {}, computed: { serviceLayers () { return this.$store.state.map.serviceLayers.LayerSewersLine } }, /* watch: { '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) { console.log(oldVal) console.log(newVal) this.topicCheckedList = newVal this.topicMenu = [] this.topicList.forEach((item) => { this.topicCheckedList.forEach((itm) => { if (item.name === itm) { this.topicMenu.push(item) } }) }) } }, */ methods: { handleClose (done) { console.log(done) }, handlePipelineType (item) { console.log(item) if (item === '2') { this.dataTypeOptions = this.attachOptions } else if (item === '1') { this.dataTypeOptions = this.pipelineOptions setSearchPanelChange () { // 搜索面板没有显示时，将所有主题选择状态设置为false this.selectGroup = !this.selectGroup if (!this.selectGroup) { this.list.forEach((itm) => { itm.checked = false }) } }, unselected (val) { // console.log(val) this.selectGroup = true this.list.forEach((itm) => { if (itm.name === val.name) { console.log(val.name) itm.checked = false itm.isShow = false } }) }, selected (val) { // console.log(val) this.selectGroup = true this.list.forEach((itm) => { if (itm.name === val.name) { itm.isShow = true itm.checked = true } else { itm.checked = false } }) this.setComp(val) }, setComp (val) { this.title = val.name switch (val.name) { case '污染源': this.gcComp = DischargeSearch break case '废水': this.gcComp = WaterWasteSearch break case '废气': this.gcComp = GasWasteSearch break case '固废': this.gcComp = SolidWasteSearch break case '环境风险': this.gcComp = EnvRiskSearch break case '土壤及地下水': this.gcComp = SoilGroundWaterSearch break case '管线': this.gcComp = SewersSearch break case '管道变更': this.gcComp = PipeChangesSearch break case '管道信息': this.gcComp = PipeInformationSearch break case '企业应急': this.gcComp = EnterpriseEmergencySearch break } }, handlePage (page) { }, handleGd () { this.gdVisible = true this.hbVisible = false this.pkVisible = false this.title = '管道信息查询' }, handleHb () { this.gdVisible = false this.hbVisible = true this.pkVisible = false this.title = '环保设施查询' }, handlePk () { this.gdVisible = false this.hbVisible = false this.pkVisible = true this.title = '排口信息查询' }, toggleMonitorPanel () { const el = $('.btn-stretch') // let cs = 'btn-stretch-active' var rightControl = $('#right-panel') const right = rightControl.css('right') if (right === '10px') { rightControl.animate({ right: '-290px' }) el.css({ transform: 'rotateY(180deg)', 'transform-origin': '50% 50%', transition: 'transform 1s linear' }) } else { rightControl.animate({ right: '10px' }) el.css({ transform: 'rotateY(0deg)', 'transform-origin': '50% 50%', transition: 'transform 1s linear' }) this.isCollapse = !this.isCollapse // const el = $('.btn-stretch') // const el2 = $('.panel-fold-btn') // const el = document.getElementsByClassName('.btn-stretch') // const el2 = document.getElementsByClassName('.panel-fold-btn') // let = 'btn-stretch-active' // var rightControl = $('#panel-right') // var rightControl = document.getElementById('#panel-right') // const right = rightControl.css('right') // const rightit = rightControl.ownerDocument.defaultView // const right = rightit.getComputedStyle(rightit, null).right // if (right === '10px') { // rightControl.animate({ // right: '-322px' // }) // el.css({ // transform: 'rotateY(180deg)', // 'transform-origin': '50% 50%', // transition: 'transform 1s linear' // }) // el2.animate({ // right: '320px', // speed: 1000 // }) // } else { // rightControl.animate({ // right: '10px' // }) // el.css({ // transform: 'rotateY(0deg)', // 'transform-origin': '50% 50%', // transition: 'transform 1s linear' // }) // el2.animate({ // right: '290px', // speed: 1000 // }) // } }, containsLayer (layer) { if (layer) { for (let i = 0; i < layer.length; i++) { const lay = layer[i] const checked = lay.checked for (let j = 0; j < this.list.length; j++) { const topic = this.list[j] if (lay.name === topic.name) { if (lay.layers) { const isChecked = this.isChecked(lay.layers) if (isChecked) { this.selected(topic) } else { this.unselected(topic) } } else if (checked) { this.selected(topic) } break } } this.containsLayer(lay.layers) } } }, isChecked (layers) { for (let i = 0; i < layers.length; i++) { const layer = layers[i] const checked = layer.checked if (checked) { return true } if (layer.layers) { return this.isChecked(layer.layers) } } return false } }, mounted () { /* bus.$on('changeSearchBar', (obj) => { const topic = this.search(this.serviceLayers, obj) console.log('====' + JSON.stringify(topic)) }) */ }, watch: { serviceLayers: { handler: function (newVal, oldVal) { this.containsLayer(newVal) }, immediate: true, deep: true } } } </script> <style lang="less"> #right-panel { width: 322px; height: 573px; .searchPanelChange-enter-active { transform-origin: top right; animation: bounce-in .2s; } .searchPanelChange-leave-active { transform-origin: top right; animation: bounce-in .2s reverse; } .search-container { position: relative; //width: 1.79167rem; //width: 2.39167rem; width: 2.3rem; /* height: 5.6475rem;*/ overflow: hidden; } .module-wrap { width: 0.15rem; height: 0.15rem; padding: .04167rem; //padding: .00521rem; background: rgba(0, 16, 30, .5); border-radius: .03125rem; border: .00521rem solid rgba(255, 247, 0, .5); margin: .04167rem 0; font-size: .08333rem; -webkit-transition: all .2s linear; transition: all .2s linear; cursor: pointer; position: relative; line-height: 0.15rem; li { margin: 0.00521rem 0; text-align: center; font-size: 20px; img { width: 0.1rem; height: 0.1rem; } } } .panel-right { display: inline-flex; //width: 322px; //height: 100%; //position: absolute; //right: 10px; //top: 10px; height: 0; position: absolute; right: 10px; top: 10px; top: 0.73979rem; right: 0.14583rem; z-index: 501; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; .el-card__body { padding: 7px; //.el-card__body { // padding: 7px; //} //.el-form-item__content { // color: rgb(52, 224, 255); //} // //.el-picker-panel { // background-color: #061e51 !important; //} // //.el-input__inner { // border-radius: 0 !important; // background-color: #061e51 !important; // border: solid 1px #0e639e !important; //} .el-button--default.special-button { padding: 0; background: @background-color4; color: @color-tool; position: absolute; top: 20px; left: 0.02rem; border: none; //1px solid @color-tool; width: 0.2rem; height: 0.2rem; text-align: center; line-height: 0.2rem; margin-top: -0.1rem; border-radius: 50%; z-index: 999; } .el-form-item__content { color: rgb(52, 224, 255); } .el-picker-panel { background-color: #061e51 !important; } .el-input__inner { border-radius: 0 !important; background-color: #061e51 !important; border: solid 1px #0e639e !important; .el-button--default.special-button:hover { background: @background-color; border: 1px solid @color; box-shadow: 0 0 2px @color; color: @color; } .el-form-item__label { color: rgb(52, 224, 255); color: @color; } .el-input__inner::placeholder { @@ -378,11 +470,11 @@ .B-TMD-table-list-title { width: 100%; height: 50px; height: 30px; } .B-TMD-table-list-head { width: 160px; //width: 160px; float: left; padding-left: 5px; overflow: hidden; @@ -390,55 +482,84 @@ white-space: nowrap; } .btn-stretch { width: 15px; height: 28px; background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0; margin-left: 10px; margin-top: 3px; cursor: pointer; .panel-fold-btn { overflow: hidden; position: absolute; top: 45%; left: -18px; /*left: 0px;*/ //right: 320px; /*right: 290px;*/ z-index: 1000; /*right: 0px;*/ background-color: rgba(5, 24, 66, .8); border-radius: 10px 0 0 10px; transform: rotateY(180deg); transform-origin: 50% 50%; transition: transform 1s linear; .btn-stretch { //width: 20px; //height: 40px; background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px; cursor: pointer; /*margin-left: -20px;*/ transform: rotateY(0deg); transform-origin: 50% 50%; transition: transform 1s linear; /*transition: 3s linear;*/ } .btn-shrink { width: 20px; height: 40px; background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px; cursor: pointer; transform: rotateY(180deg); transform-origin: 50% 50%; transition: transform 1s linear; } } .tab-gd { width: 32px; height: 30px; .tab-item { //width: .2rem; //height: .2rem; color: @color; font-size: 12px; background-color: #0B3B6D; } .tab-hb { width: 32px; height: 30px; background-color: #545454; } .tab-pk { width: 32px; height: 30px; background-color: #83a6c4; .tab-item:hover { cursor: pointer; } .panel-tab { position: absolute; left: 0; height: 120px; top: 0; width: 32px; position: relative; z-index: 500; background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat; margin-right: .025rem; .container { max-height: 3.125rem; overflow: hidden; position: relative; position: relative; } } .right-control { width: 290px; height: 573px; position: absolute; top: 0; right: 0; z-index: 999; background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat; /*width: 290px;*/ //height: 573px; height: 100%; position: relative; //top: 0; //right: 0; z-index: 500; //background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat; //background-size: 100% 98%; } .a { transform: translateX(328px); transition: transform 3s linear; } .panel_searchTotal { @@ -448,13 +569,13 @@ .panel_header { // background-color: #030D2E; padding: 7px 15px 3px 20px; padding: 8px 15px 3px 20px; } .panel_title { font-size: 12px; margin: 0px; padding: 0px; /*margin: 0px;*/ /*padding: 0px;*/ color: #78c4ff; font-weight: bold; } @@ -464,24 +585,98 @@ } .search-form .el-form-item { margin: 0px; /*margin: 0px;*/ margin-bottom: 8px; } .search-form .el-icon-search { display: grid; line-height: 30px; font-size: 18px; } .search-panel { border: #07325B; background-color: #07325B !important; margin-top: 0px; /*input 点击搜索样式*/ .el-input__inner { border-radius: 0px !important; background-color: #061e51 !important; .rightButtonSearch { display: flex; justify-content: space-between; align-items: center; .el-input { margin-right: 10px } .el-icon-search { width: 40px; border: 1px solid @color; height: 28px; line-height: 28px; text-align: center; color: #fff; border-radius: 2px; cursor: pointer; background: rgba(0, 16, 30, .5); padding: 0; } } /*单选按钮样式*/ .levelOfRisk { padding-left: 20px } .levelOfRisk .el-radio { padding-bottom: 6px } .levelOfRisk-type { display: inline-block; position: relative; padding-right: 5px; color: @color-shadow; i { display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: -15px; margin-top: -5px; } } .el-radio.is-checked .levelOfRisk-type { color: #409EFF } .environmental-risk-list { position: relative; padding-left: 50px; padding-top: 5px; padding-bottom: 5px; color: @color-shadow; border-bottom: 1px solid @background-color-split; h3{ cursor: pointer;} .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; } } .environmental-risk-list.hover, .environmental-risk-list:hover{ background: @background-color; } .environmental-risk-list.hover h3, .environmental-risk-list h3:hover { color: @color-highlight; } input::-webkit-input-placeholder { @@ -506,7 +701,8 @@ margin: 5px 0px 0px 0px; padding: 0px; border: #051842; height: 290px; //height: 290px; height: calc(~"100vh - 180px"); overflow-y: scroll; background-color: transparent !important; margin-bottom: -8px !important; @@ -538,12 +734,16 @@ } .footer-page { position: absolute; // position: absolute; background-color: transparent !important; bottom: 10px !important; margin-left: 0px; // bottom: 10px !important; // margin-left: 0px; border: none; margin: 0; border-top: 1px solid rgba(0, 255, 246, 0.14); .el-card__body{ padding: 5px; } .warnPagination { .btn-quicknext, .btn-quickprev { color: #e4e8f1 !important; @@ -608,7 +808,7 @@ ::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0px; background: #0E3565; } @@ -637,5 +837,66 @@ background-color: #061e51 !important; } } .unfold { transform: translateX(332px); transition: transform 0.5s linear; } .shrink { transform: translateX(0px); transition: transform 0.5s linear; } /******************以下公共部分**********/ .sewers-search { position: relative; overflow: hidden; .panel-title { } .search-panel { background-color: transparent; padding: 10px; border-bottom: 1px solid @background-color-split; // .el-input{width:calc(100% - 40px);position: relative} /deep/ input { border-radius: 0; background-color: @background-color-split; border: solid 1px @color; color: @color-gray; font-size: 0.01rem; padding: 0 15px; .el-select .el-input.is-focus .el-input__inner { border-color: @color; } } .el-input__inner { background: none; color: #fff; font-size: 14px; border-radius: 0; border-color: @color; background: rgba(0, 16, 30, .5); } } .search-btn { } //location-btn{ // //} .location-btn:hover, .el-input__icon:hover { color: @color; cursor: pointer; } } } </style>
