feat(): 地图点位渲染
parent
1a50dd39fc
commit
e27ba28cee
4
App.vue
4
App.vue
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"runmode":"liberate",
|
||||
"runmode" : "liberate",
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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)
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in New Issue