From 17e7836b1d0a7bd1a51d44ae071a88423a9f9370 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 08 三月 2021 17:57:16 +0800 Subject: [PATCH] 添加工具栏功能 --- src/components/panel/RightSearchPanel.vue | 943 +++++++++++++++++++++++----------------------------------- 1 files changed, 381 insertions(+), 562 deletions(-) diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue index dc1402f..9462fe7 100644 --- a/src/components/panel/RightSearchPanel.vue +++ b/src/components/panel/RightSearchPanel.vue @@ -1,252 +1,76 @@ <template> - <div id="right-panel"> - <div class="panel-tab"> - <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="panel-fold-btn"> - <div class="btn-stretch" @click="toggleMonitorPanel"></div> - </div> + <div id="right-panel"> + <div class="panel-tab"> + <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"> + <img :src="item.icon" style="width: 24px;height: 24px;"></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> - <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> - </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> - </div> - </div> +<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>--> +<!-- <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>--> </div> + <div class="panel-fold-btn"> + <div class="btn-stretch" @click="toggleMonitorPanel"></div> + </div> + + <div class="right-control"> + + <component :title="title" :is="gcComp"></component> + </div> + </div> </template> <script> import $ from 'jquery' -import EnvProtectSearch from './EnvProtectSearch' -import DischargeSearch from './DischargeSearch' +import EnvProtectSearch from './topicSearch/EnvProtectSearch' +import DischargeSearch from './topicSearch/DischargeSearch' +import { TopicList } from '../../conf/Topic' +import SewersSearch from '@components/panel/topicSearch/SewersSearch' export default { name: 'MonitorPanel', components: { EnvProtectSearch, DischargeSearch }, data () { return { + topicMenu: [], + topicList: TopicList, + topicCheckedList: [], isPanelVisible: false, + gcComp: SewersSearch, + gdVisible: true, hbVisible: false, pkVisible: false, toggleMonitorStyle: 'right:0px', - list: [], - total: 0, - 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: '姹¢洦姘寸缃�' + } }, computed: {}, - watch: {}, + 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) { + // item.checked = tr + this.topicMenu.push(item) + } + }) + }) + } + }, methods: { handleClose (done) { console.log(done) }, - handleSearch () { - }, - handlePipelineType (item) { - console.log(item) - if (item === '2') { - this.dataTypeOptions = this.attachOptions - } else if (item === '1') { - this.dataTypeOptions = this.pipelineOptions - } - }, 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') @@ -289,379 +113,374 @@ </script> <style lang="less"> - #right-panel { - width: 322px; - //height: 573px; - height: 100%; - position: absolute; - right: 10px; - top: 10px; +@import '@assets/css/map/_map-variable'; +#right-panel { + width: 322px; + //height: 573px; + height: 100%; + position: absolute; + right: 10px; + top: 10px; - .el-card__body { - padding: 7px; - } + .el-card__body { + padding: 7px; + } - .el-form-item__content { - color: rgb(52, 224, 255); - } + .el-form-item__content { + color: rgb(52, 224, 255); + } - .el-picker-panel { - background-color: #061e51 !important; - } + .el-picker-panel { + background-color: #061e51 !important; + } - .el-input__inner { - border-radius: 0 !important; - background-color: #061e51 !important; - border: solid 1px #0e639e !important; - } + .el-input__inner { + border-radius: 0 !important; + background-color: #061e51 !important; + border: solid 1px #0e639e !important; + } - .el-form-item__label { - color: rgb(52, 224, 255); - } + .el-form-item__label { + color: rgb(52, 224, 255); + } - .el-input__inner::placeholder { - color: #9a9494; - } + .el-input__inner::placeholder { + color: #9a9494; + } - /* 璋锋瓕 */ + /* 璋锋瓕 */ - .el-input__inner::-webkit-input-placeholder { - color: #9a9494; - } + .el-input__inner::-webkit-input-placeholder { + color: #9a9494; + } - /* 鐏嫄 */ + /* 鐏嫄 */ - .el-input__inner:-moz-placeholder { - color: #9a9494; - } + .el-input__inner:-moz-placeholder { + color: #9a9494; + } - /*ie*/ + /*ie*/ - .el-input__inner:-ms-input-placeholder { - color: #9a9494; - } + .el-input__inner:-ms-input-placeholder { + color: #9a9494; + } - .warning { - color: #dcc805; - } + .warning { + color: #dcc805; + } - #plateNumber_n a { - color: rgb(52, 224, 255); - } + #plateNumber_n a { + color: rgb(52, 224, 255); + } - .offline { - color: #9a9494; - } + .offline { + color: #9a9494; + } - .customInput { - width: 118px; - } + .customInput { + width: 118px; + } - .btn-ok { - margin-right: 10px; - width: 4rem; - background-color: #0B89B5; - color: white; - border: 0; - } + .btn-ok { + margin-right: 10px; + width: 4rem; + background-color: #0B89B5; + color: white; + border: 0; + } - .btn-reset { - margin-right: 10px; - width: 4rem; - background-color: orange; - color: white; - border: 0; - } + .btn-reset { + margin-right: 10px; + width: 4rem; + background-color: orange; + color: white; + border: 0; + } - .component-fade-enter-active, .component-fade-leave-active { - transition: opacity .5s ease; - } + .component-fade-enter-active, .component-fade-leave-active { + transition: opacity .5s ease; + } - .component-fade-enter, .component-fade-leave-to - /* .component-fade-leave-active for below version 2.1.8 */ { - opacity: 0; - } + .component-fade-enter, .component-fade-leave-to + /* .component-fade-leave-active for below version 2.1.8 */ { + opacity: 0; + } - .B-TMD-table-icons ul li { - float: left; - margin: 10px; - list-style: none; - } + .B-TMD-table-icons ul li { + float: left; + margin: 10px; + list-style: none; + } - .B-TMD-table-list { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + .B-TMD-table-list { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - .B-TMD-table-list-title { - width: 100%; - height: 50px; - } + .B-TMD-table-list-title { + width: 100%; + height: 30px; + } - .B-TMD-table-list-head { - width: 160px; - float: left; - padding-left: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .panel-fold-btn{ - position: absolute; - top:45%; - //right: 320px; - right: 290px; - z-index: 1000; - background-color: rgba(5,24,66,.8); - border-radius: 10px 0 0 10px; - .btn-stretch { - width: 20px; - height: 40px; - background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px; - cursor: pointer; + .B-TMD-table-list-head { + //width: 160px; + float: left; + padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .panel-fold-btn{ + position: absolute; + top:45%; + //right: 320px; + right: 290px; + z-index: 1000; + background-color: rgba(5,24,66,.8); + border-radius: 10px 0 0 10px; + .btn-stretch { + 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; - } + transform: rotateY(180deg); + transform-origin: 50% 50%; + transition: transform 1s linear; + } + } + + .tab-item { + width: 32px; + height: 30px; + color: @color; + font-size: 12px; + background-color: #0B3B6D; + } + .tab-item:hover{ + cursor: pointer; + } + .panel-tab { + position: absolute; + left: 0; + //height: 120px; + top: 0; + width: 32px; + z-index: 500; + background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat; + } + + .right-control { + width: 290px; + //height: 573px; + height: 100%; + position: absolute; + top: 0; + right: 0; + z-index: 999; + background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat; + background-size: 100% 98%; + } + + .panel_searchTotal { + font-size: 12px; + float: right; + } + + .panel_header { + // background-color: #030D2E; + padding: 7px 15px 3px 20px; + } + + .panel_title { + font-size: 12px; + margin: 0px; + padding: 0px; + color: #78c4ff; + font-weight: bold; + } + + .el-message-box__content { + background-color: transparent; + } + + .search-form .el-form-item { + 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; + + .el-input__inner { + border-radius: 0px !important; + background-color: #061e51 !important; + } + } + + input::-webkit-input-placeholder { + color: #569ee1; + } + + input::-moz-placeholder { + color: #569ee1; + } + + input::-ms-input-placeholder { + color: #569ee1; + } + + input[type=text]:focus { + outline: 1px solid #17e4f6; + // box-shadow: 1px 0px 3px 0px #17e4f6; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + } + + .search-result { + margin: 5px 0px 0px 0px; + padding: 0px; + border: #051842; + //height: 290px; + height: calc(~"100vh - 180px"); + overflow-y: scroll; + background-color: transparent !important; + margin-bottom: -8px !important; + } + + .offline { + color: #64778B; + } + + .B-TMD-table-list { + margin-top: 10px; + text-align: left; + padding-left: 10px; + //color: #64778B; + color: #34e0ff; + width: 100%; + line-height: 25px; + background: url('../../assets/images/map-pages/icon/dd.png') no-repeat; + } + + .B-TMD-inp-button { + width: 46px; + height: 52px; + position: absolute; + bottom: 8px; + right: 16px; + background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0; + cursor: pointer; + } + + .footer-page { + position: absolute; + background-color: transparent !important; + bottom: 10px !important; + margin-left: 0px; + border: none; + + .warnPagination { + .btn-quicknext, .btn-quickprev { + color: #e4e8f1 !important; + background-color: transparent; + // border: 1px solid #25AECD; + border-left: 1px solid #25AECD; + border-bottom: 1px solid #25AECD; + border-top: 1px solid #25AECD; + color: #e4e8f1; } - .tab-gd { - width: 32px; - height: 30px; - background-color: #0B3B6D; - } + .el-pager li { + color: #e4e8f1; + background: transparent; + // border: 1px solid #25AECD; + border-left: 1px solid #25AECD; + border-bottom: 1px solid #25AECD; + border-top: 1px solid #25AECD; + } - .tab-hb { - width: 32px; - height: 30px; - background-color: #545454; - } + .el-pager li.active { + border-color: #25AECD; + background-color: rgba(38, 222, 253, 0.3); + color: #e4e8f1; + } - .tab-pk { - width: 32px; - height: 30px; - background-color: #83a6c4; - } + .el-pager li:hover { + border-color: #25AECD; + background-color: rgba(38, 222, 253, 0.3); + color: #34e0ff; + } - .panel-tab { - position: absolute; - left: 0; - height: 120px; - top: 0; - width: 32px; - z-index: 500; - background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat; - } + .btn-prev { + background-color: transparent; + // border: 1px solid #25AECD; + border-left: 1px solid #25AECD; + border-bottom: 1px solid #25AECD; + border-top: 1px solid #25AECD; + color: #e4e8f1; + } - .right-control { - width: 290px; - //height: 573px; - height: 100%; - position: absolute; - top: 0; - right: 0; - z-index: 999; - background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat; - background-size: 100% 98%; - } - - .panel_searchTotal { - font-size: 12px; - float: right; - } - - .panel_header { - // background-color: #030D2E; - padding: 7px 15px 3px 20px; - } - - .panel_title { - font-size: 12px; - margin: 0px; - padding: 0px; - color: #78c4ff; - font-weight: bold; - } - - .el-message-box__content { - background-color: transparent; - } - - .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 !important; - margin-top: 0px; - - .el-input__inner { - border-radius: 0px !important; - background-color: #061e51 !important; - } - } - - input::-webkit-input-placeholder { - color: #569ee1; - } - - input::-moz-placeholder { - color: #569ee1; - } - - input::-ms-input-placeholder { - color: #569ee1; - } - - input[type=text]:focus { - outline: 1px solid #17e4f6; - // box-shadow: 1px 0px 3px 0px #17e4f6; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - } - - .search-result { - margin: 5px 0px 0px 0px; - padding: 0px; - border: #051842; - height: 290px; - overflow-y: scroll; - background-color: transparent !important; - margin-bottom: -8px !important; - } - - .offline { - color: #64778B; - } - - .B-TMD-table-list { - margin-top: 10px; - text-align: left; - padding-left: 10px; - //color: #64778B; - color: #34e0ff; - width: 100%; - line-height: 25px; - background: url('../../assets/images/map-pages/icon/dd.png') no-repeat; - } - - .B-TMD-inp-button { - width: 46px; - height: 52px; - position: absolute; - bottom: 8px; - right: 16px; - background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0; - cursor: pointer; - } - - .footer-page { - position: absolute; - background-color: transparent !important; - bottom: 10px !important; - margin-left: 0px; - border: none; - - .warnPagination { - .btn-quicknext, .btn-quickprev { - color: #e4e8f1 !important; - background-color: transparent; - // border: 1px solid #25AECD; - border-left: 1px solid #25AECD; - border-bottom: 1px solid #25AECD; - border-top: 1px solid #25AECD; - color: #e4e8f1; - } - - .el-pager li { - color: #e4e8f1; - background: transparent; - // border: 1px solid #25AECD; - border-left: 1px solid #25AECD; - border-bottom: 1px solid #25AECD; - border-top: 1px solid #25AECD; - } - - .el-pager li.active { - border-color: #25AECD; - background-color: rgba(38, 222, 253, 0.3); - color: #e4e8f1; - } - - .el-pager li:hover { - border-color: #25AECD; - background-color: rgba(38, 222, 253, 0.3); - color: #34e0ff; - } - - .btn-prev { - background-color: transparent; - // border: 1px solid #25AECD; - border-left: 1px solid #25AECD; - border-bottom: 1px solid #25AECD; - border-top: 1px solid #25AECD; - color: #e4e8f1; - } - - .btn-next { - background-color: transparent; - border: 1px solid #25AECD; - color: #e4e8f1; - } - } - } - - ::-webkit-scrollbar { - width: 7px; - height: 5px !important; - } - - ::-webkit-scrollbar-thumb { - /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ - border-radius: 10px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - background: #0661AE; - border: 1px solid transparent; - } - - ::-webkit-scrollbar-track { - /*婊氬姩鏉¢噷闈㈣建閬�*/ - // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); - border-radius: 0px; - background: #0E3565; - } - - .selectFrom { - color: #061e51; - border: 1px solid #061e51 !important; - background: #dcc805 !important; - - .el-select-dropdown__list { - background: #061e51 !important; - } - - .el-select-dropdown__item { - color: #949494; - background: #061e51 !important; - } - - .el-select-dropdown__item.hover, - .el-select-dropdown__item:hover { - color: #fff; - background: #061e51 !important; - } - - .popper__arrow { - background-color: #061e51 !important; - } - } + .btn-next { + background-color: transparent; + border: 1px solid #25AECD; + color: #e4e8f1; + } } + } + + ::-webkit-scrollbar { + width: 7px; + height: 5px !important; + } + + ::-webkit-scrollbar-thumb { + /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ + border-radius: 10px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background: #0661AE; + border: 1px solid transparent; + } + + ::-webkit-scrollbar-track { + /*婊氬姩鏉¢噷闈㈣建閬�*/ + // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 0px; + background: #0E3565; + } + + .selectFrom { + color: #061e51; + border: 1px solid #061e51 !important; + background: #dcc805 !important; + + .el-select-dropdown__list { + background: #061e51 !important; + } + + .el-select-dropdown__item { + color: #949494; + background: #061e51 !important; + } + + .el-select-dropdown__item.hover, + .el-select-dropdown__item:hover { + color: #fff; + background: #061e51 !important; + } + + .popper__arrow { + background-color: #061e51 !important; + } + } +} </style> -- Gitblit v1.8.0