Commit 98d11b03 authored by 冯超鹏's avatar 冯超鹏

提交新模块

parent c54b85fe
<template>
<view class="server-place">
<map
id='map'
ref='map'
v-bind:style="{height: mapH + 'px'}"
style="width: 100%;"
:latitude="latitude"
:longitude="longitude"
:controls='controls'
@regionchange='mapChange'>
<map id='map' ref='map' v-bind:style="{height: mapH + 'px'}" style="width: 100%;" :latitude="latitude" :longitude="longitude"
:controls='controls' @regionchange='mapChange'>
</map>
<view class="map-tools">
<button style="top:-800upx;left: 300upx;" class="cu-btn round bg-grey shadow" @click="onnone">取消</button>
<!-- 点击这个取消怎么触发引用的方法 -->
<view class="my-location" @tap="toMyLocation">
<image class="left" src="../../static/jjdd.png" mode=""></image>
<view class="right">
......@@ -27,7 +20,7 @@
<text class="text">{{addressObj.address}}</text>
</view>
<view class="tip">{{descText}}</view>
<button @tap="submitAdress" class="sure" type="primary">确认选择</button>
<button @tap="submitAdress" class="sure" type="primary" >确认选择</button>
</view>
</view>
</view>
......@@ -78,9 +71,9 @@
},
mounted() {
this.getLocation()
this.initMapH()
this.initMapH();
},
methods:{
methods: {
// 查询现在的位置
getLocation() {
let this_ = this
......@@ -106,7 +99,7 @@
this.latitude = res.latitude;
this.myAddress = await this.getAddressName(res);
this.addressObj = Object.assign({}, this.addressObj,{
this.addressObj = Object.assign({}, this.addressObj, {
longitude: res.longitude,
latitude: res.latitude,
address: this.myAddress
......@@ -115,7 +108,7 @@
// 地图选择位置后 查询地点名称
async checkMap(res) {
this.addressObj = Object.assign({}, this.addressObj,{
this.addressObj = Object.assign({}, this.addressObj, {
longitude: res.longitude,
latitude: res.latitude,
address: await this.getAddressName(res)
......@@ -166,9 +159,10 @@
// #ifndef APP-PLUS
// ======================== jsonp跨域 ========================
const KEY = 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
let locationObj = addressObj.latitude+','+addressObj.longitude
let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
this.$jsonp(url,{
let locationObj = addressObj.latitude + ',' + addressObj.longitude
let url =
'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
this.$jsonp(url, {
key: KEY,
location: locationObj
}).then(e => {
......@@ -200,16 +194,18 @@
submitAdress() {
this.controls = []
uni.setStorageSync('longitislongir', this.addressObj);
uni.navigateBack({
delta: 1,
});
}
this.$emit('hideModalmap',this.addressObj)
},
onnone(){
// console.log('我执行了');
this.$emit('hideModalmap','')
},
},
}
</script>
<style lang="scss" scoped>
.server-place{
.server-place {
position: fixed;
left: 0;
top: 0;
......@@ -217,7 +213,8 @@
width: 100%;
background: #ffffff;
z-index: 999;
.icon-img{
.icon-img {
width: 36px;
height: 36px;
display: block;
......@@ -227,7 +224,8 @@
transform: translate(-50%, -50%);
margin-top: -70px;
}
.map-tools{
.map-tools {
position: fixed;
width: 100%;
bottom: 0rem;
......@@ -237,7 +235,8 @@
justify-content: center;
align-items: center;
flex-direction: column;
.my-location{
.my-location {
width: 90%;
margin: 0 auto;
height: 2.5rem;
......@@ -248,13 +247,15 @@
justify-content: flex-start;
align-items: center;
overflow: hidden;
.left{
.left {
background: #3384ff;
// flex: 20%;
width: 2.5rem;
height: 100%;
}
.right{
.right {
font-size: 0.57rem;
margin-left: .5rem;
color: #111;
......@@ -263,10 +264,11 @@
justify-content: center;
align-items: flex-start;
flex-direction: column;
.text{
.text {
width: 12rem;
overflow: hidden;
white-space:nowrap;
white-space: nowrap;
text-overflow: ellipsis;
color: #3384FF;
margin-top: .3rem;
......@@ -274,7 +276,7 @@
}
}
.start-place{
.start-place {
width: 85%;
margin: 0 auto;
height: 5.5rem;
......@@ -284,13 +286,15 @@
background: #fff;
border-radius: 0.5rem;
padding: .5rem;
.place{
.title{
.place {
.title {
font-size: 0.67rem;
font-weight: bold;
color: #111;
}
.text{
.text {
font-size: 0.76rem;
color: #3384FF;
font-weight: bold;
......@@ -299,16 +303,18 @@
display: inline-block;
margin-left: .5rem;
overflow: hidden;
white-space:nowrap;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.tip{
.tip {
font-size: 0.57rem;
color: #666;
margin-top: .5rem;
}
.sure{
.sure {
margin-top: .5rem;
color: #FFFFFF;
background: #212121;
......
const baseUrl = 'http://sjzzhanglutpddns.utools.club/api/';
const baseUrl = 'http://36.148.1.58:81/api/';
const httpRequest = (opts, data) => {
let httpDefaultOpts = {
url: baseUrl + opts.url,
......
This diff is collapsed.
......@@ -10,33 +10,146 @@
</view>
<scroll-view scroll-x class="bg-white nav text-center">
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tagdata" :key="index" @tap="tabSelect"
:data-id="index" :data-tagname="item">
{{item}}
:data-id="index" :data-tagname="item.name" :data-type="item.type">
{{item.name}}
</view>
</scroll-view>
<view class="cu-list menu-avatar" style="margin-top: 12upx;margin-bottom: 120upx;">
<view class="cu-item" v-for="(item,index) in devicelist" :key="index" @click="devicceinfo(item.id)">
<view class="cu-avatar round lg" :style="item.status_name === '正常' ? icon_device_li_green : icon_device_li "></view>
<view class="content">
<view class="text-grey">{{item.usernickname}}</view>
<view class="text-gray text-sm">设备编号:{{item.devicenum}}</view>
</view>
<view class="action" :style="item.status_name.length === 5 ? 'margin-right:60upx;' : (item.status_name.length === 4 ? 'margin-right:30upx;' : '')"
style="margin-top:25upx;">
<view :class="item.status_name === '正常'? 'cu-tag bg-green' : 'cu-tag bg-red' ">{{item.status_name}}</view>
</view>
</view>
<view class="loadingjiazai" v-if="loadingjiazai || count > 10">
<view class="cu-load bg-grey" v-if="overs" :class="!isLoad?'loading':'over'"></view>
<view class="cu-load bg-grey" v-if="isover" @click="adddevivelist">点击加载</view>
</view>
</view>
</view>
</view>
</template>
<script>
import http from '@/components/utils/http.js';
export default {
data() {
return {
TabCur: 0,
tagdata: ['危化监测','消防监测'],
icon_device_li_green: 'background-image: url(../../static/img/icon_device_li_green.png)',
icon_device_li: 'background-image:url(../../static/img/icon_device_li.png)',
tagdata: [{
'name': '危化监测',
'type': 2,
}, {
'name': '消防监测',
'type': 1
}],
tagname: '危化监测',
page: 1,
limit: 10,
devicelist: [],
count: '',
loadingjiazai: false,
isover: true,
overs: false,
type: '',
isLoad: false,
};
},
methods: {
tabSelect(e) {
this.page = 1;
this.isover = true;
this.overs = false;
this.TabCur = e.currentTarget.dataset.id;
this.tagname = e.currentTarget.dataset.tagname;
this.type = e.currentTarget.dataset.type;
this.control(e.currentTarget.dataset.type)
},
control(type) {
uni.showLoading({
title: '加载数据中...'
});
let opts = {
url: 'devices/control',
method: 'get'
};
let data = {
page: this.page,
limit: this.limit,
type: type === undefined ? '2' : type
};
http.httpRequest(opts, data).then(res => {
uni.hideLoading();
this.devicelist = res.data.data.devicelist;
this.count = res.data.data.count;
}, error => {
console.log(error);
})
},
//跳转设备详情
devicceinfo(id) {
let opts = {
url: 'huinapphome/devicedatainfo/' + id,
method: 'get'
};
http.httpRequest(opts).then(res => {
if (res.data.code === 200) {
uni.navigateTo({
url: '/pages/basics/deviceinfo?data=' + JSON.stringify(res.data.data),
});
}
}, error => {
console.log(error);
})
},
adddevivelist() {
++this.page;
let data = {
page: this.page,
limit: this.limit,
type: this.type,
};
let opts = {
url: 'devices/control',
method: 'get'
};
http.httpRequest(opts, data).then(res => {
var isLoadding = res.data.data.devicelist.length >= 1 ? true : false;
let arr = res.data.data.devicelist
arr.map((val, index, arr) => {
this.devicelist.push(val);
})
if (res.data.data.devicelist.length != 0) {
this.isover = true; //点击加载
this.overs = false;
} else {
this.isover = false; //点击加载
this.overs = true;
this.isLoad = true;
}
}, error => {
console.log(error);
})
},
},
created() {
// this.
this.control();
},
}
</script>
<style>
.loadingjiazai {
margin-top: 20rpx;
filter: alpha(Opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment