lishenfeng
/
tsg-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 地图点位渲染

master
李神峰 2024-11-22 17:44:00 +08:00
parent 1a50dd39fc
commit e27ba28cee
15 changed files with 281 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

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

2
manifest.json
View File

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

4
pages/homeIndex/index.vue
View File

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

4
pages/sjc/index.vue
View File

@ -7,7 +7,11 @@
<view style="margin-top: 70px; padding: 10px;"> <view style="margin-top: 70px; padding: 10px;">
<SlTable :tableData="slData" v-if="name == '渗流监测'"></SlTable> <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>
<ZwyTable :tableData="zwyData" v-else-if="name == '副坝位移监测'"></ZwyTable>
<ZsyTable :tableData="zsyData" v-else-if="name == '主坝渗压监测'"></ZsyTable> <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>
</view> </view>
</template> </template>

8
pages/sjc/zwyTable.vue
View File

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

63
pages/skInfo/detail/basicInfo.vue
View File

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

8
pages/skInfo/detail/index.vue
View File

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

31
pages/skInfo/detail/myMap.vue Normal file
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>

9
pages/skInfo/detail/tzcs.vue
View File

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

132
pages/zhjs/subnvue/index.nvue
View File

@ -8,7 +8,7 @@
height: windowHeight + 'px', height: windowHeight + 'px',
top: '-' + statusBarHeight + 'px' top: '-' + statusBarHeight + 'px'
}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker" :show-location="true" }" 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> <cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
<view class="tc-style"> <view class="tc-style">
<cover-image src="/static/tabs/tc.png" style="width: 55rpx;height: 55rpx;" <cover-image src="/static/tabs/tc.png" style="width: 55rpx;height: 55rpx;"
@ -53,6 +53,14 @@
<script> <script>
import moment from 'moment'; import moment from 'moment';
const iconObj = { 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', 1: '/static/tabs/shenliu1.png',
2: "/static/tabs/shenliu2.png" 2: "/static/tabs/shenliu2.png"
@ -81,6 +89,26 @@
1: '/static/tabs/sxt1.png', 1: '/static/tabs/sxt1.png',
2: "/static/tabs/sxt2.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 { export default {
data() { data() {
@ -88,12 +116,35 @@
latitude: 31.495, latitude: 31.495,
longitude: 114.767, longitude: 114.767,
enableSatellite: false, enableSatellite: false,
scale:16.5,
popupOpen: false, popupOpen: false,
typeChecked: 2, typeChecked: 2,
markers: [ markers: [
{
latitude: 31.4962,
longitude: 114.7691,
iconPath: '/static/tabs/yhd1.png',
width: 15,
height: 15,
id: 99,
title: "溢洪道",
pointType: "溢洪道",
name: "水库工程"
},
{ {
latitude: 31.4954, latitude: 31.4954,
longitude: 114.7693, 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', iconPath: '/static/tabs/shenliu1.png',
width: 15, width: 15,
height: 15, height: 15,
@ -133,6 +184,61 @@
id: 103, id: 103,
title: "主坝", title: "主坝",
pointType: "主坝", 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: "安全监测" name: "安全监测"
}, },
], ],
@ -220,6 +326,20 @@
url=`/pages/sjc/index?name=主坝渗压监测` url=`/pages/sjc/index?name=主坝渗压监测`
}else if(type == "主坝"){ }else if(type == "主坝"){
url='/pages/skInfo/detail/index' 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}) uni.navigateTo({url})
}, },
@ -248,9 +368,11 @@
this.typeChecked = type this.typeChecked = type
if (type == 1) { if (type == 1) {
this.enableSatellite = true this.enableSatellite = true
this.scale=15.5
} else { } else {
this.enableSatellite = false this.enableSatellite = false
this.scale = 16.5
} }
}, },
toggleIcon(item) { toggleIcon(item) {
@ -325,13 +447,13 @@
if (data.code == 200) { if (data.code == 200) {
const waterList = data.data.map(item => ({ const waterList = data.data.map(item => ({
...item, ...item,
latitude: item.lttd - 0, latitude: item.lttd - 0.0001,
longitude: item.lgtd - 0, longitude: item.lgtd - 0.0001,
iconPath: '/static/tabs/yl1.png', iconPath: '/static/tabs/yl1.png',
width: 15, width: 15,
height: 15, height: 15,
title: item.stnm, title: item.stnm,
id: item.stcd, id: item.stcd + '0',
pointType: "水量", pointType: "水量",
name: "水雨情监测", name: "水雨情监测",
// joinCluster:true // joinCluster:true

BIN
static/tabs/fdt1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/tabs/fdt2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/tabs/yhd1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/tabs/yhd2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/tabs/zhjs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB