修改样式

src/views/meteorological/monitor/drought/index.vue

@@ -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;
@@ -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 currentPage = ref(1)
-const pageSize=ref(6)
+const pageSize = ref(6)
-const pageData=ref([])
+const pageData = ref([])
-function handleCurrentChange(page){
+
+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);">
+      <div class="info-window">
-      <span  class="close-btn" style="color:white;display: flex;justify-content: end;cursor:pointer;" >X</span>
+      <div  class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
-      <div style="color:white;font-size: 18px">
+      <div class="content" style="color:white;font-size: 16px">
-        <div style="margin-top: 10px"><span>名称:</span><span>${clickInformationData.name}</span></div>
+        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
-        <div style="margin-top: 10px"><span>经度:</span><span>${clickInformationData.lon}</span></div>
+        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
-        <div style="margin-top: 10px"><span>维度:</span><span>${clickInformationData.lat}</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);">
+      <div class="info-window" >
-      <span  class="close-btn" style="color:white;display: flex;justify-content: end;cursor:pointer;" >X</span>
+      <div  class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
-      <div style="color:white;font-size: 18px">
+      <div class="content" style="color:white;font-size: 16px">
-        <div style="margin-top: 10px"><span>姓名:</span><span>${clickInformationData.name}</span></div>
+        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
-        <div style="margin-top: 10px"><span>手机:</span><span>${clickInformationData.phone}</span></div>
+        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
-        <div style="margin-top: 10px"><span>位置:</span><span>${clickInformationData.region}</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'){
+      if (peopleData.value[i].earlyWarning === '0') {
-      // 设置Feature的样式，包括图标
+        // 设置Feature的样式，包括图标
-      iconFeature.setStyle(new ol.style.Style({
+        iconFeature.setStyle(new ol.style.Style({
-        image: new ol.style.Icon({
+          image: new ol.style.Icon({
-          src: pun,
+            src: pun,
-          scale: 0.5 // 图标的缩放比例
+            scale: 0.5 // 图标的缩放比例
-        })
+          })
-      }));
+        }));
 
-      personIconLayer.value[i] = new ol.layer.Vector({
+        personIconLayer.value[i] = new ol.layer.Vector({
-        source: new ol.source.Vector({
+          source: new ol.source.Vector({
-          features: [iconFeature]
+            features: [iconFeature]
-        })
+          })
-      });
+        });
-      map.addLayer(personIconLayer.value[i]);
+        map.addLayer(personIconLayer.value[i]);
-    }else if(peopleData.value[i].earlyWarning==='1'){
+      } else if (peopleData.value[i].earlyWarning === '1') {
-      // 设置Feature的样式，包括图标
+        // 设置Feature的样式，包括图标
-      iconFeature.setStyle(new ol.style.Style({
+        iconFeature.setStyle(new ol.style.Style({
-        image: new ol.style.Icon({
+          image: new ol.style.Icon({
-          src: pin,
+            src: pin,
-          scale: 0.5 // 图标的缩放比例
+            scale: 0.5 // 图标的缩放比例
-        })
+          })
-      }));
+        }));
 
-      personIconLayer.value[i] = new ol.layer.Vector({
+        personIconLayer.value[i] = new ol.layer.Vector({
-        source: new ol.source.Vector({
+          source: new ol.source.Vector({
-          features: [iconFeature]
+            features: [iconFeature]
-        })
+          })
-      });
+        });
-      map.addLayer(personIconLayer.value[i]);
+        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{
+        ::v-deep .el-pager {
-         .number{
+          .number {
-           margin-right: 3px;
+            margin-right: 3px;
-           margin-left: 3px;
+            margin-left: 3px;
-           border-radius: 2px;
+            border-radius: 2px;
-         }
+          }
-          .is-active{
+
+          .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>