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

提交新模块

parent c54b85fe
<template> <template>
<view class="server-place"> <view class="server-place">
<map <map id='map' ref='map' v-bind:style="{height: mapH + 'px'}" style="width: 100%;" :latitude="latitude" :longitude="longitude"
id='map' :controls='controls' @regionchange='mapChange'>
ref='map'
v-bind:style="{height: mapH + 'px'}"
style="width: 100%;"
:latitude="latitude"
:longitude="longitude"
:controls='controls'
@regionchange='mapChange'>
</map> </map>
<view class="map-tools"> <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"> <view class="my-location" @tap="toMyLocation">
<image class="left" src="../../static/jjdd.png" mode=""></image> <image class="left" src="../../static/jjdd.png" mode=""></image>
<view class="right"> <view class="right">
...@@ -27,7 +20,7 @@ ...@@ -27,7 +20,7 @@
<text class="text">{{addressObj.address}}</text> <text class="text">{{addressObj.address}}</text>
</view> </view>
<view class="tip">{{descText}}</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> </view>
</view> </view>
...@@ -78,9 +71,9 @@ ...@@ -78,9 +71,9 @@
}, },
mounted() { mounted() {
this.getLocation() this.getLocation()
this.initMapH() this.initMapH();
}, },
methods:{ methods: {
// 查询现在的位置 // 查询现在的位置
getLocation() { getLocation() {
let this_ = this let this_ = this
...@@ -106,7 +99,7 @@ ...@@ -106,7 +99,7 @@
this.latitude = res.latitude; this.latitude = res.latitude;
this.myAddress = await this.getAddressName(res); this.myAddress = await this.getAddressName(res);
this.addressObj = Object.assign({}, this.addressObj,{ this.addressObj = Object.assign({}, this.addressObj, {
longitude: res.longitude, longitude: res.longitude,
latitude: res.latitude, latitude: res.latitude,
address: this.myAddress address: this.myAddress
...@@ -115,7 +108,7 @@ ...@@ -115,7 +108,7 @@
// 地图选择位置后 查询地点名称 // 地图选择位置后 查询地点名称
async checkMap(res) { async checkMap(res) {
this.addressObj = Object.assign({}, this.addressObj,{ this.addressObj = Object.assign({}, this.addressObj, {
longitude: res.longitude, longitude: res.longitude,
latitude: res.latitude, latitude: res.latitude,
address: await this.getAddressName(res) address: await this.getAddressName(res)
...@@ -166,9 +159,10 @@ ...@@ -166,9 +159,10 @@
// #ifndef APP-PLUS // #ifndef APP-PLUS
// ======================== jsonp跨域 ======================== // ======================== jsonp跨域 ========================
const KEY = 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE' const KEY = 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
let locationObj = addressObj.latitude+','+addressObj.longitude 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'; let url =
this.$jsonp(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, key: KEY,
location: locationObj location: locationObj
}).then(e => { }).then(e => {
...@@ -200,16 +194,18 @@ ...@@ -200,16 +194,18 @@
submitAdress() { submitAdress() {
this.controls = [] this.controls = []
uni.setStorageSync('longitislongir', this.addressObj); uni.setStorageSync('longitislongir', this.addressObj);
uni.navigateBack({ this.$emit('hideModalmap',this.addressObj)
delta: 1, },
}); onnone(){
} // console.log('我执行了');
this.$emit('hideModalmap','')
},
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.server-place{ .server-place {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
...@@ -217,7 +213,8 @@ ...@@ -217,7 +213,8 @@
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
z-index: 999; z-index: 999;
.icon-img{
.icon-img {
width: 36px; width: 36px;
height: 36px; height: 36px;
display: block; display: block;
...@@ -227,7 +224,8 @@ ...@@ -227,7 +224,8 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin-top: -70px; margin-top: -70px;
} }
.map-tools{
.map-tools {
position: fixed; position: fixed;
width: 100%; width: 100%;
bottom: 0rem; bottom: 0rem;
...@@ -237,7 +235,8 @@ ...@@ -237,7 +235,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.my-location{
.my-location {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
height: 2.5rem; height: 2.5rem;
...@@ -248,13 +247,15 @@ ...@@ -248,13 +247,15 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
.left{
.left {
background: #3384ff; background: #3384ff;
// flex: 20%; // flex: 20%;
width: 2.5rem; width: 2.5rem;
height: 100%; height: 100%;
} }
.right{
.right {
font-size: 0.57rem; font-size: 0.57rem;
margin-left: .5rem; margin-left: .5rem;
color: #111; color: #111;
...@@ -263,10 +264,11 @@ ...@@ -263,10 +264,11 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
.text{
.text {
width: 12rem; width: 12rem;
overflow: hidden; overflow: hidden;
white-space:nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: #3384FF; color: #3384FF;
margin-top: .3rem; margin-top: .3rem;
...@@ -274,7 +276,7 @@ ...@@ -274,7 +276,7 @@
} }
} }
.start-place{ .start-place {
width: 85%; width: 85%;
margin: 0 auto; margin: 0 auto;
height: 5.5rem; height: 5.5rem;
...@@ -284,13 +286,15 @@ ...@@ -284,13 +286,15 @@
background: #fff; background: #fff;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: .5rem; padding: .5rem;
.place{
.title{ .place {
.title {
font-size: 0.67rem; font-size: 0.67rem;
font-weight: bold; font-weight: bold;
color: #111; color: #111;
} }
.text{
.text {
font-size: 0.76rem; font-size: 0.76rem;
color: #3384FF; color: #3384FF;
font-weight: bold; font-weight: bold;
...@@ -299,16 +303,18 @@ ...@@ -299,16 +303,18 @@
display: inline-block; display: inline-block;
margin-left: .5rem; margin-left: .5rem;
overflow: hidden; overflow: hidden;
white-space:nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.tip{
.tip {
font-size: 0.57rem; font-size: 0.57rem;
color: #666; color: #666;
margin-top: .5rem; margin-top: .5rem;
} }
.sure{
.sure {
margin-top: .5rem; margin-top: .5rem;
color: #FFFFFF; color: #FFFFFF;
background: #212121; background: #212121;
......
const baseUrl = 'http://sjzzhanglutpddns.utools.club/api/'; const baseUrl = 'http://36.148.1.58:81/api/';
const httpRequest = (opts, data) => { const httpRequest = (opts, data) => {
let httpDefaultOpts = { let httpDefaultOpts = {
url: baseUrl + opts.url, url: baseUrl + opts.url,
......
This diff is collapsed.
...@@ -10,33 +10,146 @@ ...@@ -10,33 +10,146 @@
</view> </view>
<scroll-view scroll-x class="bg-white nav text-center"> <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" <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"> :data-id="index" :data-tagname="item.name" :data-type="item.type">
{{item}} {{item.name}}
</view> </view>
</scroll-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> </view>
</template> </template>
<script> <script>
import http from '@/components/utils/http.js';
export default { export default {
data() { data() {
return { return {
TabCur: 0, 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: '危化监测', tagname: '危化监测',
page: 1,
limit: 10,
devicelist: [],
count: '',
loadingjiazai: false,
isover: true,
overs: false,
type: '',
isLoad: false,
}; };
}, },
methods: { methods: {
tabSelect(e) { tabSelect(e) {
this.page = 1;
this.isover = true;
this.overs = false;
this.TabCur = e.currentTarget.dataset.id; this.TabCur = e.currentTarget.dataset.id;
this.tagname = e.currentTarget.dataset.tagname; 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() { created() {
// this. this.control();
}, },
} }
</script> </script>
<style> <style>
.loadingjiazai {
margin-top: 20rpx;
filter: alpha(Opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style> </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