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