派生自 wuyushui/SewerAndRainNetwork
src/components/panel/MonitorPanel.vue
@@ -1,775 +1,843 @@ <template> <div id="right-panel"> <div class="panel-tab"> <ul> <li id="test" @click="toggleMonitorPanel"> <div class="btn-stretch"></div> </li> <li class="B-TMT-tab-div" @click="showHZ"> <div class="B-TMT-tab-waybill" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div> </li> <li class="B-TMT-tab-div:hover" @click="showWayBill"> <div class="B-TMT-tab-route" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div> </li> </ul> <div id="right-panel"> <div class="panel-tab"> <ul> <li id="test" @click="toggleMonitorPanel"> <div class="btn-stretch"></div> </li> <li class="B-TMT-tab-div" @click="showHZ"> <div class="B-TMT-tab-waybill" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div> </li> <li class="B-TMT-tab-div:hover" @click="showWayBill"> <div class="B-TMT-tab-route" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div> </li> </ul> </div> <div class="right-control"> <div class="el-message-box__header panel_header"> <div class="el-message-box__title panel_title"><!----><span>管线信息查询</span> <div class="panel_searchTotal">共<span style="color: #f5c228;margin:0 5px">{{ total }}</span>条记录 </div> </div> <div class="right-control"> <div class="el-message-box__header panel_header"> <div class="el-message-box__title panel_title"><!----><span>管线信息查询</span> <div class="panel_searchTotal">共<span style="color: #f5c228;margin:0 5px">{{ total }}</span>条记录 </div> </div> </div> <div class="el-message-box__content" style="padding:6px;font-size: 13px;"> <div class="monitor1" v-if="wayBillVisible"> <div> <el-card class="search-panel"> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item label="管线类型："> <el-input v-model="form.transNo" size="mini" placeholder="在此输入委托单号"></el-input> </el-form-item> <el-form-item label="数据类型："> <el-input v-model="form.carrierName" size="mini" placeholder="在此输入承运商"></el-input> </el-form-item> <el-form-item label="模糊搜索："> <el-input v-model="form.vehicleNo" size="mini" placeholder="在此输入关键字"></el-input> </el-form-item> <el-form-item> <input type="button" class="btn-reset" @click="handleSearch" value="重置"> <input type="button" class="btn-ok" @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> <div class="el-message-box__content" style="padding:6px;font-size: 13px;"> <div class="monitor1" v-if="wayBillVisible"> <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-reset" @click="handleSearch" value="重置"> <input type="button" class="btn-ok" @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">{{ 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="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="monitor2" v-if="hzVisible"> <monitor-h-z></monitor-h-z> <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> <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="hzVisible"> <monitor-h-z></monitor-h-z> </div> </div> </div> </div> </template> <script> import $ from 'jquery' import MonitorHZ from './MonitorHZ' import mapApi from '@/api/mapApi' import { mapState } from 'vuex' import $ from 'jquery' import MonitorHZ from './MonitorHZ' import mapApi from '@/api/mapApi' import {mapState} from 'vuex' const ysfsList = [{ value: '全部', label: '全部' }, { value: '公路', label: '公路' }, { value: '铁路', label: '铁路' }, { value: '水路', label: '水路' }] const ztList = [{ value: '全部', label: '全部' }, { value: '全部卸货', label: '全部卸货' }, { value: '在途', label: '在途' }] export default { name: 'MonitorPanel', components: { MonitorHZ }, data() { return { isPanelVisible: false, wayBillVisible: true, hzVisible: false, toggleMonitorStyle: 'right:0px', list: [], total: 0, ysfsList, ztList, form: { transNo: null, carrierName: null, transMode: null, vehicleNo: null, orderState: null, size: 10, current: 1 }, pageSize: 10, current: 1, isWaybillHover: true, isRouteHover: false } }, computed: { ...mapState({ currentCorpType: state => state.currentCorpType, currentCorp: state => state.currentCorp }), layerHelper() { return this.$store.layerHelper } }, watch: { currentCorpType: async function(val) { let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: this.currentCorp, ownerSectorCode: val, size: 10, current: 1 } let datas = await this.handleGetDatas(params) this.list = datas.data.records this.total = datas.data.total }, currentCorp: async function(val) { let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: val, ownerSectorCode: this.currentCorpType, size: 10, current: 1 } let datas = await this.handleGetDatas(params) this.list = datas.data.records this.total = datas.data.total } }, methods: { handleClose(done) { console.log(done) }, async handlePage(page) { console.log(page) let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: this.currentCorp, ownerSectorCode: this.currentCorpType, size: this.pageSize, current: page } let datas = await this.handleGetDatas(params) this.list = datas.data.records this.total = datas.data.total }, handleLocation(item) { window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat) }, toggleMonitorPanel() { let el = $('.btn-stretch') // let cs = 'btn-stretch-active' var rightControl = $('#right-panel') let 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' }) } }, async handleSearch() { // this.list = wayBillData.data // this.total = wayBillData.data.length let params = { transNo: this.form.transNo, carrierName: this.form.carrierName, transMode: this.form.transMode, vehicleNo: this.form.vehicleNo, orderState: this.form.orderState, vehicleStatus: '', orgCode: this.orgCodeStrings, size: this.pageSize, current: this.current } let datas = await this.handleGetDatas(params) this.list = datas.data.pager.records this.total = datas.data.pager.total }, async handleInit() { // this.list = wayBillData.data // this.total = wayBillData.data.length let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: this.currentCorp, ownerSectorCode: this.currentCorpType, size: 10, current: 1 } let datas = await this.handleGetDatas(params) this.list = datas.data.records this.total = datas.data.total }, async handleSetOrgCodeStrings() { let orgCodes = await this.handleGetOrgCode() let orgCodesString = '' for (let i = 0; i < orgCodes.data.length; i++) { let org = orgCodes.data[i] orgCodesString += org.orgCode + ',' } this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1) }, async handleGetOrgCode() { let params = { orgSector: this.currentCorpType, serviceType: '' } let datas = await mapApi.getOrganizationompanyList(params) return datas }, async handleGetDatas(params) { let datas = await mapApi.getTransOrderlist(params) return datas }, showHZ() { this.wayBillVisible = true this.hzVisible = false this.isWaybillHover = true this.isRouteHover = false }, showWayBill() { this.hzVisible = true this.wayBillVisible = false this.isWaybillHover = false this.isRouteHover = true } }, mounted() { this.handleInit() } export default { name: 'MonitorPanel', components: {MonitorHZ}, data() { return { isPanelVisible: false, wayBillVisible: true, hzVisible: false, toggleMonitorStyle: 'right:0px', list: [], total: 0, 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 } }, computed: { ...mapState({ currentCorpType: state => state.currentCorpType, currentCorp: state => state.currentCorp }), layerHelper() { return this.$store.layerHelper } }, watch: { currentCorpType: async function (val) { let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: this.currentCorp, ownerSectorCode: val, size: 10, current: 1 } let datas = await this.handleGetDatas(params) console.log(datas) // this.list = datas.data.records // this.total = datas.data.total }, currentCorp: async function (val) { let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: val, ownerSectorCode: this.currentCorpType, size: 10, current: 1 } let datas = await this.handleGetDatas(params) console.log(datas) // this.list = datas.data.records // this.total = datas.data.total } }, 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 } }, async handlePage(page) { console.log(page) let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: this.currentCorp, ownerSectorCode: this.currentCorpType, size: this.pageSize, current: page } let datas = await this.handleGetDatas(params) console.log(datas) // this.list = datas.data.records // this.total = datas.data.total }, handleLocation(item) { window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat) }, toggleMonitorPanel() { let el = $('.btn-stretch') // let cs = 'btn-stretch-active' var rightControl = $('#right-panel') let 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' }) } }, async handleSearch() { // this.list = wayBillData.data // this.total = wayBillData.data.length let params = { transNo: this.form.transNo, carrierName: this.form.carrierName, transMode: this.form.transMode, vehicleNo: this.form.vehicleNo, orderState: this.form.orderState, vehicleStatus: '', orgCode: this.orgCodeStrings, size: this.pageSize, current: this.current } let datas = await this.handleGetDatas(params) console.log(datas) // this.list = datas.data.pager.records // this.total = datas.data.pager.total }, async handleInit() { // this.list = wayBillData.data // this.total = wayBillData.data.length let params = { transNo: '', carrierName: '', transMode: '', vehicleNo: '', orderState: '', vehicleStatus: '', orgCode: this.currentCorp, ownerSectorCode: this.currentCorpType, size: 10, current: 1 } let datas = await this.handleGetDatas(params) console.log(datas) // this.list = datas.data.records // this.total = datas.data.total }, async handleSetOrgCodeStrings() { let orgCodes = await this.handleGetOrgCode() let orgCodesString = '' for (let i = 0; i < orgCodes.data.length; i++) { let org = orgCodes.data[i] orgCodesString += org.orgCode + ',' } this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1) }, async handleGetOrgCode() { let params = { orgSector: this.currentCorpType, serviceType: '' } let datas = await mapApi.getOrganizationompanyList(params) return datas }, async handleGetDatas(params) { // let datas = await mapApi.getTransOrderlist(params) let datas = params return datas }, showHZ() { this.wayBillVisible = true this.hzVisible = false this.isWaybillHover = true this.isRouteHover = false }, showWayBill() { this.hzVisible = true this.wayBillVisible = false this.isWaybillHover = false this.isRouteHover = true } }, mounted() { this.handleInit() } } </script> <style lang="less"> #right-panel { width: 323px; height: 573px; position: absolute; right: 10px; top: 10px; #right-panel { width: 323px; 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{ float:right; margin-right:10px; width: 4rem; background-color: lightblue; color: white; border: 1px solid white; } .btn-reset{ float:right; margin-right:10px; width: 4rem; background-color: orange; color: white; border: 1px solid white; } .btn-ok { float: right; margin-right: 10px; width: 4rem; background-color: lightblue; color: white; border: 1px solid white; } .component-fade-enter-active, .component-fade-leave-active { transition: opacity .5s ease; } .btn-reset { float: right; margin-right: 10px; width: 4rem; background-color: orange; color: white; border: 1px solid white; } .component-fade-enter, .component-fade-leave-to /* .component-fade-leave-active for below version 2.1.8 */ { opacity: 0; } .component-fade-enter-active, .component-fade-leave-active { transition: opacity .5s ease; } .B-TMD-table-icons ul li { float: left; margin: 10px; list-style: none; } .component-fade-enter, .component-fade-leave-to /* .component-fade-leave-active for below version 2.1.8 */ { opacity: 0; } .B-TMD-table-list { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .B-TMD-table-icons ul li { float: left; margin: 10px; list-style: none; } .B-TMD-table-list-title { width: 100%; height: 50px; } .B-TMD-table-list { 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; } .B-TMD-table-list-title { width: 100%; height: 50px; } .B-TMD-table-list-title-y-adress { width: 16px; height: 22px; display: block; background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 -90px; cursor: pointer; } .B-TMD-table-list-head { width: 160px; float: left; padding-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .B-TMD-table-list-title-y-car { background: url('/assets/images/map-page/icon/icon.png') no-repeat -45px 0; width: 38px; height: 38px; display: block; margin-top: 2px !important; } .B-TMD-table-list-title-y-adress { width: 16px; height: 22px; display: block; background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 -90px; cursor: pointer; } .B-TMD-table-list-title-y-car-offline { background: url('/assets/images/map-page/icon/icon.png') no-repeat -90px 0; width: 38px; height: 38px; display: block; margin-top: 2px !important; } .B-TMD-table-list-title-y-car { background: url('/assets/images/map-pages/icon/icon.png') no-repeat -45px 0; width: 38px; height: 38px; display: block; margin-top: 2px !important; } .B-TMD-table-list-title-y-car-warning { background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 0; width: 38px; height: 38px; display: block; margin-top: 2px !important; } .B-TMD-table-list-title-y-car-offline { background: url('/assets/images/map-pages/icon/icon.png') no-repeat -90px 0; width: 38px; height: 38px; display: block; margin-top: 2px !important; } .btn-stretch { width: 20px; height: 28px; background: url('/assets/images/map-page/icon/icon.png') no-repeat -408px 0; margin-left: 10px; margin-top: 3px; cursor: pointer; .B-TMD-table-list-title-y-car-warning { background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 0; width: 38px; height: 38px; display: block; margin-top: 2px !important; } transform: rotateY(180deg); transform-origin: 50% 50%; transition: transform 1s linear; } .btn-stretch { width: 20px; 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-active { background: url('/assets/images/map-page/icon/icon.png') no-repeat -440px 0; } transform: rotateY(180deg); transform-origin: 50% 50%; transition: transform 1s linear; } .panel-tab { position: absolute; left: 0; height: 120px; top: 0; width: 40px; z-index: 500; background-color: #030D2E; background: url('/assets/images/map-page/icon/caidan.png') no-repeat; } .btn-stretch-active { background: url('/assets/images/map-pages/icon/icon.png') no-repeat -440px 0; } .B-TMT-tab-div { width: 29px; height: 29px; margin-left: 3px; margin-top: 10px; cursor: pointer; :hover { cursor: pointer; // background: url(""); } } .panel-tab { position: absolute; left: 0; height: 120px; top: 0; width: 40px; z-index: 500; background-color: #030D2E; background: url('/assets/images/map-pages/icon/caidan.png') no-repeat; } .B-TMT-tab-waybill { width: 29px !important; height: 29px !important; margin-top: 0 !important; margin-left: 0 !important; background: url('/assets/images/map-page/icon/icon.png') no-repeat -320px 0; } .B-TMT-tab-div { width: 29px; height: 29px; margin-left: 3px; margin-top: 10px; cursor: pointer; .B-TMT-tab-route { width: 20px; height: 19px; margin-left: 5px; margin-top: 6px; background: url('/assets/images/map-page/icon/icon.png') no-repeat -169px 0; } :hover { cursor: pointer; // background: url(""); } } .B-TMT-tab-waybill { width: 29px !important; height: 29px !important; margin-top: 0 !important; margin-left: 0 !important; background: url('/assets/images/map-pages/icon/icon.png') no-repeat -320px 0; } .B-TMT-tab-route { width: 20px; height: 19px; margin-left: 5px; margin-top: 6px; background: url('/assets/images/map-pages/icon/icon.png') no-repeat -169px 0; } .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover { width: 29px !important; height: 29px !important; margin-top: 0 !important; margin-left: -1px !important; background: url('/assets/images/map-pages/icon/icon.png') no-repeat -361px 0 !important; } .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover { width: 32px !important; height: 29px !important; margin-top: 0 !important; margin-left: -1px !important; background: url('/assets/images/map-pages/icon/icon.png') no-repeat -197px 0 !important; } .panel-tab ul { list-style: none; } .panel-tab ul li { height: 30px; } .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; } .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover { width: 29px !important; height: 29px !important; margin-top: 0 !important; margin-left: -1px !important; background: url('/assets/images/map-page/icon/icon.png') no-repeat -361px 0 !important; } .panel_searchTotal { font-size: 12px; float: right; } .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover { width: 32px !important; height: 29px !important; margin-top: 0 !important; margin-left: -1px !important; background: url('/assets/images/map-page/icon/icon.png') no-repeat -197px 0 !important; } .panel_header { // background-color: #030D2E; padding: 7px 15px 3px 20px; } .panel-tab ul { list-style: none; } .panel_title { font-size: 12px; margin: 0px; padding: 0px; color: #78c4ff; font-weight: bold; } .panel-tab ul li { height: 30px; } .el-message-box__content { background-color: transparent; } .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; } .search-form .el-form-item { margin: 0px; } .panel_searchTotal { font-size: 12px; float: right; } .search-form .el-icon-search { display: grid; line-height: 30px; font-size: 18px; } .panel_header { // background-color: #030D2E; padding: 7px 15px 3px 20px; } .search-panel { border: #07325B; background-color: #07325B !important; margin-top: 0px; .panel_title { font-size: 12px; margin: 0px; padding: 0px; color: #78c4ff; font-weight: bold; } .el-input__inner { border-radius: 0px !important; background-color: #061e51 !important; } } .el-message-box__content { background-color: transparent; } input::-webkit-input-placeholder { color: #569ee1; } .search-form .el-form-item { margin: 0px; } input::-moz-input-placeholder { color: #569ee1; } .search-form .el-icon-search { display: grid; line-height: 30px; font-size: 18px; } input::-ms-input-placeholder { color: #569ee1; } .search-panel { border: #07325B; background-color: #07325B !important; margin-top: 0px; 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); } .el-input__inner { border-radius: 0px !important; background-color: #061e51 !important; } } .search-result { margin: 5px 0px 0px 0px; padding: 0px; border: #051842; height: 290px; overflow-y: scroll; background-color: transparent !important; margin-bottom: -8px !important; } input::-webkit-input-placeholder { color: #569ee1; } .offline { color: #64778B; } input::-moz-input-placeholder { color: #569ee1; } .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; } input::-ms-input-placeholder { color: #569ee1; } .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; } 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); } .footer-page { position: absolute; background-color: transparent !important; bottom: 10px !important; margin-left: 0px; border: none; .search-result { margin: 5px 0px 0px 0px; padding: 0px; border: #051842; height: 290px; overflow-y: scroll; background-color: transparent !important; margin-bottom: -8px !important; } .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; } .offline { color: #64778B; } .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; } .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; } .el-pager li.active { border-color: #25AECD; background-color: rgba(38, 222, 253, 0.3); color: #e4e8f1; } .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; } .el-pager li:hover { border-color: #25AECD; background-color: rgba(38, 222, 253, 0.3); color: #34e0ff; } .footer-page { position: absolute; background-color: transparent !important; bottom: 10px !important; margin-left: 0px; border: none; .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; } .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; } .btn-next { background-color: transparent; border: 1px solid #25AECD; color: #e4e8f1; } } } .el-pager li.active { border-color: #25AECD; background-color: rgba(38, 222, 253, 0.3); color: #e4e8f1; } ::-webkit-scrollbar { width: 7px; height: 5px !important; } .el-pager li:hover { border-color: #25AECD; background-color: rgba(38, 222, 253, 0.3); color: #34e0ff; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #0661AE; border: 1px solid transparent; } .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-track { /*滚动条里面轨道*/ // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0px; background: #0E3565; } ::-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; .selectFrom { color: #061e51; border: 1px solid #061e51 !important; background: #dcc805 !important; .el-select-dropdown__list { background: #061e51 !important; } .el-select-dropdown__list { background: #061e51 !important; } .el-select-dropdown__item { color: #949494; 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; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { color: #fff; background: #061e51 !important; } .popper__arrow { background-color: #061e51 !important; } } } .popper__arrow { background-color: #061e51 !important; } } } </style>
