Commit c54b85fe authored by 冯超鹏's avatar 冯超鹏

提交新模块uinapp模块

parent f8475937
<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>
<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 = []
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;
}
}
}
}
</style>
var ERROR_CONF = { KEY_ERR: 311, KEY_ERR_MSG: 'key格式错误', PARAM_ERR: 310, PARAM_ERR_MSG: '请求参数信息有误', SYSTEM_ERR: 600, SYSTEM_ERR_MSG: '系统错误', WX_ERR_CODE: 1000, WX_OK_CODE: 200 }; var BASE_URL = 'https://apis.map.qq.com/ws/'; var URL_SEARCH = BASE_URL + 'place/v1/search'; var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion'; var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/'; var URL_CITY_LIST = BASE_URL + 'district/v1/list'; var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren'; var URL_DISTANCE = BASE_URL + 'distance/v1/'; var URL_DIRECTION = BASE_URL + 'direction/v1/'; var MODE = { driving: 'driving', transit: 'transit' }; var EARTH_RADIUS = 6378136.49; var Utils = { safeAdd(x, y) { var lsw = (x & 0xffff) + (y & 0xffff); var msw = (x >> 16) + (y >> 16) + (lsw >> 16); return (msw << 16) | (lsw & 0xffff) }, bitRotateLeft(num, cnt) { return (num << cnt) | (num >>> (32 - cnt)) }, md5cmn(q, a, b, x, s, t) { return this.safeAdd(this.bitRotateLeft(this.safeAdd(this.safeAdd(a, q), this.safeAdd(x, t)), s), b) }, md5ff(a, b, c, d, x, s, t) { return this.md5cmn((b & c) | (~b & d), a, b, x, s, t) }, md5gg(a, b, c, d, x, s, t) { return this.md5cmn((b & d) | (c & ~d), a, b, x, s, t) }, md5hh(a, b, c, d, x, s, t) { return this.md5cmn(b ^ c ^ d, a, b, x, s, t) }, md5ii(a, b, c, d, x, s, t) { return this.md5cmn(c ^ (b | ~d), a, b, x, s, t) }, binlMD5(x, len) { x[len >> 5] |= 0x80 << (len % 32); x[((len + 64) >>> 9 << 4) + 14] = len; var i; var olda; var oldb; var oldc; var oldd; var a = 1732584193; var b = -271733879; var c = -1732584194; var d = 271733878; for (i = 0; i < x.length; i += 16) { olda = a; oldb = b; oldc = c; oldd = d; a = this.md5ff(a, b, c, d, x[i], 7, -680876936); d = this.md5ff(d, a, b, c, x[i + 1], 12, -389564586); c = this.md5ff(c, d, a, b, x[i + 2], 17, 606105819); b = this.md5ff(b, c, d, a, x[i + 3], 22, -1044525330); a = this.md5ff(a, b, c, d, x[i + 4], 7, -176418897); d = this.md5ff(d, a, b, c, x[i + 5], 12, 1200080426); c = this.md5ff(c, d, a, b, x[i + 6], 17, -1473231341); b = this.md5ff(b, c, d, a, x[i + 7], 22, -45705983); a = this.md5ff(a, b, c, d, x[i + 8], 7, 1770035416); d = this.md5ff(d, a, b, c, x[i + 9], 12, -1958414417); c = this.md5ff(c, d, a, b, x[i + 10], 17, -42063); b = this.md5ff(b, c, d, a, x[i + 11], 22, -1990404162); a = this.md5ff(a, b, c, d, x[i + 12], 7, 1804603682); d = this.md5ff(d, a, b, c, x[i + 13], 12, -40341101); c = this.md5ff(c, d, a, b, x[i + 14], 17, -1502002290); b = this.md5ff(b, c, d, a, x[i + 15], 22, 1236535329); a = this.md5gg(a, b, c, d, x[i + 1], 5, -165796510); d = this.md5gg(d, a, b, c, x[i + 6], 9, -1069501632); c = this.md5gg(c, d, a, b, x[i + 11], 14, 643717713); b = this.md5gg(b, c, d, a, x[i], 20, -373897302); a = this.md5gg(a, b, c, d, x[i + 5], 5, -701558691); d = this.md5gg(d, a, b, c, x[i + 10], 9, 38016083); c = this.md5gg(c, d, a, b, x[i + 15], 14, -660478335); b = this.md5gg(b, c, d, a, x[i + 4], 20, -405537848); a = this.md5gg(a, b, c, d, x[i + 9], 5, 568446438); d = this.md5gg(d, a, b, c, x[i + 14], 9, -1019803690); c = this.md5gg(c, d, a, b, x[i + 3], 14, -187363961); b = this.md5gg(b, c, d, a, x[i + 8], 20, 1163531501); a = this.md5gg(a, b, c, d, x[i + 13], 5, -1444681467); d = this.md5gg(d, a, b, c, x[i + 2], 9, -51403784); c = this.md5gg(c, d, a, b, x[i + 7], 14, 1735328473); b = this.md5gg(b, c, d, a, x[i + 12], 20, -1926607734); a = this.md5hh(a, b, c, d, x[i + 5], 4, -378558); d = this.md5hh(d, a, b, c, x[i + 8], 11, -2022574463); c = this.md5hh(c, d, a, b, x[i + 11], 16, 1839030562); b = this.md5hh(b, c, d, a, x[i + 14], 23, -35309556); a = this.md5hh(a, b, c, d, x[i + 1], 4, -1530992060); d = this.md5hh(d, a, b, c, x[i + 4], 11, 1272893353); c = this.md5hh(c, d, a, b, x[i + 7], 16, -155497632); b = this.md5hh(b, c, d, a, x[i + 10], 23, -1094730640); a = this.md5hh(a, b, c, d, x[i + 13], 4, 681279174); d = this.md5hh(d, a, b, c, x[i], 11, -358537222); c = this.md5hh(c, d, a, b, x[i + 3], 16, -722521979); b = this.md5hh(b, c, d, a, x[i + 6], 23, 76029189); a = this.md5hh(a, b, c, d, x[i + 9], 4, -640364487); d = this.md5hh(d, a, b, c, x[i + 12], 11, -421815835); c = this.md5hh(c, d, a, b, x[i + 15], 16, 530742520); b = this.md5hh(b, c, d, a, x[i + 2], 23, -995338651); a = this.md5ii(a, b, c, d, x[i], 6, -198630844); d = this.md5ii(d, a, b, c, x[i + 7], 10, 1126891415); c = this.md5ii(c, d, a, b, x[i + 14], 15, -1416354905); b = this.md5ii(b, c, d, a, x[i + 5], 21, -57434055); a = this.md5ii(a, b, c, d, x[i + 12], 6, 1700485571); d = this.md5ii(d, a, b, c, x[i + 3], 10, -1894986606); c = this.md5ii(c, d, a, b, x[i + 10], 15, -1051523); b = this.md5ii(b, c, d, a, x[i + 1], 21, -2054922799); a = this.md5ii(a, b, c, d, x[i + 8], 6, 1873313359); d = this.md5ii(d, a, b, c, x[i + 15], 10, -30611744); c = this.md5ii(c, d, a, b, x[i + 6], 15, -1560198380); b = this.md5ii(b, c, d, a, x[i + 13], 21, 1309151649); a = this.md5ii(a, b, c, d, x[i + 4], 6, -145523070); d = this.md5ii(d, a, b, c, x[i + 11], 10, -1120210379); c = this.md5ii(c, d, a, b, x[i + 2], 15, 718787259); b = this.md5ii(b, c, d, a, x[i + 9], 21, -343485551); a = this.safeAdd(a, olda); b = this.safeAdd(b, oldb); c = this.safeAdd(c, oldc); d = this.safeAdd(d, oldd) } return [a, b, c, d] }, binl2rstr(input) { var i; var output = ''; var length32 = input.length * 32; for (i = 0; i < length32; i += 8) { output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff) } return output }, rstr2binl(input) { var i; var output = []; output[(input.length >> 2) - 1] = undefined; for (i = 0; i < output.length; i += 1) { output[i] = 0 } var length8 = input.length * 8; for (i = 0; i < length8; i += 8) { output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32) } return output }, rstrMD5(s) { return this.binl2rstr(this.binlMD5(this.rstr2binl(s), s.length * 8)) }, rstrHMACMD5(key, data) { var i; var bkey = this.rstr2binl(key); var ipad = []; var opad = []; var hash; ipad[15] = opad[15] = undefined; if (bkey.length > 16) { bkey = this.binlMD5(bkey, key.length * 8) } for (i = 0; i < 16; i += 1) { ipad[i] = bkey[i] ^ 0x36363636; opad[i] = bkey[i] ^ 0x5c5c5c5c } hash = this.binlMD5(ipad.concat(this.rstr2binl(data)), 512 + data.length * 8); return this.binl2rstr(this.binlMD5(opad.concat(hash), 512 + 128)) }, rstr2hex(input) { var hexTab = '0123456789abcdef'; var output = ''; var x; var i; for (i = 0; i < input.length; i += 1) { x = input.charCodeAt(i); output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f) } return output }, str2rstrUTF8(input) { return unescape(encodeURIComponent(input)) }, rawMD5(s) { return this.rstrMD5(this.str2rstrUTF8(s)) }, hexMD5(s) { return this.rstr2hex(this.rawMD5(s)) }, rawHMACMD5(k, d) { return this.rstrHMACMD5(this.str2rstrUTF8(k), str2rstrUTF8(d)) }, hexHMACMD5(k, d) { return this.rstr2hex(this.rawHMACMD5(k, d)) }, md5(string, key, raw) { if (!key) { if (!raw) { return this.hexMD5(string) } return this.rawMD5(string) } if (!raw) { return this.hexHMACMD5(key, string) } return this.rawHMACMD5(key, string) }, getSig(requestParam, sk, feature, mode) { var sig = null; var requestArr = []; Object.keys(requestParam).sort().forEach(function (key) { requestArr.push(key + '=' + requestParam[key]) }); if (feature == 'search') { sig = '/ws/place/v1/search?' + requestArr.join('&') + sk } if (feature == 'suggest') { sig = '/ws/place/v1/suggestion?' + requestArr.join('&') + sk } if (feature == 'reverseGeocoder') { sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk } if (feature == 'geocoder') { sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk } if (feature == 'getCityList') { sig = '/ws/district/v1/list?' + requestArr.join('&') + sk } if (feature == 'getDistrictByCityId') { sig = '/ws/district/v1/getchildren?' + requestArr.join('&') + sk } if (feature == 'calculateDistance') { sig = '/ws/distance/v1/?' + requestArr.join('&') + sk } if (feature == 'direction') { sig = '/ws/direction/v1/' + mode + '?' + requestArr.join('&') + sk } sig = this.md5(sig); return sig }, location2query(data) { if (typeof data == 'string') { return data } var query = ''; for (var i = 0; i < data.length; i++) { var d = data[i]; if (!!query) { query += ';' } if (d.location) { query = query + d.location.lat + ',' + d.location.lng } if (d.latitude && d.longitude) { query = query + d.latitude + ',' + d.longitude } } return query }, rad(d) { return d * Math.PI / 180.0 }, getEndLocation(location) { var to = location.split(';'); var endLocation = []; for (var i = 0; i < to.length; i++) { endLocation.push({ lat: parseFloat(to[i].split(',')[0]), lng: parseFloat(to[i].split(',')[1]) }) } return endLocation }, getDistance(latFrom, lngFrom, latTo, lngTo) { var radLatFrom = this.rad(latFrom); var radLatTo = this.rad(latTo); var a = radLatFrom - radLatTo; var b = this.rad(lngFrom) - this.rad(lngTo); var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2))); distance = distance * EARTH_RADIUS; distance = Math.round(distance * 10000) / 10000; return parseFloat(distance.toFixed(0)) }, getWXLocation(success, fail, complete) { wx.getLocation({ type: 'gcj02', success: success, fail: fail, complete: complete }) }, getLocationParam(location) { if (typeof location == 'string') { var locationArr = location.split(','); if (locationArr.length === 2) { location = { latitude: location.split(',')[0], longitude: location.split(',')[1] } } else { location = {} } } return location }, polyfillParam(param) { param.success = param.success || function () { }; param.fail = param.fail || function () { }; param.complete = param.complete || function () { } }, checkParamKeyEmpty(param, key) { if (!param[key]) { var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key + '参数格式有误'); param.fail(errconf); param.complete(errconf); return true } return false }, checkKeyword(param) { return !this.checkParamKeyEmpty(param, 'keyword') }, checkLocation(param) { var location = this.getLocationParam(param.location); if (!location || !location.latitude || !location.longitude) { var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格式有误'); param.fail(errconf); param.complete(errconf); return false } return true }, buildErrorConfig(errCode, errMsg) { return { status: errCode, message: errMsg } }, handleData(param, data, feature) { if (feature == 'search') { var searchResult = data.data; var searchSimplify = []; for (var i = 0; i < searchResult.length; i++) { searchSimplify.push({ id: searchResult[i].id || null, title: searchResult[i].title || null, latitude: searchResult[i].location && searchResult[i].location.lat || null, longitude: searchResult[i].location && searchResult[i].location.lng || null, address: searchResult[i].address || null, category: searchResult[i].category || null, tel: searchResult[i].tel || null, adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null, city: searchResult[i].ad_info && searchResult[i].ad_info.city || null, district: searchResult[i].ad_info && searchResult[i].ad_info.district || null, province: searchResult[i].ad_info && searchResult[i].ad_info.province || null }) } param.success(data, { searchResult: searchResult, searchSimplify: searchSimplify }) } else if (feature == 'suggest') { var suggestResult = data.data; var suggestSimplify = []; for (var i = 0; i < suggestResult.length; i++) { suggestSimplify.push({ adcode: suggestResult[i].adcode || null, address: suggestResult[i].address || null, category: suggestResult[i].category || null, city: suggestResult[i].city || null, district: suggestResult[i].district || null, id: suggestResult[i].id || null, latitude: suggestResult[i].location && suggestResult[i].location.lat || null, longitude: suggestResult[i].location && suggestResult[i].location.lng || null, province: suggestResult[i].province || null, title: suggestResult[i].title || null, type: suggestResult[i].type || null }) } param.success(data, { suggestResult: suggestResult, suggestSimplify: suggestSimplify }) } else if (feature == 'reverseGeocoder') { var reverseGeocoderResult = data.result; var reverseGeocoderSimplify = { address: reverseGeocoderResult.address || null, latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null, longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null, adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null, city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city || null, district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.district || null, nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.nation || null, province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.province || null, street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street || null, street_number: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street_number || null, recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.recommend || null, rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.rough || null }; if (reverseGeocoderResult.pois) { var pois = reverseGeocoderResult.pois; var poisSimplify = []; for (var i = 0; i < pois.length; i++) { poisSimplify.push({ id: pois[i].id || null, title: pois[i].title || null, latitude: pois[i].location && pois[i].location.lat || null, longitude: pois[i].location && pois[i].location.lng || null, address: pois[i].address || null, category: pois[i].category || null, adcode: pois[i].ad_info && pois[i].ad_info.adcode || null, city: pois[i].ad_info && pois[i].ad_info.city || null, district: pois[i].ad_info && pois[i].ad_info.district || null, province: pois[i].ad_info && pois[i].ad_info.province || null }) } param.success(data, { reverseGeocoderResult: reverseGeocoderResult, reverseGeocoderSimplify: reverseGeocoderSimplify, pois: pois, poisSimplify: poisSimplify }) } else { param.success(data, { reverseGeocoderResult: reverseGeocoderResult, reverseGeocoderSimplify: reverseGeocoderSimplify }) } } else if (feature == 'geocoder') { var geocoderResult = data.result; var geocoderSimplify = { title: geocoderResult.title || null, latitude: geocoderResult.location && geocoderResult.location.lat || null, longitude: geocoderResult.location && geocoderResult.location.lng || null, adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null, province: geocoderResult.address_components && geocoderResult.address_components.province || null, city: geocoderResult.address_components && geocoderResult.address_components.city || null, district: geocoderResult.address_components && geocoderResult.address_components.district || null, street: geocoderResult.address_components && geocoderResult.address_components.street || null, street_number: geocoderResult.address_components && geocoderResult.address_components.street_number || null, level: geocoderResult.level || null }; param.success(data, { geocoderResult: geocoderResult, geocoderSimplify: geocoderSimplify }) } else if (feature == 'getCityList') { var provinceResult = data.result[0]; var cityResult = data.result[1]; var districtResult = data.result[2]; param.success(data, { provinceResult: provinceResult, cityResult: cityResult, districtResult: districtResult }) } else if (feature == 'getDistrictByCityId') { var districtByCity = data.result[0]; param.success(data, districtByCity) } else if (feature == 'calculateDistance') { var calculateDistanceResult = data.result.elements; var distance = []; for (var i = 0; i < calculateDistanceResult.length; i++) { distance.push(calculateDistanceResult[i].distance) } param.success(data, { calculateDistanceResult: calculateDistanceResult, distance: distance }) } else if (feature == 'direction') { var direction = data.result.routes; param.success(data, direction) } else { param.success(data) } }, buildWxRequestConfig(param, options, feature) { var that = this; options.header = { "content-type": "application/json" }; options.method = 'GET'; options.success = function (res) { var data = res.data; if (data.status === 0) { that.handleData(param, data, feature) } else { param.fail(data) } }; options.fail = function (res) { res.statusCode = ERROR_CONF.WX_ERR_CODE; param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)) }; options.complete = function (res) { var statusCode = +res.statusCode; switch (statusCode) { case ERROR_CONF.WX_ERR_CODE: { param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)); break } case ERROR_CONF.WX_OK_CODE: { var data = res.data; if (data.status === 0) { param.complete(data) } else { param.complete(that.buildErrorConfig(data.status, data.message)) } break } default: { param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG)) } } }; return options }, locationProcess(param, locationsuccess, locationfail, locationcomplete) { var that = this; locationfail = locationfail || function (res) { res.statusCode = ERROR_CONF.WX_ERR_CODE; param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)) }; locationcomplete = locationcomplete || function (res) { if (res.statusCode == ERROR_CONF.WX_ERR_CODE) { param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)) } }; if (!param.location) { that.getWXLocation(locationsuccess, locationfail, locationcomplete) } else if (that.checkLocation(param)) { var location = Utils.getLocationParam(param.location); locationsuccess(location) } } }; class QQMapWX { constructor(options) { if (!options.key) { throw Error('key值不能为空') } this.key = options.key }; search(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (!Utils.checkKeyword(options)) { return } var requestParam = { keyword: options.keyword, orderby: options.orderby || '_distance', page_size: options.page_size || 10, page_index: options.page_index || 1, output: 'json', key: that.key }; if (options.address_format) { requestParam.address_format = options.address_format } if (options.filter) { requestParam.filter = options.filter } var distance = options.distance || "1000"; var auto_extend = options.auto_extend || 1; var region = null; var rectangle = null; if (options.region) { region = options.region } if (options.rectangle) { rectangle = options.rectangle } var locationsuccess = function (result) { if (region && !rectangle) { requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude + ")"; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'search') } } else if (rectangle && !region) { requestParam.boundary = "rectangle(" + rectangle + ")"; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'search') } } else { requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend + ")"; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'search') } } wx.request(Utils.buildWxRequestConfig(options, { url: URL_SEARCH, data: requestParam }, 'search')) }; Utils.locationProcess(options, locationsuccess) }; getSuggestion(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (!Utils.checkKeyword(options)) { return } var requestParam = { keyword: options.keyword, region: options.region || '全国', region_fix: options.region_fix || 0, policy: options.policy || 0, page_size: options.page_size || 10, page_index: options.page_index || 1, get_subpois: options.get_subpois || 0, output: 'json', key: that.key }; if (options.address_format) { requestParam.address_format = options.address_format } if (options.filter) { requestParam.filter = options.filter } if (options.location) { var locationsuccess = function (result) { requestParam.location = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_SUGGESTION, data: requestParam }, "suggest")) }; Utils.locationProcess(options, locationsuccess) } else { if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_SUGGESTION, data: requestParam }, "suggest")) } }; reverseGeocoder(options) { var that = this; options = options || {}; Utils.polyfillParam(options); var requestParam = { coord_type: options.coord_type || 5, get_poi: options.get_poi || 0, output: 'json', key: that.key }; if (options.poi_options) { requestParam.poi_options = options.poi_options } var locationsuccess = function (result) { requestParam.location = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'reverseGeocoder') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_GET_GEOCODER, data: requestParam }, 'reverseGeocoder')) }; Utils.locationProcess(options, locationsuccess) }; geocoder(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'address')) { return } var requestParam = { address: options.address, output: 'json', key: that.key }; if (options.region) { requestParam.region = options.region } if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'geocoder') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_GET_GEOCODER, data: requestParam }, 'geocoder')) }; getCityList(options) { var that = this; options = options || {}; Utils.polyfillParam(options); var requestParam = { output: 'json', key: that.key }; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'getCityList') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_CITY_LIST, data: requestParam }, 'getCityList')) }; getDistrictByCityId(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'id')) { return } var requestParam = { id: options.id || '', output: 'json', key: that.key }; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'getDistrictByCityId') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_AREA_LIST, data: requestParam }, 'getDistrictByCityId')) }; calculateDistance(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'to')) { return } var requestParam = { mode: options.mode || 'walking', to: Utils.location2query(options.to), output: 'json', key: that.key }; if (options.from) { options.location = options.from } if (requestParam.mode == 'straight') { var locationsuccess = function (result) { var locationTo = Utils.getEndLocation(requestParam.to); var data = { message: "query ok", result: { elements: [] }, status: 0 }; for (var i = 0; i < locationTo.length; i++) { data.result.elements.push({ distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i].lat, locationTo[i].lng), duration: 0, from: { lat: result.latitude, lng: result.longitude }, to: { lat: locationTo[i].lat, lng: locationTo[i].lng } }) } var calculateResult = data.result.elements; var distanceResult = []; for (var i = 0; i < calculateResult.length; i++) { distanceResult.push(calculateResult[i].distance) } return options.success(data, { calculateResult: calculateResult, distanceResult: distanceResult }) }; Utils.locationProcess(options, locationsuccess) } else { var locationsuccess = function (result) { requestParam.from = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'calculateDistance') } wx.request(Utils.buildWxRequestConfig(options, { url: URL_DISTANCE, data: requestParam }, 'calculateDistance')) }; Utils.locationProcess(options, locationsuccess) } }; direction(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'to')) { return } var requestParam = { output: 'json', key: that.key }; if (typeof options.to == 'string') { requestParam.to = options.to } else { requestParam.to = options.to.latitude + ',' + options.to.longitude } var SET_URL_DIRECTION = null; options.mode = options.mode || MODE.driving; SET_URL_DIRECTION = URL_DIRECTION + options.mode; if (options.from) { options.location = options.from } if (options.mode == MODE.driving) { if (options.from_poi) { requestParam.from_poi = options.from_poi } if (options.heading) { requestParam.heading = options.heading } if (options.speed) { requestParam.speed = options.speed } if (options.accuracy) { requestParam.accuracy = options.accuracy } if (options.road_type) { requestParam.road_type = options.road_type } if (options.to_poi) { requestParam.to_poi = options.to_poi } if (options.from_track) { requestParam.from_track = options.from_track } if (options.waypoints) { requestParam.waypoints = options.waypoints } if (options.policy) { requestParam.policy = options.policy } if (options.plate_number) { requestParam.plate_number = options.plate_number } } if (options.mode == MODE.transit) { if (options.departure_time) { requestParam.departure_time = options.departure_time } if (options.policy) { requestParam.policy = options.policy } } var locationsuccess = function (result) { requestParam.from = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'direction', options.mode) } wx.request(Utils.buildWxRequestConfig(options, { url: SET_URL_DIRECTION, data: requestParam }, 'direction')) }; Utils.locationProcess(options, locationsuccess) } }; module.exports = QQMapWX;
\ No newline at end of file
const baseUrl = 'http://36.148.1.58:81/api/';
const baseUrl = 'http://sjzzhanglutpddns.utools.club/api/';
const httpRequest = (opts, data) => {
let httpDefaultOpts = {
url: baseUrl + opts.url,
......
......@@ -18,6 +18,9 @@ Vue.component('search',search)
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
Vue.config.productionTip = false
App.mpType = 'app'
......
......@@ -49,7 +49,9 @@
/* SDK配置 */
"sdkConfigs" : {
"ad" : {},
"speech" : {}
"speech" : {
"ifly" : {}
}
}
}
},
......@@ -59,7 +61,9 @@
"mp-weixin" : {
"appid" : "wx3fb24f5d2f0956d6",
"setting" : {
"urlCheck" : false
"urlCheck" : false,
"postcss" : false,
"minified" : true
},
"usingComponents" : true
},
......
# Vue-jsonp
![Travis](https://travis-ci.org/LancerComet/vue-jsonp.svg?branch=master)
A tiny library for handling JSONP request.
## Usage.
Static function:
`Vue.jsonp(url, dataObj, timeout)`
In Vue component:
`this.$jsonp(url, dataObj, timeout)`
## Params.
- url: Target url for request.
- dataObj: Object contains datas for querying.
- timeout: Timeout for jsonp request.
## URL.
```javascript
'/url?{callbackQuery}={callbackName}&...'
// Default:
'/url?callback=jsonp_RANDOM_STRING&...'
```
## Assign callback query name.
```javascript
this.$jsonp('/url', {
callbackQuery: 'cb' // Default: callback
})
// Then URL will be: '/url?cb=jsonp_aws84739ssu8e3'
```
## Assign callback function name.
```javascript
this.$jsonp('/url', {
callbackName: 'jsonpFunc'
})
// Then URL will be: '/url?callback=jsonpFunc'
```
## Example.
```javascript
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
// If you want to setup the global timeout, just:
Vue.use(VueJsonp, 5000)
// Now all requests will be expired after 5000ms.
// Use it in Vue Component.
const SomeComponent = Vue.extend({
methods: {
getData () {
this.$jsonp('http://www.some-site.com/data', { name: 'MyName', age: 20 }).then(json => {
// Success.
}).catch(err => {
// Failed.
})
}
}
})
// Static Function.
// Request url will be 'http://www.some-site.com/data?name=MyName&age=20&cb=jsonpFunc'
Vue.jsonp('http://www.some-site.com/data', {
name: 'MyName', age: 20, callbackQuery: 'cb', callbackName: 'jsonpFunc'
}).then(json => {
// Success.
}).catch(err => {
// Failed.
})
```
## License
MIT.
;(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.vueJsonp = factory();
}
}(this, function() {
/**
* Vue Jsonp By LancerComet at 16:35, 2016.10.17.
* # Carry Your World #
*
* @author: LancerComet
* @license: MIT
*/
var _timeout = null
var vueJsonp = {
install: function (Vue, options) {
Vue.jsonp = jsonp
Vue.prototype.$jsonp = jsonp
if (typeof options === 'number') {
_timeout = options
}
}
}
/**
* JSONP function.
* @param { String } url Target URL address.
* @param { Object } params Querying params object.
* @param { Number } timeout Timeout setting (ms).
*
* @example
* Vue.jsonp('/url', {
* callbackQuery: ''
* callbackName: '',
* name: 'LancerComet',
* age: 26
* }, 1000)
*/
function jsonp (url, params, timeout) {
params = params || {}
timeout = timeout || _timeout
return new Promise(function (resolve, reject) {
if (typeof url !== 'string') {
throw new Error('[Vue.jsonp] Type of param "url" is not string.')
}
var callbackQuery = params.callbackQuery || 'callback'
var callbackName = params.callbackName || 'jsonp_' + randomStr()
params[callbackQuery] = callbackName
// Remove callbackQuery and callbackName.
delete params.callbackQuery
delete params.callbackName
// Convert params to querying str.
var queryStrs = []
Object.keys(params).forEach(function (queryName) {
queryStrs = queryStrs.concat(formatParams(queryName, params[queryName]))
})
var queryStr = flatten(queryStrs).join('&')
// Timeout timer.
var timeoutTimer = null
// Setup timeout.
if (typeof timeout === 'number') {
timeoutTimer = setTimeout(function () {
removeErrorListener()
headNode.removeChild(paddingScript)
delete window[callbackName]
reject({ statusText: 'Request Timeout', status: 408 })
}, timeout)
}
// Create global function.
window[callbackName] = function (json) {
clearTimeout(timeoutTimer)
removeErrorListener()
headNode.removeChild(paddingScript)
resolve(json)
delete window[callbackName]
}
// Create script element.
var headNode = document.querySelector('head')
var paddingScript = document.createElement('script')
// Add error listener.
paddingScript.addEventListener('error', onError)
// Append to head element.
paddingScript.src = url + (/\?/.test(url) ? '&' : '?') + queryStr
headNode.appendChild(paddingScript)
/**
* Padding script on-error event.
* @param {Event} event
*/
function onError (event) {
removeErrorListener()
clearTimeout(timeoutTimer)
reject({
status: 400,
statusText: 'Bad Request'
})
}
/**
* Remove on-error event listener.
*/
function removeErrorListener () {
paddingScript.removeEventListener('error', onError)
}
})
}
/**
* Generate random string.
* @return { String }
*/
function randomStr () {
return (Math.floor(Math.random() * 100000) * Date.now()).toString(16)
}
/**
* Format params into querying string.
* @param {{}}
* @return {string[]}
*/
function formatParams (queryName, value) {
queryName = queryName.replace(/=/g, '')
var result = []
switch (value.constructor) {
case String:
case Number:
case Boolean:
result.push(encodeURIComponent(queryName) + '=' + encodeURIComponent(value))
break
case Array:
value.forEach(function (item) {
result = result.concat(formatParams(queryName + '[]=', item))
})
break
case Object:
Object.keys(value).forEach(function (key) {
var item = value[key]
result = result.concat(formatParams(queryName + '[' + key + ']', item))
})
break
}
return result
}
/**
* Flat querys.
*
* @param {any} array
* @returns
*/
function flatten (array) {
var querys = []
array.forEach(function (item) {
if (typeof item === 'string') {
querys.push(item)
} else {
querys = querys.concat(flatten(item))
}
})
return querys
}
return vueJsonp;
}));
import Vue from 'vue'
import { PluginObject } from 'vue/types/plugin'
interface IParam {
callbackQuery?: string
callbackName?: string
[key: string]: any
}
declare module 'vue' {
function jsonp (url: string, param: IParam, timeout?: number): Promise<any>
}
declare module 'vue/types/vue' {
interface Vue {
$jsonp (url: string, param: IParam, timeout?: number): Promise<any>
}
}
export default function install<T> (): PluginObject<T>
{
"_from": "vue-jsonp",
"_id": "vue-jsonp@0.1.8",
"_inBundle": false,
"_integrity": "sha512-ebxvjHl5D7bv5Z7SeRzZUAPOSRMx+RiAeej7h6dPpbtk8MVz/b3n9fOZ8AAVmakb1pe36e+qG0J+K49a3LfpKA==",
"_location": "/vue-jsonp",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "vue-jsonp",
"name": "vue-jsonp",
"escapedName": "vue-jsonp",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-0.1.8.tgz",
"_shasum": "2cec054b0aca5a9c7de0146b16b2acbeec2d73a7",
"_spec": "vue-jsonp",
"_where": "/Users/admin/Documents/HBuilderProjects/泽宏科技/uin-app-zehong",
"author": {
"name": "LancerComet",
"email": "chw644@hotmail.com"
},
"bugs": {
"url": "https://github.com/LancerComet/vue-jsonp/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "A tiny library for handling JSONP request.",
"devDependencies": {
"aliasify": "^2.0.0",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
"babel-runtime": "^6.11.6",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"chai": "^3.5.0",
"function-bind": "^1.1.0",
"gulp": "^3.9.1",
"gulp-rename": "^1.2.2",
"gulp-umd": "^0.2.0",
"gulp-util": "^3.0.7",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-browserify": "^5.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon-chai": "^1.2.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"minifyify": "^7.3.4",
"mocha": "^3.1.2",
"phantomjs-prebuilt": "^2.1.14",
"sinon": "^1.17.6",
"sinon-chai": "^2.8.0",
"vue": "^2.0.5",
"watchify": "^3.7.0"
},
"homepage": "https://github.com/LancerComet/vue-jsonp#readme",
"keywords": [
"Vue",
"JSONP"
],
"license": "MIT",
"main": "dist/vue-jsonp.umd.js",
"name": "vue-jsonp",
"repository": {
"type": "git",
"url": "git+https://github.com/LancerComet/vue-jsonp.git"
},
"scripts": {
"build": "gulp",
"dev": "karma start ./test/karma.conf.js",
"predev": "gulp",
"pretest": "gulp",
"test": "karma start ./test/karma.conf.js --single-run"
},
"typings": "index.d.ts",
"version": "0.1.8"
}
......@@ -638,6 +638,11 @@
"resize-detector": "^0.1.10"
}
},
"vue-jsonp": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-0.1.8.tgz",
"integrity": "sha512-ebxvjHl5D7bv5Z7SeRzZUAPOSRMx+RiAeej7h6dPpbtk8MVz/b3n9fOZ8AAVmakb1pe36e+qG0J+K49a3LfpKA=="
},
"wide-align": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
......
......@@ -29,6 +29,10 @@
"style": {
"enablePullDownRefresh": true
}
}, {
"path": "pages/adddevice/mpnaddlink",
"style": {
}
}
],
// "tabBar": {
......
<template>
<view>
<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
<block slot="content">添加设备</block>
</cu-custom>
<!-- 表单开始 -->
<view style="z-index: 9999999999;overflow:scroll;height: 100%;">
<form>
<view class="cu-form-group margin-top">
<view class="title">设备名称</view>
<input placeholder="请输入设备名称" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">设备编号</view>
<input placeholder="请输入设备编号" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">设备联系人</view>
<input placeholder="请输入设备联系人" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">设备联系人手机号</view>
<input placeholder="联系人手机号" name="input"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
<block slot="content">添加设备</block>
</cu-custom>
<!-- 表单开始 -->
<view style="z-index: 9999999999;overflow:scroll;height: 100%;margin-bottom: 140upx;">
<form>
<view class="cu-form-group margin-top">
<view class="title">设备名称</view>
<input placeholder="请输入设备名称" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">设备编号</view>
<input placeholder="请输入设备编号" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">设备联系人</view>
<input placeholder="请输入设备联系人" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">设备联系人手机号</view>
<input placeholder="联系人手机号" name="input"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
<!-- 设备类型 -->
<view class="cu-form-group">
<view class="title">设备类型</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择设备类型'}}
</view>
</picker>
</view>
<!-- 检测介质 -->
<view class="cu-form-group">
<view class="title">监测介质</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择监测介质'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">设备单位</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择设备单位'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">选择用户</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择用户'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">设备坐标</view>
<input placeholder="请输入设备坐标" name="input"></input>
<button class='cu-btn bg-green shadow' @tap="showModal" data-target="viewModal">拾取坐标</button>
</view>
<view class="cu-form-group">
<view class="title">设备安装位置</view>
<input placeholder="请输入安装位置" name="input"></input>
</view>
<view class="cu-form-group align-start">
<view class="title">设备备注</view>
<textarea maxlength="-1" :disabled="modalName1!=null" @input="textareaBInput" placeholder="请输入设备备注"></textarea>
</view>
<button class="cu-btn bg-grey lg" style="width: 90%;height: 80rpx;margin-left: 40rpx;margin-top: 20rpx;z-index: 999;">提交</button>
</form>
</view>
</scroll-view>
<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal" style="padding-bottom: 150rpx;">
<text class="cuIcon-pullright"></text>
</view>
<!-- 设备类型 -->
<view class="cu-form-group">
<view class="title">设备类型</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择设备类型'}}
</view>
</picker>
</view>
<!-- 检测介质 -->
<view class="cu-form-group">
<view class="title">监测介质</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择监测介质'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">设备单位</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择设备单位'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">选择用户</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'请选择用户'}}
</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>
</view>
<view class="cu-form-group">
<view class="title">设备安装位置</view>
<input placeholder="请输入安装位置" name="input" :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>
</view>
<button class="cu-btn bg-grey lg" style="width: 90%;height: 80upx;margin-left: 40upx;margin-top: 20upx;z-index: 999;">提交</button>
</form>
</view>
<scroll-view scroll-y class="DrawerWindow" style="padding: 0;" :class="modalName=='viewModal'?'show':''">
<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers" iconPath="../pyadd.png"
@markertap="larces">
</map>
</scroll-view>
</view>
</template>
......@@ -101,148 +91,49 @@
modalName1: null,
picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
index: -1,
id: 0,
textareaBValue: '',
latitude: 39.909,
longitude: 116.39742,
covers: [{
latitude: 39.909,
longitude: 116.39742,
iconPath: '../pyadd.png'
}, {
latitude: 39.90,
longitude: 116.39,
iconPath: '../pyadd.png'
}]
id: 0,
textareaBValue: '',
longitisdata: [],
};
},
methods: {
PickerChange(e) {
this.index = e.detail.value
},
textareaBInput(e) {
this.textareaBValue = e.detail.value
},
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
PickerChange(e) {
this.index = e.detail.value
},
textareaBInput(e) {
this.textareaBValue = e.detail.value
},
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
larces(e) {
console.log(e);
},
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}
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;
},
},
created() {
this.issetinfo();
}
}
</script>
<style>
page {
background-image: var(--gradualBlue);
width: 100vw;
overflow: hidden;
}
.DrawerPage {
position: fixed;
width: 100vw;
height: 100vh;
left: 0vw;
background-color: #f1f1f1;
transition: all 0.4s;
}
.DrawerPage.show {
transform: scale(0.9, 0.9);
left: 85vw;
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
transform-origin: 0;
}
.DrawerWindow {
position: absolute;
width: 85vw;
height: 100vh;
left: 0;
top: 0;
transform: scale(0.9, 0.9) translateX(-100%);
opacity: 0;
pointer-events: none;
transition: all 0.4s;
padding: 100upx 0;
}
.DrawerWindow.show {
transform: scale(1, 1) translateX(0%);
opacity: 1;
pointer-events: all;
}
.DrawerClose {
position: absolute;
width: 40vw;
height: 100vh;
right: 0;
top: 0;
color: transparent;
padding-bottom: 30upx;
display: flex;
align-items: flex-end;
justify-content: center;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
letter-spacing: 5px;
font-size: 50upx;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
}
.DrawerClose.show {
opacity: 1;
pointer-events: all;
width: 15vw;
color: #fff;
}
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
width: 64upx;
height: 64upx;
line-height: 64upx;
margin: 0;
display: inline-block;
}
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
margin: 0;
}
.DrawerPage .nav {
flex: 1;
}
.DrawerPage .nav .cu-item.cur {
border-bottom: 0;
position: relative;
}
.DrawerPage .nav .cu-item.cur::after {
content: "";
width: 10upx;
height: 10upx;
background-color: currentColor;
position: absolute;
bottom: 10upx;
border-radius: 10upx;
left: 0;
right: 0;
margin: auto;
}
.DrawerPage .cu-bar.tabbar .action {
flex: initial;
}
</style>
<template>
<view class="content">
<!-- <view class="address">
<view class="">纬度:{{positionObj.latitude}}</view>
<view class="">经度:{{positionObj.longitude}}</view>
<view class="">具体地址:{{positionObj.address}}</view>
</view> -->
<mi-map v-if="mapShow" ref="miMap" @updateAddress="updateAddress">
</mi-map>
</view>
</template>
<script>
import miMap from '../../components/mi-map/mi-map.vue'
export default {
components: {
miMap
},
data() {
return {
mapShow: true,
positionObj: {},
}
},
onLoad() {
},
methods: {
// 更新地址并关闭地图
updateAddress(addressObj) {
this.mapShow = false
this.positionObj = addressObj
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.address {
margin-top: 1rem;
}
</style>
......@@ -44,12 +44,14 @@
</view>
<!-- 图形表 -->
<view>
<!--#ifdef MP-ALIPAY -->
<canvas style="width: 100%;height: 360upx;" canvas-id="canvasColumnStack" id="canvasColumnStack" @touchstart="touchColumn"></canvas>
<!--#endif-->
<!--#ifndef MP-ALIPAY -->
<canvas style="width: 100%;height: 360upx;" canvas-id="canvasColumnStack" id="canvasColumnStack" @touchstart="touchColumn"></canvas>
<!--#endif-->
<view class="qiun-charts">
<!--#ifdef MP-ALIPAY -->
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
<!--#endif-->
<!--#ifndef MP-ALIPAY -->
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
<!--#endif-->
</view>
</view>
<!-- 设备分类 -->
<view style="margin-top: 20upx;">
......@@ -128,6 +130,7 @@
import http from '@/components/utils/http.js';
import uCharts from '@/components/u-charts/u-charts.js';
var canvaColumn = null;
var _self;
export default {
name: "basics",
data() {
......@@ -154,9 +157,11 @@
countdevice: 0,
devicenum: '', //复制设备编号
tid: '',
// 统计图
cWidth: '',
cHeight: '',
pixelRatio: 1,
serverData: ''
};
},
methods: {
......@@ -355,6 +360,24 @@
console.log(error);
})
},
//监测是否是app
isapp() {
_self = this;
//#ifdef MP-ALIPAY
uni.getSystemInfo({
success: function(res) {
if (res.pixelRatio > 1) {
//正常这里给2就行,如果pixelRatio=3性能会降低一点
//_self.pixelRatio =res.pixelRatio;
_self.pixelRatio = 2;
}
}
});
//#endif
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(500);
this.getServerData();
},
//获取设备详情信息
devicetypes() {
this.isshow();
......@@ -388,42 +411,38 @@
console.log(error);
})
},
showColumnStack(canvasId, chartData) {
var that = this;
showColumn(canvasId, chartData) {
canvaColumn = new uCharts({
$this: that,
$this: _self,
canvasId: canvasId,
type: 'column',
padding: [180, -19, -60, 347],
legend: {
show: true,
padding: 0,
lineHeight: -10,
margin: 0,
},
fontSize: 10,
legend: true,
fontSize: 11,
background: '#FFFFFF',
pixelRatio: that.pixelRatio,
pixelRatio: _self.pixelRatio,
animation: true,
categories: chartData.categories,
series: chartData.series,
xAxis: {
disableGrid: true,
},
yAxis: {
//disabled:true
},
yAxis: {},
dataLabel: true,
width: that.cWidth * that.pixelRatio,
height: that.cHeight * that.pixelRatio,
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
column: {
type: 'stack',
width: that.cWidth * that.pixelRatio * 0.5 / chartData.categories.length
column: {
type:'group',
width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
}
}
});
},
changeData() {
canvaColumn.updateData({
series: _self.serverData.ColumnB.series,
categories: _self.serverData.ColumnB.categories
});
},
//加载显示
isshow() {
......@@ -437,38 +456,84 @@
this.isLoad = true;
this.isshowLoad = false;
},
// 统计图
getServerData() {
const xData = (function() {
const data = [];
const date = new Date();
for (let i = 1; i < date.getMonth() + 1 + 1; i++) {
data.push(i + '月');
}
return data;
}());
let opts = {
url: 'homepagecount/devicemonthcount',
method: 'get'
};
http.httpRequest(opts).then(res => {
_self.serverData = res.data.data;
let Column = {
categories: xData,
series: [{
name: '设备数量',
type: 'column',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
data: res.data.data.devicedata,
}, {
name: '用户数量',
type: 'column',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
data:res.data.data.policedata
}, {
name: '报警数量',
type: 'column',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
data: res.data.data.devicepolice,
}]
};
_self.showColumn("canvasColumn", Column);
}, error => {
console.log(error);
})
},
},
onReachBottom() {
console.log("我执行了");
},
mounted() {
let that = this;
uni.request({
url: 'https://www.ucharts.cn/data.json',
data: {},
success: function(res) {
console.log(res.data.data)
let ColumnStack = {
categories: [],
series: []
};
//这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
ColumnStack.categories = res.data.data.ColumnStack.categories;
ColumnStack.series = res.data.data.ColumnStack.series;
// _self.textarea = JSON.stringify(res.data.data.ColumnStack);
that.showColumnStack("canvasColumnStack", ColumnStack);
},
fail: () => {
//that.tips = "网络错误,小程序端请检查合法域名";
},
});
},
mounted() {},
created() {
// 监测登入状态
this.deviceinfo();
this.islogin();
this.devicetypes();
this.devicelist();
this.isapp();
},
onLaunch() {
console.log("success")
......@@ -479,7 +544,8 @@
<style>
.qiun-charts {
width: 750upx;
height: 500upx;
height: 470upx;
margin-top: 20upx;
}
.loadingjiazai {
......
<template>
<view class="qiun-columns">
<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
<view class="qiun-title-dot-light">柱状图</view>
</view>
<view class="qiun-charts">
<!--#ifdef MP-ALIPAY -->
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
<!--#endif-->
<!--#ifndef MP-ALIPAY -->
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
<!--#endif-->
</view>
</view>
</template>
<script>
import uCharts from '../../components/u-charts/u-charts.js';
var _self;
var canvaColumn = null;
export default {
data() {
return {
cWidth: '',
cHeight: '',
pixelRatio: 1,
serverData: ''
}
},
onLoad() {
_self = this;
//#ifdef MP-ALIPAY
uni.getSystemInfo({
success: function(res) {
if (res.pixelRatio > 1) {
//正常这里给2就行,如果pixelRatio=3性能会降低一点
//_self.pixelRatio =res.pixelRatio;
_self.pixelRatio = 2;
}
}
});
//#endif
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(500);
this.getServerData();
},
methods: {
getServerData() {
uni.request({
url: 'https://www.ucharts.cn/data.json',
data: {},
success: function(res) {
console.log(res.data.data)
//下面这个根据需要保存后台数据,我是为了模拟更新柱状图,所以存下来了
_self.serverData = res.data.data;
let Column = {
categories: [],
series: []
};
//这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
Column.categories = res.data.data.Column.categories;
//这里的series数据是后台做好的,如果您的数据没有和前面我注释掉的格式一样,请自行拼接数据
Column.series = res.data.data.Column.series;
_self.showColumn("canvasColumn", Column);
},
fail: () => {
console.log("网络错误,小程序端请检查合法域名");
},
});
},
showColumn(canvasId, chartData) {
canvaColumn = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'column',
legend: true,
fontSize: 11,
background: '#FFFFFF',
pixelRatio: _self.pixelRatio,
animation: true,
categories: chartData.categories,
series: chartData.series,
xAxis: {
disableGrid: true,
},
yAxis: {},
dataLabel: true,
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
column: {
width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
}
}
});
},
changeData() {
canvaColumn.updateData({
series: _self.serverData.ColumnB.series,
categories: _self.serverData.ColumnB.categories
});
}
}
}
</script>
<style>
page {
background: #F2F2F2;
width: 750upx;
overflow-x: hidden;
}
.qiun-padding {
padding: 2%;
width: 96%;
}
.qiun-wrap {
display: flex;
flex-wrap: wrap;
}
.qiun-rows {
display: flex;
flex-direction: row !important;
}
.qiun-columns {
display: flex;
flex-direction: column !important;
}
.qiun-common-mt {
margin-top: 10upx;
}
.qiun-bg-white {
background: #FFFFFF;
}
.qiun-title-bar {
width: 96%;
padding: 10upx 2%;
flex-wrap: nowrap;
}
.qiun-title-dot-light {
border-left: 10upx solid #0ea391;
padding-left: 10upx;
font-size: 32upx;
color: #000000
}
/* 通用样式 */
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
</style>
<template>
<view class="zai-box" @touchmove.prevent>
<image src="../../static/zaizai-login/login.png" class="zai-logo"></image>
<image src="../../static/zaizai-login/login.png" class="zai-logo"></image>
<!-- <view class="zai-title">LOGO区域</view> -->
<form @submit="formSubmit">
<view class="zai-form">
......@@ -21,12 +21,13 @@
import http from '@/components/utils/http.js';
export default {
data() {
return {
loadingwhite: false,
return {
loadingwhite: false,
}
},
methods: {
formSubmit(e) {
let that = this;
var email = e.detail.value.email;
var password = e.detail.value.password;
if (email === '' || password === '') {
......@@ -43,8 +44,8 @@
let param = {
email: email,
password: password
};
this.loadingwhite = true;
};
that.loadingwhite = true;
http.httpTokenRequest(opts, param).then(res => {
if (res.data.success === undefined) {
uni.setStorage({
......@@ -54,9 +55,9 @@
uni.setStorage({
key: 'islogin',
data: res.data,
success: function() {
this.loadingwhite = false
uni.navigateTo({
success: function() {
that.loadingwhite = false
uni.reLaunch({
url: '../main/main',
});
}
......@@ -77,26 +78,42 @@
}
},
//监测登录
islogin() {
uni.getStorage({
key: 'islogin',
success: function(res) {
uni.redirectTo({
url: '../main/main',
});
},
fail: function(re) {
uni.redirectTo({
url: '../login/login',
});
}
});
islogin(type) {
if (type) {
uni.reLaunch({
url: '../login/login',
});
} else {
uni.reLaunch({
url: '../main/main',
});
}
// uni.getStorage({
// key: 'islogin',
// success: function(res) {
// },
// fail: function(re) {
// }
// });
},
showislogin() {
let that = this;
var loginis = uni.getStorageSync('Authorization');
if (loginis === '' || loginis === undefined) {
that.islogin(true);
} else {
that.islogin(false);
}
},
},
mounted() {
mounted() {},
onLoad() {
let that = this;
// 监测登入
this.islogin();
},
that.showislogin();
}
}
</script>
......@@ -133,7 +150,7 @@
border-radius: 100upx;
padding: 20upx 40upx;
font-size: 36upx;
height: 150upx;
height: 150upx;
margin-left: 30upx;
}
......@@ -154,7 +171,7 @@
color: #fff;
border: 0;
border-radius: 100upx;
font-size: 36upx;
font-size: 36upx;
width: 90%;
}
......@@ -165,10 +182,11 @@
/*按钮点击效果*/
.zai-btn.button-hover {
transform: translate(1upx, 1upx);
}
.loading-white {
position: fixed;
top: 25%;
left: 50upx;
}
.loading-white {
position: fixed;
top: 25%;
left: 50upx;
}
</style>
......@@ -8,16 +8,18 @@
<text class="cuIcon-title text-green"></text>
<text>搜索设备</text>
</view>
<view class="action">
<view class="action" v-if="showpahk" @click="deletedevice">
<text class="cuIcon-deletefill text-gray"></text>清空历史
</view>
</view>
<view class="cu-bar search bg-white margin-top">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" @input="devicedata" :adjust-position="false" type="text"
placeholder="搜索设备号、名称" confirm-type="search"></input>
<text class="cuIcon-close" v-if="cuIconde" style="position: absolute;left:500upx;z-index: 99999;" @click="nonecuIconde"></text>
<input @focus="InputFocus" :value="searchdata" @blur="InputBlur" @input="devicedata" :adjust-position="false" type="text"
:placeholder="devicedatasetshow === '' ? '搜索设备号、名称 ' : devicedatasetshow " confirm-type="search"></input>
</view>
<!-- 搜索设备号、名称 -->
<view class="action">
<button class="cu-btn bg-green shadow-blur round" @click="postseachdata">搜索</button>
</view>
......@@ -25,19 +27,20 @@
<view class="cu-list menu-avatar" style="margin-top: 12upx;margin-bottom: 120upx;">
<view class="cu-item" v-for="(item,index) in seardevicedata" :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="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 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>
<!-- <view class="history">
<view class="cu-tag bg-grey" style="margin-top: 20upx;margin-left: 12upx;" v-for="(item,index) in 30" :key="index">324324</view>
</view> -->
<view class="history" v-if="showpahk">
<view class="cu-tag bg-grey" style="margin-top: 20upx;margin-left: 12upx;" v-for="(item,index) in showdevicedata"
:key="index" @click="postseachdataset(item)">{{ item }}</view>
</view>
</view>
</template>
......@@ -47,9 +50,14 @@
data() {
return {
InputBottom: 0,
searchdata: '',
seardevicedata: [],
icon_device_li_green: 'background-image: url(../../static/img/icon_device_li_green.png)',
searchdata: '',
setsearchdata: '',
seardevicedata: [],
cuIconde: false,
showpahk: false,
devicedatasetshow: '',
showdevicedata: '',
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)',
};
},
......@@ -64,6 +72,8 @@
devicedata(e) {
this.searchdata = e.detail.value;
this.imitation();
//监听搜索框空值
this.isinputnull();
},
//请求搜索
postseachdata() {
......@@ -74,29 +84,57 @@
let data = {
setseachdata: this.searchdata,
};
http.httpRequest(opts, data).then(res => {
if(res.data.data.length >= 1){
this.seardevicedata = res.data.data
http.httpRequest(opts, data).then(res => {
if (res.data.data.length > 0) {
this.seardevicedata = res.data.data;
this.noewpa();
} else {
uni.showToast({
title: '暂无数据',
duration: 2000
});
let that = this;
setTimeout(function() {
that.seardevicedata = [];
that.isinputnull();
that.searchdata = '';
}, 2000)
}
this.setseachdata();
this.chatshowsetdevice();
}, error => {
console.log(error);
})
// this.setseachdata();
},
//缓存搜索历史
setseachdata() {
const value = uni.getStorageSync('setseachdata');
if (value === undefined || value === '') {
uni.setStorageSync('setseachdata', this.searchdata);
uni.setStorageSync('setseachdata', this.searchdata.split(','));
} else {
// arr.map((val, index, value) => {
// this.deviceList.push(val);
// })
if (value.length <= 30) {
this.setsearchdata = value;
if (this.searchdata != '') {
this.setsearchdata.push(this.searchdata);
uni.setStorageSync('setseachdata', this.setsearchdata);
}
}
}
uni.setStorageSync('setseachdata', []);
},
//获取缓存搜索
chatshowsetdevice() {
this.showdevicedata = uni.getStorageSync('setseachdata');
},
// 显示隐藏框
shownoew() {
this.showpahk = true;
},
noewpa() {
this.showpahk = false;
},
//模糊列表
imitation() {
this.devicedatasetshow = '';
let opts = {
url: 'huinapphome/imitation',
method: 'post'
......@@ -104,31 +142,93 @@
let data = {
imitationdata: this.searchdata,
};
http.httpRequest(opts, data).then(res => {
if(res.data.data.length >= 1){
this.seardevicedata = res.data.data
http.httpRequest(opts, data).then(res => {
if (res.data.data.length > 0) {
this.seardevicedata = res.data.data;
this.noewpa();
} else {
this.seardevicedata = [];
this.isinputnull();
}
}, 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);
})
},
//跳转设备详情
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);
})
},
//删除搜索历史记录
deletedevice() {
uni.removeStorageSync('setseachdata');
this.noewpa();
},
postseachdataset(devicedataset) {
this.cuIconde = true;
let opts = {
url: 'huinapphome/imitation',
method: 'post'
};
let data = {
imitationdata: devicedataset,
};
this.searchdata = devicedataset,
http.httpRequest(opts, data).then(res => {
if (res.data.data.length > 0) {
this.seardevicedata = res.data.data;
this.noewpa();
} else {
uni.showToast({
title: '暂无数据',
duration: 2000
});
let that = this;
setTimeout(function() {
that.seardevicedata = [];
that.isinputnull();
that.searchdata = '';
that.cuIconde = false;
}, 2000)
}
}, error => {
console.log(error);
})
},
//监听搜索框空值
isinputnull() {
if (this.searchdata === '') {
this.chatshowsetdevice();
this.shownoew();
this.seardevicedata = [];
}
},
//删除
nonecuIconde() {
this.cuIconde = false;
this.searchdata = '';
this.seardevicedata = [];
this.isinputnull();
},
},
created() {
this.seardevicedata = [];
this.chatshowsetdevice();
if (uni.getStorageSync('setseachdata').length > 0) {
this.shownoew();
}
}
},
}
</script>
......
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