From 2364c314288f26a4d29b7d22e9baa1e45f43aaeb Mon Sep 17 00:00:00 2001
From: 584911253@qq.com <584911253@qq.com>
Date: 星期日, 26 二月 2023 17:44:45 +0800
Subject: [PATCH] 综合展示样式修改
---
src/views/Synthesis/index.vue | 64 ++++++--
src/components/mapol.vue | 89 +++++++++++-
src/views/maintenance/blackwhiteList.vue | 64 ++++----
src/assets/css/index.css | 13 +
src/views/AuthorizationManagement/roleResAuthorization.vue | 4
src/views/Synthesis/LeftMenu.vue | 12 +
src/assets/img/2dmap.png | 0
src/components/mapsdk.vue | 167 +++++++++++++++++++----
src/assets/img/3dmap.png | 0
9 files changed, 313 insertions(+), 100 deletions(-)
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index f8c93e0..b121af2 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -237,7 +237,8 @@
position: absolute;
z-index: 1024;
margin-top: 15px;
- background: rgba(244, 248, 255, 0.9);
+ background: rgba(244, 248, 255, 1);
+ box-shadow: 0px 0px 6px 2px rgba(244,248,255, 0.85);
border-radius: 5px;
border: 1px solid #DCDFE6;
}
@@ -245,12 +246,12 @@
.secondMenuDiv div {
line-height: 30px;
padding: 10px;
- font-size: 10px;
+ font-size: 2px 0;
font-family: Microsoft YaHei;
font-weight: 400;
-
+ text-align: center;
line-height: 20px;
- min-width: 120px;
+ min-width: 100px;
}
.secondMenuDiv .changeLiStyle {
@@ -258,7 +259,7 @@
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
border: 1px solid #409eff;
/* background: #182E45 */
- /*
+ /*
*/
}
@@ -274,4 +275,4 @@
.ol-scale-line {
display: block !important;
-}
\ No newline at end of file
+}
diff --git a/src/assets/img/2dmap.png b/src/assets/img/2dmap.png
new file mode 100644
index 0000000..855aafd
--- /dev/null
+++ b/src/assets/img/2dmap.png
Binary files differ
diff --git a/src/assets/img/3dmap.png b/src/assets/img/3dmap.png
new file mode 100644
index 0000000..3834651
--- /dev/null
+++ b/src/assets/img/3dmap.png
Binary files differ
diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index a23bc3d..093ac52 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -1,16 +1,32 @@
<template>
<div id="mapol">
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
+ <div style="display: flex">
<div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
+ <div @click="changeMapType" class="changeMapType">
+ <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
+ </div>
</div>
+<!-- <div-->
+<!-- @click="changeMenulayer"-->
+<!-- class="center CenDiv"-->
+<!-- :class="{ center1: centerFlag }"-->
+<!-- >-->
+<!-- <div-->
+<!-- id="cenBg"-->
+<!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
+<!-- ></div>-->
+
+<!-- </div>-->
<div v-show="$store.state.isNaviget" class="sindagis-map-compass">
<span
class="left"
@@ -57,11 +73,15 @@
isActive: true,
isMenuLayer: false,
rotate: 0,
- currentDir: ''
+ currentDir: '',
+ show2DMap:false,
}
},
mounted() {
- this.init2DMap()
+ this.init2DMap();
+ this.$bus.$on('changemapType', (e) => {
+ this.show2DMap = e;
+ });
},
methods: {
init2DMap() {
@@ -85,7 +105,7 @@
}),
controls: defaultControls().extend([
new FullScreen(),
-
+
]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
})
@@ -99,6 +119,21 @@
// $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
});
+ },
+
+ //浜岀淮/涓夌淮鍦板浘鍒囨崲
+ changeMapType(){
+ // debugger
+ this.show2DMap = !this.show2DMap;
+ //浜岀淮
+ if (this.show2DMap){
+ this.$bus.$emit("changemap", 2);
+ }
+ //涓夌淮
+ else {
+ this.$bus.$emit("changemap", 3);
+ }
+ this.$bus.$emit("changemapType", this.show2DMap);
},
changeMenulayer() {
@@ -281,4 +316,36 @@
background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}
+.changeMapType{
+ position: absolute;
+ bottom: 1%;
+ left: calc(1% + 75px);
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 3px 3px 6px #666;
+ border-radius: 5px;
+ background: #fff;
+ cursor: pointer;
+}
+.mapTypeTwo{
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/3dmap.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.mapTypeThree{
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/2dmap.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
</style>
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 220c225..ccab4d6 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -117,11 +117,10 @@
<el-form
:model="comprehensive"
:inline="true"
- label-width="50px"
>
<el-form-item label="鍦板悕:">
<el-input
- style="width: 200px"
+ style="width: 160px"
v-model="comprehensive.name"
></el-input>
</el-form-item>
@@ -141,27 +140,34 @@
align="center"
type="index"
label="搴忓彿"
- width="70px"
/>
- <el-table-column
- prop="name"
- align="center"
- label="瀹氫綅"
- >
+ <el-table-column prop="name" align="center" label="鍦板悕">
<template slot-scope="scope">
<el-button
- @click="handleLocation(scope.$index, scope.row)"
- size="small"
- icon="el-icon-place"
- ></el-button>
+ @click="handleLocation(scope.$index, scope.row)"
+ size="small"
+ >{{scope.row.name}}<i class="el-icon-place" style="padding-left: 5px"></i></el-button>
</template>
</el-table-column>
- <el-table-column
- prop="name"
- align="center"
- label="鍦板悕"
- >
- </el-table-column>
+<!-- <el-table-column-->
+<!-- prop="name"-->
+<!-- align="center"-->
+<!-- label="瀹氫綅"-->
+<!-- >-->
+<!-- <template slot-scope="scope">-->
+<!-- <el-button-->
+<!-- @click="handleLocation(scope.$index, scope.row)"-->
+<!-- size="small"-->
+<!-- icon="el-icon-place"-->
+<!-- ></el-button>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- <el-table-column-->
+<!-- prop="name"-->
+<!-- align="center"-->
+<!-- label="鍦板悕"-->
+<!-- >-->
+<!-- </el-table-column>-->
</el-table>
<div class="pagination_box">
<el-pagination
@@ -169,8 +175,9 @@
@current-change="handleCurrentChange"
:current-page="listData.pageIndex"
:page-sizes="[10, 20, 50, 100]"
+ :pager-count = "3"
:page-size="listData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
+ layout="total, prev, pager, next"
:total="count"
>
</el-pagination>
@@ -242,16 +249,31 @@
</div>
</el-card>
</div>
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
+ <div style="display: flex">
<div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
+ <div @click="changeMapType" class="changeMapType">
+ <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
+ </div>
</div>
+<!-- <div-->
+<!-- @click="changeMenulayer"-->
+<!-- class="center CenDiv"-->
+<!-- :class="{ center1: centerFlag }"-->
+<!-- >-->
+<!-- <div-->
+<!-- id="cenBg"-->
+<!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
+<!-- ></div>-->
+<!-- </div>-->
</div>
</div>
</template>
@@ -359,12 +381,16 @@
children: "children",
label: "label",
}, //鏍戠粦瀹氬璞�
+ show2DMap:false,
};
},
mounted() {
this.init3DMap();
this.$bus.$on("mapChangeBox", (res) => {
this.showChangeBox(res);
+ });
+ this.$bus.$on('changemapType', (e) => {
+ this.show2DMap = e;
});
},
methods: {
@@ -503,8 +529,10 @@
} else if (res.name == "Coord") {
if (res.id == "1") {
this.showCoordLocalBoxDialog = true;
+ this.showToponymicLocalBoxDialog = false;
} else if (res.id == "2") {
this.showToponymicLocalBoxDialog = true;
+ this.showCoordLocalBoxDialog = false;
this.getToponymicData();
}
} else if (res.name == "Analysis") {
@@ -609,10 +637,35 @@
var lon = parseFloat(this.coordFrom.lon);
var lat = parseFloat(this.coordFrom.lat);
var height = parseFloat(this.coordFrom.height);
+ var position = {
+ X: lon,
+ Y: lat,
+ Altitude: 2000,
+ };
+ this.imagePoint = sgworld.Creator.CreateLabel(
+ position,
+ "",
+ SmartEarthRootUrl + "Workers/image/mark.png",
+ {
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ "宸℃鐐�"
+ );
+
sgworld.Navigate.jumpTo({
//璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
+ destination: new Cesium.Cartesian3.fromDegrees(
+ lon,
+ lat,
+ height
+ ),
});
+ // sgworld.Navigate.jumpTo({
+ // //璺宠浆瑙嗚
+ // destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
+ // });
},
//缂撳啿鍖哄垎鏋�
clearBuffer() {
@@ -856,6 +909,20 @@
}
}
},
+ //浜岀淮/涓夌淮鍦板浘鍒囨崲
+ changeMapType(){
+ // debugger
+ this.show2DMap = !this.show2DMap;
+ //浜岀淮
+ if (this.show2DMap){
+ this.$bus.$emit("changemap", 2);
+ }
+ //涓夌淮
+ else {
+ this.$bus.$emit("changemap", 3);
+ }
+ this.$bus.$emit("changemapType", this.show2DMap);
+ },
},
};
</script>
@@ -872,11 +939,12 @@
overflow: hidden;
position: relative;
.toponymicLocalBox {
- width: 750px;
+ width: 350px;
+ //width: 750px;
height: 450x;
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
.bufferBox {
@@ -884,7 +952,7 @@
height: 230px;
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
.coordLocalBox {
@@ -892,7 +960,7 @@
height: 370px;
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
.pathAnalysisBox {
@@ -900,7 +968,7 @@
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
@@ -1026,6 +1094,39 @@
border-radius: 5px;
}
+.changeMapType{
+ position: absolute;
+ bottom: 1%;
+ left: calc(1% + 75px);
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 3px 3px 6px #666;
+ //border: 1px solid rgba(204, 204, 204, 0.76);
+ border-radius: 5px;
+ background: #fff;
+ cursor: pointer;
+}
+.mapTypeTwo{
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/3dmap.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.mapTypeThree{
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/2dmap.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
// .menuSelect .el-input__inner {
// background: rgba(255, 255, 255, 0.2) !important;
// color: white !important;
diff --git a/src/views/AuthorizationManagement/roleResAuthorization.vue b/src/views/AuthorizationManagement/roleResAuthorization.vue
index c7e3af6..f16b18c 100644
--- a/src/views/AuthorizationManagement/roleResAuthorization.vue
+++ b/src/views/AuthorizationManagement/roleResAuthorization.vue
@@ -694,13 +694,13 @@
.content_left_box{
padding: 10px;
width: 20%;
- height: 94%;
+ height: calc(100% - 20px);
border-radius: 5px;
}
.content_box {
padding: 10px;
width: 36%;
- height: 94%;
+ height: calc(100% - 20px);
border-radius: 5px;
}
.divider {
diff --git a/src/views/Synthesis/LeftMenu.vue b/src/views/Synthesis/LeftMenu.vue
index 82ac12e..0df451e 100644
--- a/src/views/Synthesis/LeftMenu.vue
+++ b/src/views/Synthesis/LeftMenu.vue
@@ -71,6 +71,18 @@
name: "鍥惧眰绠＄悊",
css: "twoMenu_imge11",
},
+ {
+ id: "b1",
+ label: "synthesis.split",
+ name: "鍒嗗睆",
+ css: "twoMenu_imge21",
+ },
+ {
+ id: "b9",
+ label: "synthesis.undergroundMode",
+ name: "鍦颁笅妯″紡",
+ css: "twoMenu_imge29",
+ },
],
[
{
diff --git a/src/views/Synthesis/index.vue b/src/views/Synthesis/index.vue
index 47e6c76..73e40e9 100644
--- a/src/views/Synthesis/index.vue
+++ b/src/views/Synthesis/index.vue
@@ -15,6 +15,11 @@
<div class="menuImage" :class="item.class"></div>
</div>
</div>
+ <div class="MenuIcon menu-class" :class="{ lefMenuActive: showMenuFlag == menuItem.id }">
+ <div class="menuDiv" :title="menuItem.name" @click="setMenuChange(menuItem)">
+ <div class="menuImage" :class="menuItem.class"></div>
+ </div>
+ </div>
</div>
<div class="rightContent">
<div class="left_main" :class="{ left_main_show: !openStatus }">
@@ -50,24 +55,25 @@
isActive: false,
showMenuList: [],
menuOption: [
- {
- id: 1,
- name: "鑿滃崟",
- class: "menu_img1",
- show: true,
- },
+ // {
+ // id: 1,
+ // name: "鑿滃崟",
+ // class: "menu_img1",
+ // show: true,
+ // },
{
id: 2,
name: "鍥惧眰",
class: "menu_img2",
- show: false,
+ show: true,
+ // show: false,
},
- {
- id: 3,
- name: "瑙嗗浘",
- class: "menu_img3",
- show: false,
- },
+ // {
+ // id: 3,
+ // name: "瑙嗗浘",
+ // class: "menu_img3",
+ // show: false,
+ // },
{
id: 4,
name: "婕父",
@@ -111,6 +117,12 @@
show: false,
},
],
+ menuItem: {
+ id: 1,
+ name: "鎶樺彔",
+ class: "menu_img1",
+ show: true,
+ },
};
},
watch: {},
@@ -118,9 +130,14 @@
methods: {
//宸︿晶鑿滃崟婊戝姩鏄鹃殣
setMenuChange(res) {
+ if (res.id == this.showMenuFlag){
+ return;
+ }
+ //娓呴櫎鏌ヨ寮圭獥
+ this.$store.state.mapMenuBoolean = false;
+ this.$store.state.mapMenuBoxFlag = "";
//娓呴櫎鍒嗘瀽妯″潡鐨勫叏灞�鍙橀噺
ClearAlayse();
-
switch (res.id) {
case 1:
if (this.showMenuFlag == null) return;
@@ -159,7 +176,6 @@
this.showMenuChange(permsEntity[i], permsEntity);
}
}
-
for (var i in this.menuOption) {
if (this.menuOption[i].show != false) {
this.showMenuList.push(this.menuOption[i]);
@@ -192,6 +208,7 @@
},
mounted() {
// this.$bus.$emit('showLeftMenu', true);
+ window.sgworld.navControl("nav", true);
this.$store.state.mapMenuBoolean = false;
this.$store.state.mapMenuBoxFlag = null;
this.$store.state.mapPopBoolean = false;
@@ -295,9 +312,14 @@
display: flex;
.left_main {
margin: 0;
- width: 255px;
- height: auto;
- transition: width 2s;
+ //width: 255px;
+ width: 130px;
+ padding-bottom: 10px;
+ height: calc(100% - 10px);
+ overflow-y: auto;
+ //height: auto;
+ transition: width 1s;
+ background: #F4F8FF;
}
.right_main {
@@ -346,6 +368,12 @@
border-radius: 5px;
}
}
+
+ .menu-class{
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ }
/deep/.el-loading-spinner i {
color: #1890ff;
}
diff --git a/src/views/maintenance/blackwhiteList.vue b/src/views/maintenance/blackwhiteList.vue
index 3a3419d..80b06c6 100644
--- a/src/views/maintenance/blackwhiteList.vue
+++ b/src/views/maintenance/blackwhiteList.vue
@@ -22,7 +22,9 @@
style="width: 200px"
v-model="queryInfo.ip"
:placeholder="$t('operatManage.BWL.blackListIPHolder')"
- />
+ >
+ <i slot="suffix" class="el-icon-search" @click="queryBlackInfo"></i>
+ </el-input>
</el-form-item>
<!-- <el-form-item-->
<!-- :label="$t('operatManage.BWL.interceptionNumber')"-->
@@ -37,15 +39,15 @@
<!-- </el-form-item>-->
</div>
<div>
- <el-form-item>
- <el-button
- type="primary"
- @click="queryBlackInfo()"
- size="small"
- icon="el-icon-search"
- >{{ $t("operatManage.BWL.search") }}
- </el-button>
- </el-form-item>
+<!-- <el-form-item>-->
+<!-- <el-button-->
+<!-- type="primary"-->
+<!-- @click="queryBlackInfo()"-->
+<!-- size="small"-->
+<!-- icon="el-icon-search"-->
+<!-- >{{ $t("operatManage.BWL.search") }}-->
+<!-- </el-button>-->
+<!-- </el-form-item>-->
<el-form-item>
<el-button
icon="el-icon-edit"
@@ -168,7 +170,9 @@
style="width: 200px"
v-model="queryInfo.ip"
:placeholder="$t('operatManage.BWL.whiteListIPHolder')"
- />
+ >
+ <i slot="suffix" class="el-icon-search" @click="queryWhiteInfo"></i>
+ </el-input>
</el-form-item>
<!-- <el-form-item-->
<!-- :label="$t('operatManage.BWL.interceptionNumber')"-->
@@ -183,21 +187,21 @@
<!-- </el-form-item>-->
</div>
<div>
+<!-- <el-form-item>-->
+<!-- <el-button size="small" type="primary" @click="queryWhiteInfo"-->
+<!-- ><i class="el-icon-search"></i> {{-->
+<!-- $t("operatManage.BWL.search")-->
+<!-- }}</el-button-->
+<!-- >-->
+<!-- </el-form-item>-->
<el-form-item>
<el-button
- @click="resetForm('queryInfo')"
- type="info"
- size="small"
- ><i class="el-icon-delete"></i> {{
- $t("operatManage.BWL.reset")
- }}</el-button
- >
- </el-form-item>
- <el-form-item>
- <el-button size="small" type="primary" @click="queryWhiteInfo"
- ><i class="el-icon-search"></i> {{
- $t("operatManage.BWL.search")
- }}</el-button
+ type="success"
+ size="small"
+ icon="el-icon-edit"
+ v-if="menuStatus.insert"
+ @click="showInsertdialog(2)"
+ >{{ $t("common.append") }}</el-button
>
</el-form-item>
<el-form-item>
@@ -212,12 +216,12 @@
</el-form-item>
<el-form-item>
<el-button
- type="success"
- size="small"
- icon="el-icon-edit"
- v-if="menuStatus.insert"
- @click="showInsertdialog(2)"
- >{{ $t("common.append") }}</el-button
+ @click="resetForm('queryInfo')"
+ type="info"
+ size="small"
+ ><i class="el-icon-delete"></i> {{
+ $t("operatManage.BWL.reset")
+ }}</el-button
>
</el-form-item>
</div>
--
Gitblit v1.9.3