校园-江西科技师范大学-前端
shuishen
2023-12-05 d1472f024ff3b3ef426724359c175a36ee21dc6c
校园切换方式更换
5 files modified
149 ■■■■ changed files
src/components/mobileCortrolButtom/index.vue 9 ●●●●● patch | view | raw | blame | history
src/components/mobileCortrolSearch/index.vue 75 ●●●● patch | view | raw | blame | history
src/components/mobilemap/index.vue 48 ●●●●● patch | view | raw | blame | history
src/styles/divforms/divForms.scss 13 ●●●● patch | view | raw | blame | history
src/styles/esri/index.scss 4 ●●●● patch | view | raw | blame | history
src/components/mobileCortrolButtom/index.vue
@@ -4,7 +4,7 @@
mobileCortrolButtom
        -->
        <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> -->
        <div class="m-l-inbut" v-show="true">
        <div class="m-l-inbut" v-show="false">
            <!-- <i class="el-icon-s-flag"></i> -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link icons">
@@ -40,10 +40,7 @@
import { getIp, getUsers } from '@/api/mobile/ip/index'
import { getListarc } from '@/api/mobile/public/arc'
import { getActivity } from '@/api/mobile/hd/hd'
const options = {
    url: 'https://js.arcgis.com/4.14/',
    css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
}
import { GCJ02ToWGS84 } from '@/utils/CoordTransform'
export default {
@@ -82,7 +79,7 @@
        ])
    },
    created () {
        this.getStreet()
        // this.getStreet()
    },
    mounted () {
        // eslint-disable-next-line no-undef
src/components/mobileCortrolSearch/index.vue
@@ -4,20 +4,13 @@
    -->
    <div class="m-left-mobileCortrolSearch">
        <div class="m-left-SearchMain">
            <el-input
                placeholder="请输入内容"
                v-model="input"
                clearable
                size="small"
                class="m-left-S-input"
            >
                <el-button
                    slot="append"
                    class="iconSearch"
                    icon="el-icon-search icon"
                    @click="search"
                ></el-button>
            </el-input>
            <slot name="selectCampusBox"></slot>
            <div class="m-left-input-box">
                <el-input placeholder="请输入内容" v-model="input" clearable size="small" class="m-left-S-input">
                    <el-button slot="append" class="iconSearch" icon="el-icon-search icon" @click="search"></el-button>
                </el-input>
            </div>
        </div>
    </div>
</template>
@@ -52,31 +45,73 @@
.m-left-mobileCortrolSearch {
    width: 100%;
    position: fixed;
    top: 0;
    top: 10px;
    // left: 20px;
    z-index: 200;
    .m-left-SearchMain {
        margin: 0 auto;
        width: 60%;
        margin: 0 2%;
        width: 96%;
        position: relative;
        z-index: 1;
        top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        .m-left-input-box {
            flex: 1;
            ::v-deep(input) {
                border-radius: 0 !important;
                border: none !important;
                background-color: #f1f1f1;
            }
        }
        &>div:first-child {
            border-radius: 4px 0 0 4px !important;
            .m-left-S-input {
                border-radius: 4px 0 0 4px !important;
                ::v-deep(input) {
                    border-radius: 4px 0 0 4px !important;
                }
            }
        }
        .m-left-S-input {
            border: none;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            ::v-deep(input) {
                flex: 1 !important;
            }
            ::v-deep(.el-input-group__append) {
                width: 0 !important;
                border: none !important;
                border-radius: 0 !important;
                button {
                    border-radius: 0 4px 4px 0 !important;
                }
            }
        }
        .iconSearch {
            width: 30px;
            height: 30px;
            width: 32px;
            height: 32px;
            padding-top: 0;
            padding-bottom: 0;
            background-color: rgb(33, 150, 243);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none !important;
            font-size: 24px;
            color: #fff;
        }
src/components/mobilemap/index.vue
@@ -1,6 +1,25 @@
<template>
    <div class="mobile-map-container">
        <div id="sceneview"></div>
        <mobileCortrolSearch ref="mobileCortrolSearch">
            <template slot="selectCampusBox">
                <div class="select-campus-box" v-if="campusData.length > 1">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link icons">
                            {{ campusData.find(item => item.dictKey == campusValue).dictValue }} <i
                                class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item, index) in campusData" :key="index" :command="item">
                                {{ item.dictValue }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </template>
        </mobileCortrolSearch>
        <!-- 随地图改变图标弹窗↓ -->
        <div id="mobile-map_popup_content"></div>
        <mobileWindow ref="MobileWindow"></mobileWindow>
@@ -12,7 +31,6 @@
        <mobileCortrol ref="mobileCortrol"></mobileCortrol>
        <mobileCortrolButtom ref="mobileCortrolButtom" :mapCenter="mapCenter" :frislayertHeight="frislayertHeight">
        </mobileCortrolButtom>
        <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
        <!-- 控制↑ -->
        <!-- 控制大弹窗的弹窗 -->
        <!-- v-if="mBigPopupAfter" -->
@@ -37,6 +55,7 @@
import axios from 'axios'
import { mapGetters } from 'vuex'
import { getBuildClock } from '@/api/mobile/buildsClock/buildsClock' // 楼栋详情
import { getListarc } from '@/api/mobile/public/arc'
import OlView from "ol/View.js"
@@ -132,6 +151,7 @@
                height: 0
            },
            map2D: this.$store.state.openlayerData.openlayers.map2D,
            campusData: [],
            campusValue: ''
        }
    },
@@ -160,6 +180,10 @@
                })
            }
        }
    },
    created () {
        this.getStreet()
    },
    mounted () {
@@ -405,6 +429,17 @@
        setCampusValue (val) {
            this.campusValue = val
        },
        handleCommand (command) {
            this.setCampusValue(command.dictKey)
        },
        getStreet () {
            getListarc().then((res) => {
                this.setCampusValue(res.data.data[0].dictKey)
                this.campusData = res.data.data
            })
        }
    }
}
@@ -428,6 +463,17 @@
    /* overflow: hidden; */
}
.select-campus-box {
    width: 28%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #f1f1f1;
    border-right: 1px solid #C0C4CC;
    box-sizing: border-box;
    z-index: 299;
}
.esri-view-surface--inset-outline:focus::after {
    outline: none !important;
}
src/styles/divforms/divForms.scss
@@ -282,8 +282,17 @@
}
.el-dropdown-menu.el-popper {
    background-color: #29baf1 !important;
    border: 1px solid #29baf1 !important;
    padding: 0 !important;
    background-color: #2196f3 !important;
    border: 1px solid #2196f3 !important;
    .popper__arrow {
        border-bottom-color: #2196f3 !important;
        &::after {
            border-bottom-color: #2196f3 !important;
        }
    }
    li {
        color: #fff !important;
src/styles/esri/index.scss
@@ -15,4 +15,8 @@
    button {
        background-color: #2196f3 !important;
    }
}
#sceneview .ol-zoom {
    top: 52px !important;
}