Skip to content

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

提交新模块uinapp模块

parent f8475937
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1353 additions and 345 deletions
components/mi-map/mi-map.vue 0 → 100644
View file @ c54b85fe
<template>
<view class="server-place">
<map
id='map'
ref='map'
v-bind:style="{height: mapH + 'px'}"
style="width: 100%;"
:latitude="latitude"
:longitude="longitude"
:controls='controls'
@regionchange='mapChange'>
</map>
<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>
components/mi-map/qqmap-wx-jssdk.min.js 0 → 100644
View file @ c54b85fe
This diff is collapsed.
components/utils/http.js
View file @ c54b85fe
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,
......
main.js
View file @ c54b85fe
......@@ -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'
......
manifest.json
View file @ c54b85fe
......@@ -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
},
......
node_modules/vue-jsonp/README.md 0 → 100644
View file @ c54b85fe
# 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.
node_modules/vue-jsonp/dist/vue-jsonp.umd.js 0 → 100644
View file @ c54b85fe
;(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;
}));
node_modules/vue-jsonp/index.d.ts 0 → 100644
View file @ c54b85fe
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>
node_modules/vue-jsonp/package.json 0 → 100644
View file @ c54b85fe
{
"_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"
}
package-lock.json
View file @ c54b85fe
......@@ -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",
......
pages.json
View file @ c54b85fe
......@@ -29,6 +29,10 @@
"style": {
"enablePullDownRefresh": true
}
}, {
"path": "pages/adddevice/mpnaddlink",
"style": {
}
}
],
// "tabBar": {
......
pages/adddevice/home.vue
View file @ c54b85fe
This diff is collapsed.
pages/adddevice/mpnaddlink.vue 0 → 100644
View file @ c54b85fe
<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>
pages/basics/home.vue
View file @ c54b85fe
......@@ -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 {
......
pages/basics/text.vue 0 → 100644
View file @ c54b85fe
<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>
pages/login/login.vue
View file @ c54b85fe
<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>
pages/search/home.vue
View file @ c54b85fe
......@@ -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