修改样式
This commit is contained in:
parent
afb610e400
commit
ddbe3c72db
BIN
src/assets/images/bottom.png
Normal file
BIN
src/assets/images/bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/chande.png
Normal file
BIN
src/assets/images/chande.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/guanbi.png
Normal file
BIN
src/assets/images/guanbi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 B |
BIN
src/assets/images/icon.png
Normal file
BIN
src/assets/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/top.png
Normal file
BIN
src/assets/images/top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
File diff suppressed because one or more lines are too long
@ -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">
|
||||
监测日期: 
|
||||
@ -71,7 +71,7 @@
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
style="display: flex;justify-content: center;margin-top: 10px;"
|
||||
style="display: flex;justify-content: center;margin-top: 10px;"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
@ -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()
|
||||
|
||||
|
||||
@ -295,18 +298,21 @@ const rules = reactive({
|
||||
desc: [{required: true, message: 'Please input activity form', trigger: 'blur'}],
|
||||
});
|
||||
//分页相关
|
||||
const currentPage=ref(1)
|
||||
const pageSize=ref(6)
|
||||
const pageData=ref([])
|
||||
function handleCurrentChange(page){
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(6)
|
||||
const pageData = ref([])
|
||||
|
||||
function handleCurrentChange(page) {
|
||||
currentPage.value = page;
|
||||
updatePagedData();
|
||||
}
|
||||
function 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>
|
||||
`;
|
||||
@ -550,14 +558,14 @@ function initMap() {
|
||||
if (layer instanceof ol.layer.Vector) {
|
||||
let fea = layer.getSource().getFeatures()[0]
|
||||
if (fea.get('type') === '0' && fea !== feature) {
|
||||
if(fea.get('warning')==='0'){
|
||||
if (fea.get('warning') === '0') {
|
||||
fea.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: pun,
|
||||
scale: 0.5 // 图标的缩放比例
|
||||
})
|
||||
}))
|
||||
}else if(fea.get('warning')==='1'){
|
||||
} else if (fea.get('warning') === '1') {
|
||||
|
||||
fea.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
@ -582,14 +590,14 @@ function initMap() {
|
||||
if (layer instanceof ol.layer.Vector) {
|
||||
let fea = layer.getSource().getFeatures()[0]
|
||||
if (fea.get('type') === '0') {
|
||||
if(fea.get('warning')==='0'){
|
||||
if (fea.get('warning') === '0') {
|
||||
fea.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: pun,
|
||||
scale: 0.5 // 图标的缩放比例
|
||||
})
|
||||
}))
|
||||
}else if(fea.get('warning')==='1'){
|
||||
} else if (fea.get('warning') === '1') {
|
||||
|
||||
fea.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
@ -608,7 +616,6 @@ function initMap() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -708,7 +715,7 @@ const meteorologicals = () => {
|
||||
}),
|
||||
style: circleStyle
|
||||
});
|
||||
if(informationData.value[i].warning!=='无灾害'){
|
||||
if (informationData.value[i].warning !== '无灾害') {
|
||||
map.addLayer(circleLayer.value[i]);
|
||||
}
|
||||
|
||||
@ -770,7 +777,7 @@ const meteorologicals = () => {
|
||||
})
|
||||
|
||||
|
||||
meteorologicalsPeople({flag:1,alertRange:radio1.value,data:value.value}).then(res => {
|
||||
meteorologicalsPeople({flag: 1, alertRange: radio1.value, data: value.value}).then(res => {
|
||||
peopleData.value = res.data
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -782,40 +789,40 @@ const meteorologicals = () => {
|
||||
geometry: iconPointGeometry,
|
||||
id: peopleData.value[i].contacts,
|
||||
type: peopleData.value[i].flag,
|
||||
warning:peopleData.value[i].earlyWarning
|
||||
warning: peopleData.value[i].earlyWarning
|
||||
});
|
||||
|
||||
if(peopleData.value[i].earlyWarning==='0'){
|
||||
// 设置Feature的样式，包括图标
|
||||
iconFeature.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: pun,
|
||||
scale: 0.5 // 图标的缩放比例
|
||||
})
|
||||
}));
|
||||
if (peopleData.value[i].earlyWarning === '0') {
|
||||
// 设置Feature的样式，包括图标
|
||||
iconFeature.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: pun,
|
||||
scale: 0.5 // 图标的缩放比例
|
||||
})
|
||||
}));
|
||||
|
||||
personIconLayer.value[i] = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
})
|
||||
});
|
||||
map.addLayer(personIconLayer.value[i]);
|
||||
}else if(peopleData.value[i].earlyWarning==='1'){
|
||||
// 设置Feature的样式，包括图标
|
||||
iconFeature.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: pin,
|
||||
scale: 0.5 // 图标的缩放比例
|
||||
})
|
||||
}));
|
||||
personIconLayer.value[i] = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
})
|
||||
});
|
||||
map.addLayer(personIconLayer.value[i]);
|
||||
} else if (peopleData.value[i].earlyWarning === '1') {
|
||||
// 设置Feature的样式，包括图标
|
||||
iconFeature.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: pin,
|
||||
scale: 0.5 // 图标的缩放比例
|
||||
})
|
||||
}));
|
||||
|
||||
personIconLayer.value[i] = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
})
|
||||
});
|
||||
map.addLayer(personIconLayer.value[i]);
|
||||
}
|
||||
personIconLayer.value[i] = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [iconFeature]
|
||||
})
|
||||
});
|
||||
map.addLayer(personIconLayer.value[i]);
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
@ -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,25 +1101,30 @@ $height: calc(100vh - 100px);
|
||||
background: rgba(22, 94, 102, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
::v-deep .el-pager{
|
||||
.number{
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.is-active{
|
||||
::v-deep .el-pager {
|
||||
.number {
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background: rgba(5, 179, 179, 1);
|
||||
color:white;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
::v-deep .btn-next{
|
||||
|
||||
::v-deep .btn-next {
|
||||
border-radius: 2px;
|
||||
}
|
||||
::v-deep .btn-prev{
|
||||
|
||||
::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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user