From d1472f024ff3b3ef426724359c175a36ee21dc6c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 05 Dec 2023 15:57:00 +0800
Subject: [PATCH] 校园切换方式更换
---
src/components/mobilemap/index.vue | 48 +++++++++++++++
src/styles/divforms/divForms.scss | 13 +++
src/components/mobileCortrolButtom/index.vue | 9 +--
src/styles/esri/index.scss | 4 +
src/components/mobileCortrolSearch/index.vue | 75 ++++++++++++++++++------
5 files changed, 120 insertions(+), 29 deletions(-)
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index 88dffdb..0e079e3 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/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
diff --git a/src/components/mobileCortrolSearch/index.vue b/src/components/mobileCortrolSearch/index.vue
index 125477a..28bb663 100644
--- a/src/components/mobileCortrolSearch/index.vue
+++ b/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;
}
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index b5675ce..5ba092b 100644
--- a/src/components/mobilemap/index.vue
+++ b/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;
}
diff --git a/src/styles/divforms/divForms.scss b/src/styles/divforms/divForms.scss
index 33f8da3..1921a05 100644
--- a/src/styles/divforms/divForms.scss
+++ b/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;
diff --git a/src/styles/esri/index.scss b/src/styles/esri/index.scss
index 67b785d..64bf65c 100644
--- a/src/styles/esri/index.scss
+++ b/src/styles/esri/index.scss
@@ -15,4 +15,8 @@
button {
background-color: #2196f3 !important;
}
+}
+
+#sceneview .ol-zoom {
+ top: 52px !important;
}
\ No newline at end of file
--
Gitblit v1.9.3