Skip to content

U
uin-app-zehong
Commit 98d11b03 authored by 冯超鹏's avatar 冯超鹏
Browse files
Options

提交新模块

parent c54b85fe
Hide whitespace changes
Inline Side-by-side
Showing with 669 additions and 365 deletions
components/mi-map/mi-map.vue
View file @ 98d11b03
<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>
<view class="map-tools">
<view class="my-location" @tap="toMyLocation">
<image class="left" src="../../static/jjdd.png" mode=""></image>
<view class="right">
<text class="title">我的位置</text>
<text class="text">{{myAddress}}</text>
</view>
</view>
<view class="start-place">
<view class="place">
<text class="title">{{tipText}}</text>
<text class="text">{{addressObj.address}}</text>
</view>
<view class="tip">{{descText}}</view>
<button @tap="submitAdress" class="sure" type="primary">确认选择</button>
</view>
</view>
</view>
</template>
<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>
<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">
<text class="title">我的位置</text>
<text class="text">{{myAddress}}</text>
</view>
</view>
<view class="start-place">
<view class="place">
<text class="title">{{tipText}}</text>
<text class="text">{{addressObj.address}}</text>
</view>
<view class="tip">{{descText}}</view>
<button @tap="submitAdress" class="sure" type="primary" >确认选择</button>
</view>
</view>
</view>
</template>
<script>
const app = getApp()
var QQMapWX = require('./qqmap-wx-jssdk.min.js')
var qqmapsdk = new QQMapWX({
key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
})
export default {
props: {
tipText: {
type: String,
default: '选择位置'
},
descText: {
type: String,
default: '使用当前定位或在地图上标记位置'
},
},
data() {
return {
mapH: 0, // 地图高度，可在initMapH()中设置高度
longitude: 0, // 初始经度
latitude: 0, // 初始纬度
myAddress: '', // 初始地址信息
addressObj: { // 地图选点信息
longitude: '',
latitude: '',
address: '请选择集合地点'
},
controls: [ // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍
{
iconPath: '../../static/position2.png',
position: {
left: 175,
top: 210,
width: 30,
height: 30,
},
clickable: false
}
],
};
},
mounted() {
this.getLocation()
this.initMapH()
},
methods:{
// 查询现在的位置
getLocation() {
let this_ = this
uni.getLocation({
// type: 'gcj02', // 返回国测局坐标
geocode: true,
success: function(res) {
this_.initMap(res)
console.log(res);
},
fail: function(e) {
uni.showToast({
icon: 'none',
title: '获取地址失败, 请检查是否开启定位权限~~'
})
}
})
},
// 初始化我的位置
async initMap(res) {
this.longitude = res.longitude;
this.latitude = res.latitude;
this.myAddress = await this.getAddressName(res);
this.addressObj = Object.assign({}, this.addressObj,{
longitude: res.longitude,
latitude: res.latitude,
address: this.myAddress
})
},
// 地图选择位置后 查询地点名称
async checkMap(res) {
this.addressObj = Object.assign({}, this.addressObj,{
longitude: res.longitude,
latitude: res.latitude,
address: await this.getAddressName(res)
})
console.log('当前位置:' + res.latitude + '|' + res.longitude);
},
// 监听地图位置变化
mapChange(e) {
let that = this
clearTimeout(this.timer)
this.timer = setTimeout(() => {
if (e.type == 'end') {
that.mapCtx = uni.createMapContext('map', this)
that.mapCtx.getCenterLocation({
success: res => {
this.checkMap(res)
},
fail: err => {
console.log(err);
}
})
}
}, 200)
},
// 查询地图中心点的名称
getAddressName(addressObj) {
return new Promise((res) => {
// #ifdef APP-PLUS
qqmapsdk.reverseGeocoder({
location: {
latitude: addressObj.latitude,
longitude: addressObj.longitude
},
get_poi: 1,
poi_options: "page_size=1;page_index=1",
output: 'jsonp',
success: (e) => {
res(e.result.formatted_addresses.recommend);
},
fail: err => {
res(err);
}
})
// #endif
// #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,{
key: KEY,
location: locationObj
}).then(e => {
res(e.result.formatted_addresses.recommend);
})
.catch(err => {
res(err);
})
// #endif
})
},
// 计算地图的高度
initMapH() {
// #ifdef APP-PLUS
this.mapH = uni.getSystemInfoSync().windowHeight - 210;
// #endif
// #ifndef APP-PLUS
this.mapH = uni.getSystemInfoSync().windowHeight - 170;
// #endif
},
// 移动到我的位置
toMyLocation() {
this.getLocation()
},
// 提交
submitAdress() {
this.controls = []
const app = getApp()
var QQMapWX = require('./qqmap-wx-jssdk.min.js')
var qqmapsdk = new QQMapWX({
key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
})
export default {
props: {
tipText: {
type: String,
default: '选择位置'
},
descText: {
type: String,
default: '使用当前定位或在地图上标记位置'
},
},
data() {
return {
mapH: 0, // 地图高度，可在initMapH()中设置高度
longitude: 0, // 初始经度
latitude: 0, // 初始纬度
myAddress: '', // 初始地址信息
addressObj: { // 地图选点信息
longitude: '',
latitude: '',
address: '请选择集合地点'
},
controls: [ // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍
{
iconPath: '../../static/position2.png',
position: {
left: 175,
top: 210,
width: 30,
height: 30,
},
clickable: false
}
],
};
},
mounted() {
this.getLocation()
this.initMapH();
},
methods: {
// 查询现在的位置
getLocation() {
let this_ = this
uni.getLocation({
// type: 'gcj02', // 返回国测局坐标
geocode: true,
success: function(res) {
this_.initMap(res)
console.log(res);
},
fail: function(e) {
uni.showToast({
icon: 'none',
title: '获取地址失败, 请检查是否开启定位权限~~'
})
}
})
},
// 初始化我的位置
async initMap(res) {
this.longitude = res.longitude;
this.latitude = res.latitude;
this.myAddress = await this.getAddressName(res);
this.addressObj = Object.assign({}, this.addressObj, {
longitude: res.longitude,
latitude: res.latitude,
address: this.myAddress
})
},
// 地图选择位置后 查询地点名称
async checkMap(res) {
this.addressObj = Object.assign({}, this.addressObj, {
longitude: res.longitude,
latitude: res.latitude,
address: await this.getAddressName(res)
})
console.log('当前位置:' + res.latitude + '|' + res.longitude);
},
// 监听地图位置变化
mapChange(e) {
let that = this
clearTimeout(this.timer)
this.timer = setTimeout(() => {
if (e.type == 'end') {
that.mapCtx = uni.createMapContext('map', this)
that.mapCtx.getCenterLocation({
success: res => {
this.checkMap(res)
},
fail: err => {
console.log(err);
}
})
}
}, 200)
},
// 查询地图中心点的名称
getAddressName(addressObj) {
return new Promise((res) => {
// #ifdef APP-PLUS
qqmapsdk.reverseGeocoder({
location: {
latitude: addressObj.latitude,
longitude: addressObj.longitude
},
get_poi: 1,
poi_options: "page_size=1;page_index=1",
output: 'jsonp',
success: (e) => {
res(e.result.formatted_addresses.recommend);
},
fail: err => {
res(err);
}
})
// #endif
// #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, {
key: KEY,
location: locationObj
}).then(e => {
res(e.result.formatted_addresses.recommend);
})
.catch(err => {
res(err);
})
// #endif
})
},
// 计算地图的高度
initMapH() {
// #ifdef APP-PLUS
this.mapH = uni.getSystemInfoSync().windowHeight - 210;
// #endif
// #ifndef APP-PLUS
this.mapH = uni.getSystemInfoSync().windowHeight - 170;
// #endif
},
// 移动到我的位置
toMyLocation() {
this.getLocation()
},
// 提交
submitAdress() {
this.controls = []
uni.setStorageSync('longitislongir', this.addressObj);
uni.navigateBack({
delta: 1,
});
}
},
}
</script>
<style lang="scss" scoped>
.server-place{
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background: #ffffff;
z-index: 999;
.icon-img{
width: 36px;
height: 36px;
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: -70px;
}
.map-tools{
position: fixed;
width: 100%;
bottom: 0rem;
left: 0;
padding-bottom: .5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.my-location{
width: 90%;
margin: 0 auto;
height: 2.5rem;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 0.5rem;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
.left{
background: #3384ff;
// flex: 20%;
width: 2.5rem;
height: 100%;
}
.right{
font-size: 0.57rem;
margin-left: .5rem;
color: #111;
// flex: 80%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
.text{
width: 12rem;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
color: #3384FF;
margin-top: .3rem;
}
}
}
.start-place{
width: 85%;
margin: 0 auto;
height: 5.5rem;
margin: 0 auto;
margin-top: .6rem;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 0.5rem;
padding: .5rem;
.place{
.title{
font-size: 0.67rem;
font-weight: bold;
color: #111;
}
.text{
font-size: 0.76rem;
color: #3384FF;
font-weight: bold;
width: 12rem;
vertical-align: middle;
display: inline-block;
margin-left: .5rem;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
}
.tip{
font-size: 0.57rem;
color: #666;
margin-top: .5rem;
}
.sure{
margin-top: .5rem;
color: #FFFFFF;
background: #212121;
font-weight: 600;
}
}
}
}
this.$emit('hideModalmap',this.addressObj)
},
onnone(){
// console.log('我执行了');
this.$emit('hideModalmap','')
},
},
}
</script>
<style lang="scss" scoped>
.server-place {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background: #ffffff;
z-index: 999;
.icon-img {
width: 36px;
height: 36px;
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: -70px;
}
.map-tools {
position: fixed;
width: 100%;
bottom: 0rem;
left: 0;
padding-bottom: .5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.my-location {
width: 90%;
margin: 0 auto;
height: 2.5rem;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 0.5rem;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
.left {
background: #3384ff;
// flex: 20%;
width: 2.5rem;
height: 100%;
}
.right {
font-size: 0.57rem;
margin-left: .5rem;
color: #111;
// flex: 80%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
.text {
width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #3384FF;
margin-top: .3rem;
}
}
}
.start-place {
width: 85%;
margin: 0 auto;
height: 5.5rem;
margin: 0 auto;
margin-top: .6rem;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 0.5rem;
padding: .5rem;
.place {
.title {
font-size: 0.67rem;
font-weight: bold;
color: #111;
}
.text {
font-size: 0.76rem;
color: #3384FF;
font-weight: bold;
width: 12rem;
vertical-align: middle;
display: inline-block;
margin-left: .5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.tip {
font-size: 0.57rem;
color: #666;
margin-top: .5rem;
}
.sure {
margin-top: .5rem;
color: #FFFFFF;
background: #212121;
font-weight: 600;
}
}
}
}
</style>
components/utils/http.js
View file @ 98d11b03
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,
......
pages/adddevice/home.vue
View file @ 98d11b03
......@@ -5,22 +5,22 @@
</cu-custom>
<!-- 表单开始 -->
<view style="z-index: 9999999999;overflow:scroll;height: 100%;margin-bottom: 140upx;">
<form>
<form @submit="formSubmit">
<view class="cu-form-group margin-top">
<view class="title">设备名称</view>
<input placeholder="请输入设备名称" name="input"></input>
<input placeholder="请输入设备名称" name="username"></input>
</view>
<view class="cu-form-group">
<view class="title">设备编号</view>
<input placeholder="请输入设备编号" name="input"></input>
<input placeholder="请输入设备编号" name="devicenum"></input>
</view>
<view class="cu-form-group">
<view class="title">设备联系人</view>
<input placeholder="请输入设备联系人" name="input"></input>
<input placeholder="请输入设备联系人" name="devicelinkman"></input>
</view>
<view class="cu-form-group">
<view class="title">设备联系人手机号</view>
<input placeholder="联系人手机号" name="input"></input>
<input placeholder="联系人手机号" name="devicephone"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
+86
......@@ -33,72 +33,176 @@
<!-- 设备类型 -->
<view class="cu-form-group">
<view class="title">设备类型</view>
<picker @change="PickerChange" :value="index" :range="picker">
<picker @change="PickerChange" data-type="1" :value="index1" :range="devicetype" :range-key="'tname'">
<view class="picker">
{{index>-1?picker[index]:'请选择设备类型'}}
{{index1>-1?devicetype[index1].tname:'请选择设备类型'}}
</view>
</picker>
</view>
<!-- 检测介质 -->
<view class="cu-form-group">
<view class="title">监测介质</view>
<picker @change="PickerChange" :value="index" :range="picker">
<picker @change="PickerChange" data-type="2" :value="index2" :range="gas" :range-key="'gas'">
<view class="picker">
{{index>-1?picker[index]:'请选择监测介质'}}
{{index2>-1?gas[index2].gas:'请选择监测介质'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">设备单位</view>
<picker @change="PickerChange" :value="index" :range="picker">
<picker @change="PickerChange" data-type="3" :value="index3" :range="danwei" :range-key="'danwei'">
<view class="picker">
{{index>-1?picker[index]:'请选择设备单位'}}
{{index3>-1?danwei[index3].danwei:'请选择设备单位'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">选择用户</view>
<picker @change="PickerChange" :value="index" :range="picker">
<picker @change="PickerChange" data-type="4" :value="index4" :range="addUserDevice" :range-key="'name'">
<view class="picker">
{{index>-1?picker[index]:'请选择用户'}}
{{index4>-1?addUserDevice[index4].name:'请选择用户'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">设备坐标</view>
<input placeholder="请输入设备坐标" name="input" :value="longitisdata.longitude +',' + longitisdata.latitude"></input>
<button class='cu-btn bg-green shadow' @click="addnpm()">拾取坐标</button>
<input placeholder="请输入设备坐标" name="devicecoord" :value="longitisdata.longitude == undefined ? '' : longitisdata.longitude +',' + longitisdata.latitude"></input>
<button class='cu-btn bg-green shadow' @tap="showModal" data-target="bottomModal">拾取坐标</button>
</view>
<view class="cu-form-group">
<view class="title">设备安装位置</view>
<input placeholder="请输入安装位置" name="input" :value="longitisdata.address">{{ }}</input>
<input placeholder="请输入安装位置" name="deviceinfo" :value="longitisdata.address"></input>
</view>
<view class="cu-form-group align-start">
<view class="title">设备备注</view>
<textarea maxlength="-1" :disabled="modalName1!=null" @input="textareaBInput" placeholder="请输入设备备注"></textarea>
<textarea maxlength="-1" :disabled="modalName1!=null" @input="textareaBInput" placeholder="请输入设备备注" name='deviceremark'></textarea>
</view>
<button class="cu-btn bg-grey lg" style="width: 90%;height: 80upx;margin-left: 40upx;margin-top: 20upx;z-index: 999;">提交</button>
<button form-type="submit" class="cu-btn bg-grey lg" style="width: 90%;height: 80upx;margin-left: 40upx;margin-top: 20upx;z-index: 999;">提交</button>
</form>
<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
<view class="cu-dialog" style="border-radius: 1;height: 92%;">
<view class="cu-bar bg-white">
<view class="action text-green">确定</view>
<view class="action text-blue" @tap="hideModal">取消</view>
</view>
<scroll-view class="padding-xl">
<scroll-view class="content">
<mi-map @miMap="miMap" @hideModalmap='hideModalmap' v-if="mapShow" ref="miMap" @updateAddress="updateAddress">
</mi-map>
</scroll-view>
</scroll-view>
</view>
</view>
</view>
</view>
</template>
<script>
import http from '@/components/utils/http.js';
import miMap from '../../components/mi-map/mi-map.vue';
export default {
components: {
miMap,
},
data() {
return {
modalName: null,
modalName1: null,
picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
index: -1,
index1: -1,
index2: -1,
index3: -1,
index4: -1,
id: 0,
textareaBValue: '',
textareaBValue: '',
longitisdata: [],
devicetypetid: '',
devicetype: [],
addUserDevice: [],
addUserDeviceid: '',
danwei: [],
danweiid: '',
gas: [],
gasid: '',
mapShow: true,
positionObj: {},
};
},
methods: {
PickerChange(e) {
this.index = e.detail.value
switch (parseInt(e.currentTarget.dataset.type)) {
case 1:
this.index1 = e.detail.value;
this.datadeviceid(1, e.detail.value);
break;
case 2:
this.index2 = e.detail.value;
this.datadeviceid(2, e.detail.value);
break;
case 3:
this.index3 = e.detail.value;
this.datadeviceid(3, e.detail.value);
break;
case 4:
this.index4 = e.detail.value;
this.datadeviceid(4, e.detail.value);
break;
default:
}
},
datadeviceid(type, indexpot) {
switch (type) {
case 1:
this.devicetypetid = this.devicetype[indexpot].tid;
break;
case 2:
this.gasid = this.gas[indexpot].id;
break;
case 3:
this.danweiid = this.danwei[indexpot].id;
break;
case 4:
this.addUserDeviceid = this.addUserDevice[indexpot].id;
break;
default:
}
},
formSubmit(e) {
let data = {
devicecoord: e.detail.value.devicecoord,
deviceinfo: e.detail.value.deviceinfo,
devicelinkman: e.detail.value.devicelinkman,
devicenum: e.detail.value.devicenum,
devicephone: e.detail.value.devicephone,
deviceremark: e.detail.value.deviceremark,
username: e.detail.value.username,
dtype: this.devicetypetid,
status: this.gasid,
devicemonad: this.danweiid,
uid: this.addUserDeviceid,
}
if (this.isdatadevice(data)) {
let opts = {
url: 'devices/adddevice',
method: 'post'
};
http.httpRequest(opts, data).then(res => {
console.log(res);
if (res.data.code === 200) {
uni.removeStorageSync('longitislongir');
uni.navigateTo({
url: '/pages/main/main',
});
}
}, error => {
console.log(error);
})
}
},
// 更新地址并关闭地图
updateAddress(addressObj) {
this.mapShow = false
this.positionObj = addressObj
},
textareaBInput(e) {
this.textareaBValue = e.detail.value
......@@ -106,6 +210,7 @@
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
//点击组件的触发这个方法
hideModal(e) {
this.modalName = null
},
......@@ -116,24 +221,104 @@
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
},
//跳转拾取地图页面
addnpm() {
uni.navigateTo({
url: '/pages/adddevice/mpnaddlink',
});
},
//
issetinfo(){
const value = uni.getStorageSync('longitislongir');
if(value === '' || value === undefined) return false;
this.longitisdata = value;
issetinfo() {
const value = uni.getStorageSync('longitislongir');
if (value === '' || value === undefined) return false;
this.longitisdata = value;
},
devicetypes() {
let opts = {
url: 'devices/devicetype',
method: 'get'
};
http.httpRequest(opts).then(res => {
this.devicetype = res.data.data.devicetype;
this.danwei = res.data.data.danwei;
this.gas = res.data.data.gas;
}, error => {
console.log(error);
})
},
addUserDevices() {
let opts = {
url: 'devices/addUserDevice',
method: 'get'
};
http.httpRequest(opts).then(res => {
this.addUserDevice = Array.from(res.data.data);
}, error => {
console.log(error);
})
},
hideModalmap(e) {
if (e === '') {
this.issetinfo();
} else {
this.longitisdata = e;
}
this.hideModal();
},
//验证用户提交表单内容
isdatadevice(data) {
console.log(data);
if (data.devicecoord === '') {
this.onshowToast('设备坐标不能为空');
} else if (data.deviceinfo === '') {
this.onshowToast('设备安装位置不能为空');
} else if (data.devicelinkman === '') {
this.onshowToast('设备联系人不能为空');
} else if (data.devicelinkman.length > 5 || data.devicelinkman.length < 2) {
this.onshowToast('设备联系人长度 2~5位');
} else if (data.devicemonad === '') {
this.onshowToast('设备单位不能为空');
} else if (data.devicenum === '') {
this.onshowToast('设备编号不能为空');
} else if (data.devicenum.length > 25 || data.devicenum.length < 4) {
this.onshowToast('设备编号长度有误');
} else if (data.devicephone === '') {
this.onshowToast('设备手机号不能为空');
} else if (!(/^1[3456789]\d{9}$/.test(data.devicephone))) {
this.onshowToast('设备手机号格式有误');
} else if (data.deviceremark === '') {
this.onshowToast('设备备注不能为空');
} else if (data.dtype === '') {
this.onshowToast('设备类型不能为空');
} else if (data.status === '') {
this.onshowToast('设备介质不能为空');
} else if (data.uid === '') {
this.onshowToast('请选择用户');
} else if (data.username === '') {
this.onshowToast('设备名称不能为空');
} else {
return true;
}
},
//显示提示信息
onshowToast(data) {
uni.showToast({
title: data,
duration: 2000
});
}
},
created() {
this.issetinfo();
this.devicetypes();
this.addUserDevices();
},
created() {
this.issetinfo();
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20upx;
}
.address {
margin-top: 1rem;
}
</style>
pages/component/home.vue
View file @ 98d11b03
......@@ -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: ['危化监测','消防监测'],
TabCur: 0,
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.TabCur = e.currentTarget.dataset.id;
this.tagname = e.currentTarget.dataset.tagname;
}
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.
created() {
this.control();
},
}
</script>
<style>
<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