feat(): 地图点位渲染

master
李神峰 2024-11-22 17:44:00 +08:00
parent 1a50dd39fc
commit e27ba28cee
15 changed files with 281 additions and 102 deletions

View File

@ -12,8 +12,8 @@
console.log(token.secretKey,'App Launch')
} else {
uni.reLaunch({
// url: '/pages/login/login'
url:'/pages/zhjs/index'
url: '/pages/login/login'
// url:'/pages/zhjs/index'
})
console.log(token.secretKey,'App Launch2')
}

View File

@ -10,7 +10,7 @@
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"nvueStyleCompiler" : "uni-app",
"runmode":"liberate",
"runmode" : "liberate",
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,

View File

@ -91,7 +91,7 @@
{
value: '综合监视',
key: 1,
icon: '../../static/tabs/yujing_icon@2x2.png',
icon: '../../static/tabs/zhjs.png',
url: '/pages/zhjs/index'
},
{
@ -273,7 +273,7 @@
.navIcon {
position: relative;
width: 84px;
width: 82px;
height: 50px;
}

View File

@ -7,7 +7,11 @@
<view style="margin-top: 70px; padding: 10px;">
<SlTable :tableData="slData" v-if="name == '渗流监测'"></SlTable>
<ZwyTable :tableData="zwyData" v-else-if="name == ''"></ZwyTable>
<ZwyTable :tableData="zwyData" v-else-if="name == ''"></ZwyTable>
<ZwyTable :tableData="zwyData" v-else-if="name == ''"></ZwyTable>
<ZsyTable :tableData="zsyData" v-else-if="name == ''"></ZsyTable>
<ZsyTable :tableData="zsyData" v-else-if="name == ''"></ZsyTable>
<ZwyTable :tableData="zwyData" v-else-if="name == ''"></ZwyTable>
</view>
</view>
</template>

View File

@ -3,10 +3,10 @@
<div class="table_cur">
<table style="width:100%;display:block">
<tr>
<th style="width: 19%;">
<th style="width: 20%;">
监测点
</th>
<th style="width: 21%;">
<th style="width: 20%;">
监测时间
</th>
<th style="width: 20%;">X方向(mm)</th>
@ -16,8 +16,8 @@
<!-- style="max-height: 480px; overflow-y: auto" -->
<div class="scroll-table">
<tr v-for="(item, index) in tableData" :key="index">
<td style="width: 19%;">{{item.stationCode}}</td>
<td style="width: 21%;">{{simpleData(item.tm)}}</td>
<td style="width: 20%;">{{item.stationCode}}</td>
<td style="width: 20%;">{{simpleData(item.tm)}}</td>
<td style="width:20%;">{{ item.x }}</td>
<td style="width:20%;">{{ item.y }}</td>
<td style="width:20%;">{{ item.h }}</td>

View File

@ -1,98 +1,111 @@
<template>
<view class="project-cotent">
<view class="total-des">
<view style="opacity:0.5">工程概况</view>
<view>{{skInfo.projOverview}}</view>
</view>
<view class="project-basic">
<view class="project-loc">
<text style="opacity:0.5">水库水位定位信息</text>
<view class="sk-location">
<image src='../../../static/images/loc.png' style="width:20px;height:20px"></image>
<text style="margin-left:10px">{{skInfo.resLoc}}</text>
</view>
</view>
</view>
<view class="sk-map12">
<map style="width: 100%;height:500px; flex: 1" id="container" :latitude="lnglat[1]" :longitude="lnglat[0]"
:markers="markers" scale="13" ></map>
</view>
<view class="project-cotent">
<view class="total-des">
<view style="opacity:0.5">工程概况</view>
<view>{{skInfo.projOverview}}</view>
</view>
<view class="project-basic">
<view class="project-loc">
<text style="opacity:0.5">水库水位定位信息</text>
<view class="sk-location">
<image src='../../../static/images/loc.png' style="width:20px;height:20px"></image>
<text style="margin-left:10px">{{skInfo.resLoc}}</text>
</view>
</view>
</view>
<view >
<map style="width: 100%;" id="container" :latitude="lnglat[1]" :longitude="lnglat[0]"
:markers="markers" scale="13"></map>
</view>
</view>
</template>
<script>
export default {
props:{
skInfo:{
type:Object,
default:{}
}
export default {
props: {
skInfo: {
type: Object,
default: {}
}
},
data() {
return {
lnglat: [114.76,31.52],
markers: [{
latitude: 31.52,
longitude: 114.76,
iconPath: '../../../static/tabs/add.png',
width:25,
height:25
}]
}
return {
lnglat: [114.76, 31.52],
markers: [{
latitude: 31.52,
longitude: 114.76,
iconPath: '../../../static/tabs/add.png',
width: 25,
height: 25
}]
}
},
}
}
</script>
<style lang="scss">
.project-cotent{
position: relative;
padding: 0px 3px;
background-color: #f7f7f7;
// max-height: calc(100vh - 40px);
// overflow-y: auto;
.project-basic{
background-color: #ffffff;
padding: 5px;
margin-top: 5px;
}
.project-des{
display: flex;
flex-wrap: wrap;
border: 1px solid #f2f2f2;
background-color: #ffffff;
padding: 0 10px;
.circle-dot{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #409eff;
margin-left: 10px;
}
.label-name{
display: flex;
flex-direction: column;
align-items: center;
flex:1
}
}
}
.total-des{
margin-top: 10px;
background-color: #ffffff;
padding: 10px;
.project-cotent {
position: absolute;
padding: 0px 3px;
background-color: #f7f7f7;
overflow: hidden;
// max-height: calc(100vh - 40px);
// overflow-y: auto;
.project-basic {
// position: relative;
background-color: #ffffff;
padding: 5px;
margin-top: 5px;
}
.sk-location{
.project-des {
display: flex;
flex-wrap: wrap;
border: 1px solid #f2f2f2;
background-color: #ffffff;
padding: 0 10px;
.circle-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #409eff;
margin-left: 10px;
}
.label-name {
display: flex;
flex-direction: column;
align-items: center;
flex: 1
}
}
.sk-map12{
// height: 400px;
} .amap-logo {
opacity: 0 !important;
} .amap-copyright {
opacity: 0 !important;
}
}
.total-des {
margin-top: 10px;
background-color: #ffffff;
padding: 10px;
}
.sk-location {
display: flex;
align-items: center;
}
.sk-map12 {
// height: 400px;
}
.amap-logo {
opacity: 0 !important;
}
.amap-copyright {
opacity: 0 !important;
}
</style>

View File

@ -8,7 +8,7 @@
<Skjj v-if="tabs == 0" :skInfo="skInfo"></Skjj>
<Jcxx v-if="tabs == 1"></Jcxx>
<!-- 基础信息 -->
<Tzcs v-if="tabs == 2" :skInfo="skInfo"></Tzcs>
<Tzcs v-if="tabs == 2" :skInfo="skInfo" :value="jumpParams"></Tzcs>
<Krqx v-if="tabs == 3"></Krqx>
<Zrtx v-if="tabs == 4"></Zrtx>
@ -23,10 +23,10 @@
import Skjj from "./basicInfo.vue"
import Tzcs from "./tzcs.vue"
export default {
data() {
return {
tabs:0,
jumpParams:'',
model: {
stm: '',
etm: ''
@ -54,8 +54,10 @@
Skjj,
Tzcs
},
onLoad() {
onLoad(options) {
this.getList();
this.tabs = options.value || 0;
this.jumpParams = options.key || '';
},
methods: {
click(item) {

View File

@ -0,0 +1,31 @@
//MyVideo
//iframe
<template>
<iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script>
export default {
props: {
src: {}
},
data() {
return {
onloadCode: '',
lnglat: [114.76, 31.52],
markers: [{
latitude: 31.52,
longitude: 114.76,
iconPath: '../../../static/tabs/add.png',
width: 25,
height: 25
}]
}
},
created() {
this.onloadCode =
`this.contentWindow.document.body.innerHTML = '<map style="width: 100%;" id="container" latitude="${this.lnglat[1]}" longitude="${this.lnglat[0]}" markers="${this.markers}" ></map>';`
},
}
</script>
<style lang="scss">
</style>

View File

@ -40,6 +40,10 @@
skInfo: {
type: Object,
default: {}
},
value:{
type: String,
default:''
}
},
@ -177,7 +181,10 @@
}
},
mounted() {
this.keyObj = this.skInfo
this.keyObj = this.skInfo;
if(this.value){
this.selectChage(this.value - 0)
}
},
}

View File

@ -8,7 +8,7 @@
height: windowHeight + 'px',
top: '-' + statusBarHeight + 'px'
}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker" :show-location="true"
scale="16.5" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
:scale="scale" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
<cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
<view class="tc-style">
<cover-image src="/static/tabs/tc.png" style="width: 55rpx;height: 55rpx;"
@ -53,6 +53,14 @@
<script>
import moment from 'moment';
const iconObj = {
"溢洪道":{
1: '/static/tabs/yhd1.png',
2: "/static/tabs/yhd2.png"
},
"溢洪道位移":{
1: '/static/tabs/zweiyi1.png',
2: "/static/tabs/zweiyi2.png"
},
"渗流": {
1: '/static/tabs/shenliu1.png',
2: "/static/tabs/shenliu2.png"
@ -81,6 +89,26 @@
1: '/static/tabs/sxt1.png',
2: "/static/tabs/sxt2.png"
},
"发电洞": {
1: '/static/tabs/fdt1.png',
2: "/static/tabs/fdt2.png"
},
"发电洞渗压": {
1: '/static/tabs/zshenya1.png',
2: "/static/tabs/zshenya2.png"
},
"发电洞位移": {
1: '/static/tabs/zweiyi1.png',
2: "/static/tabs/zweiyi2.png"
},
"副坝": {
1: '/static/tabs/zhuba1.png',
2: "/static/tabs/zhuba2.png"
},
"副坝位移": {
1: '/static/tabs/zweiyi1.png',
2: "/static/tabs/zweiyi2.png"
},
}
export default {
data() {
@ -88,12 +116,35 @@
latitude: 31.495,
longitude: 114.767,
enableSatellite: false,
scale:16.5,
popupOpen: false,
typeChecked: 2,
markers: [
{
latitude: 31.4954,
longitude: 114.7693,
latitude: 31.4962,
longitude: 114.7691,
iconPath: '/static/tabs/yhd1.png',
width: 15,
height: 15,
id: 99,
title: "溢洪道",
pointType: "溢洪道",
name: "水库工程"
},
{
latitude: 31.4954,
longitude: 114.7707,
iconPath: '/static/tabs/zweiyi1.png',
width: 15,
height: 15,
id: 98,
title: "溢洪道位移监测",
pointType: "溢洪道位移",
name: "安全监测"
},
{
latitude: 31.4956,
longitude: 114.7691,
iconPath: '/static/tabs/shenliu1.png',
width: 15,
height: 15,
@ -133,6 +184,61 @@
id: 103,
title: "主坝",
pointType: "主坝",
name: "水库工程"
},
{
latitude: 31.490900,
longitude: 114.7666000,
iconPath: '/static/tabs/fdt1.png',
width: 15,
height: 15,
id: 104,
title: "灌溉发电洞",
pointType: "发电洞",
name: "水库工程"
},
{
latitude: 31.490500,
longitude: 114.7664000,
iconPath: '/static/tabs/zshenya1.png',
width: 15,
height: 15,
id: 105,
title: "灌溉发电洞渗压监测",
pointType: "发电洞渗压",
name: "安全监测"
},
{
latitude: 31.490200,
longitude: 114.7667000,
iconPath: '/static/tabs/zweiyi1.png',
width: 15,
height: 15,
id: 106,
title: "灌溉发电洞位移监测",
pointType: "发电洞位移",
name: "安全监测"
},
{
latitude: 31.491300,
longitude: 114.7642000,
iconPath: '/static/tabs/zhuba1.png',
width: 15,
height: 15,
id: 107,
title: "副坝",
pointType: "副坝",
name: "水库工程"
},
{
latitude: 31.491200,
longitude: 114.7636000,
iconPath: '/static/tabs/zweiyi1.png',
width: 15,
height: 15,
id: 108,
title: "副坝位移监测",
pointType: "副坝位移",
name: "安全监测"
},
],
@ -220,6 +326,20 @@
url=`/pages/sjc/index?name=主坝渗压监测`
}else if(type == "主坝"){
url='/pages/skInfo/detail/index'
}else if(type == "溢洪道位移"){
url=`/pages/sjc/index?name=溢洪道位移监测`
}else if(type == "溢洪道"){
url='/pages/skInfo/detail/index?value=2&key=3'
}else if(type == "发电洞"){
url='/pages/skInfo/detail/index?value=2&key=4'
}else if(type == "发电洞渗压"){
url=`/pages/sjc/index?name=灌溉发电洞渗压监测`
}else if(type == "发电洞位移"){
url=`/pages/sjc/index?name=灌溉发电洞位移监测`
}else if(type == "副坝"){
url='/pages/skInfo/detail/index?value=2&key=2'
}else if(type == "副坝位移"){
url=`/pages/sjc/index?name=副坝位移监测`
}
uni.navigateTo({url})
},
@ -248,9 +368,11 @@
this.typeChecked = type
if (type == 1) {
this.enableSatellite = true
this.scale=15.5
} else {
this.enableSatellite = false
this.scale = 16.5
}
},
toggleIcon(item) {
@ -325,13 +447,13 @@
if (data.code == 200) {
const waterList = data.data.map(item => ({
...item,
latitude: item.lttd - 0,
longitude: item.lgtd - 0,
latitude: item.lttd - 0.0001,
longitude: item.lgtd - 0.0001,
iconPath: '/static/tabs/yl1.png',
width: 15,
height: 15,
title: item.stnm,
id: item.stcd,
id: item.stcd + '0',
pointType: "水量",
name: "水雨情监测",
// joinCluster:true

BIN
static/tabs/fdt1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/tabs/fdt2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/tabs/yhd1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/tabs/yhd2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/tabs/zhjs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB