feat(): 地图模块开发
parent
863f3dbb32
commit
1a50dd39fc
|
|
@ -97,6 +97,12 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/sjc/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mypage/compents/wtcl/index",
|
"path": "pages/mypage/compents/wtcl/index",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<u-navbar :title="name" :autoBack="true" :titleStyle="{
|
||||||
|
fontSize:'18px'
|
||||||
|
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||||
|
</u-navbar>
|
||||||
|
<view style="margin-top: 70px; padding: 10px;">
|
||||||
|
<SlTable :tableData="slData" v-if="name == '渗流监测'"></SlTable>
|
||||||
|
<ZwyTable :tableData="zwyData" v-else-if="name == '主坝位移监测'"></ZwyTable>
|
||||||
|
<ZsyTable :tableData="zsyData" v-else-if="name == '主坝渗压监测'"></ZsyTable>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import SlTable from "./slTable.vue"
|
||||||
|
import ZwyTable from "./zwyTable.vue"
|
||||||
|
import ZsyTable from "./zsyTable.vue"
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
SlTable,
|
||||||
|
ZwyTable,
|
||||||
|
ZsyTable
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
slData:[], //渗流监测
|
||||||
|
zwyData:[],//主坝位移监测
|
||||||
|
zsyData:[],//主坝渗压监测
|
||||||
|
name:'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getSlData(){
|
||||||
|
try {
|
||||||
|
const {data} = await uni.$http.get('/gunshiApp/tsg/osmoticPressR/list/value?type=2')
|
||||||
|
if(data.code == 200){
|
||||||
|
this.slData = data.data;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getZwyData(){
|
||||||
|
try {
|
||||||
|
const {data} = await uni.$http.get('/gunshiApp/tsg/osmoticShiftR/list/value')
|
||||||
|
if(data.code == 200){
|
||||||
|
this.zwyData = data.data;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getzsyData(){
|
||||||
|
try {
|
||||||
|
const {data} = await uni.$http.get('/gunshiApp/tsg/osmoticPressR/list/value?type=1')
|
||||||
|
if(data.code == 200){
|
||||||
|
this.zsyData = data.data;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getSlData();
|
||||||
|
this.getZwyData();
|
||||||
|
this.getzsyData();
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.name=options.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<template>
|
||||||
|
<div class="table_div">
|
||||||
|
<div class="table_cur">
|
||||||
|
<table style="width:100%;display:block">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 30%;">
|
||||||
|
监测点
|
||||||
|
</th>
|
||||||
|
<th style="width: 40%;">
|
||||||
|
监测时间
|
||||||
|
</th>
|
||||||
|
<th style="width: 30%;">渗流量(L/s)</th>
|
||||||
|
</tr>
|
||||||
|
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||||
|
<div class="scroll-table">
|
||||||
|
<tr v-for="(item, index) in tableData" :key="index">
|
||||||
|
<td style="width: 30%;">{{item.stationCode}}</td>
|
||||||
|
<td style="width: 40%;">{{simpleData(item.tm)}}</td>
|
||||||
|
<td style="width:30%;">{{ item.value }}</td>
|
||||||
|
</tr>
|
||||||
|
<div style="height:180px"></div>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
tableData:{
|
||||||
|
type:Array,
|
||||||
|
default:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
simpleData(tm){
|
||||||
|
return moment(tm).format("MM-DD HH:mm")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.table_div {
|
||||||
|
height: 100%;
|
||||||
|
max-width: calc(100% - 0px);
|
||||||
|
// max-height: calc(80vh);
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0px;
|
||||||
|
// overflow-x: scroll;
|
||||||
|
}
|
||||||
|
/*table样式*/
|
||||||
|
.table_cur {
|
||||||
|
width: 100%;
|
||||||
|
empty-cells: show;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.scroll-table{
|
||||||
|
height: calc(55vh - 180px);
|
||||||
|
overflow-y: auto;
|
||||||
|
width:'100%'
|
||||||
|
}
|
||||||
|
.table_cur tr {
|
||||||
|
display: flex;
|
||||||
|
line-height: 75rpx;
|
||||||
|
}
|
||||||
|
.table_cur th {
|
||||||
|
height: 85rpx;
|
||||||
|
color: #3399ef;
|
||||||
|
background: #e1f3ff;
|
||||||
|
font-size: 14px;
|
||||||
|
// font-weight: bold;
|
||||||
|
padding: 0px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_cur td {
|
||||||
|
height: 65rpx;
|
||||||
|
// border-bottom: 1px solid #d8ddeb;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2f4056;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
/*table样式 end*/
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<template>
|
||||||
|
<div class="table_div">
|
||||||
|
<div class="table_cur">
|
||||||
|
<table style="width:100%;display:block">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 19%;">
|
||||||
|
监测点
|
||||||
|
</th>
|
||||||
|
<th style="width: 30%;">所属断面</th>
|
||||||
|
<th style="width: 26%;">
|
||||||
|
监测时间
|
||||||
|
</th>
|
||||||
|
<th style="width: 25%;">管水位(m)</th>
|
||||||
|
</tr>
|
||||||
|
<!-- 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:30%;">{{ item.profileName }}</td>
|
||||||
|
<td style="width: 26%;text-align: center;">{{simpleData(item.tm)}}</td>
|
||||||
|
<td style="width:25%;">{{ item.value }}</td>
|
||||||
|
</tr>
|
||||||
|
<div style="height:180px"></div>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
tableData:{
|
||||||
|
type:Array,
|
||||||
|
default:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
simpleData(tm){
|
||||||
|
if(!tm) return ''
|
||||||
|
return moment(tm).format("MM-DD HH:mm")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.table_div {
|
||||||
|
height: 100%;
|
||||||
|
max-width: calc(100% - 0px);
|
||||||
|
// max-height: calc(80vh);
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0px;
|
||||||
|
// overflow-x: scroll;
|
||||||
|
}
|
||||||
|
/*table样式*/
|
||||||
|
.table_cur {
|
||||||
|
width: 100%;
|
||||||
|
empty-cells: show;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.scroll-table{
|
||||||
|
height: calc(100vh - 180px);
|
||||||
|
overflow-y: auto;
|
||||||
|
width:'100%'
|
||||||
|
}
|
||||||
|
.table_cur tr {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.table_cur th {
|
||||||
|
height: 50px;
|
||||||
|
color: #3399ef;
|
||||||
|
background: #e1f3ff;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: wrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_cur td {
|
||||||
|
height: 75rpx;
|
||||||
|
// border-bottom: 1px solid #d8ddeb;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2f4056;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: wrap;
|
||||||
|
// text-align: center !important;
|
||||||
|
}
|
||||||
|
/*table样式 end*/
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<template>
|
||||||
|
<div class="table_div">
|
||||||
|
<div class="table_cur">
|
||||||
|
<table style="width:100%;display:block">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 19%;">
|
||||||
|
监测点
|
||||||
|
</th>
|
||||||
|
<th style="width: 21%;">
|
||||||
|
监测时间
|
||||||
|
</th>
|
||||||
|
<th style="width: 20%;">X方向(mm)</th>
|
||||||
|
<th style="width: 20%;">Y方向(mm)</th>
|
||||||
|
<th style="width: 20%;">H方向(mm)</th>
|
||||||
|
</tr>
|
||||||
|
<!-- 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.x }}</td>
|
||||||
|
<td style="width:20%;">{{ item.y }}</td>
|
||||||
|
<td style="width:20%;">{{ item.h }}</td>
|
||||||
|
</tr>
|
||||||
|
<div style="height:180px"></div>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
tableData:{
|
||||||
|
type:Array,
|
||||||
|
default:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
simpleData(tm){
|
||||||
|
if(!tm) return ''
|
||||||
|
return moment(tm).format("MM-DD HH:mm")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.table_div {
|
||||||
|
height: 100%;
|
||||||
|
max-width: calc(100% - 0px);
|
||||||
|
// max-height: calc(80vh);
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0px;
|
||||||
|
// overflow-x: scroll;
|
||||||
|
}
|
||||||
|
/*table样式*/
|
||||||
|
.table_cur {
|
||||||
|
width: 100%;
|
||||||
|
empty-cells: show;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.scroll-table{
|
||||||
|
height: calc(100vh - 180px);
|
||||||
|
overflow-y: auto;
|
||||||
|
width:'100%'
|
||||||
|
}
|
||||||
|
.table_cur tr {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.table_cur th {
|
||||||
|
color: #3399ef;
|
||||||
|
background: #e1f3ff;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: wrap;
|
||||||
|
text-align: center !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_cur td {
|
||||||
|
height: 75rpx;
|
||||||
|
// border-bottom: 1px solid #d8ddeb;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2f4056;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: wrap;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
/*table样式 end*/
|
||||||
|
</style>
|
||||||
|
|
@ -1,119 +1,386 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="zhjs-container">
|
<view class="zhjs-container">
|
||||||
<u-navbar title="综合监视" :autoBack="true" :titleStyle="{
|
<u-navbar title="综合监视" :autoBack="true" :titleStyle="{
|
||||||
fontSize:'18px'
|
fontSize:'18px'
|
||||||
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||||
</u-navbar>
|
</u-navbar>
|
||||||
<map :style="{
|
<map :style="{
|
||||||
height: windowHeight + 'px',
|
height: windowHeight + 'px',
|
||||||
top: '-' + statusBarHeight + 'px'
|
top: '-' + statusBarHeight + 'px'
|
||||||
}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker"
|
}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker" :show-location="true"
|
||||||
:show-location="true" scale="16.5" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
|
scale="16.5" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
|
||||||
<image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></image>
|
<cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
|
||||||
<view class="tc-style">
|
<view class="tc-style">
|
||||||
<image src="/static/tabs/tc.png" style="width: 45rpx;height: 45rpx;" @click="onControlTap"></image>
|
<cover-image src="/static/tabs/tc.png" style="width: 55rpx;height: 55rpx;"
|
||||||
<text style="font-size:12px;">图层</text>
|
@click="onTcControlTap"></cover-image>
|
||||||
</view>
|
<text style="font-size:12px;">图层</text>
|
||||||
</map>
|
</view>
|
||||||
|
</map>
|
||||||
|
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false">
|
||||||
|
<view style="padding: 30px 10px 10px 10px; width: 300px;">
|
||||||
|
<view>
|
||||||
|
<text style="font-size: 16px;">底图类型</text>
|
||||||
|
<view style="display: flex;
|
||||||
|
flex-direction: row; padding:10px;">
|
||||||
|
<view style="display: flex; align-items: center; margin-right: 20px;">
|
||||||
|
<cover-image src="/static/tabs/weix.png" style="width: 100rpx;height: 100rpx;"
|
||||||
|
@click="onMode(1)"></cover-image>
|
||||||
|
<text :style="typeChecked == 1 ? {color:'#227eff',fontSize:14} :{color:'#000',fontSize:14}">影像图</text>
|
||||||
|
</view>
|
||||||
|
<view style="display: flex; align-items: center;">
|
||||||
|
<cover-image src="/static/tabs/slt.jpg" style="width: 100rpx;height: 100rpx;"
|
||||||
|
@click="onMode(2)"></cover-image>
|
||||||
|
<text :style="typeChecked == 2 ? {color:'#227eff',fontSize:14} :{color:'#000',fontSize:14}">矢量图</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
<view style="margin-top: 30px;">
|
||||||
|
<text style="font-size: 16px;">监视对象</text>
|
||||||
|
<view style="display: flex;flex-direction: row; padding:10px;">
|
||||||
|
<view v-for="item in watchObj" :key="item.id"
|
||||||
|
style="display: flex; align-items: center; margin-right: 10px;">
|
||||||
|
<cover-image :src="item.showIcon" style="width: 50rpx;height: 50rpx;"
|
||||||
|
@click="toggleIcon(item)"></cover-image>
|
||||||
|
<text :style="{color: item.textColor,fontSize:14}">{{item.name}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import moment from 'moment';
|
||||||
data() {
|
const iconObj = {
|
||||||
return {
|
"渗流": {
|
||||||
latitude: 31.495,
|
1: '/static/tabs/shenliu1.png',
|
||||||
longitude: 114.767,
|
2: "/static/tabs/shenliu2.png"
|
||||||
enableSatellite:false,
|
},
|
||||||
markers: [
|
"雨量": {
|
||||||
{
|
1: '/static/tabs/sl1.png',
|
||||||
latitude: 31.4954,
|
2: "/static/tabs/sl2.png"
|
||||||
longitude: 114.7693,
|
},
|
||||||
iconPath: '/static/tabs/shenliu1.png',
|
"水量": {
|
||||||
width: "20",
|
1: '/static/tabs/yl1.png',
|
||||||
height: "20",
|
2: "/static/tabs/yl2.png"
|
||||||
id:1,
|
},
|
||||||
title:"渗流监测"
|
"主坝": {
|
||||||
},
|
1: '/static/tabs/zhuba1.png',
|
||||||
],
|
2: "/static/tabs/zhuba2.png"
|
||||||
map:null,
|
},
|
||||||
windowHeight:0,
|
"主坝位移": {
|
||||||
windowHeight:0
|
1: '/static/tabs/zweiyi1.png',
|
||||||
}
|
2: "/static/tabs/zweiyi2.png"
|
||||||
|
},
|
||||||
|
"主坝渗压": {
|
||||||
|
1: '/static/tabs/zshenya1.png',
|
||||||
|
2: "/static/tabs/zshenya2.png"
|
||||||
|
},
|
||||||
|
"视频监控": {
|
||||||
|
1: '/static/tabs/sxt1.png',
|
||||||
|
2: "/static/tabs/sxt2.png"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
latitude: 31.495,
|
||||||
|
longitude: 114.767,
|
||||||
|
enableSatellite: false,
|
||||||
|
popupOpen: false,
|
||||||
|
typeChecked: 2,
|
||||||
|
markers: [
|
||||||
|
{
|
||||||
|
latitude: 31.4954,
|
||||||
|
longitude: 114.7693,
|
||||||
|
iconPath: '/static/tabs/shenliu1.png',
|
||||||
|
width: 15,
|
||||||
|
height: 15,
|
||||||
|
id: 100,
|
||||||
|
title: "渗流监测",
|
||||||
|
pointType: "渗流",
|
||||||
|
name: "安全监测"
|
||||||
},
|
},
|
||||||
created() {
|
{
|
||||||
let that = this;
|
latitude: 31.4933000,
|
||||||
uni.getSystemInfo({
|
longitude: 114.7686000,
|
||||||
success(res) {
|
iconPath: '/static/tabs/zweiyi1.png',
|
||||||
that.windowHeight = res.windowHeight;
|
width: 15,
|
||||||
that.windowHeight = res.windowHeight + res.statusBarHeight;
|
height: 15,
|
||||||
that.statusBarHeight = res.statusBarHeight;
|
id: 101,
|
||||||
that.navTop = res.statusBarHeight + 10;
|
title: "主坝位移监测",
|
||||||
}
|
pointType: "主坝位移",
|
||||||
})
|
name: "安全监测"
|
||||||
},
|
},
|
||||||
onReady() {
|
{
|
||||||
this.map = uni.createMapContext("map")
|
latitude: 31.4917000,
|
||||||
|
longitude: 114.7686000,
|
||||||
|
iconPath: '/static/tabs/zshenya1.png',
|
||||||
|
width: 15,
|
||||||
|
height: 15,
|
||||||
|
id: 102,
|
||||||
|
title: "主坝渗压监测",
|
||||||
|
pointType: "主坝渗压",
|
||||||
|
name: "安全监测"
|
||||||
},
|
},
|
||||||
methods: {
|
{
|
||||||
onControlTap(){
|
latitude: 31.492300,
|
||||||
this.$refs.map.moveToLocation({
|
longitude: 114.7686000,
|
||||||
latitude: 31.495,
|
iconPath: '/static/tabs/zhuba1.png',
|
||||||
longitude: 114.767
|
width: 15,
|
||||||
})
|
height: 15,
|
||||||
|
id: 103,
|
||||||
|
title: "主坝",
|
||||||
|
pointType: "主坝",
|
||||||
|
name: "安全监测"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
map: null,
|
||||||
|
windowHeight: 0,
|
||||||
|
windowHeight: 0,
|
||||||
|
watchObj: [{
|
||||||
|
icon1: "/static/tabs/shuiku1.png",
|
||||||
|
icon2: "/static/tabs/shuiku2.png",
|
||||||
|
name: "水库工程",
|
||||||
|
id: 1,
|
||||||
|
showIcon: "/static/tabs/shuiku2.png",
|
||||||
|
textColor: "#02a7f0",
|
||||||
|
isSelected1: true
|
||||||
},
|
},
|
||||||
markertap(e){
|
{
|
||||||
const newMarker = this.markers
|
icon1: "/static/tabs/anquan1.png",
|
||||||
newMarker.forEach(((item,i) => {
|
icon2: "/static/tabs/anquan2.png",
|
||||||
if(item.id === e.detail.markerId){
|
name: "安全监测",
|
||||||
item.height=55;
|
id: 2,
|
||||||
item.width=55;
|
showIcon: "/static/tabs/anquan2.png",
|
||||||
// item.label={
|
textColor: "#02a7f0",
|
||||||
// content:"测试",
|
isSelected2: true,
|
||||||
// color:"#57a7f0",
|
},
|
||||||
// bgColor:"transparent"
|
{
|
||||||
// }
|
icon1: "/static/tabs/shuiyu1.png",
|
||||||
}else{
|
icon2: "/static/tabs/shuiyu2.png",
|
||||||
item.height=25;
|
name: "水雨情监测",
|
||||||
item.width=25;
|
id: 3,
|
||||||
// item.label={
|
showIcon: "/static/tabs/shuiyu2.png",
|
||||||
// content:" ",
|
textColor: "#02a7f0",
|
||||||
// bgColor:"transparent"
|
isSelected3: true,
|
||||||
// }
|
|
||||||
}
|
},
|
||||||
}));
|
{
|
||||||
console.log("newMarker",newMarker);
|
icon1: "/static/tabs/sxt1.png",
|
||||||
this.markers = [...newMarker];
|
icon2: "/static/tabs/sxt2.png",
|
||||||
}
|
name: "视频监控",
|
||||||
},
|
id: 4,
|
||||||
computed:{
|
showIcon: "/static/tabs/sxt2.png",
|
||||||
marker(){
|
textColor: "#02a7f0",
|
||||||
return this.markers.slice(0)
|
isSelected4: true,
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
let that = this;
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success(res) {
|
||||||
|
that.windowHeight = res.windowHeight;
|
||||||
|
that.windowHeight = res.windowHeight + res.statusBarHeight;
|
||||||
|
that.statusBarHeight = res.statusBarHeight;
|
||||||
|
that.navTop = res.statusBarHeight + 10;
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
this.map = uni.createMapContext("map")
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onControlTap() {
|
||||||
|
this.$refs.map.moveToLocation({
|
||||||
|
latitude: 31.495,
|
||||||
|
longitude: 114.767
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onTcControlTap() {
|
||||||
|
this.popupOpen = true;
|
||||||
|
},
|
||||||
|
// 跳转详细信息
|
||||||
|
jumpDeatails(type, data) {
|
||||||
|
let url;
|
||||||
|
if (type == "视频监控") {
|
||||||
|
url=`/pages/spjk/spbf/index?info=${encodeURIComponent(JSON.stringify(data))}`
|
||||||
|
}else if( type == '雨量'){
|
||||||
|
url=`/pages/ylzList/detail/index?stnm=${data.stnm}&stcd=${data.stcd}`
|
||||||
|
}else if( type == '水量'){
|
||||||
|
url=`/pages/sws/detail/index?stnm=${data.stnm}&stcd=${data.stcd}`
|
||||||
|
}else if( type == '渗流'){
|
||||||
|
url=`/pages/sjc/index?name=渗流监测`
|
||||||
|
}else if(type == "主坝位移"){
|
||||||
|
url=`/pages/sjc/index?name=主坝位移监测`
|
||||||
|
}else if(type == "主坝渗压"){
|
||||||
|
url=`/pages/sjc/index?name=主坝渗压监测`
|
||||||
|
}else if(type == "主坝"){
|
||||||
|
url='/pages/skInfo/detail/index'
|
||||||
|
}
|
||||||
|
uni.navigateTo({url})
|
||||||
|
},
|
||||||
|
markertap(e) {
|
||||||
|
const newMarker = this.markers
|
||||||
|
newMarker.forEach(((item, i) => {
|
||||||
|
const type = item.pointType
|
||||||
|
if (item.id == e.detail.markerId) {
|
||||||
|
if (item.width == 25) {
|
||||||
|
this.jumpDeatails(type, item)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
item.height = 25;
|
||||||
|
item.width = 25;
|
||||||
|
item.iconPath = iconObj[type][2];
|
||||||
|
} else {
|
||||||
|
item.height = 15;
|
||||||
|
item.width = 15;
|
||||||
|
item.iconPath = iconObj[type][1];
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
this.markers = [...newMarker];
|
||||||
|
},
|
||||||
|
// 模式切换
|
||||||
|
onMode(type) {
|
||||||
|
this.typeChecked = type
|
||||||
|
if (type == 1) {
|
||||||
|
this.enableSatellite = true
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.enableSatellite = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleIcon(item) {
|
||||||
|
this.watchObj.forEach(i => {
|
||||||
|
if (i.id === item.id) {
|
||||||
|
i.showIcon = i["isSelected" + item.id] ? i.icon1 : i.icon2;;
|
||||||
|
i.textColor = i["isSelected" + item.id] ? "black" : "#02a7f0";
|
||||||
|
i["isSelected" + item.id] = !i["isSelected" + item.id];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取视频点
|
||||||
|
async getVideoList() {
|
||||||
|
try {
|
||||||
|
const {
|
||||||
|
data
|
||||||
|
} = await uni.$http.post("/gunshiApp/tsg/attCctvBase/list")
|
||||||
|
if (data.code == 200) {
|
||||||
|
const videoList = data.data.map(item => ({
|
||||||
|
...item,
|
||||||
|
latitude: item.lttd - 0,
|
||||||
|
longitude: item.lgtd - 0,
|
||||||
|
iconPath: '/static/tabs/sxt1.png',
|
||||||
|
width: 15,
|
||||||
|
height: 15,
|
||||||
|
title: item.name,
|
||||||
|
id: item.id,
|
||||||
|
pointType: "视频监控",
|
||||||
|
name: "视频监控"
|
||||||
|
}))
|
||||||
|
this.markers = [...this.markers, ...videoList]
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取雨情点
|
||||||
|
async getRainList() {
|
||||||
|
try {
|
||||||
|
const {
|
||||||
|
data
|
||||||
|
} = await uni.$http.post("/gunshiApp/tsg/real/rain/list", {
|
||||||
|
stm: moment().add(-1, 'days').format('YYYY-MM-DD 08:00:00'),
|
||||||
|
etm: moment(moment().format('YYYY-MM-DD 08:00:00'))
|
||||||
|
})
|
||||||
|
if (data.code == 200) {
|
||||||
|
const rainList = data.data.map(item => ({
|
||||||
|
...item,
|
||||||
|
latitude: item.lttd - 0,
|
||||||
|
longitude: item.lgtd - 0,
|
||||||
|
iconPath: '/static/tabs/sl1.png',
|
||||||
|
width: 15,
|
||||||
|
height: 15,
|
||||||
|
title: item.stnm,
|
||||||
|
id: item.stcd,
|
||||||
|
pointType: "雨量",
|
||||||
|
name: "水雨情监测",
|
||||||
|
// joinCluster:true
|
||||||
|
}))
|
||||||
|
this.markers = [...this.markers, ...rainList]
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取水量点
|
||||||
|
async getWaterList() {
|
||||||
|
try {
|
||||||
|
const {
|
||||||
|
data
|
||||||
|
} = await uni.$http.post("/gunshiApp/tsg/reservoir/water/list", )
|
||||||
|
if (data.code == 200) {
|
||||||
|
const waterList = data.data.map(item => ({
|
||||||
|
...item,
|
||||||
|
latitude: item.lttd - 0,
|
||||||
|
longitude: item.lgtd - 0,
|
||||||
|
iconPath: '/static/tabs/yl1.png',
|
||||||
|
width: 15,
|
||||||
|
height: 15,
|
||||||
|
title: item.stnm,
|
||||||
|
id: item.stcd,
|
||||||
|
pointType: "水量",
|
||||||
|
name: "水雨情监测",
|
||||||
|
// joinCluster:true
|
||||||
|
}))
|
||||||
|
this.markers = [...this.markers, ...waterList]
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
marker() {
|
||||||
|
const filterCat = this.watchObj.filter((item, i) => item['isSelected' + (i + 1)])
|
||||||
|
const res = this.markers.filter(item => {
|
||||||
|
return filterCat.some((o => o.name == item.name))
|
||||||
|
})
|
||||||
|
return res.slice(0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getVideoList();
|
||||||
|
this.getRainList();
|
||||||
|
this.getWaterList();
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.location{
|
.location {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height:35px;
|
height: 35px;
|
||||||
bottom: 50px;
|
bottom: 50px;
|
||||||
left:10px;
|
left: 10px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
.tc-style{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 5px;
|
|
||||||
top: 200px;
|
|
||||||
right:10px;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
// padding: 5px;
|
.tc-style {
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px;
|
||||||
|
top: 200px;
|
||||||
|
right: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
// padding: 5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 216 B After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in New Issue