From b49bf267402c81be232ea41aaf038db4f2997375 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期一, 13 十一月 2023 10:42:17 +0800
Subject: [PATCH] 土地管理弹框样式修改
---
src/components/map/viewer1.vue | 349 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 206 insertions(+), 143 deletions(-)
diff --git a/src/components/map/viewer1.vue b/src/components/map/viewer1.vue
index dad96c5..a357ab7 100644
--- a/src/components/map/viewer1.vue
+++ b/src/components/map/viewer1.vue
@@ -3,12 +3,19 @@
<div id="sdkContainer1" style="height: 100%"></div>
<div class="listBox" v-show="!isLand">
<ul>
- <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
+ <li
+ v-for="(item, index) in arr"
+ :key="index"
+ @click="changeLeftMap($event, item, index)"
+ >
{{ item }}
</li>
</ul>
</div>
- <layerTreeTwoScreenRight v-if="layerTreeTwoScreen" id="layerTreeTwoScreen111" />
+ <layerTreeTwoScreenRight
+ v-if="layerTreeTwoScreen"
+ id="layerTreeTwoScreen111"
+ />
<div class="tdInfo" v-if="showTDinfo">
<div class="tdInfo_close" @click="tdInfoClose">脳</div>
<p v-if="dikuanxinxi" class="noInfo">鏆傛棤璇ュ湴鍧椾俊鎭�</p>
@@ -45,7 +52,12 @@
<div v-else class="title">
<li>
浼佷笟
- <el-tooltip class="item" effect="dark" content="鐐瑰嚮鏌ョ湅浼佷笟淇℃伅" placement="bottom">
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="鐐瑰嚮鏌ョ湅浼佷笟淇℃伅"
+ placement="bottom"
+ >
<a @click="showYZCQY"> {{ qysl }}</a>
</el-tooltip>
瀹�
@@ -53,35 +65,104 @@
</div>
</ul>
</div>
- <el-dialog class="aboutDialog" title="浼佷笟淇℃伅" append-to-body width="60%" height="60%" style="overflow: auto"
- :visible.sync="QYbox" :before-close="dialogClose">
- <div class="el-dialog-div">
- <div class="inquire">
- <el-form size="medium" ref="queryForm" :model="queryForm" :inline="true">
- <el-form-item label="鏌ヨ鍐呭" prop="name">
- <el-input v-model="queryForm.content" placeholder="璇疯緭鍏ユ煡璇㈠唴瀹�" />
- </el-form-item>
- <el-form-item>
- <el-button @click="queryInfo('queryForm')" icon="el-icon-search" class="primary">鏌ヨ</el-button>
- </el-form-item>
- </el-form>
+ <div
+ :style="{
+ width: `${size}`,
+ height: `${size}`,
+ transform: `scale(${scale}) translate(${offset},${offset})`,
+ '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
+ '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
+ '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
+ '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
+ }"
+ >
+ <el-dialog
+ class="aboutDialog"
+ title="浼佷笟淇℃伅"
+ append-to-body
+ width="60%"
+ height="60%"
+ style="overflow: auto"
+ :visible.sync="QYbox"
+ :before-close="dialogClose"
+ >
+ <div class="el-dialog-div">
+ <div class="inquire">
+ <el-form
+ size="medium"
+ ref="queryForm"
+ :model="queryForm"
+ :inline="true"
+ >
+ <el-form-item label="鏌ヨ鍐呭" prop="name">
+ <el-input
+ v-model="queryForm.content"
+ placeholder="璇疯緭鍏ユ煡璇㈠唴瀹�"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ @click="queryInfo('queryForm')"
+ icon="el-icon-search"
+ class="primary"
+ >鏌ヨ</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </div>
+ <el-table
+ fit
+ style="width: 100%"
+ :data="tableData"
+ highlight-current-row
+ >
+ <el-table-column type="index" width="50"></el-table-column>
+ <el-table-column
+ property="浼佷笟鍚嶇О"
+ label="浼佷笟鍚嶇О"
+ ></el-table-column>
+ <el-table-column
+ property="浼佷笟绫诲瀷"
+ label="浼佷笟绫诲瀷"
+ ></el-table-column>
+ <el-table-column
+ property="鎴愮珛鏃堕棿"
+ label="鎴愮珛鏃堕棿"
+ ></el-table-column>
+ <el-table-column
+ property="鎵�灞炶涓�"
+ label="鎵�灞炶涓�"
+ ></el-table-column>
+ <el-table-column
+ property="娉曚汉"
+ label="娉曚汉"
+ width="100"
+ ></el-table-column>
+ <el-table-column
+ property="娉ㄥ唽鍦板潃"
+ label="娉ㄥ唽鍦板潃"
+ width="200"
+ ></el-table-column>
+ </el-table>
+ <div
+ slot="footer"
+ class="dialog-footer"
+ style="text-align: center; margin-top: 5px"
+ >
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page.sync="currentPage"
+ :page-size="10"
+ :pager-count="11"
+ layout="total, pager"
+ :total="searchNum"
+ >
+ </el-pagination>
+ </div>
</div>
- <el-table fit style="width: 100%" :data="tableData" highlight-current-row>
- <el-table-column type="index" width="50"></el-table-column>
- <el-table-column property="浼佷笟鍚嶇О" label="浼佷笟鍚嶇О"></el-table-column>
- <el-table-column property="浼佷笟绫诲瀷" label="浼佷笟绫诲瀷"></el-table-column>
- <el-table-column property="鎴愮珛鏃堕棿" label="鎴愮珛鏃堕棿"></el-table-column>
- <el-table-column property="鎵�灞炶涓�" label="鎵�灞炶涓�"></el-table-column>
- <el-table-column property="娉曚汉" label="娉曚汉"></el-table-column>
- <el-table-column property="娉ㄥ唽鍦板潃" label="娉ㄥ唽鍦板潃"></el-table-column>
- </el-table>
- <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 5px">
- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
- :current-page.sync="currentPage" :page-size="10" :pager-count="11" layout="total, pager" :total="searchNum">
- </el-pagination>
- </div>
- </div>
- </el-dialog>
+ </el-dialog>
+ </div>
</div>
</template>
@@ -94,7 +175,17 @@
import Bus from "../tools/Bus";
-let line, line1, handler, handler1, divPoint, divPoint1, dx, activeLi, nLayer, TDLayer, LWLayer;
+let line,
+ line1,
+ handler,
+ handler1,
+ divPoint,
+ divPoint1,
+ dx,
+ activeLi,
+ nLayer,
+ TDLayer,
+ LWLayer;
export default {
name: "viewer1",
components: { layerTreeTwoScreenRight },
@@ -131,7 +222,6 @@
],
tableData: [],
-
queryForm: {
type: "浼佷笟鍚嶇О",
content: "",
@@ -141,9 +231,7 @@
offset: "0%",
};
},
- created() {
-
- },
+ created() {},
computed: {
...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen"]),
},
@@ -184,9 +272,13 @@
this.loadTDGLLayer();
}
}
- }
+ },
},
mounted() {
+ let size = this.detectZoom();
+ this.scale = (100 / size).toFixed(2);
+ this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
+ this.size = size + "%";
this.$nextTick(function () {
let that = this;
let option = {
@@ -244,7 +336,6 @@
}
);
-
window.Viewer1 = sgworld1._Viewer;
Viewer1.shadows = false;
@@ -256,7 +347,6 @@
Viewer1.scene.globe.translucency.frontFaceAlpha = 0.5;
Viewer1.scene.globe.undergroundColor = undefined;
-
this.addEvent();
});
//鍏抽棴寮圭獥
@@ -267,7 +357,6 @@
});
},
methods: {
-
setImageComparison(isStart) {
this.isImage = isStart;
if (!this.isImage) {
@@ -276,7 +365,7 @@
},
destroyImageLayer() {
if (activeLi) {
- activeLi.classList.remove('active');
+ activeLi.classList.remove("active");
activeLi = null;
}
if (nLayer) {
@@ -291,10 +380,10 @@
changeLeftMap(event, item, index) {
let liObj = event.currentTarget;
if (activeLi) {
- activeLi.classList.remove('active');
+ activeLi.classList.remove("active");
activeLi = null;
}
- liObj.classList.add('active');
+ liObj.classList.add("active");
activeLi = liObj;
this.loadImageLayer(item);
},
@@ -313,15 +402,15 @@
//let url = option.url;
//let year = option.year;
let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Shiliang_Lw_2019&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
- let minx = 113.168199 * Math.PI / 180.0;
- let miny = 39.230551 * Math.PI / 180.0;
- let maxx = 118.562362 * Math.PI / 180.0;
- let maxy = 41.294714 * Math.PI / 180.0;
+ let minx = (113.168199 * Math.PI) / 180.0;
+ let miny = (39.230551 * Math.PI) / 180.0;
+ let maxx = (118.562362 * Math.PI) / 180.0;
+ let maxy = (41.294714 * Math.PI) / 180.0;
let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
let tilingScheme = new Cesium.GeographicTilingScheme({
rectangle: rectangle,
numberOfLevelZeroTilesX: 2,
- numberOfLevelZeroTilesY: 1
+ numberOfLevelZeroTilesY: 1,
});
var dx = {
url: paramUrl,
@@ -332,11 +421,14 @@
},
ny: function (imageryProvider, x, y, level) {
return (2 << (level - 1)) + y;
- }
- }
+ },
+ },
};
var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
- let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
+ let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
+ alpha: 1,
+ brightness: 1.0,
+ });
Viewer1.imageryLayers.add(imageLayer, 3);
return imageLayer;
},
@@ -345,15 +437,15 @@
//let url = option.url;
//let year = option.year;
let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
- let minx = 113.168199 * Math.PI / 180.0;
- let miny = 39.230551 * Math.PI / 180.0;
- let maxx = 118.562362 * Math.PI / 180.0;
- let maxy = 41.294714 * Math.PI / 180.0;
+ let minx = (113.168199 * Math.PI) / 180.0;
+ let miny = (39.230551 * Math.PI) / 180.0;
+ let maxx = (118.562362 * Math.PI) / 180.0;
+ let maxy = (41.294714 * Math.PI) / 180.0;
let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
let tilingScheme = new Cesium.GeographicTilingScheme({
rectangle: rectangle,
numberOfLevelZeroTilesX: 2,
- numberOfLevelZeroTilesY: 1
+ numberOfLevelZeroTilesY: 1,
});
var dx = {
url: paramUrl,
@@ -364,11 +456,14 @@
},
ny: function (imageryProvider, x, y, level) {
return (2 << (level - 1)) + y;
- }
- }
+ },
+ },
};
var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
- let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
+ let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
+ alpha: 1,
+ brightness: 1.0,
+ });
Viewer1.imageryLayers.add(imageLayer, 2);
return imageLayer;
},
@@ -396,7 +491,6 @@
true,
""
);
-
},
addEvent() {
let type = 0;
@@ -434,10 +528,10 @@
axios
.get(
"http://10.10.4.115:8022/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
- p.lon +
- "&lat=" +
- p.lat +
- "&geom=true&requesttype=json"
+ p.lon +
+ "&lat=" +
+ p.lat +
+ "&geom=true&requesttype=json"
)
.then((response) => {
let center = { lon: 0, lat: 0 };
@@ -482,7 +576,7 @@
axios
.get(
"http://10.10.4.115:8022//poisearch/guihuacon/getInfo?ydbm=" +
- response.data.NO
+ response.data.NO
)
.then(
(info) => {
@@ -518,10 +612,10 @@
}
try {
this.ydlx = data.yongdishuju["ydlxmc"];
- } catch (e) { }
+ } catch (e) {}
try {
this.cyfx = data.yongdishuju["cyfx"];
- } catch (e) { }
+ } catch (e) {}
try {
// this.crzt = response.data["ZT"];
switch (response.data["ZT"]) {
@@ -532,28 +626,28 @@
this.crzt = "鏈嚭璁�";
break;
}
- } catch (e) { }
+ } catch (e) {}
try {
this.ydmj = parseFloat(
"" + data.yongdishuju["ydmj"]
).toFixed(0);
- } catch (e) { }
+ } catch (e) {}
try {
this.crnx = data.churangxinxi["crnx"];
- } catch (e) { }
+ } catch (e) {}
try {
this.crnf = data.churangxinxi["crnf"];
- } catch (e) { }
+ } catch (e) {}
try {
this.rjl = data.yongdishuju["rjl"];
- } catch (e) { }
+ } catch (e) {}
try {
this.jzxg = data.yongdishuju["jzxg"];
- } catch (e) { }
+ } catch (e) {}
try {
this.jzmd = data.yongdishuju["jzmd"];
- } catch (e) { }
- } catch (e) { }
+ } catch (e) {}
+ } catch (e) {}
},
(info) => {
this.$notify.error({
@@ -569,7 +663,6 @@
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
},
dialogClose() {
this.queryForm.content = "";
@@ -882,21 +975,13 @@
this.qysl = 0;
this.ydbm = "";
this.ydlx = "";
-
this.cyfx = "";
-
this.crzt = "";
-
this.ydmj = "";
-
this.crnx = "";
-
this.crnf = "";
-
this.rjl = "";
-
this.jzxg = "";
-
this.jzmd = "";
},
//鍒濆鍖栧脊绐椾簨浠�
@@ -1073,22 +1158,20 @@
}
.noInfo {
- margin-top: 30px;
- margin-left: 20px;
- width: 150px;
+ margin: 30px 20px 20px;
+ width: 200px;
+ text-align: center;
}
.tdInfo {
position: absolute;
z-index: 999;
- top: 20%;
- /* left: 35%; */
+ top: 15%;
right: 0%;
transform: translateX(50%);
- padding-top: 20px;
- width: 401px;
- height: 549px;
- box-sizing: border-box;
+ padding: 20px 0;
+ /* height: 529px; */
+ /* box-sizing: border-box; */
background: rgba(14, 50, 143, 0.85);
border: 1px solid #205fbc;
box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38);
@@ -1098,20 +1181,15 @@
}
.tdInfo .title {
- width: 378px;
- height: 30px;
background-image: url("~@/assets/img/new/tdgltitle.png");
background-size: 100% 100%;
- margin: 0 auto;
}
.tdInfo .title li {
margin-left: 32px;
- /* width: 78px; */
line-height: 30px;
font-size: 18px;
font-weight: bold;
- color: #ffffff;
background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -1120,12 +1198,16 @@
.content1,
.content2,
.content3 {
- width: 342px;
+ /* width: 100%; */
box-sizing: border-box;
- margin-left: 42px;
+ /* margin-left: 42px; */
+ min-width: 220px;
+ max-width: 280px;
+ margin: 0 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
+ padding: 19px 0;
}
.content1 li,
@@ -1134,24 +1216,9 @@
font-size: 16px;
font-weight: 400;
color: #ffffff;
+ /* background-color: rgb(255, 218, 170); */
line-height: 26px;
text-shadow: 0px 1px 6px rgba(3, 10, 26, 0.5);
-}
-
-.content1 {
- height: 136px;
- padding: 19px 0;
-}
-
-.content2 {
- height: 132px;
- padding: 21px 0;
-}
-
-.content3 {
- height: 116px;
- padding-top: 21px;
- padding-bottom: 27px;
}
.tdInfo a {
@@ -1165,30 +1232,25 @@
font-weight: bold;
color: #ebb01e;
/* text-shadow: 0px 2px 9px #003f85; */
-
background: linear-gradient(0deg, #ecaa0b 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-/*
-
- */
-
.aboutDialog /deep/ .el-dialog {
- background: rgba(14, 50, 143, 0.7);
+ background: rgba(14, 50, 143, 0.8);
border: 2px solid #205fbc;
border-radius: 10px;
box-shadow: 0px 1px 10px 0px rgba(3, 10, 26, 0.38);
}
-.aboutDialog>>>.el-dialog__body {
+.aboutDialog >>> .el-dialog__body {
height: 77%;
padding: 0px !important;
padding: 15px !important;
}
-.aboutDialog>>>.el-dialog__header {
+.aboutDialog >>> .el-dialog__header {
padding: 10px 20px;
height: 25px;
line-height: 25px;
@@ -1197,28 +1259,28 @@
background: transparent;
}
-.aboutDialog>>>.el-dialog__title {
+.aboutDialog >>> .el-dialog__title {
color: #fff;
font-size: 1.1rem;
}
-.aboutDialog>>>.el-dialog__headerbtn .el-dialog__close {
+.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
-.aboutDialog>>>.el-dialog__headerbtn:hover .el-dialog__close {
+.aboutDialog >>> .el-dialog__headerbtn:hover .el-dialog__close {
color: #fff;
}
-.aboutDialog>>>.el-dialog__headerbtn {
+.aboutDialog >>> .el-dialog__headerbtn {
top: 13px;
}
-.aboutDialog>>>.el-form-item {
+.aboutDialog >>> .el-form-item {
margin-bottom: 10px;
}
-.el-form>>>.el-form-item__label {
+.el-form >>> .el-form-item__label {
color: #fff;
}
@@ -1267,40 +1329,41 @@
background-color: transparent;
}
-.el-table /deep/ .el-table__body tr.current-row>td {
+.el-table /deep/ .el-table__body tr.current-row > td {
background-color: transparent;
}
-.el-table--enable-row-hover /deep/ .el-table__body tr:hover>td {
+.el-table--enable-row-hover /deep/ .el-table__body tr:hover > td {
background-color: rgba(0, 32, 70, 0.7) !important;
}
-.el-table__body /deep/ tr.current-row>td {
+.el-table__body /deep/ tr.current-row > td {
background-color: rgba(0, 32, 70, 0.7) !important;
}
-.aboutDialog .el-dialog-div .dialog-footer {}
+.aboutDialog .el-dialog-div .dialog-footer {
+}
.el-pagination {
color: #fff;
}
-.el-pagination>>>.el-pagination__total,
-.el-pagination>>>.btn-next,
-.el-pagination>>>.btn-prev {
+.el-pagination >>> .el-pagination__total,
+.el-pagination >>> .btn-next,
+.el-pagination >>> .btn-prev {
background: transparent;
color: #fff;
font-size: 1rem;
}
-.el-pagination>>>.el-pager li {
+.el-pagination >>> .el-pager li {
line-height: 27px;
background-color: transparent;
font-size: 1rem;
}
-.el-pagination>>>.el-pager li.btn-quicknext,
-.el-pagination>>>.el-pager li.btn-quickprev {
+.el-pagination >>> .el-pager li.btn-quicknext,
+.el-pagination >>> .el-pager li.btn-quickprev {
font-size: 1rem;
line-height: 28px;
color: #fff;
@@ -1310,13 +1373,10 @@
position: absolute;
right: 20px;
top: 100px;
-
}
.listBox .active {
-
background: rgba(255, 166, 0, 0.808);
-
}
.listBox li {
@@ -1334,6 +1394,9 @@
.listBox li {
font-size: 12px;
}
+ .el-table {
+ font-size: 12px;
+ }
}
.listBox li:hover {
--
Gitblit v1.9.3