From a6da1ff6d9b294f46955da5d5cff30919467fa8b Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期一, 22 二月 2021 12:40:40 +0800 Subject: [PATCH] 修改图层控制 --- src/components/panel/RightSearchPanel.vue | 873 +++++++++++++++++++++++++++++---------------------------- 1 files changed, 439 insertions(+), 434 deletions(-) diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue index 4a59e18..f0c186f 100644 --- a/src/components/panel/RightSearchPanel.vue +++ b/src/components/panel/RightSearchPanel.vue @@ -1,122 +1,123 @@ <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 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> - <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"> + <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"> + </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">{{ + </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> + </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> + <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="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> </template> <script> @@ -135,6 +136,7 @@ pkVisible: false, toggleMonitorStyle: 'right:0px', list: [], + total: 0, title: '绠¢亾淇℃伅鏌ヨ', pipelineTypeOptions: [{ value: '1', @@ -212,6 +214,9 @@ handleClose (done) { console.log(done) }, + handleSearch () { + + }, handlePipelineType (item) { console.log(item) if (item === '2') { @@ -272,370 +277,370 @@ </script> <style lang="less"> -#right-panel { - width: 322px; - height: 573px; - position: absolute; - right: 10px; - top: 10px; + #right-panel { + width: 322px; + height: 573px; + 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: 50px; + } - .B-TMD-table-list-head { - width: 160px; - float: left; - padding-left: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + .B-TMD-table-list-head { + width: 160px; + float: left; + padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + 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; + .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; - transform: rotateY(180deg); - transform-origin: 50% 50%; - transition: transform 1s linear; - } + transform: rotateY(180deg); + transform-origin: 50% 50%; + transition: transform 1s linear; + } - .tab-gd { - width: 32px; - height: 30px; - background-color: #0B3B6D; - } + .tab-gd { + width: 32px; + height: 30px; + background-color: #0B3B6D; + } - .tab-hb { - width: 32px; - height: 30px; - background-color: #545454; - } + .tab-hb { + width: 32px; + height: 30px; + background-color: #545454; + } - .tab-pk { - width: 32px; - height: 30px; - background-color: #83a6c4; - } + .tab-pk { + width: 32px; + height: 30px; + background-color: #83a6c4; + } - .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; - } + .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; - position: absolute; - top: 0; - right: 0; - z-index: 999; - background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat; - } + .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; + } - .panel_searchTotal { - font-size: 12px; - float: right; - } + .panel_searchTotal { + font-size: 12px; + float: right; + } - .panel_header { - // background-color: #030D2E; - padding: 7px 15px 3px 20px; - } + .panel_header { + // background-color: #030D2E; + padding: 7px 15px 3px 20px; + } - .panel_title { - font-size: 12px; - margin: 0px; - padding: 0px; - color: #78c4ff; - font-weight: bold; - } + .panel_title { + font-size: 12px; + margin: 0px; + padding: 0px; + color: #78c4ff; + font-weight: bold; + } - .el-message-box__content { - background-color: transparent; - } + .el-message-box__content { + background-color: transparent; + } - .search-form .el-form-item { - margin: 0px; - } + .search-form .el-form-item { + margin: 0px; + } - .search-form .el-icon-search { - display: grid; - line-height: 30px; - font-size: 18px; - } + .search-form .el-icon-search { + display: grid; + line-height: 30px; + font-size: 18px; + } - .search-panel { - border: #07325B; - background-color: #07325B !important; - margin-top: 0px; + .search-panel { + border: #07325B; + background-color: #07325B !important; + margin-top: 0px; - .el-input__inner { - border-radius: 0px !important; - background-color: #061e51 !important; + .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; + } + } } - } - - 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; - } - } -} </style> -- Gitblit v1.8.0