|
@@ -16,7 +16,7 @@
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
</template>
|
|
</template>
|
|
</el-select>
|
|
</el-select>
|
|
- </el-form-item>
|
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
|
<el-form-item label="所属基地:" prop="base">
|
|
<el-form-item label="所属基地:" prop="base">
|
|
<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
|
|
<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
|
|
@@ -27,15 +27,15 @@
|
|
<el-form-item><div class="lv-state">设备正常3</div></el-form-item>
|
|
<el-form-item><div class="lv-state">设备正常3</div></el-form-item>
|
|
<el-form-item><div class="hong-state">设备故障2</div></el-form-item>
|
|
<el-form-item><div class="hong-state">设备故障2</div></el-form-item>
|
|
<el-form-item><div class="cheng-state">危险天气1{{ info.one }}</div></el-form-item> <!-- 操作1 -->
|
|
<el-form-item><div class="cheng-state">危险天气1{{ info.one }}</div></el-form-item> <!-- 操作1 -->
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 基本信息 -->
|
|
<!-- 基本信息 -->
|
|
<el-form-item>
|
|
<el-form-item>
|
|
- <el-popover
|
|
|
|
- v-model="visible"
|
|
|
|
|
|
+ <el-popover
|
|
|
|
+ v-model="visible"
|
|
@show="handleShowChange"
|
|
@show="handleShowChange"
|
|
- @hide="handleHideChange"
|
|
|
|
- placement="bottom"
|
|
|
|
- :width="200"
|
|
|
|
|
|
+ @hide="handleHideChange"
|
|
|
|
+ placement="bottom"
|
|
|
|
+ :width="200"
|
|
trigger="click">
|
|
trigger="click">
|
|
<el-checkbox-group v-model="checkList">
|
|
<el-checkbox-group v-model="checkList">
|
|
<!--鹰眼 -->
|
|
<!--鹰眼 -->
|
|
@@ -54,7 +54,7 @@
|
|
size="large"
|
|
size="large"
|
|
v-model="showNineGrid"
|
|
v-model="showNineGrid"
|
|
inline-prompt
|
|
inline-prompt
|
|
- active-text="开九宫格"
|
|
|
|
|
|
+ active-text="开九宫格"
|
|
inactive-text="关九宫格"
|
|
inactive-text="关九宫格"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -78,6 +78,16 @@
|
|
inactive-text="关闭站名"
|
|
inactive-text="关闭站名"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <!-- 站号 -->
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-switch
|
|
|
|
+ size="large"
|
|
|
|
+ v-model="isstationCode"
|
|
|
|
+ inline-prompt
|
|
|
|
+ active-text="打开站号"
|
|
|
|
+ inactive-text="关闭站号"
|
|
|
|
+ />
|
|
|
|
+ </el-form-item>
|
|
<!-- 街道地图 -->
|
|
<!-- 街道地图 -->
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-switch
|
|
<el-switch
|
|
@@ -87,7 +97,7 @@
|
|
active-text="街道地图"
|
|
active-text="街道地图"
|
|
inactive-text="关闭"
|
|
inactive-text="关闭"
|
|
/>
|
|
/>
|
|
- </el-form-item>
|
|
|
|
|
|
+ </el-form-item>
|
|
</el-checkbox-group>
|
|
</el-checkbox-group>
|
|
<template #reference>
|
|
<template #reference>
|
|
<div :class="visible ? 'hei-state-primary' : 'hei-state'">基本功能</div>
|
|
<div :class="visible ? 'hei-state-primary' : 'hei-state'">基本功能</div>
|
|
@@ -95,7 +105,7 @@
|
|
</el-popover>
|
|
</el-popover>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
- </el-form>
|
|
|
|
|
|
+ </el-form>
|
|
<!-- 右侧功能栏 -->
|
|
<!-- 右侧功能栏 -->
|
|
<div class="header-button-ri">
|
|
<div class="header-button-ri">
|
|
<el-popover
|
|
<el-popover
|
|
@@ -119,7 +129,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 气压 -->
|
|
<!-- 气压 -->
|
|
@@ -134,7 +144,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='气压'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='气压'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 湿度 -->
|
|
<!-- 湿度 -->
|
|
@@ -149,9 +159,9 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 风 -->
|
|
<!-- 风 -->
|
|
<el-tab-pane>
|
|
<el-tab-pane>
|
|
<template #label>
|
|
<template #label>
|
|
@@ -167,19 +177,19 @@
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
- <!-- 降雨 -->
|
|
|
|
|
|
+ <!-- 降雨 -->
|
|
<el-tab-pane>
|
|
<el-tab-pane>
|
|
<template #label>
|
|
<template #label>
|
|
<div class="gis-c">
|
|
<div class="gis-c">
|
|
<span>降雨</span>
|
|
<span>降雨</span>
|
|
<img class="gis-icon" src="../../../assets/images/rainfall.svg">
|
|
<img class="gis-icon" src="../../../assets/images/rainfall.svg">
|
|
</div>
|
|
</div>
|
|
- </template>
|
|
|
|
|
|
+ </template>
|
|
<div class="container-tag" style="overflow-y:auto; height:300px ">
|
|
<div class="container-tag" style="overflow-y:auto; height:300px ">
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='降水'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='降水'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
@@ -196,7 +206,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='云'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='云'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 能见度 -->
|
|
<!-- 能见度 -->
|
|
@@ -211,7 +221,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='能见度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='能见度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
|
|
|
|
<!-- 天气现象 -->
|
|
<!-- 天气现象 -->
|
|
@@ -226,7 +236,7 @@
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<template v-for="item in elementList" :key="item.id" >
|
|
<div v-if="item.data_type==='天气现象'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
<div v-if="item.data_type==='天气现象'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
|
|
</template>
|
|
</template>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
<template #reference>
|
|
<template #reference>
|
|
@@ -238,8 +248,8 @@
|
|
</template>
|
|
</template>
|
|
</el-popover>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<!-- 地图与经纬度显示区域 -->
|
|
<!-- 地图与经纬度显示区域 -->
|
|
<div id="map" class="map" style="width: 100%; height: 100vh;">
|
|
<div id="map" class="map" style="width: 100%; height: 100vh;">
|
|
<!-- 九宫格盒子 -->
|
|
<!-- 九宫格盒子 -->
|
|
@@ -248,13 +258,13 @@
|
|
{{ value }}
|
|
{{ value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div id="mouse-position" class="mouse-position">经纬度: </div>
|
|
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 右下角经纬度显示 -->
|
|
|
|
+ <div id="mouse-position" class="mouse-position">经纬度: </div>
|
|
|
|
|
|
<!-- 地图底部控制栏 -->
|
|
<!-- 地图底部控制栏 -->
|
|
- <div class="gis-bottom-box">
|
|
|
|
|
|
+ <div class="gis-bottom-box">
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
<div class="button-bg" @click="isPlay=!isPlay">
|
|
<div class="button-bg" @click="isPlay=!isPlay">
|
|
<img v-if="isPlay" class="button-bg-c" style="margin-left: 3px" src="../../../assets/images/stop.svg"/>
|
|
<img v-if="isPlay" class="button-bg-c" style="margin-left: 3px" src="../../../assets/images/stop.svg"/>
|
|
@@ -262,12 +272,14 @@
|
|
</div>
|
|
</div>
|
|
<div style="margin-left: 2px" class="gis-bottom-text">{{isPlay?'暂停':'播放'}}</div>
|
|
<div style="margin-left: 2px" class="gis-bottom-text">{{isPlay?'暂停':'播放'}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div class="gis-bottom-item" @click="handleBack">
|
|
<div class="gis-bottom-item" @click="handleBack">
|
|
<div class="button-bg">
|
|
<div class="button-bg">
|
|
<img class="button-bg-c" src="../../../assets/images/back.svg"/>
|
|
<img class="button-bg-c" src="../../../assets/images/back.svg"/>
|
|
</div>
|
|
</div>
|
|
<div style="margin-left: 2px" class="gis-bottom-text">上一个</div>
|
|
<div style="margin-left: 2px" class="gis-bottom-text">上一个</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
<el-date-picker
|
|
<el-date-picker
|
|
style="margin-top: 5px"
|
|
style="margin-top: 5px"
|
|
@@ -276,33 +288,48 @@
|
|
placeholder="请选择时间"
|
|
placeholder="请选择时间"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <!-- 动态绑定事件间隔 timeInterval -->
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
- <el-slider
|
|
|
|
|
|
+ <el-slider
|
|
:min="0"
|
|
:min="0"
|
|
:max="1439"
|
|
:max="1439"
|
|
- :step="10"
|
|
|
|
:format-tooltip="formatTooltip"
|
|
:format-tooltip="formatTooltip"
|
|
- v-model="value2"
|
|
|
|
|
|
+ v-model="value2"
|
|
style="width: 720px;margin: 0px 0px 0px 10px" />
|
|
style="width: 720px;margin: 0px 0px 0px 10px" />
|
|
- <img src="../../../assets/images/scale.svg" style="width: 720px;margin-top: -10px"/>
|
|
|
|
|
|
+ <img src="../../../assets/images/scale.svg" style="width: 720px;margin-top: -10px"/>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
<div class="button-bg" @click="handleForward">
|
|
<div class="button-bg" @click="handleForward">
|
|
<img class="button-bg-c" src="../../../assets/images/forward.svg"/>
|
|
<img class="button-bg-c" src="../../../assets/images/forward.svg"/>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
<div style="margin-left: 2px" class="gis-bottom-text">下一个</div>
|
|
<div style="margin-left: 2px" class="gis-bottom-text">下一个</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <!-- 添加事件下拉框 -->
|
|
|
|
+ <div class="gis-bottom-item">
|
|
|
|
+ <el-select v-model="timeInterval" placeholder="选择时间间隔" style="width: 150px;">
|
|
|
|
+ <el-option label="5秒间隔" :value="5000"></el-option>
|
|
|
|
+ <el-option label="2分钟间隔" :value="120000"></el-option>
|
|
|
|
+ <el-option label="5分钟间隔" :value="300000"></el-option>
|
|
|
|
+ <el-option label="10分钟间隔" :value="600000"></el-option>
|
|
|
|
+ <el-option label="60分钟间隔" :value="3600000"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-item">
|
|
<div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
|
|
<div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
- <script setup lang="ts">
|
|
|
|
- import { ref, reactive, onMounted } from "vue";
|
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+ import { ref, reactive, onMounted,onUnmounted } from "vue";
|
|
import imglogo from '/src/assets/images/logo.svg'
|
|
import imglogo from '/src/assets/images/logo.svg'
|
|
import 'ol/ol.css';
|
|
import 'ol/ol.css';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
@@ -331,17 +358,55 @@
|
|
import { METERS_PER_UNIT } from 'ol/proj/Units';
|
|
import { METERS_PER_UNIT } from 'ol/proj/Units';
|
|
import { labelZoomSize, colorRGBtoHex } from "@/assets/map/maptool";
|
|
import { labelZoomSize, colorRGBtoHex } from "@/assets/map/maptool";
|
|
import { Draw } from 'ol/interaction';
|
|
import { Draw } from 'ol/interaction';
|
|
- // import NineGrid from './NineGrid.vue';
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // const isStationCode = ref()
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 时间选择器、滑块和时间间隔的控制变量
|
|
|
|
+const value2 = ref(0); // 滑动条的默认值(从0点开始)
|
|
|
|
+const intervalDuration = 5000; // 定义持续时间间隔为1000毫秒 5秒刷新一次
|
|
|
|
+let intervalId: ReturnType<typeof setInterval> | null = null;
|
|
|
|
+const timeInterval = ref(5000); // 默认毫秒时间间隔
|
|
|
|
+
|
|
|
|
+// 获取当前时间分钟数(以一天的分钟为单位)
|
|
|
|
+const now = new Date();
|
|
|
|
+const currentMinutes = now.getHours() * 60 + now.getMinutes();
|
|
|
|
+const currentDate = ref(new Date()); // 创建一个响应式变量 currentDate,初始化为当前日期
|
|
|
|
+const updateTime = () =>{
|
|
|
|
+ const fullYear = currentDate.value.getFullYear(); // 获取当前年份
|
|
|
|
+ const month = currentDate.value.getMonth(); //获取当前月份
|
|
|
|
+ const currentHour = currentDate.value.getHours(); // 获取当前小时
|
|
|
|
+ const currentMinute = currentDate.value.getMinutes(); // 获取当前分钟
|
|
|
|
+ const currentSeconds = currentDate.value.getSeconds(); // 获取当前秒钟
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 设置默认时间为当前时间
|
|
|
|
+// const selectedTime = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes()));
|
|
|
|
+
|
|
|
|
+// 初始化滑动条的值为当前分钟数
|
|
|
|
+const value = ref(currentMinutes);
|
|
|
|
+
|
|
|
|
+// 处理时间间隔的改变
|
|
|
|
+const handleIntervalChange = (newInterval: number) => {
|
|
|
|
+ timeInterval.value = newInterval;
|
|
|
|
+};
|
|
|
|
|
|
|
|
|
|
const showNineGrid = ref(false); // 控制九宫格显示与否
|
|
const showNineGrid = ref(false); // 控制九宫格显示与否
|
|
- const dataValues = ref(Array(9).fill(0)); // 替换为实际的数据
|
|
|
|
|
|
+ const dataValues = ref(Array(9).fill(0)); // 替换为实际的数据
|
|
const currentStationIndex = ref(0); // 选择的站点索引
|
|
const currentStationIndex = ref(0); // 选择的站点索引
|
|
- // const stationCoordinates = { longitude: 116.397128, latitude: 39.916527 }; // 示例经纬度(北京天安门)
|
|
|
|
|
|
+
|
|
|
|
|
|
// 存储站点的经纬度和数据值
|
|
// 存储站点的经纬度和数据值
|
|
const stations = ref([
|
|
const stations = ref([
|
|
- { lat: 34.638163632, lon: 116.426066261, value: 10 },
|
|
|
|
|
|
+ { lat: 34.638163632, lon: 116.426066261, value: 10 },
|
|
{ lat: 34.638263632, lon: 116.426166261, value: 20 },
|
|
{ lat: 34.638263632, lon: 116.426166261, value: 20 },
|
|
{ lat: 34.638363632, lon: 116.426266261, value: 30 },
|
|
{ lat: 34.638363632, lon: 116.426266261, value: 30 },
|
|
// 继续添加其他站点
|
|
// 继续添加其他站点
|
|
@@ -385,8 +450,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
// 新建VectorSource(矢量信息图层) 来存放台站数据
|
|
// 新建VectorSource(矢量信息图层) 来存放台站数据
|
|
const stationSource = new VectorSource();
|
|
const stationSource = new VectorSource();
|
|
const stationLayer = new VectorLayer({
|
|
const stationLayer = new VectorLayer({
|
|
@@ -395,20 +458,118 @@
|
|
|
|
|
|
// 定义状态变量
|
|
// 定义状态变量
|
|
const value1 = ref('');
|
|
const value1 = ref('');
|
|
- const value2 = ref(0);
|
|
|
|
|
|
+ // const value2 = ref(0); // 设置默认滑块值为0 即0时开始
|
|
const visible = ref(false);
|
|
const visible = ref(false);
|
|
const visible2 = ref(false);
|
|
const visible2 = ref(false);
|
|
const checkList = ref(['Value selected and disabled', 'Value A']);
|
|
const checkList = ref(['Value selected and disabled', 'Value A']);
|
|
const isPlay = ref(true);
|
|
const isPlay = ref(true);
|
|
const isEagleEyeOn = ref(true); // 鹰眼开关状态
|
|
const isEagleEyeOn = ref(true); // 鹰眼开关状态
|
|
- const isjGG = ref(false); // 九宫格开关状态 默认关闭
|
|
|
|
- const isboxDrawn = ref(false); // 框选开关状态 默认关闭 boxDrawn
|
|
|
|
|
|
+ const isjGG = ref(false); // 九宫格开关状态 默认关闭
|
|
|
|
+ const isboxDrawn = ref(false); // 框选开关状态 默认关闭 boxDrawn
|
|
const isstationName = ref(false); // 站名开关状态 默认关闭 isstationName
|
|
const isstationName = ref(false); // 站名开关状态 默认关闭 isstationName
|
|
- const isstreet = ref(true); // 街道地图开关状态 默认关闭
|
|
|
|
|
|
+ const isstationCode = ref(true); // 站号开关状态 默认打开 isstationCode
|
|
|
|
+ const isstreet = ref(true); // 街道地图开关状态 默认关闭
|
|
const searchParam = reactive({ base: undefined, station: undefined });
|
|
const searchParam = reactive({ base: undefined, station: undefined });
|
|
const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
|
|
const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
|
|
const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
|
|
const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
|
|
|
|
|
|
|
|
+
|
|
|
|
+ /**站号开关功能 */
|
|
|
|
+ // 监听站号开关变化
|
|
|
|
+ watch(isstationCode,(newValue) =>{
|
|
|
|
+ if(newValue){
|
|
|
|
+ // 打开站号 -
|
|
|
|
+ showStationCodes(); // 显示站号
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+ hideStationCodes();// 关闭站号
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 显示站号的函数
|
|
|
|
+function showStationCodes() {
|
|
|
|
+ platformList.value.forEach((station) => {
|
|
|
|
+ const latitude = parseFloat(station.as_lat.replace('N', ''));
|
|
|
|
+ const longitude = parseFloat(station.as_lon.replace('E', ''));
|
|
|
|
+
|
|
|
|
+ const feature = new Feature({
|
|
|
|
+ geometry: new Point(fromLonLat([longitude, latitude])),
|
|
|
|
+ name: station.as_name,
|
|
|
|
+ code: station.as_code,
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 设置带站号的样式
|
|
|
|
+ feature.setStyle(new Style({
|
|
|
|
+ image: new Icon({
|
|
|
|
+ src: imglogo,
|
|
|
|
+ scale: 0.008,
|
|
|
|
+ }),
|
|
|
|
+ text: new Text({
|
|
|
|
+ text: station.as_code, // 仅显示站号
|
|
|
|
+ font: '12px Calibri,sans-serif',
|
|
|
|
+ fill: new Fill({ color: '#000' }),
|
|
|
|
+ stroke: new Stroke({ color: '#fff', width: 2 }),
|
|
|
|
+ offsetY: -20,
|
|
|
|
+ textAlign: 'center',
|
|
|
|
+ })
|
|
|
|
+ }));
|
|
|
|
+
|
|
|
|
+ stationSource.addFeature(feature); // 添加特征到数据源
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+// 隐藏站号的函数
|
|
|
|
+function hideStationCodes() {
|
|
|
|
+ stationSource.clear(); // 清除所有站号
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ /**站名开关功能 */
|
|
|
|
+ // 监听站名开关变化
|
|
|
|
+ watch(isstationName,(newValue) =>{
|
|
|
|
+ if(newValue){
|
|
|
|
+ showStationName();// 打开站号
|
|
|
|
+ }else{
|
|
|
|
+ hideStationName()// 关闭站号
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // 显示站名的函数
|
|
|
|
+function showStationName() {
|
|
|
|
+ platformList.value.forEach((station) => {
|
|
|
|
+ const latitude = parseFloat(station.as_lat.replace('N', ''));
|
|
|
|
+ const longitude = parseFloat(station.as_lon.replace('E', ''));
|
|
|
|
+
|
|
|
|
+ const feature = new Feature({
|
|
|
|
+ geometry: new Point(fromLonLat([longitude, latitude])),
|
|
|
|
+ name: station.as_name,
|
|
|
|
+ code: station.as_code,
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 设置带站号的样式
|
|
|
|
+ feature.setStyle(new Style({
|
|
|
|
+ image: new Icon({
|
|
|
|
+ src: imglogo,
|
|
|
|
+ scale: 0.008,
|
|
|
|
+ }),
|
|
|
|
+ text: new Text({
|
|
|
|
+ text: station.as_name, // 仅显示站名
|
|
|
|
+ font: '12px Calibri,sans-serif',
|
|
|
|
+ fill: new Fill({ color: '#000' }),
|
|
|
|
+ stroke: new Stroke({ color: '#fff', width: 2 }),
|
|
|
|
+ offsetY: -20,
|
|
|
|
+ textAlign: 'center',
|
|
|
|
+ })
|
|
|
|
+ }));
|
|
|
|
+
|
|
|
|
+ stationSource.addFeature(feature); // 添加特征到数据源
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+// 隐藏站名的函数
|
|
|
|
+function hideStationName() {
|
|
|
|
+ stationSource.clear(); // 清除所有站名
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
// 查询自动站列表
|
|
// 查询自动站列表
|
|
const queryas = ref<Platform>({
|
|
const queryas = ref<Platform>({
|
|
pageSize: 10000,
|
|
pageSize: 10000,
|
|
@@ -420,14 +581,14 @@
|
|
const getPlatforms = async () => {
|
|
const getPlatforms = async () => {
|
|
try{
|
|
try{
|
|
const { data } = await getPlatformList(queryas.value);
|
|
const { data } = await getPlatformList(queryas.value);
|
|
- platformList.value = data.list;
|
|
|
|
- console.log("platformList.value:",+ platformList.value); // 在控制台输出平台列表
|
|
|
|
|
|
+ platformList.value = data.list;
|
|
|
|
+ console.log("platformList.value:",+ platformList.value); // 在控制台输出平台列表
|
|
|
|
|
|
getStations(data.list);
|
|
getStations(data.list);
|
|
// console.log("打印data.list的数据:",+data.list)
|
|
// console.log("打印data.list的数据:",+data.list)
|
|
}catch(error){
|
|
}catch(error){
|
|
console.log("获取平台列表失败:",error)
|
|
console.log("获取平台列表失败:",error)
|
|
- }
|
|
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
const pageable = ref<any>({
|
|
const pageable = ref<any>({
|
|
@@ -447,7 +608,7 @@
|
|
const { data } = await getDataItemList(pageable.value); // 假设此函数调用成功并返回数据
|
|
const { data } = await getDataItemList(pageable.value); // 假设此函数调用成功并返回数据
|
|
processTableData.value = data.list || []; //保证processTableData不会为null
|
|
processTableData.value = data.list || []; //保证processTableData不会为null
|
|
getStations(platformList.value); //更新getStation更新站点
|
|
getStations(platformList.value); //更新getStation更新站点
|
|
-
|
|
|
|
|
|
+
|
|
return data.list; // 确保返回数据
|
|
return data.list; // 确保返回数据
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error("获取数据时出错:", error);
|
|
console.error("获取数据时出错:", error);
|
|
@@ -455,17 +616,17 @@
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
- // 地图台站信息标注
|
|
|
|
|
|
+ // 地图台站信息标注
|
|
const getStations = (stations) => {
|
|
const getStations = (stations) => {
|
|
- console.log(stations,'getstation2');
|
|
|
|
-
|
|
|
|
|
|
+ console.log(stations,'getstation2');
|
|
|
|
+
|
|
stationSource.clear(); // 清除之前的站点标记
|
|
stationSource.clear(); // 清除之前的站点标记
|
|
stations.forEach(station => {
|
|
stations.forEach(station => {
|
|
- console.log(processTableData.value,'11');
|
|
|
|
-
|
|
|
|
|
|
+ console.log(processTableData.value,'11');
|
|
|
|
+
|
|
if (station.as_lon && station.as_lat) {
|
|
if (station.as_lon && station.as_lat) {
|
|
const result = processTableData.value.find(item => item.as_code === station.as_code)
|
|
const result = processTableData.value.find(item => item.as_code === station.as_code)
|
|
- console.log(result,'......result');
|
|
|
|
|
|
+ console.log(result,'......result');
|
|
|
|
|
|
const latitude = parseFloat(station.as_lat.replace('N', ''));
|
|
const latitude = parseFloat(station.as_lat.replace('N', ''));
|
|
const longitude = parseFloat(station.as_lon.replace('E', ''));
|
|
const longitude = parseFloat(station.as_lon.replace('E', ''));
|
|
@@ -519,8 +680,8 @@
|
|
|
|
|
|
// 将站点特征添加到站点源
|
|
// 将站点特征添加到站点源
|
|
stationSource.addFeature(feature);
|
|
stationSource.addFeature(feature);
|
|
-
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ }
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
|
|
@@ -544,6 +705,23 @@ const forwardIcon = ref('@/assets/images/forward.svg');
|
|
const formatTooltip = (value) => `${Math.floor(value / 60).toString().padStart(2, '0')}:${(value % 60).toString().padStart(2, '0')}`;
|
|
const formatTooltip = (value) => `${Math.floor(value / 60).toString().padStart(2, '0')}:${(value % 60).toString().padStart(2, '0')}`;
|
|
const handleBack = () => value2.value -= 10;
|
|
const handleBack = () => value2.value -= 10;
|
|
const handleForward = () => value2.value += 10;
|
|
const handleForward = () => value2.value += 10;
|
|
|
|
+
|
|
|
|
+// 启动定时器 时间间隔器
|
|
|
|
+const startInterval = () => {
|
|
|
|
+ if (intervalId) clearInterval(intervalId);
|
|
|
|
+ intervalId = setInterval(() => {
|
|
|
|
+ value2.value += 5; // 按每秒自增1进行示例,可根据需求修改
|
|
|
|
+ }, intervalDuration);
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+// 停止定时器
|
|
|
|
+const stopInterval = () => {
|
|
|
|
+ if (intervalId) clearInterval(intervalId);
|
|
|
|
+ intervalId = null;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
const handleHideChange = () => { visible.value = false; };
|
|
const handleHideChange = () => { visible.value = false; };
|
|
const handleShowChange = () => { visible.value = true; };
|
|
const handleShowChange = () => { visible.value = true; };
|
|
const handleShowChange2 = () => { visible2.value = true; };
|
|
const handleShowChange2 = () => { visible2.value = true; };
|
|
@@ -572,7 +750,7 @@ const info=ref<any>({
|
|
const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
|
|
const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
|
|
return new TileLayer({
|
|
return new TileLayer({
|
|
source: new TileWMS({
|
|
source: new TileWMS({
|
|
- url: 'http://192.168.43.77:8080/geoserver/wms',
|
|
|
|
|
|
+ url: 'http://192.168.127.124:8080/geoserver/wms',
|
|
params: { 'LAYERS': layerName, 'TILED': true, 'FORMAT': 'image/png', 'TRANSPARENT': true, 'ENCODING': 'UTF-8' },
|
|
params: { 'LAYERS': layerName, 'TILED': true, 'FORMAT': 'image/png', 'TRANSPARENT': true, 'ENCODING': 'UTF-8' },
|
|
serverType: 'geoserver'
|
|
serverType: 'geoserver'
|
|
}),
|
|
}),
|
|
@@ -583,7 +761,7 @@ const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
-let map; // 定义为全局变量
|
|
|
|
|
|
+let map:any; // 定义为全局变量
|
|
let overviewMapControl: OverviewMap;
|
|
let overviewMapControl: OverviewMap;
|
|
// 地图初始化
|
|
// 地图初始化
|
|
const initializeMap = () => {
|
|
const initializeMap = () => {
|
|
@@ -602,11 +780,11 @@ const initializeMap = () => {
|
|
view: view
|
|
view: view
|
|
});
|
|
});
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
// 定义鹰眼视图层
|
|
// 定义鹰眼视图层
|
|
const overviewMapLayer = new TileLayer({
|
|
const overviewMapLayer = new TileLayer({
|
|
source: new TileWMS({
|
|
source: new TileWMS({
|
|
- url: 'http://192.168.43.77:8080/geoserver/wms',
|
|
|
|
|
|
+ url: 'http://192.168.127.124:8080/geoserver/wms',
|
|
params: {
|
|
params: {
|
|
'LAYERS': 'basemap:province', // 选择可见的图层为省级
|
|
'LAYERS': 'basemap:province', // 选择可见的图层为省级
|
|
'TILED': true,
|
|
'TILED': true,
|
|
@@ -624,7 +802,7 @@ const initializeMap = () => {
|
|
layers: [overviewMapLayer]
|
|
layers: [overviewMapLayer]
|
|
});
|
|
});
|
|
map.addControl(overviewMapControl);
|
|
map.addControl(overviewMapControl);
|
|
-
|
|
|
|
|
|
+
|
|
// 显示小数点经纬度
|
|
// 显示小数点经纬度
|
|
map.on('pointermove', (evt) => {
|
|
map.on('pointermove', (evt) => {
|
|
// const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
|
|
// const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
|
|
@@ -637,11 +815,11 @@ const initializeMap = () => {
|
|
watch(isEagleEyeOn, (newValue) => {
|
|
watch(isEagleEyeOn, (newValue) => {
|
|
overviewMapControl.setCollapsed(!newValue);
|
|
overviewMapControl.setCollapsed(!newValue);
|
|
});
|
|
});
|
|
-// 鹰眼图层的初始化
|
|
|
|
-const initializeOverviewMap = () => {
|
|
|
|
|
|
+// 鹰眼图层的初始化
|
|
|
|
+const initializeOverviewMap = () => {
|
|
const overviewMapLayer = new TileLayer({
|
|
const overviewMapLayer = new TileLayer({
|
|
source: new TileWMS({
|
|
source: new TileWMS({
|
|
- url: 'http://192.168.43.77:8080/geoserver/wms',
|
|
|
|
|
|
+ url: 'http://192.168.127.124:8080/geoserver/wms',
|
|
params: {
|
|
params: {
|
|
'LAYERS': 'basemap:province',
|
|
'LAYERS': 'basemap:province',
|
|
'TILED': true,
|
|
'TILED': true,
|
|
@@ -652,7 +830,7 @@ const initializeOverviewMap = () => {
|
|
serverType: 'geoserver'
|
|
serverType: 'geoserver'
|
|
})
|
|
})
|
|
})
|
|
})
|
|
-};
|
|
|
|
|
|
+};
|
|
|
|
|
|
// 查询所有人工要素字典表
|
|
// 查询所有人工要素字典表
|
|
const elementList =ref<any>([])
|
|
const elementList =ref<any>([])
|
|
@@ -664,10 +842,10 @@ const getAllRgDataList = async () => {
|
|
|
|
|
|
// 存放选中要素列表
|
|
// 存放选中要素列表
|
|
const copiedCustomizeColumns = ref<any>([]);
|
|
const copiedCustomizeColumns = ref<any>([]);
|
|
-// 要素的选中和取消
|
|
|
|
|
|
+// 要素的选中和取消
|
|
const toggleSelection = (item) => {
|
|
const toggleSelection = (item) => {
|
|
item.isSelected = !item.isSelected;
|
|
item.isSelected = !item.isSelected;
|
|
-
|
|
|
|
|
|
+
|
|
if (item.isSelected) {
|
|
if (item.isSelected) {
|
|
// 添加选中的要素
|
|
// 添加选中的要素
|
|
copiedCustomizeColumns.value.push(item);
|
|
copiedCustomizeColumns.value.push(item);
|
|
@@ -687,12 +865,19 @@ const toggleSelection = (item) => {
|
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
- // 在组件挂载时初始化地图
|
|
|
|
|
|
+ // 在组件挂载时初始化地图
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
+ // startInterval(); // 组件中挂载启动时间器
|
|
|
|
+ updateTime(); // 页面加载时更新时间
|
|
|
|
+ // selectedTime.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes());
|
|
getAllRgDataList(); // 存放人工选择的要素列表
|
|
getAllRgDataList(); // 存放人工选择的要素列表
|
|
initializeMap();
|
|
initializeMap();
|
|
- getPlatforms();
|
|
|
|
|
|
+ getPlatforms();
|
|
});
|
|
});
|
|
|
|
+ // 在组件卸载时清除定时器
|
|
|
|
+onUnmounted(() => {
|
|
|
|
+ stopInterval();
|
|
|
|
+});
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -707,7 +892,7 @@ const toggleSelection = (item) => {
|
|
</style>
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-.map {
|
|
|
|
|
|
+.map {
|
|
width: 100%;
|
|
width: 100%;
|
|
/* height: 100vh; */
|
|
/* height: 100vh; */
|
|
height: calc(100vh - 50px); /* 使用 calc() 来确保地图占满视口高度,减去上方的固定高度 */
|
|
height: calc(100vh - 50px); /* 使用 calc() 来确保地图占满视口高度,减去上方的固定高度 */
|
|
@@ -740,25 +925,40 @@ const toggleSelection = (item) => {
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
-.slider-scale {
|
|
|
|
- width: 720px;
|
|
|
|
- margin-top: -10px;
|
|
|
|
|
|
+.slider-scale {
|
|
|
|
+ width: 720px;
|
|
|
|
+ margin-top: -10px;
|
|
}
|
|
}
|
|
|
|
|
|
.gis-bottom-box {
|
|
.gis-bottom-box {
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
/* 经纬度所在位置 */
|
|
/* 经纬度所在位置 */
|
|
.mouse-position {
|
|
.mouse-position {
|
|
- position: absolute;
|
|
|
|
- bottom: 0px;
|
|
|
|
- right: 1px;
|
|
|
|
- background-color: rgba(255, 255, 255, 0.7);
|
|
|
|
- padding: 3px;
|
|
|
|
- border: 1px solid #ccc;
|
|
|
|
- font-size: 14px;
|
|
|
|
- z-index: 1000;
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0px;
|
|
|
|
+ right: 1px;
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.7);
|
|
|
|
+ padding: 3px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ z-index: 1000;
|
|
}
|
|
}
|
|
|
|
+/**时间轴样式 */
|
|
|
|
+.gis-bottom-hei-state {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ padding: 4px 0px 0px 4px; /*上、右、下、左内边距。增加右侧间距*/
|
|
|
|
+ background-color: #fffdfd; /* 背景颜色 */
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ display: inline-block; /* 让容器适应内容大小 */
|
|
|
|
+ font-size: 14px; /* 调整字体大小,确保时间显示清晰 */
|
|
|
|
+ white-space: nowrap; /* 防止换行 */
|
|
|
|
+}
|
|
|
|
+/**时间间隔 */
|
|
|
|
+
|
|
|
|
+
|
|
</style>
|
|
</style>
|