tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
jiangzhongzhi 2023-07-07 11:18:38 +08:00
parent afb610e400
commit ddbe3c72db
7 changed files with 133 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/images/chande.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/guanbi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 B

BIN
src/assets/images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/images/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

102
src/views/meteorological/monitor/drought/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="center">
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
<div style="width: 100%; height: 100%" class="cesiumContainer" id="cesiumContainer"></div>
<div class="rightWra">
<div class="farmlandHeader">
监测日期:&emsp;
@ -123,7 +123,6 @@
</div>
<el-collapse class="legend" accordion>
<el-collapse-item name="1">
<template #title>图例</template>
@ -142,7 +141,8 @@
}"
>{{ item }}</div>
>{{ item }}
</div>
</div>
</div>
</el-collapse-item>
@ -153,15 +153,19 @@
</template>
<script setup>
import {ref, onMounted, reactive,} from 'vue';
import guanbi from '@/assets/images/guanbi.png';
import icon from '@/assets/images/icon.png';
import {ref, onMounted, reactive,} from 'vue';
import ganhan1 from '@/assets/images/ganhan1.png';
import ganhan2 from '@/assets/images/ganhan2.png';
import ganhan3 from '@/assets/images/ganhan3.png';
import ganhan4 from '@/assets/images/ganhan4.png';
import ganhan0 from '@/assets/images/ganhan0.png';
import pun from '@/assets/images/personUnselected.png';
import pse from '@/assets/images/personSelected.png';
import pin from '@/assets/images/pin.png';
@ -174,7 +178,6 @@ import {
import 'echarts-gl';
const value = ref()
@ -298,15 +301,18 @@ const rules = reactive({
const currentPage = ref(1)
const pageSize = ref(6)
const pageData = ref([])
function handleCurrentChange(page) {
currentPage.value = page;
updatePagedData();
}
function updatePagedData() {
const start = (currentPage.value - 1) * pageSize.value;
const end = currentPage.value * pageSize.value;
pageData.value = SaveResultsDiv.value.slice(start, end);
}
// watch(
// () => value1.value,
// val => {
@ -398,8 +404,6 @@ function getmeteorology() {
}
function getZdmc() {
zdmc().then(res => {
zdmcList.value = res.data
@ -433,7 +437,8 @@ function initMap() {
cun();
zhen();
const infoOverlay = new ol.Overlay({
element: document.createElement('div'), // 创建一个用于显示信息的div元素
element: document.createElement('div'),
className: 'overlay1',// 创建一个用于显示信息的div元素
positioning: 'bottom-center', // 设置覆盖层相对于锚点的位置
offset: [0, -10], // 设置偏移量以便覆盖层不会遮挡图标
stopEvent: true, // 允许地图事件继续传播（例如，缩放和拖动）
@ -481,10 +486,13 @@ function initMap() {
});
map.forEachFeatureAtPixel(pixel, (feature) => {
view.animate({
center: [lon, lat],
duration: 1000,
zoom:13
});
// 获取Feature的其他属性（例如，自定义属性'id'）
const featureId = feature.get('id');
const featureType = feature.get('type');
@ -502,12 +510,12 @@ function initMap() {
infoOverlay.setPosition(feature.getGeometry().getCoordinates());
// 设置覆盖层的内容
infoOverlay.getElement().innerHTML = `
<div class="info-window" style="padding: 10px 20px 10px 20px;background: rgba(2, 31, 26, 0.85);border: 1.5px solid rgba(23, 194, 180, 1);">
<span class="close-btn" style="color:white;display: flex;justify-content: end;cursor:pointer;" >X</span>
<div style="color:white;font-size: 18px">
<div style="margin-top: 10px"><span>名称:</span><span>${clickInformationData.name}</span></div>
<div style="margin-top: 10px"><span>经度:</span><span>${clickInformationData.lon}</span></div>
<div style="margin-top: 10px"><span>维度:</span><span>${clickInformationData.lat}</span></div>
<div class="info-window">
<div class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
<div class="content" style="color:white;font-size: 16px">
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
</div>
</div>
`;
@ -530,12 +538,12 @@ function initMap() {
infoOverlay.setPosition(feature.getGeometry().getCoordinates());
// 设置覆盖层的内容
infoOverlay.getElement().innerHTML = `
<div class="info-window" style="padding: 10px 20px 10px 20px;background: rgba(2, 31, 26, 0.85);border: 1.5px solid rgba(23, 194, 180, 1);">
<span class="close-btn" style="color:white;display: flex;justify-content: end;cursor:pointer;" >X</span>
<div style="color:white;font-size: 18px">
<div style="margin-top: 10px"><span>姓名:</span><span>${clickInformationData.name}</span></div>
<div style="margin-top: 10px"><span>手机:</span><span>${clickInformationData.phone}</span></div>
<div style="margin-top: 10px"><span>位置:</span><span>${clickInformationData.region}</span></div>
<div class="info-window" >
<div class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
<div class="content" style="color:white;font-size: 16px">
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
</div>
</div>
`;
@ -608,7 +616,6 @@ function initMap() {
}
}
@ -918,8 +925,49 @@ $height: calc(100vh - 100px);
}
}
.cesiumContainer {
::v-deep .ol-viewport {
.ol-overlaycontainer-stopevent {
.overlay1 div:first-child {
.info-window {
padding: 10px;
.close-btn {
color: white;
display: flex;
justify-content: space-between;
font-size: 22px;
background: url("@/assets/images/top.png");
padding: 3px 0 3px 40px;
img{
margin-right: 15px;
}
}
.content {
background: url("@/assets/images/bottom.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
display: flex;
flex-direction: column;
.line {
background: url("@/assets/images/chande.png");
padding-left: 20px;
margin: 10px;
display: flex;
align-items: center;
}
}
}
}
}
}
}
}
.rightWra {
@ -1053,6 +1101,7 @@ $height: calc(100vh - 100px);
background: rgba(22, 94, 102, 1);
}
}
.el-pagination {
::v-deep .el-pager {
.number {
@ -1060,18 +1109,22 @@ $height: calc(100vh - 100px);
margin-left: 3px;
border-radius: 2px;
}
.is-active {
background: rgba(5, 179, 179, 1);
color: white;
}
}
::v-deep .btn-next {
border-radius: 2px;
}
::v-deep .btn-prev {
border-radius: 2px;
}
}
:deep(.el-table tr) {
background-color: transparent;
}
@ -1210,3 +1263,6 @@ $height: calc(100vh - 100px);
</style>
<style lang="scss">
</style>