默认的两个组件都加载成功！

wangrui

2020-12-16 3f519e47a8248ca240aba8e4459f047bb65bf5af

默认的两个组件都加载成功！

 src/App.vue

@@ -30,5 +30,7 @@
  color: #2c3e50;
  padding: 0px;
  margin: 0px;

  text-align: left;
}
</style>

 src/components/LayerController/LayerController.vue

@@ -14,9 +14,9 @@
        </div>
      </div>
    </div>
    <div class="body" id="panelContent">
    <div class="bodyBox" id="panelContent">
      <div id="panelInnerContent" style="height: auto; overflow: hidden;">
        
        fdsafdsaf
          
      </div>
    </div>
@@ -29,6 +29,8 @@
import '@assets/css/map/magic.min.css'
import presets from './layerControllerPresets'
import $ from 'jquery'

import iconSetting from '@/assets/images/map-pages/icon/setting.png'

export default {
  name: 'LayerController',
@@ -49,6 +51,9 @@
  },
  data() {
    return {
      icons:{
        setting:iconSetting
      },
      panelSwitch: {
        main: true // 主窗口
      }
@@ -147,7 +152,7 @@
    height: 22px;
    margin-top: 4px;
    margin-left: 2px;
    background: url(/assets/images/map-page/icon/setting.png);
    background-image: url(/assets/images/map-pages/icon/setting.png);
  }
  .titleText{
    float: left;
@@ -157,6 +162,7 @@
    line-height: 20px;
    font-weight: bold;
    margin-top: 6px;
    text-align: left;
    filter: brightness(100%);
    text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
  }
@@ -189,6 +195,14 @@
      color: white;
    }
  }

  .bodyBox{
    background-color: rgba(0x04, 0x52, 0x7f, 0.6);
    border: 1px solid #10488c;
    margin-top: -1px;
    height: auto;
  }

  .switchHeadUp{
    width: 22px;
    height: 16px;
@@ -196,7 +210,7 @@
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    background: url(/assets/images/map-page/icon/xljt1.png);
    background-image: url(/assets/images/map-pages/icon/xljt1.png);
    transform: rotateX(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
@@ -221,22 +235,22 @@
    position: absolute;
  }
  .horn-tl{
    background: url(/assets/images/map-page/cosmetics/horn_tl.png) center center no-repeat;
    background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
    left: -1px;
    top: -1px;
  }
  .horn-tr{
    background: url(/assets/images/map-page/cosmetics/horn_tr.png) center center no-repeat;
    background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
    right: -1px;
    top: -1px;
  }
  .horn-bl{
    background: url(/assets/images/map-page/cosmetics/horn_bl.png) center center no-repeat;
    background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
    left: -1px;
    bottom: -1px;
  }
  .horn-br{
    background: url(/assets/images/map-page/cosmetics/horn_br.png) center center no-repeat;
    background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
    right: -1px;
    bottom: -1px;
  }

 src/components/panel/MonitorHZ.vue

New file
@@ -0,0 +1,154 @@
<template>
    <div class="monitorHz">
        <el-card class="search-panel" style="background: #07325b;">
            <el-form ref="form" :model="form" label-width="80px" class="search-form">
                <el-form-item label="载具号：">
                    <el-input v-model="form.name" placeholder="在此输入载具号"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-row>
                            <el-form-item label="时间：">
                                <el-date-picker
                                        v-model="form.name"
                                        type="date"
                                        style="width: 118px;"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item>
                                <el-date-picker
                                        v-model="form.name"
                                        type="date"
                                        style="width: 118px;"
                                        placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                    </el-col>
                    <el-col :span="2">
                        <div class="B-TMD-inp-button" @click="handleSearch"></div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="search-result" style="height:360px;">
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
                <el-row :gutter="20">
                    <el-col :span="2" style="padding-left: 15px">
                        {{ index+1 }}、
                    </el-col>
                    <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        {{ item.processorName }}
                        <br/>
                        {{ item.startAddress }}
                    </el-col>
                    <el-col :span="6">
                        <a class="el-icon-location" style="font-size: 18px;margin-left:5px"
                           @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a>
                        <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    :current-page.sync="currentPage1"
                    @current-change="handleSearch"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="1000"
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'MonitorAreaTips',
        components: {},
        data() {
            return {
                isPanelVisible: false,
                total: 0,
                list: [],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            handleClose(done) {
                console.log(done)
            },
            handleClick(tab, event) {
                console.log(tab, event)
            },
            handleSearch() {

            }
        },
        mounted() {
            this.handleSearch()
        }
    }
</script>

<style lang="less">
    .monitorHz {
        .el-message-box__content {
            background-color: #030D2E;
        }

        .search-form .el-form-item {
            margin: 0px;
        }

        .search-form .el-icon-search {
            display: grid;
            line-height: 30px;
            font-size: 18px;
        }

        .search-panel {
            border: #07325B;
            background-color: #07325B;
        }

        .search-result {
            margin: 5px 0px 0px 0px;
            padding: 0px;
            border: #051842;
            overflow-y: scroll;
            background-color: #051842;
        }

        .B-TMD-table-list {
            margin-top: 10px;
            text-align: left;
            padding-left: 10px;
            color: #328EB5;
            width: 100%;
            line-height: 25px;
            background-color: #0B3B6D;
        }

        .footer-page {
            position: absolute;
            bottom: 5px;
        }
    }
</style>

 src/components/panel/MonitorPanel.vue

New file
@@ -0,0 +1,799 @@
<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>
        <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-select size="mini" v-model="form.transMode" popper-class="selectFrom"
                                               placeholder="全部">
                                        <el-option
                                                v-for="item in ysfsList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="发运时间：">
                                    从
                                    <el-date-picker
                                            v-model="form.fysj"
                                            type="date"
                                            style="width: 110px;"
                                            placeholder="选择日期"
                                            :popper-append-to-body="false">
                                    </el-date-picker>
                                    到现在
                                </el-form-item>
                                <el-row :gutter="20">
                                    <el-col :span="17">
                                        <el-row>
                                            <el-form-item label="载具号：">
                                                <el-input v-model="form.vehicleNo" size="mini"
                                                          placeholder="在此输入载具号" class="customInput"></el-input>
                                            </el-form-item>
                                        </el-row>
                                        <el-row>
                                            <el-form-item label="状态：">
                                                <el-select size="mini" v-model="form.orderState"
                                                           popper-class="selectFrom" placeholder="全部"
                                                           class="customInput">
                                                    <el-option
                                                            v-for="item in ztList"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="B-TMD-inp-button" @click="handleSearch"></div>
                                    </el-col>
                                </el-row>
                            </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>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</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="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'

    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()
        }
    }
</script>

<style lang="less">
        #right-panel {
            width: 323px;
            height: 573px;
            position: absolute;
            right: 10px;
            bottom: 10px;

            .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-form-item__label {
                color: rgb(52, 224, 255);
            }

            .el-input__inner::placeholder {
                color: #9a9494;
            }

            /* 谷歌 */

            .el-input__inner::-webkit-input-placeholder {
                color: #9a9494;
            }

            /* 火狐 */

            .el-input__inner:-moz-placeholder {
                color: #9a9494;
            }

            /*ie*/

            .el-input__inner:-ms-input-placeholder {
                color: #9a9494;
            }

            .warning {
                color: #dcc805;
            }

            #plateNumber_n a {
                color: rgb(52, 224, 255);
            }

            .offline {
                color: #9a9494;
            }

            .customInput {
                width: 118px;
            }

            .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;
            }

            .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-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-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-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-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-warning {
                background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 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;

                transform: rotateY(180deg);
                transform-origin: 50% 50%;
                transition: transform 1s linear;
            }

            .btn-stretch-active {
                background: url('/assets/images/map-page/icon/icon.png') no-repeat -440px 0;
            }

            .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;
            }

            .B-TMT-tab-div {
                width: 29px;
                height: 29px;
                margin-left: 3px;
                margin-top: 10px;
                cursor: pointer;
                :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-page/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-page/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-page/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-page/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;
            }

            .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-input-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>

 src/main.js

@@ -6,6 +6,7 @@
import echarts from 'echarts'
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false


 src/store/index.js

@@ -6,6 +6,8 @@

export default new Vuex.Store({
  state: {
    currentCorp: null,
    currentCorpType: null,
    L: null,
    map: null, // 实例化的map
    layerHelper: {}, // 图层控制器实现助手程序

 src/views/MapTemplate.vue

@@ -2,6 +2,7 @@
  <div class="full-screen">
        <div id="map" ref="rootmap"></div>
        <sgis-layer-controller :preset="'warningPreset'"></sgis-layer-controller>
        <monitor-panel></monitor-panel>
  </div>
</template>

@@ -9,11 +10,12 @@
import 'leaflet/dist/leaflet.css'
import Sgis from '@src/Sgis'
import SgisLayerController from '@components/LayerController/LayerController'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'MapTemplate',
  components: {SgisLayerController, },
  components: {SgisLayerController, MonitorPanel},
  datas:{
      ...mapState("/",{})
  },