chore(代码复制):能源代码复制
This commit is contained in:
fhysy
commit
1de84a9f3c
|
|
@ -0,0 +1,30 @@
|
|||
.DS_Store
|
||||
/node_modules
|
||||
/dist
|
||||
/unpackage
|
||||
|
||||
/tests/e2e/videos/
|
||||
/tests/e2e/screenshots/
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.vs
|
||||
.idea
|
||||
.vscode
|
||||
.hbuilderx
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
*.iml
|
||||
*.lock
|
||||
package-lock.json
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<style lang="scss">
|
||||
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
|
||||
// NVUE不加载
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
@import "uview-ui/index.scss";
|
||||
/* #endif */
|
||||
</style>
|
||||
<script>
|
||||
import appConfig from "@/common/app-config.js"
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
this.$store.dispatch('setAppConfig', appConfig);
|
||||
console.log('App Launch');
|
||||
const updateManager = uni.getUpdateManager();
|
||||
|
||||
updateManager.onCheckForUpdate(function (res) {
|
||||
// 请求完新版本信息的回调
|
||||
console.log(res.hasUpdate);
|
||||
});
|
||||
|
||||
updateManager.onUpdateReady(function (res) {
|
||||
uni.showModal({
|
||||
title: '更新提示',
|
||||
content: '新版本已经准备好，是否重启应用？',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||
updateManager.applyUpdate();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
updateManager.onUpdateFailed(function (res) {
|
||||
// 新的版本下载失败
|
||||
});
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show');
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("static/fonts/iconfont.css");
|
||||
|
||||
page>view {
|
||||
background: linear-gradient(to bottom,#CEDCFF,#F0F0F0 554rpx);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { get } from './request.js'
|
||||
|
||||
export function getAlarmList(data) {
|
||||
return get('/dev-api/app/alarm/table');
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// import request from './request.js'
|
||||
|
||||
export default{
|
||||
/*
|
||||
* 登录相关
|
||||
*/
|
||||
doLogin(data){//登录
|
||||
return new Promise((resolve, reject) => {
|
||||
request.get('/oauth/token', data)
|
||||
.then((res) =>{
|
||||
resolve(res);
|
||||
}).catch(err =>{
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
export default{
|
||||
cdnImgUrl:'http://static.drgyen.com/app/hc-app-power/images',
|
||||
// 正式
|
||||
// baseUrl: 'https://ny-core.dieruen-iot.com',
|
||||
// imgUrl: 'https://ny-core.dieruen-iot.com',
|
||||
// wsUrl: 'wss://ny-core.dieruen-iot.com',
|
||||
// 弃用
|
||||
// iotOsBaseUrl:"https://iot.gkiiot.com/prod-api",
|
||||
// 德润正式
|
||||
// baseUrl: 'https://digital-core.dieruen-iot.com',
|
||||
// imgUrl: 'https://digital-core.dieruen-iot.com',
|
||||
// wsUrl: 'wss://digital-core.dieruen-iot.com',
|
||||
// 谷云正式
|
||||
baseUrl: 'https://digital-core.drgyen.com',
|
||||
imgUrl: 'https://digital-core.drgyen.com',
|
||||
wsUrl: 'wss://digital-core.drgyen.com',
|
||||
// 长城
|
||||
// baseUrl: 'https://zhny.snc.cn/prod-api/',
|
||||
// imgUrl: 'https://zhny.snc.cn/prod-api/',
|
||||
// wsUrl: 'wss://zhny.snc.cn/prod-api/',
|
||||
// 线下
|
||||
// baseUrl: 'http://192.168.1.17:8899',
|
||||
// imgUrl: 'http://192.168.1.17:8899',
|
||||
// wsUrl: 'ws://192.168.1.17:8899',
|
||||
// iotOsBaseUrl:"http://192.168.18.139:8080",
|
||||
|
||||
// 本地
|
||||
// baseUrl: 'http://192.168.18.134:9988/dev-api',
|
||||
// imgUrl: 'http://192.168.18.134:9988/dev-api',
|
||||
// iotOsBaseUrl:"http://iot.gkiiot.com:8080",
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// mqttUrl:'wx://iot.gkiiot.com:8083/mqtt',
|
||||
// mqttUrl:'wxs://iot.gkiiot.com/mqtt-ws/mqtt',
|
||||
// mqttUrl:'wx://192.168.18.139:8083/mqtt',
|
||||
// mqttUrl:'wx://iot.gkiiot.com:8083/mqtt',
|
||||
//#endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
// mqttUrl:'ws://iot.gkiiot.com:8083/mqtt',
|
||||
// mqttUrl:'ws://192.168.18.139:8083/mqtt',
|
||||
// mqttUrl:'wx://iot.gkiiot.com:8083/mqtt',
|
||||
// #endif
|
||||
}
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
import store from '@/store'
|
||||
|
||||
//H5版本
|
||||
// #ifdef H5
|
||||
import Fly from 'flyio/dist/npm/fly'
|
||||
// #endif
|
||||
|
||||
//微信小程序和APP版本
|
||||
// #ifndef H5
|
||||
import Fly from 'flyio/dist/npm/wx'
|
||||
// #endif
|
||||
|
||||
const request = new Fly();
|
||||
import config from "./config.js"
|
||||
//请求拦截
|
||||
request.interceptors.request.use((request) => {
|
||||
// uni.showLoading({
|
||||
// title: '努力加载中...'
|
||||
// });
|
||||
request.baseURL = config.baseUrl;
|
||||
const userToken = uni.getStorageSync('userToken');
|
||||
if(userToken){
|
||||
request.headers["Authorization"] = userToken;
|
||||
}
|
||||
// 防止缓存
|
||||
if (request.method === 'POST' && request.headers['Content-Type'] !== 'multipart/form-data') {
|
||||
request.body = {
|
||||
...request.body,
|
||||
_t: Date.parse(new Date()) / 1000
|
||||
}
|
||||
} else if (request.method === 'GET') {
|
||||
request.params = {
|
||||
_t: Date.parse(new Date()) / 1000,
|
||||
...request.params
|
||||
}
|
||||
}
|
||||
return request
|
||||
})
|
||||
|
||||
//响应拦截
|
||||
request.interceptors.response.use(function(response) { //不要使用箭头函数，否则调用this.lock()时，this指向不对
|
||||
let errmsg = '';
|
||||
const data = response.data;
|
||||
if (!data || typeof data !== 'object') {
|
||||
errmsg = '服务器响应格式错误';
|
||||
uni.showToast({
|
||||
title: errmsg,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
const code = data.code;
|
||||
let msg = "";
|
||||
if(code != 200){
|
||||
console.log('data.msg: ', data.msg)
|
||||
uni.showToast({
|
||||
title: data.msg,
|
||||
duration: 3000,
|
||||
icon: 'none'
|
||||
})
|
||||
if(code == 401){
|
||||
try{
|
||||
store.commit('logout');
|
||||
uni.reLaunch({
|
||||
url: '/pages/auth/login'
|
||||
})
|
||||
} catch(err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
return data; // 只返回业务数据部分
|
||||
}, function(err) {
|
||||
|
||||
// console.log("error-interceptor:" + JSON.stringify(err))
|
||||
let errmsg = err.message;
|
||||
switch (err.status) {
|
||||
case 0:
|
||||
errmsg = "网络连接错误";
|
||||
uni.showToast({
|
||||
title: errmsg,
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
case 401:
|
||||
store.commit('logout');
|
||||
uni.reLaunch({
|
||||
url: '/pages/auth/login'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
uni.showToast({
|
||||
title: errmsg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
/**
|
||||
* 封装post方法
|
||||
* @param url
|
||||
* @param data
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function post(url, params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.post(url, params)
|
||||
.then(response => {
|
||||
resolve(response);
|
||||
}, err => {
|
||||
reject(err);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function get(url, params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.get(url, params)
|
||||
.then(response => {
|
||||
resolve(response);
|
||||
}, err => {
|
||||
reject(err);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function DELETE(url, params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.delete(url, params)
|
||||
.then(response => {
|
||||
resolve(response);
|
||||
}, err => {
|
||||
reject(err);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function put(url, params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.put(url, params)
|
||||
.then(response => {
|
||||
resolve(response);
|
||||
}, err => {
|
||||
reject(err);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
// export default request
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
export default {
|
||||
// 德润模板
|
||||
|
||||
// 系统名称
|
||||
// name:'DS-service',
|
||||
|
||||
// // logo（200*200）
|
||||
// logo:'http://static.drgyen.com/app/hc-app-power/images/derun/logo.png',
|
||||
|
||||
// // 公司名称
|
||||
// companyName:'德润物联',
|
||||
|
||||
// // 公司全名（用户协议隐私使用）
|
||||
// companyFillName:'德润（福建）物联科技有限公司',
|
||||
|
||||
// // 公司logo（无用）
|
||||
// companyLogo:'公司logo',
|
||||
|
||||
// // 公司介绍（无用）
|
||||
// companyProfile:'公司介绍',
|
||||
|
||||
// //公众号二维码
|
||||
// wechatCode:'http://static.drgyen.com/app/hc-app-power/images/derun/wechatCode.jpg',
|
||||
|
||||
// // 联系电话
|
||||
// phone:'18059776307',
|
||||
|
||||
// // 联系邮箱
|
||||
// email:'service@drgyen.com',
|
||||
|
||||
// // 备案号（没有置空）
|
||||
// contractRecordNumber:'闽公网安备 35010502000271号',
|
||||
|
||||
|
||||
// 谷云模板
|
||||
|
||||
// 系统名称
|
||||
name:'数字用电管理系统',
|
||||
|
||||
// logo（200*200）
|
||||
logo:'http://static.drgyen.com/app/hc-app-power/images/drgyen/logo.png',
|
||||
|
||||
// 公司名称
|
||||
companyName:'德润谷云',
|
||||
|
||||
// 公司全名（用户协议隐私使用）
|
||||
companyFillName:'上海德润谷云物联科技有限公司',
|
||||
|
||||
// 公司logo
|
||||
companyLogo:'公司logo',
|
||||
|
||||
// 公司介绍
|
||||
companyProfile:'公司介绍',
|
||||
|
||||
//公众号二维码
|
||||
wechatCode:'http://static.drgyen.com/app/hc-app-power/images/drgyen/wechatCode.jpg',
|
||||
|
||||
// 联系电话
|
||||
phone:'18059776307',
|
||||
|
||||
// 联系邮箱
|
||||
email:'service@drgyen.com',
|
||||
|
||||
// 备案号
|
||||
contractRecordNumber:'',
|
||||
|
||||
|
||||
// 长城模板
|
||||
|
||||
// // 系统名称
|
||||
// name:'长城数字能源一体化平台',
|
||||
|
||||
// // logo（200*200）
|
||||
// logo:'http://static.drgyen.com/app/hc-app-power/images/cc/logo.png',
|
||||
|
||||
// // 公司名称
|
||||
// companyName:'上海长城',
|
||||
|
||||
// // 公司全名（用户协议隐私使用）
|
||||
// companyFillName:'上海长城开关厂有限公司',
|
||||
|
||||
// // 公司logo
|
||||
// companyLogo:'公司logo',
|
||||
|
||||
// // 公司介绍
|
||||
// companyProfile:'公司介绍',
|
||||
|
||||
// //公众号二维码
|
||||
// wechatCode:'http://static.drgyen.com/app/hc-app-power/images/cc/wechatCode.jpg',
|
||||
|
||||
// // 联系电话
|
||||
// phone:'400-060-5588',
|
||||
|
||||
// // 联系邮箱
|
||||
// email:'sh_snc@126.com',
|
||||
|
||||
// // 备案号
|
||||
// contractRecordNumber:'',
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
let arr = [
|
||||
// {
|
||||
// name:"智慧用电",
|
||||
// icon:"tubiaoshangchuanmoban",
|
||||
// url:"../home/wisdomElectricity/index",
|
||||
// background:"linear-gradient(-55deg, #52AA52, #76D296);",
|
||||
// boxShadow: "0px 9px 15px 0px rgba(87, 175, 91, 0.3);"
|
||||
// },{
|
||||
// name:"电气火灾",
|
||||
// icon:"huozai",
|
||||
// url:"",
|
||||
// background:"linear-gradient(-55deg, #0292F6, #5FB8FD);",
|
||||
// boxShadow: "0px 9px 15px 0px rgba(3, 183, 250, 0.3);"
|
||||
// },{
|
||||
// name:"水位水压",
|
||||
// icon:"shuiwei",
|
||||
// url:"",
|
||||
// background:"linear-gradient(-55deg, #00B3FA, #20DBFF);",
|
||||
// boxShadow: "0px 9px 15px 0px rgba(7, 186, 254, 0.3);"
|
||||
// },{
|
||||
// name:"烟雾",
|
||||
// icon:"yanwu",
|
||||
// url:"",
|
||||
// background:"linear-gradient(-55deg, #0ACBCD, #73E4FA);",
|
||||
// boxShadow:"0px 9px 15px 0px rgba(6, 220, 197, 0.3);"
|
||||
// },{
|
||||
// name:"可燃气体",
|
||||
// icon:"yanwu1",
|
||||
// url:"",
|
||||
// background:"linear-gradient(-55deg, #9E57F5, #CEA7FD);",
|
||||
// boxShadow:" 0px 9px 15px 0px rgba(159, 88, 245, 0.3);"
|
||||
// },{
|
||||
// name:"温湿度",
|
||||
// icon:"wenshidu",
|
||||
// url:"",
|
||||
// background: "linear-gradient(-55deg, #FF6528, #FF954D);",
|
||||
// boxShadow: "0px 9px 15px 0px rgba(254, 127, 76, 0.3);"
|
||||
// },{
|
||||
// name:"安防监控",
|
||||
// icon:"jiankong",
|
||||
// url:"",
|
||||
// background: "linear-gradient(-55deg, #FFB830, #FDD158);",
|
||||
// boxShadow: "0px 9px 15px 0px rgba(254, 192, 72, 0.3);"
|
||||
// },
|
||||
{
|
||||
name:"警告分析",
|
||||
icon:"jinggao1",
|
||||
url:"/pages/home/warnAnalysis/index",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(-55deg, #2F74FF, #6295FC);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#6295FC",
|
||||
// #endif
|
||||
boxShadow: "0px 9px 15px 0px rgba(66, 127, 248, 0.3);"
|
||||
}]
|
||||
export default arr;
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
// let arr = [{
|
||||
// name:"数字用电",
|
||||
// icon:"tubiaoshangchuanmoban",
|
||||
// url:"../home/wisdomElectricity/index",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #52AA52, #76D296);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#76D296",
|
||||
// // #endif
|
||||
// boxShadow: "0px 9px 15px 0px rgba(87, 175, 91, 0.3);"
|
||||
// },{
|
||||
// name:"电气火灾",
|
||||
// icon:"huozai",
|
||||
// url:"../home/electricalFire/index",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #0292F6, #5FB8FD);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#5FB8FD",
|
||||
// // #endif
|
||||
// boxShadow: "0px 9px 15px 0px rgba(3, 183, 250, 0.3);"
|
||||
// },{
|
||||
// name:"水位水压",
|
||||
// icon:"shuiwei",
|
||||
// url:"../home/waterLevel/index",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #00B3FA, #20DBFF);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#20DBFF",
|
||||
// // #endif
|
||||
// boxShadow: "0px 9px 15px 0px rgba(7, 186, 254, 0.3);"
|
||||
// },{
|
||||
// name:"烟雾",
|
||||
// icon:"yanwu",
|
||||
// url:"../home/smoke/index",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #0ACBCD, #73E4FA);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#73E4FA",
|
||||
// // #endif
|
||||
// boxShadow:"0px 9px 15px 0px rgba(6, 220, 197, 0.3);"
|
||||
// },{
|
||||
// name:"可燃气体",
|
||||
// icon:"yanwu1",
|
||||
// url:"",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #9E57F5, #CEA7FD);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#CEA7FD",
|
||||
// // #endif
|
||||
// boxShadow:" 0px 9px 15px 0px rgba(159, 88, 245, 0.3);"
|
||||
// },{
|
||||
// name:"温湿度",
|
||||
// icon:"wenshidu",
|
||||
// url:"../home/temperature/index",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #FF6528, #FF954D);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#FF954D",
|
||||
// // #endif
|
||||
// boxShadow: "0px 9px 15px 0px rgba(254, 127, 76, 0.3);"
|
||||
// },{
|
||||
// name:"安防监控",
|
||||
// icon:"jiankong",
|
||||
// url:"",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #FFB830, #FDD158);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#FDD158",
|
||||
// // #endif
|
||||
// boxShadow: "0px 9px 15px 0px rgba(254, 192, 72, 0.3);"
|
||||
// },{
|
||||
// name:"更多",
|
||||
// icon:"gengduo",
|
||||
// url:"/pages/home/more/moreNavBar",
|
||||
// // #ifdef MP-WEIXIN
|
||||
// background:"linear-gradient(-55deg, #2F74FF, #6295FC);",
|
||||
// // #endif
|
||||
// // #ifndef MP-WEIXIN
|
||||
// background:"#6295FC",
|
||||
// // #endif
|
||||
// boxShadow: "0px 9px 15px 0px rgba(66, 127, 248, 0.3);"
|
||||
// }]
|
||||
|
||||
let arr = [{
|
||||
name:"用电分析",
|
||||
imgUrl:"/home/menu1.png",
|
||||
icon:"dicon-icon_yongdian",
|
||||
url:"../home/wisdomElectricity/index",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(0deg, #2365C0, #24B4E9);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#76D296",
|
||||
// #endif
|
||||
boxShadow: "7px 0px 10px 0px rgba(48,136,254,0.5);"
|
||||
},{
|
||||
name:"用水分析",
|
||||
imgUrl:"/home/menu2.png",
|
||||
icon:"dicon-icon_yongshui",
|
||||
url:"../home/waterLevel/index",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(0deg, #199582, #6AD6C3);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#20DBFF",
|
||||
// #endif
|
||||
boxShadow: "7px 0px 10px 0px rgba(97,214,191,0.5);"
|
||||
},{
|
||||
name:"用气分析",
|
||||
imgUrl:"/home/menu3.png",
|
||||
icon:"dicon-icon_yongqi",
|
||||
url:"",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(0deg, #F28E26, #FFC574);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#CEA7FD",
|
||||
// #endif
|
||||
boxShadow:"7px 0px 10px 0px rgba(237,180,0,0.5);"
|
||||
},{
|
||||
name:"消防安全",
|
||||
imgUrl:"/home/menu4.png",
|
||||
icon:"dicon-icon_xiaofang",
|
||||
url:"../home/smoke/index",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(0deg, #7244EF, #9388F9);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#73E4FA",
|
||||
// #endif
|
||||
boxShadow:"7px 0px 10px 0px rgba(126,79,255,0.5);"
|
||||
},{
|
||||
name:"安防监控",
|
||||
imgUrl:"/home/menu5.png",
|
||||
icon:"dicon-icon_shipin",
|
||||
url:"",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(180deg, #6596D2, #1E5095);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#FDD158",
|
||||
// #endif
|
||||
boxShadow: "7px 0px 10px 0px rgba(104,132,187,0.5);"
|
||||
},{
|
||||
name:"环境监测",
|
||||
imgUrl:"/home/menu6.png",
|
||||
icon:"dicon-icon_jiance",
|
||||
url:"../home/temperature/index",
|
||||
// #ifdef MP-WEIXIN
|
||||
background:"linear-gradient(0deg, #D94353, #FF887C);",
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
background:"#FF954D",
|
||||
// #endif
|
||||
boxShadow: "7px 0px 10px 0px rgba(255,79,98,0.5);"
|
||||
}]
|
||||
export default arr;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
.text--base--grey{
|
||||
color: $uni-text-color-grey;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.text--base--main{
|
||||
color: #1C9AFF;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.text--base--green{
|
||||
color: $u-type-success;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.text--base--number{
|
||||
color: #FF5E5A;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.text--base--alarm{
|
||||
color: #FF5E5A;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.text--base--orange{
|
||||
color: #F7A84B;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
.text--mini--grey{
|
||||
color: $uni-text-color-grey;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import "base.scss";
|
||||
@import "used.scss";
|
||||
.flex1{
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
.pt10{
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.pr10{
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
.pb10{
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
.pl10{
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.pt15{
|
||||
padding-top: 15rpx;
|
||||
}
|
||||
.pr15{
|
||||
padding-right: 15rpx;
|
||||
}
|
||||
.pb15{
|
||||
padding-bottom: 15rpx;
|
||||
}
|
||||
.pl15{
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
|
||||
.pt20{
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.pr20{
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.pb20{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.pl20{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.pt25{
|
||||
padding-top: 25rpx;
|
||||
}
|
||||
.pr25{
|
||||
padding-right: 25rpx;
|
||||
}
|
||||
.pb25{
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
.pl25{
|
||||
padding-left: 25rpx;
|
||||
}
|
||||
|
||||
.pt30{
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
.pr30{
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
.pb30{
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.pl30{
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.mt10{
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.mr10{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.mb10{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.ml10{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.mt15{
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.mr15{
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.mb15{
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.ml15{
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
|
||||
.mt20{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.mr20{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.mb20{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.ml20{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.mt30{
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.mr30{
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.mb30{
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.ml30{
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.text-align-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-bold{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flex-between{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ellipsis {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<style lang='scss' scoped>
|
||||
.headerSelect-list-picker{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
|
||||
&-alarm{
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
&-alarm,&-state{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 26rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="headerSelect">
|
||||
<view class="headerSelect-list-picker">
|
||||
<view class="headerSelect-list-picker-alarm" @click="alarmSelectShow = true">
|
||||
<text>{{(alarmSelectValue) =='WARNING'?"预警":(alarmSelectValue)=='ALARM'?"报警":"-"}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
<view class="headerSelect-list-picker-state" @click="stateSelectShow = true">
|
||||
<text>{{stateSelectValue=="UNPROCESS"?"未处理":stateSelectValue=="PROCESSED"?"已处理":"状态"}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-select v-model="alarmSelectShow" :list="alarmSelectList" @confirm="onAlarmConfirmFn"></u-select>
|
||||
<u-select v-model="stateSelectShow" :list="stateSelectList" @confirm="onStateConfirmFn"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
alarmSelectValue:"",
|
||||
alarmSelectShow: false, // 报警预警弹框
|
||||
alarmSelectList: [
|
||||
{
|
||||
value: "ALARM",
|
||||
label: '报警'
|
||||
},
|
||||
{
|
||||
value: "WARNING",
|
||||
label: '预警'
|
||||
}
|
||||
],
|
||||
stateSelectValue:"",
|
||||
stateSelectShow: false, // 状态弹框
|
||||
stateSelectList: [
|
||||
{
|
||||
value: "",
|
||||
label: '全部'
|
||||
},
|
||||
{
|
||||
value: "UNPROCESS",
|
||||
label: '未处理'
|
||||
},
|
||||
{
|
||||
value: "PROCESSED",
|
||||
label: '已处理'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
props:{
|
||||
alarmValue:{
|
||||
type:String,
|
||||
default:"ALARM"
|
||||
},
|
||||
stateValue:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.alarmValue,this.stateValue);
|
||||
this.alarmSelectValue = this.alarmValue;
|
||||
this.stateSelectValue = this.stateValue;
|
||||
},
|
||||
methods: {
|
||||
// 状态选择
|
||||
onStateConfirmFn(arr){
|
||||
this.stateSelectValue = arr[0].value;
|
||||
this.$emit("onStateConfirm",arr[0].value);
|
||||
},
|
||||
// 报警预警选择
|
||||
onAlarmConfirmFn(arr){
|
||||
this.alarmSelectValue = arr[0].value;
|
||||
this.$emit("onAlarmConfirm",arr[0].value);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<style lang='scss' scoped>
|
||||
.headerSelect{
|
||||
width: 100%;
|
||||
&-header{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
background-color: #fff;
|
||||
&-picker{
|
||||
border-left: 1px solid #dcdcdc;
|
||||
}
|
||||
&-date,&-picker{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="headerSelect">
|
||||
<view class="headerSelect-header">
|
||||
<!-- <u-dropdown>
|
||||
<u-dropdown-item v-model="dateType" :title="dateType==1?'日':'月'" :options="options2" @change="bindDropdownSwitchFn"></u-dropdown-item>
|
||||
</u-dropdown> -->
|
||||
<view class="headerSelect-header-date flex1" @click="dateSelectShow = true">
|
||||
<text>{{dateType==1?"日":"月"}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
<picker class="headerSelect-header-picker flex1" mode="date" :value="getDateValCmp" :fields="dateType==1?'day':'month'" @change="bindDateChange">
|
||||
<text class="uni-input">{{getDateValCmp}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</picker>
|
||||
</view>
|
||||
<u-select v-model="dateSelectShow" :list="options2" @confirm="onDateConfirmFn"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dateSelectShow:false,
|
||||
dateType: 2,
|
||||
options2: [
|
||||
{
|
||||
label: '日',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '月',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
dateVal:""
|
||||
}
|
||||
},
|
||||
props:{
|
||||
// 默认日期
|
||||
defaultDate:{
|
||||
type:String,
|
||||
require:true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// defaultDate(newVal){
|
||||
// this.dateVal = newVal;
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
// this.dateVal = this.$u.timeFormat(this.defaultDate, this.dateType==1?'yyyy-mm-dd':'yyyy-mm');
|
||||
// this.dateVal = this.defaultDate;
|
||||
},
|
||||
computed:{
|
||||
getDateValCmp: {
|
||||
get() {
|
||||
return this.defaultDate;
|
||||
},
|
||||
set(val) {
|
||||
this.defaultDate = val
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 日期切换
|
||||
bindDateChange(e){
|
||||
// this.dateVal = e.detail.value;
|
||||
// this.defaultDate = e.detail.value;
|
||||
this.$emit("onDateChangeFn",e.detail.value);
|
||||
},
|
||||
// 日月切换
|
||||
onDateConfirmFn(arr){
|
||||
this.dateType = arr[0].value;
|
||||
this.$emit("onDateTypeChangeFn", arr[0].value);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<style lang='scss' scoped>
|
||||
.pickerGroup-list-picker{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
|
||||
&-left{
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
&-left,&-right{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 26rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="pickerGroup">
|
||||
<view class="pickerGroup-list-picker">
|
||||
<view class="pickerGroup-list-picker-left" @click="leftSelectShow = true">
|
||||
<text>{{getLeftSelectTextCmp}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
<picker v-if="rightSelectType=='date'" class="pickerGroup-list-picker-right"
|
||||
mode="date" :fields="dateTypeMode" :value="dateVal" @change="bindDateChange">
|
||||
<view class="">
|
||||
<text>{{getRightSelectTextCmp}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</picker>
|
||||
<view v-else class="pickerGroup-list-picker-right" @click="rightSelectShow = true">
|
||||
<text>{{getRightSelectTextCmp}}</text>
|
||||
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-select
|
||||
v-model="leftSelectShow"
|
||||
:list="leftSelectList"
|
||||
@confirm="onLeftSelectConfirmFn"
|
||||
:value-name="leftValueName"
|
||||
:label-name="leftLabelName"
|
||||
:child-name="leftChildName"
|
||||
:mode="leftMode"
|
||||
></u-select>
|
||||
<u-select
|
||||
v-model="rightSelectShow"
|
||||
:list="rightSelectList"
|
||||
@confirm="onRightSelectConfirmFn"
|
||||
:value-name="rightValueName"
|
||||
:label-name="rightLabelName"
|
||||
:child-name="rightChildName"
|
||||
:mode="rightMode"
|
||||
></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
leftSelectValue:"",
|
||||
leftSelectShow: false, // 报警预警弹框
|
||||
|
||||
rightSelectValue:"",
|
||||
rightSelectShow: false, // 状态弹框
|
||||
|
||||
dateVal:"",
|
||||
|
||||
leftSelectLabel: "全部",
|
||||
rightSelectLabel: "",
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
rightValue(newVal){
|
||||
this.dateVal = this.rightValue;
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getLeftSelectTextCmp(){
|
||||
// let obj = this.leftSelectList.find((item)=>{
|
||||
// return item[this.leftValueName] === this.leftSelectValue
|
||||
// });
|
||||
// if (!!obj) {
|
||||
// return obj[this.leftLabelName];
|
||||
// } else{
|
||||
// return "-";
|
||||
// }
|
||||
return this.leftSelectLabel
|
||||
},
|
||||
getRightSelectTextCmp(){
|
||||
if(this.rightSelectType==="date"){
|
||||
if (!!this.dateVal) {
|
||||
return this.dateVal
|
||||
} else{
|
||||
return "-"
|
||||
}
|
||||
}else{
|
||||
// let obj = this.rightSelectList.find((item)=>{
|
||||
// return item[this.rightValueName] === this.rightSelectValue
|
||||
// });
|
||||
// if (!!obj) {
|
||||
// return obj[this.rightLabelName];
|
||||
// } else{
|
||||
// return "-";
|
||||
// }
|
||||
return this.rightSelectLabel
|
||||
}
|
||||
}
|
||||
},
|
||||
props:{
|
||||
rightSelectType:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
dateTypeMode :{
|
||||
type:String,
|
||||
default:"month"
|
||||
},
|
||||
leftSelectList: {
|
||||
type:Array,
|
||||
default () {
|
||||
return []
|
||||
},
|
||||
},
|
||||
rightSelectList:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
},
|
||||
},
|
||||
// 左边默认值
|
||||
leftValue:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
// 右边默认值
|
||||
rightValue:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
// 自定义属性值
|
||||
leftValueName: {
|
||||
type: String,
|
||||
default: "value"
|
||||
},
|
||||
leftLabelName: {
|
||||
type: String,
|
||||
default: "label"
|
||||
},
|
||||
leftChildName: {
|
||||
type: String,
|
||||
default: "children"
|
||||
},
|
||||
rightValueName: {
|
||||
type: String,
|
||||
default: "value"
|
||||
},
|
||||
rightLabelName: {
|
||||
type: String,
|
||||
default: "label"
|
||||
},
|
||||
rightChildName: {
|
||||
type: String,
|
||||
default: "children"
|
||||
},
|
||||
// 左、右侧下拉模式
|
||||
leftMode: {
|
||||
type: String,
|
||||
default: "single-column"
|
||||
},
|
||||
rightMode: {
|
||||
type: String,
|
||||
default: "single-column"
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.leftSelectValue = this.leftValue;
|
||||
this.rightSelectValue = this.rightValue;
|
||||
this.dateVal = this.rightValue;
|
||||
},
|
||||
methods: {
|
||||
bindDateChange(e){
|
||||
this.dateVal = e.detail.value;
|
||||
// this.rightValue = e.detail.value;
|
||||
this.$emit("onDateChange",e.detail.value);
|
||||
},
|
||||
onRightSelectConfirmFn(arr){
|
||||
// this.rightSelectValue = arr[0].value;
|
||||
this.rightSelectLabel = arr[arr.length - 1].label;
|
||||
this.$emit("onRightConfirm",arr[arr.length - 1].value);
|
||||
},
|
||||
//
|
||||
onLeftSelectConfirmFn(arr){
|
||||
// this.leftSelectValue = arr[0].value;
|
||||
this.leftSelectLabel = arr[arr.length - 1].label;
|
||||
this.$emit("onLeftConfirm",arr[arr.length - 1].value);
|
||||
},
|
||||
getLabel(arr) {
|
||||
let label = '';
|
||||
for (let item of arr) {
|
||||
label += item.label
|
||||
}
|
||||
return label
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<style lang="scss" scoped>
|
||||
.header-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
&-top{
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
background-color: $main-color;
|
||||
}
|
||||
&-bottom{
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-bottom-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
background-color: $main-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="header-bg">
|
||||
<view class="header-bg-top"></view>
|
||||
<view class="header-bg-bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<style lang='scss' scoped>
|
||||
.historyCurve-table{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-list{
|
||||
height: 480rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="historyCurve-table" >
|
||||
<template v-if="has_data">
|
||||
<u-table>
|
||||
<u-tr>
|
||||
<u-th v-for="(item,index) in tableList.head" :key="index">{{item}}</u-th>
|
||||
<!-- <u-th>班级</u-th>
|
||||
<u-th>年龄</u-th> -->
|
||||
</u-tr>
|
||||
<view class="historyCurve-table-list">
|
||||
<u-tr v-for="(item,index) in tableList.body" :key="index">
|
||||
<u-td v-for="(value,key) in item" :key="key">
|
||||
{{value}}
|
||||
</u-td>
|
||||
<!-- <u-td>{{item.time}}</u-td>
|
||||
<u-td>{{item.data0}}</u-td>
|
||||
<u-td>{{item.data1}}</u-td> -->
|
||||
</u-tr>
|
||||
</view>
|
||||
</u-table>
|
||||
</template>
|
||||
<template v-else>
|
||||
<u-empty text="数据为空" mode="data"></u-empty>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
prodDataList: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// prodDataList:{
|
||||
// series: [
|
||||
// {name: "成交量A", data: [35, 8, 25, 37, 4, 20]},
|
||||
// {name: "成交量B", data: [70, 40, 65, 100, 44, 68]},
|
||||
// ],
|
||||
// categories:[2021,2020,2022,1999,1996,1995]
|
||||
// },
|
||||
tableList:{
|
||||
head:[],
|
||||
body:[]
|
||||
// head:["年份","成交量A","成交量B"],
|
||||
// body:[{
|
||||
// year:"2021",
|
||||
// data1:35,
|
||||
// data2:70
|
||||
// }]
|
||||
},
|
||||
has_data: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.handlerData();
|
||||
},
|
||||
watch: {
|
||||
prodDataList(newVal) {
|
||||
this.handlerData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerData() {
|
||||
if(Object.keys(this.prodDataList).length == 0){
|
||||
this.has_data = false;
|
||||
} else {
|
||||
this.tableList={
|
||||
head:[],
|
||||
body:[]
|
||||
}
|
||||
this.tableList.head.push("时间");
|
||||
this.prodDataList.series.forEach((obj,i)=>{
|
||||
this.tableList.head.push(obj.name);
|
||||
});
|
||||
this.prodDataList.categories.forEach((item,index)=>{
|
||||
let dataObj = {
|
||||
time:item
|
||||
};
|
||||
this.prodDataList.series.forEach((obj,i)=>{
|
||||
dataObj['data' + i] = obj.data[index];
|
||||
});
|
||||
this.tableList.body.push(dataObj);
|
||||
});
|
||||
this.has_data = true;
|
||||
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$emit('onRenderFinsh', 'ok');
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,554 @@
|
|||
<template>
|
||||
<view class="tui-icon-class tui-icon" :class="'tui-icon-'+name" :style="{ color: color, fontSize: size + 'rpx',fontWeight:bold?'bold':'normal'}"
|
||||
@tap="handleClick(index)"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tuiIcon",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: [Number,String],
|
||||
default: 32
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(index) {
|
||||
this.$emit('click', {
|
||||
index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 2212402 */
|
||||
src: url('https://at.alicdn.com/t/font_2212402_tw8jlyfg6iq.woff2?t=1649726625334') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_2212402_tw8jlyfg6iq.woff?t=1649726625334') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_2212402_tw8jlyfg6iq.ttf?t=1649726625334') format('truetype');
|
||||
}
|
||||
|
||||
.tui-icon {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
padding-top: -1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.tui-icon-youjian:before {
|
||||
content: "\e675";
|
||||
}
|
||||
.tui-icon-mingpian:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.tui-icon-tuoxian:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.tui-icon-chazuo:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.tui-icon-dianluquanding:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.tui-icon-gonggao:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.tui-icon-ditu2:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.tui-icon-yichuli:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.tui-icon-weichuli:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.tui-icon-dianliangfenxi:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.tui-icon-shishi:before {
|
||||
content: "\e751";
|
||||
}
|
||||
|
||||
.tui-icon-tongjifenxi:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.tui-icon-60:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.tui-icon-sanxiangdianya:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.tui-icon-worktable:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.tui-icon-tongxun:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.tui-icon-dianya-lv:before {
|
||||
content: "\e712";
|
||||
}
|
||||
|
||||
.tui-icon-dianya-hong:before {
|
||||
content: "\e715";
|
||||
}
|
||||
|
||||
.tui-icon-loudianyujing:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.tui-icon-dianliuyujing:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.tui-icon-sanxiangbupinghengdianya:before {
|
||||
content: "\e7dd";
|
||||
}
|
||||
|
||||
.tui-icon-loudianbaohu:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.tui-icon-loudianbaohuchaxun:before {
|
||||
content: "\e6dc";
|
||||
}
|
||||
|
||||
.tui-icon-yinsi:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.tui-icon-histron:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.tui-icon-banben:before {
|
||||
content: "\e780";
|
||||
}
|
||||
|
||||
.tui-icon-xieyi:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.tui-icon-SYS_STA_1:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.tui-icon-lixian:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.tui-icon-fuzai:before {
|
||||
content: "\e7e7";
|
||||
}
|
||||
|
||||
.tui-icon-wendubaojing:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.tui-icon-loudianbaojing:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.tui-icon-gdbj:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.tui-icon-saoma:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.tui-icon-dianhu:before {
|
||||
content: "\eb95";
|
||||
}
|
||||
|
||||
.tui-icon-lvsenengyuan:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.tui-icon-tubiaoshangchuanmoban:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.tui-icon-qiedianhecha:before {
|
||||
content: "\ea40";
|
||||
}
|
||||
|
||||
.tui-icon-suidaobaojing:before {
|
||||
content: "\e7b5";
|
||||
}
|
||||
|
||||
.tui-icon-dianqianquan:before {
|
||||
content: "\e7d2";
|
||||
}
|
||||
|
||||
.tui-icon-dianxiang:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.tui-icon-guoyaqianya:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.tui-icon-dianliu:before {
|
||||
content: "\e75e";
|
||||
}
|
||||
|
||||
.tui-icon-sanxiangdl:before {
|
||||
content: "\e7dc";
|
||||
}
|
||||
|
||||
.tui-icon-guanyu:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.tui-icon-bangzhu:before {
|
||||
content: "\e70f";
|
||||
}
|
||||
|
||||
.tui-icon-mima:before {
|
||||
content: "\ea7f";
|
||||
}
|
||||
|
||||
.tui-icon-zhaopian:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.tui-icon-wenshidu:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.tui-icon-riqi:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.tui-icon-cuo:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.tui-icon-huabanx:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.tui-icon-zengjia:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.tui-icon-jinggao1:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.tui-icon-quxian4:before {
|
||||
content: "\e700";
|
||||
}
|
||||
|
||||
.tui-icon-kongdiao:before {
|
||||
content: "\e6db";
|
||||
}
|
||||
|
||||
.tui-icon-zhaoming:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.tui-icon-settings:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.tui-icon-ditu9:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.tui-icon-wode:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.tui-icon-xiangmu:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.tui-icon-icon-system-fn-warning:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.tui-icon-project:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.tui-icon-yanwu:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.tui-icon-huozai:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.tui-icon-muluxiangmu:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.tui-icon-shouye:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.tui-icon-luxian:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.tui-icon-delete:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.tui-icon-luxian1:before {
|
||||
content: "\e72f";
|
||||
}
|
||||
|
||||
.tui-icon-weibaojilu:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.tui-icon-quxian-copy:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.tui-icon-IOTtubiao_huabanfuben:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.tui-icon-wendu:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.tui-icon-wode1:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.tui-icon-yanwu1:before {
|
||||
content: "\e6f8";
|
||||
}
|
||||
|
||||
.tui-icon-fenxi:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.tui-icon-baojingjilu:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.tui-icon-icon_home:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.tui-icon-baojing:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.tui-icon-shaixuan:before {
|
||||
content: "\e75d";
|
||||
}
|
||||
|
||||
.tui-icon-sousuo:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.tui-icon-zhihuiyongdian:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.tui-icon-baojingfenxi:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.tui-icon-shuiwei:before {
|
||||
content: "\e82b";
|
||||
}
|
||||
|
||||
.tui-icon-shishizhuangtai:before {
|
||||
content: "\e80a";
|
||||
}
|
||||
.tui-icon-gengduo:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
.tui-icon-jiankong:before {
|
||||
content: "\e620";
|
||||
}
|
||||
.tui-icon-xinpian:before {
|
||||
content: "\e630";
|
||||
}
|
||||
.tui-icon-shezhi:before {
|
||||
content: "\e623";
|
||||
}
|
||||
.tui-icon-bingtu:before {
|
||||
content: "\e624";
|
||||
}
|
||||
.tui-icon-zixun:before {
|
||||
content: "\e635";
|
||||
}
|
||||
.tui-icon-xinhaolx:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
.tui-icon-weizhi:before {
|
||||
content: "\e633";
|
||||
}
|
||||
.tui-icon-lixian2:before {
|
||||
content: "\e75f";
|
||||
}
|
||||
.tui-icon-zaixian:before {
|
||||
content: "\e622";
|
||||
}
|
||||
.tui-icon-lixian3:before {
|
||||
content: "\e7be";
|
||||
}
|
||||
.tui-icon-xiaohaoyg:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
.tui-icon-xinhaolg:before {
|
||||
content: "\e659";
|
||||
}
|
||||
.tui-icon-xinhaosg:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
.tui-icon-xinhaosige:before {
|
||||
content: "\e657";
|
||||
}
|
||||
.tui-icon-xinhaowuge:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
.tui-icon-diannao:before {
|
||||
content: "\e625";
|
||||
}
|
||||
.tui-icon-xuehua:before {
|
||||
content: "\e692";
|
||||
}
|
||||
.tui-icon-hezha:before {
|
||||
content: "\e640";
|
||||
}
|
||||
.tui-icon-fenzha:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
.tui-icon-yaqiangicon:before {
|
||||
content: "\e636";
|
||||
}
|
||||
.tui-icon-beikongshuiwupingtaimenhu-tubiao_zutaigongju-da:before {
|
||||
content: "\e631";
|
||||
}
|
||||
.tui-icon-liandongchuzhi:before {
|
||||
content: "\e63b";
|
||||
}
|
||||
.tui-icon-zuoji:before {
|
||||
content: "\e643";
|
||||
}
|
||||
.tui-icon-duanxin:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
.tui-icon-weixin:before {
|
||||
content: "\e626";
|
||||
}
|
||||
.tui-icon-ie:before {
|
||||
content: "\e729";
|
||||
}
|
||||
.tui-icon-weixin1:before {
|
||||
content: "\e628";
|
||||
}
|
||||
.tui-icon-dianchidianya:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
.tui-icon-zuxinh:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
.tui-icon-changsuoguanli:before {
|
||||
content: "\e644";
|
||||
}
|
||||
.tui-icon-lianxiwomen:before {
|
||||
content: "\e629";
|
||||
}
|
||||
.tui-icon-gaojing:before {
|
||||
content: "\eb62";
|
||||
}
|
||||
.tui-icon-jingbao:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
.tui-icon-anquan:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
.tui-icon-chaoqishuibiao:before {
|
||||
content: "\e679";
|
||||
}
|
||||
.tui-icon-shuibiao:before {
|
||||
content: "\e632";
|
||||
}
|
||||
.tui-icon-shuiliang:before {
|
||||
content: "\e645";
|
||||
}
|
||||
.tui-icon-weijihuo:before {
|
||||
content: "\e646";
|
||||
}
|
||||
.tui-icon-xhyichang:before {
|
||||
content: "\e647";
|
||||
}
|
||||
.tui-icon-weiqueren:before {
|
||||
content: "\e6f0";
|
||||
}
|
||||
.tui-icon-zanhuan:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
.tui-icon-yibohui:before {
|
||||
content: "\e676";
|
||||
}
|
||||
.tui-icon-shenhezhong:before {
|
||||
content: "\e648";
|
||||
}
|
||||
.tui-icon-daishenhe:before {
|
||||
content: "\e637";
|
||||
}
|
||||
.tui-icon-shenhebohui:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
.tui-icon-shenpitongguo:before {
|
||||
content: "\e649";
|
||||
}
|
||||
.tui-icon-shenhetongguo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<text :class="classObj.wrapper" @click.stop="handleClick">
|
||||
<text :class="[classObj.input, {'is-indeterminate': indeterminate, 'is-checked': checked, 'is-disabled': disabled}]">
|
||||
<text :class="classObj.inner"></text>
|
||||
</text>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
classObj: {}
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator(t) {
|
||||
return t === 'radio' || t === 'checkbox'
|
||||
}
|
||||
},
|
||||
checked: Boolean,
|
||||
disabled: Boolean,
|
||||
indeterminate: Boolean
|
||||
},
|
||||
|
||||
created() {
|
||||
this.classObj = {
|
||||
wrapper: `ly-${this.type}`,
|
||||
input: `ly-${this.type}__input`,
|
||||
inner: `ly-${this.type}__inner`
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('check', this.checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* lyRadio/lyCheckbox-start */
|
||||
.ly-checkbox,
|
||||
.ly-radio {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding-right: 16rpx
|
||||
}
|
||||
|
||||
.ly-checkbox__input,
|
||||
.ly-radio__input {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
line-height: 1;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled .ly-checkbox__inner,
|
||||
.ly-radio__input.is-disabled .ly-radio__inner {
|
||||
background-color: #edf2fc;
|
||||
border-color: #DCDFE6;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled .ly-checkbox__inner::after,
|
||||
.ly-radio__input.is-disabled .ly-radio__inner::after {
|
||||
cursor: not-allowed;
|
||||
border-color: #C0C4CC
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled .ly-checkbox__inner+.ly-checkbox__label,
|
||||
.ly-radio__input.is-disabled .ly-radio__inner+.ly-radio__label {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner,
|
||||
.ly-radio__input.is-disabled.is-checked .ly-radio__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: #DCDFE6
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner::after,
|
||||
.ly-radio__input.is-disabled.is-checked .ly-radio__inner::after {
|
||||
border-color: #C0C4CC
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: #DCDFE6
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner::before {
|
||||
background-color: #C0C4CC;
|
||||
border-color: #C0C4CC
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-checked .ly-checkbox__inner,
|
||||
.ly-radio__input.is-checked .ly-radio__inner,
|
||||
.ly-checkbox__input.is-indeterminate .ly-checkbox__inner {
|
||||
background-color: #409EFF;
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-disabled+text.ly-checkbox__label,
|
||||
.ly-radio__input.is-disabled+text.ly-radio__label {
|
||||
color: #C0C4CC;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-checked .ly-checkbox__inner::after,
|
||||
.ly-radio__input.is-checked .ly-radio__inner::after {
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1)
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-checked+.ly-checkbox__label,
|
||||
.ly-radio__input.is-checked+.ly-radio__label {
|
||||
color: #409EFF
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-focus .ly-checkbox__inner,
|
||||
.ly-radio__input.is-focus .ly-radio__inner {
|
||||
border-color: #409EFF
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-indeterminate .ly-checkbox__inner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #FFF;
|
||||
height: 6rpx;
|
||||
-webkit-transform: scale(.5);
|
||||
transform: scale(.5);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 10rpx
|
||||
}
|
||||
|
||||
.ly-checkbox__input.is-indeterminate .ly-checkbox__inner::after {
|
||||
display: none
|
||||
}
|
||||
|
||||
.ly-checkbox__inner,
|
||||
.ly-radio__inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 2rpx solid #DCDFE6;
|
||||
border-radius: 4rpx;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background-color: #FFF;
|
||||
z-index: 1;
|
||||
-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
|
||||
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
|
||||
}
|
||||
|
||||
.ly-radio__inner {
|
||||
border-radius: 50%;
|
||||
width: 34rpx !important;
|
||||
height: 34rpx !important;
|
||||
}
|
||||
|
||||
.ly-checkbox__inner::after,
|
||||
.ly-radio__inner::after {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 2rpx solid #FFF;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 14rpx;
|
||||
left: 10rpx;
|
||||
position: absolute;
|
||||
top: 2rpx;
|
||||
-webkit-transform: rotate(45deg) scaleY(0);
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 6rpx;
|
||||
-webkit-transition: -webkit-transform .15s ease-in .05s;
|
||||
transition: -webkit-transform .15s ease-in .05s;
|
||||
transition: transform .15s ease-in .05s;
|
||||
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.ly-radio__inner::after {
|
||||
left: 12rpx !important;
|
||||
top: 6rpx !important;
|
||||
}
|
||||
/* lyRadio/lyCheckbox-end */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,424 @@
|
|||
<template>
|
||||
<view ref="node"
|
||||
name="LyTreeNode"
|
||||
v-show="node.visible"
|
||||
class="ly-tree-node"
|
||||
:class="{
|
||||
'is-expanded': expanded,
|
||||
'is-hidden': !node.visible,
|
||||
'is-checked': !node.disabled && node.checked
|
||||
}"
|
||||
role="treeitem"
|
||||
@tap.stop="handleClick" >
|
||||
<view class="ly-tree-node__content"
|
||||
:class="{
|
||||
'is-current': node.isCurrent && highlightCurrent
|
||||
}"
|
||||
:style="{
|
||||
'padding-left': (node.level - 1) * indent + 'px'
|
||||
}">
|
||||
<text
|
||||
@tap.stop="handleExpandIconClick"
|
||||
:class="[
|
||||
{
|
||||
'is-leaf': node.isLeaf,
|
||||
expanded: !node.isLeaf && node.expanded
|
||||
},
|
||||
'ly-tree-node__expand-icon',
|
||||
iconClass ? iconClass : 'ly-iconfont ly-icon-caret-right'
|
||||
]">
|
||||
</text>
|
||||
|
||||
<ly-checkbox v-if="checkboxVisible || radioVisible"
|
||||
:type="checkboxVisible ? 'checkbox' : 'radio'"
|
||||
:checked="node.checked"
|
||||
:indeterminate="node.indeterminate"
|
||||
:disabled="!!node.disabled"
|
||||
@check="handleCheckChange(!node.checked)"/>
|
||||
|
||||
<text v-if="node.loading"
|
||||
class="ly-tree-node__loading-icon ly-iconfont ly-icon-loading">
|
||||
</text>
|
||||
|
||||
<template v-if="node.icon && node.icon.length > 0">
|
||||
<image
|
||||
v-if="node.icon.indexOf('/') !== -1"
|
||||
class="ly-tree-node__icon"
|
||||
mode="widthFix"
|
||||
:src="node.icon"
|
||||
@error="handleImageError"
|
||||
>
|
||||
</image>
|
||||
<text v-else
|
||||
class="ly-tree-node__icon"
|
||||
:class="node.icon">
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<text class="ly-tree-node__label">{{node.label}}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!renderAfterExpand || childNodeRendered"
|
||||
v-show="expanded"
|
||||
class="ly-tree-node__children"
|
||||
role="group">
|
||||
<ly-tree-node v-for="cNodeId in node.childNodesId"
|
||||
:nodeId="cNodeId"
|
||||
:render-after-expand="renderAfterExpand"
|
||||
:show-checkbox="showCheckbox"
|
||||
:show-radio="showRadio"
|
||||
:check-only-leaf="checkOnlyLeaf"
|
||||
:key="getNodeKey(cNodeId)"
|
||||
:indent="indent"
|
||||
:icon-class="iconClass">
|
||||
</ly-tree-node>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getNodeKey} from './tool/util.js';
|
||||
import lyCheckbox from './components/ly-checkbox.vue';
|
||||
|
||||
export default {
|
||||
name: 'LyTreeNode',
|
||||
|
||||
componentName: 'LyTreeNode',
|
||||
|
||||
components: {
|
||||
lyCheckbox
|
||||
},
|
||||
|
||||
props: {
|
||||
nodeId: [Number, String],
|
||||
renderAfterExpand: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkOnlyLeaf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showCheckbox: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showRadio: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
indent: Number,
|
||||
iconClass: String
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
node: {
|
||||
indeterminate: false,
|
||||
checked: false,
|
||||
expanded: false
|
||||
},
|
||||
expanded: false,
|
||||
childNodeRendered: false,
|
||||
oldChecked: null,
|
||||
oldIndeterminate: null,
|
||||
highlightCurrent: false
|
||||
};
|
||||
},
|
||||
|
||||
inject: ['tree'],
|
||||
|
||||
computed: {
|
||||
checkboxVisible() {
|
||||
if (this.checkOnlyLeaf) {
|
||||
return this.showCheckbox && this.node.isLeaf;
|
||||
}
|
||||
|
||||
return this.showCheckbox;
|
||||
},
|
||||
radioVisible() {
|
||||
if (this.checkOnlyLeaf) {
|
||||
return this.showRadio && this.node.isLeaf;
|
||||
}
|
||||
|
||||
return this.showRadio;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'node.indeterminate'(val) {
|
||||
this.handleSelectChange(this.node.checked, val);
|
||||
},
|
||||
'node.checked'(val) {
|
||||
this.handleSelectChange(val, this.node.indeterminate);
|
||||
},
|
||||
'node.expanded'(val) {
|
||||
this.$nextTick(() => this.expanded = val);
|
||||
if (val) {
|
||||
this.childNodeRendered = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getNodeKey(nodeId) {
|
||||
let node = this.tree.store.root.getChildNodes([nodeId])[0];
|
||||
return getNodeKey(this.tree.nodeKey, node.data);
|
||||
},
|
||||
|
||||
handleSelectChange(checked, indeterminate) {
|
||||
if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
|
||||
|
||||
if (this.checkOnlyLeaf && !this.node.isLeaf) return;
|
||||
|
||||
if (this.checkboxVisible) {
|
||||
const allNodes = this.tree.store._getAllNodes();
|
||||
this.tree.$emit('check-change', {
|
||||
checked,
|
||||
indeterminate,
|
||||
node: this.node,
|
||||
data: this.node.data,
|
||||
checkedall: allNodes.every(item => item.checked)
|
||||
});
|
||||
} else {
|
||||
this.tree.$emit('radio-change', {
|
||||
checked,
|
||||
node: this.node,
|
||||
data: this.node.data,
|
||||
checkedall: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.expanded && this.tree.expandOnCheckNode && checked) {
|
||||
this.handleExpandIconClick();
|
||||
}
|
||||
|
||||
this.oldChecked = checked;
|
||||
this.indeterminate = indeterminate;
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
this.tree.store.setCurrentNode(this.node);
|
||||
this.tree.$emit('current-change', {
|
||||
node: this.node,
|
||||
data: this.tree.store.currentNode ? this.tree.store.currentNode.data : null,
|
||||
currentNode: this.tree.store.currentNode
|
||||
});
|
||||
this.tree.currentNode = this.node;
|
||||
|
||||
if (this.tree.expandOnClickNode) {
|
||||
this.handleExpandIconClick();
|
||||
}
|
||||
|
||||
if (this.tree.checkOnClickNode && !this.node.disabled) {
|
||||
(this.checkboxVisible || this.radioVisible) && this.handleCheckChange(!this.node.checked);
|
||||
}
|
||||
|
||||
this.tree.$emit('node-click', this.node);
|
||||
},
|
||||
|
||||
handleExpandIconClick() {
|
||||
if (this.node.isLeaf) return;
|
||||
|
||||
if (this.expanded) {
|
||||
this.tree.$emit('node-collapse', this.node);
|
||||
this.node.collapse();
|
||||
} else {
|
||||
this.node.expand();
|
||||
this.tree.$emit('node-expand', this.node);
|
||||
|
||||
if (this.tree.accordion) {
|
||||
uni.$emit(`${this.tree.elId}-tree-node-expand`, this.node);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleCheckChange(checked) {
|
||||
if (this.node.disabled) return;
|
||||
|
||||
if (this.checkboxVisible) {
|
||||
this.node.setChecked(checked, !(this.tree.checkStrictly || this.checkOnlyLeaf));
|
||||
} else {
|
||||
this.node.setRadioChecked(checked);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.tree.$emit('check', {
|
||||
node: this.node,
|
||||
data: this.node.data,
|
||||
checkedNodes: this.tree.store.getCheckedNodes(),
|
||||
checkedKeys: this.tree.store.getCheckedKeys(),
|
||||
halfCheckedNodes: this.tree.store.getHalfCheckedNodes(),
|
||||
halfCheckedKeys: this.tree.store.getHalfCheckedKeys()
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handleImageError() {
|
||||
this.node.icon = this.tree.defaultNodeIcon;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (!this.tree) {
|
||||
throw new Error('Can not find node\'s tree.');
|
||||
}
|
||||
|
||||
this.node = this.tree.store.nodesMap[this.nodeId];
|
||||
this.highlightCurrent = this.tree.highlightCurrent;
|
||||
|
||||
if (this.node.expanded) {
|
||||
this.expanded = true;
|
||||
this.childNodeRendered = true;
|
||||
}
|
||||
|
||||
const props = this.tree.props || {};
|
||||
const childrenKey = props['children'] || 'children';
|
||||
this.$watch(`node.data.${childrenKey}`, () => {
|
||||
this.node.updateChildren();
|
||||
});
|
||||
|
||||
if (this.tree.accordion) {
|
||||
uni.$on(`${this.tree.elId}-tree-node-expand`, node => {
|
||||
if (this.node.id !== node.id && this.node.level === node.level) {
|
||||
this.node.collapse();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.$parent = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ly-tree-node {
|
||||
white-space: nowrap;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.ly-tree-node__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.ly-tree-node__content.is-current {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.ly-tree-node__content>.ly-tree-node__expand-icon {
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.ly-tree-node__checkbox {
|
||||
display: flex;
|
||||
margin-right: 16rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.ly-tree-node__checkbox>image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.ly-tree-node__expand-icon {
|
||||
color: #C0C4CC;
|
||||
font-size: 28rpx;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
-webkit-transition: -webkit-transform .3s ease-in-out;
|
||||
transition: -webkit-transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
|
||||
}
|
||||
|
||||
.ly-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg)
|
||||
}
|
||||
|
||||
.ly-tree-node__expand-icon.is-leaf {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.ly-tree-node__icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.ly-tree-node__label {
|
||||
font-size: 28rpx
|
||||
}
|
||||
|
||||
.ly-tree-node__loading-icon {
|
||||
margin-right: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #C0C4CC;
|
||||
-webkit-animation: rotating 2s linear infinite;
|
||||
animation: rotating 2s linear infinite
|
||||
}
|
||||
|
||||
.ly-tree-node>.ly-tree-node__children {
|
||||
overflow: hidden;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.ly-tree-node>.ly-tree-node__children.collapse-transition {
|
||||
transition: height .3s ease-in-out;
|
||||
}
|
||||
|
||||
.ly-tree-node.is-expanded>.ly-tree-node__children {
|
||||
display: block
|
||||
}
|
||||
|
||||
.ly-tree-node_collapse {
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
/* lyTree-end */
|
||||
|
||||
/* iconfont-start */
|
||||
@font-face {
|
||||
font-family: "ly-iconfont";
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPsAAsAAAAACKwAAAOeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqFDIQPATYCJAMMCwgABCAFhG0HQBtfB8gekiSCdAwUAKgCFMA5Hj7H0PeTlABUr57PVyGqugqzSWJnNwWoWJjx/9rUr4TPL1ZSQpU2mycqwoRwIN3p+MkqMqyEW+OtMBLPSUBb8v//XtWMKTavxYIUsT/Wy1qbQzkBDOYEKGB7dVpPyVqgCnJNwvMvhZl10nMCtQbFoPVhY8ZDncJfF4grbqpQ13AqE52hWqgcOFrEQ6hWnW5VfMCD7Pfjn4WoI6nI/K0bl0MNGPBz0qcflVqYnvCA4vNDPUXGPFCIw8HgtsqiOK9SrW2smm6sVITElWlpISMdVBn8wyMJopLfXg+myZ48KCrSkvj9g37U1ItbXYke4APwXxK3N4TuehyBfmM0I3zbNdt7uk3VnjPtzX0rnIl7z7bZvb/thHohsu9QuykKo+Cws4nL7LsPmI3n2qN9B9upZEIKd4hu0NCKi0rt7fNtdl+I1N25hOJMDQK6odS123tROR7Pg8toEhDaF+kR0TYjxW6M58F5+ZNQOxmZHtE2g+IYjxjlNy/yIRQpCmrgq5R4/3jx8PvT8Ha8d3/xiLnt4EGyaDnznzRv8vpyZ+9TFHf/ntX9e59A+b6+fPHd5+dy0wYHVvHOroWbnWe879O9DnL53bN/gUHuwm28b/n8i/V3ry4E3IoXNqS6Rvs0LhJxeNVjoUkM3LKosU+0a6rh45FVvLt+2oz7Zd53b4QOy7/9snDXHbqVu+A+f8r7PnM2H8kXrWm5c8/vLu7LqRee7HW637mz3kHc5U/RCXf25d7G8tkdgEfwIpzpkknGpaMw3ww55q9Mn9OQNyua/wB/49OOWydn4eL/6roCfjx6FMmcxfJStYRKfd3UwoHiML4rF4uMSK+SvYTuNxMHrpl8yd3Q6v32cAeo/KFaowBJlQHIqo3zi3geKtRZhErVlqDWnOGn67QRKkWpwaw1AkKza5A0egFZszf8In4HFTp9h0rNUQm1NqP1lXUmgyuDBVUlNYi2gHA98FnokUreOZaac1xV1JlMMZGKEs+QdCLVrgynPhUcO0pzzYyUjDAReGSYeBl13YCEIrCpLhOWlGE+mWRD35TQAw8UawRKJVEGQrMAwekCPpaMlpTOz49FmeZwqcREX1t3Ikoo4dMTaQmpBfzhRn9R30uZXTKXKUOSmLSKEQIeYhjqKZcrcIzhMLLRrJMSrA35UF4yGMaWGhPHm733dwJq+Z/NkSJHUXemCirjgpuWrHMD1eC+mQUAAAA=') format('woff2');
|
||||
}
|
||||
|
||||
.ly-iconfont {
|
||||
font-family: "ly-iconfont" !important;
|
||||
font-size: 30rpx;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.ly-icon-caret-right:before {
|
||||
content: "\e8ee";
|
||||
}
|
||||
|
||||
.ly-icon-loading:before {
|
||||
content: "\e657";
|
||||
}
|
||||
/* iconfont-end */
|
||||
|
||||
/* animate-start */
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(0);
|
||||
transform: rotateZ(0)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg)
|
||||
}
|
||||
}
|
||||
/* animate-end */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
<template>
|
||||
<view>
|
||||
<template v-if="showLoading">
|
||||
<view class="ly-loader ly-flex-center">
|
||||
<view class="ly-loader-inner">加载中...</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view v-if="isEmpty || !visible"
|
||||
class="ly-empty">
|
||||
{{emptyText}}
|
||||
</view>
|
||||
<view :key="updateKey"
|
||||
class="ly-tree"
|
||||
:class="{'is-empty': isEmpty || !visible}"
|
||||
role="tree"
|
||||
name="LyTreeExpand">
|
||||
<ly-tree-node v-for="nodeId in childNodesId"
|
||||
:nodeId="nodeId"
|
||||
:render-after-expand="renderAfterExpand"
|
||||
:show-checkbox="showCheckbox"
|
||||
:show-radio="showRadio"
|
||||
:check-only-leaf="checkOnlyLeaf"
|
||||
:key="getNodeKey(nodeId)"
|
||||
:indent="indent"
|
||||
:icon-class="iconClass">
|
||||
</ly-tree-node>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import TreeStore from './model/tree-store.js';
|
||||
import {getNodeKey} from './tool/util.js';
|
||||
import LyTreeNode from './ly-tree-node.vue';
|
||||
|
||||
export default {
|
||||
name: 'LyTree',
|
||||
|
||||
componentName: 'LyTree',
|
||||
|
||||
components: {
|
||||
LyTreeNode
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
updateKey: new Date().getTime(), // 数据更新的时候，重新渲染树
|
||||
elId: `ly_${Math.ceil(Math.random() * 10e5).toString(36)}`,
|
||||
visible: true,
|
||||
store: {
|
||||
ready: false
|
||||
},
|
||||
currentNode: null,
|
||||
childNodesId: []
|
||||
};
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
tree: this
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
// 展示数据
|
||||
treeData: Array,
|
||||
|
||||
// 自主控制loading加载，避免数据还没获取到的空档出现“暂无数据”字样
|
||||
ready: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// 内容为空的时候展示的文本
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
|
||||
// 是否在第一次展开某个树节点后才渲染其子节点
|
||||
renderAfterExpand: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
|
||||
nodeKey: String,
|
||||
|
||||
// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
|
||||
checkStrictly: Boolean,
|
||||
|
||||
// 是否默认展开所有节点
|
||||
defaultExpandAll: Boolean,
|
||||
|
||||
// 切换全部展开、全部折叠
|
||||
toggleExpendAll: Boolean,
|
||||
|
||||
// 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点
|
||||
expandOnClickNode: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// 选中的时候展开节点
|
||||
expandOnCheckNode: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点
|
||||
checkOnClickNode: Boolean,
|
||||
checkDescendants: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 展开子节点的时候是否自动展开父节点
|
||||
autoExpandParent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// 默认勾选的节点的 key 的数组
|
||||
defaultCheckedKeys: Array,
|
||||
|
||||
// 默认展开的节点的 key 的数组
|
||||
defaultExpandedKeys: Array,
|
||||
|
||||
// 是否展开当前节点的父节点
|
||||
expandCurrentNodeParent: Boolean,
|
||||
|
||||
// 当前选中的节点
|
||||
currentNodeKey: [String, Number],
|
||||
|
||||
// 是否最后一层叶子节点才显示单选/多选框
|
||||
checkOnlyLeaf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 节点是否可被选择
|
||||
showCheckbox: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 节点单选
|
||||
showRadio: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 配置选项
|
||||
props: {
|
||||
type: [Object, Function],
|
||||
default () {
|
||||
return {
|
||||
children: 'children', // 指定子树为节点对象的某个属性值
|
||||
label: 'label', // 指定节点标签为节点对象的某个属性值
|
||||
disabled: 'disabled' // 指定节点选择框是否禁用为节点对象的某个属性值
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
// 是否懒加载子节点，需与 load 方法结合使用
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否高亮当前选中节点，默认值是 false
|
||||
highlightCurrent: Boolean,
|
||||
|
||||
// 加载子树数据的方法，仅当 lazy 属性为true 时生效
|
||||
load: Function,
|
||||
|
||||
// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
|
||||
filterNodeMethod: Function,
|
||||
|
||||
// 搜索时是否展示匹配项的所有子节点
|
||||
childVisibleForFilterNode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否每次只打开一个同级树节点展开
|
||||
accordion: Boolean,
|
||||
|
||||
// 相邻级节点间的水平缩进，单位为像素
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 18
|
||||
},
|
||||
|
||||
// 自定义树节点的展开图标
|
||||
iconClass: String,
|
||||
|
||||
// 是否显示节点图标，如果配置为true,需要配置props中对应的图标属性名称
|
||||
showNodeIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 当节点图标显示出错时，显示的默认图标
|
||||
defaultNodeIcon: {
|
||||
type: String,
|
||||
default: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg'
|
||||
},
|
||||
|
||||
// 如果数据量较大，建议不要在node节点中添加parent属性，会造成性能损耗
|
||||
isInjectParentInNode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isEmpty() {
|
||||
if (this.store.root) {
|
||||
const childNodes = this.store.root.getChildNodes(this.childNodesId);
|
||||
|
||||
return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
showLoading() {
|
||||
return !(this.store.ready && this.ready);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
toggleExpendAll(newVal) {
|
||||
this.store.toggleExpendAll(newVal);
|
||||
},
|
||||
defaultCheckedKeys(newVal) {
|
||||
this.store.setDefaultCheckedKey(newVal);
|
||||
},
|
||||
defaultExpandedKeys(newVal) {
|
||||
this.store.defaultExpandedKeys = newVal;
|
||||
this.store.setDefaultExpandedKeys(newVal);
|
||||
},
|
||||
checkStrictly(newVal) {
|
||||
this.store.checkStrictly = newVal || this.checkOnlyLeaf;
|
||||
},
|
||||
'store.root.childNodesId'(newVal) {
|
||||
this.childNodesId = newVal;
|
||||
},
|
||||
'store.root.visible'(newVal) {
|
||||
this.visible = newVal;
|
||||
},
|
||||
childNodesId(){
|
||||
this.$nextTick(() => {
|
||||
this.$emit('ly-tree-render-completed');
|
||||
});
|
||||
},
|
||||
treeData: {
|
||||
handler(newVal) {
|
||||
this.updateKey = new Date().getTime();
|
||||
this.store.setData(newVal);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/*
|
||||
* @description 对树节点进行筛选操作
|
||||
* @method filter
|
||||
* @param {all} value 在 filter-node-method 中作为第一个参数
|
||||
* @param {Object} data 搜索指定节点的节点数据，不传代表搜索所有节点，假如要搜索A节点下面的数据，那么nodeData代表treeData中A节点的数据
|
||||
*/
|
||||
filter(value, data) {
|
||||
if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
|
||||
this.store.filter(value, data);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 获取节点的唯一标识符
|
||||
* @method getNodeKey
|
||||
* @param {String, Number} nodeId
|
||||
* @return {String, Number} 匹配到的数据中的某一项数据
|
||||
*/
|
||||
getNodeKey(nodeId) {
|
||||
let node = this.store.root.getChildNodes([nodeId])[0];
|
||||
return getNodeKey(this.nodeKey, node.data);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 获取节点路径
|
||||
* @method getNodePath
|
||||
* @param {Object} data 节点数据
|
||||
* @return {Array} 路径数组
|
||||
*/
|
||||
getNodePath(data) {
|
||||
return this.store.getNodePath(data);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
|
||||
* @method getCheckedNodes
|
||||
* @param {Boolean} leafOnly 是否只是叶子节点，默认false
|
||||
* @param {Boolean} includeHalfChecked 是否包含半选节点，默认false
|
||||
* @return {Array} 目前被选中的节点所组成的数组
|
||||
*/
|
||||
getCheckedNodes(leafOnly, includeHalfChecked) {
|
||||
return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
|
||||
* @method getCheckedKeys
|
||||
* @param {Boolean} leafOnly 是否只是叶子节点，默认false,若为 true 则仅返回被选中的叶子节点的 keys
|
||||
* @param {Boolean} includeHalfChecked 是否返回indeterminate为true的节点，默认false
|
||||
* @return {Array} 目前被选中的节点所组成的数组
|
||||
*/
|
||||
getCheckedKeys(leafOnly, includeHalfChecked) {
|
||||
return this.store.getCheckedKeys(leafOnly, includeHalfChecked);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 获取当前被选中节点的 data，若没有节点被选中则返回 null
|
||||
* @method getCurrentNode
|
||||
* @return {Object} 当前被选中节点的 data，若没有节点被选中则返回 null
|
||||
*/
|
||||
getCurrentNode() {
|
||||
const currentNode = this.store.getCurrentNode();
|
||||
return currentNode ? currentNode.data : null;
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 获取当前被选中节点的 key，若没有节点被选中则返回 null
|
||||
* @method getCurrentKey
|
||||
* @return {all} 当前被选中节点的 key， 若没有节点被选中则返回 null
|
||||
*/
|
||||
getCurrentKey() {
|
||||
const currentNode = this.getCurrentNode();
|
||||
return currentNode ? currentNode[this.nodeKey] : null;
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 设置全选/取消全选
|
||||
* @method setCheckAll
|
||||
* @param {Boolean} isCheckAll 选中状态,默认为true
|
||||
*/
|
||||
setCheckAll(isCheckAll = true) {
|
||||
if (this.showRadio) throw new Error('You set the "show-radio" property, so you cannot select all nodes');
|
||||
|
||||
if (!this.showCheckbox) console.warn('You have not set the property "show-checkbox". Please check your settings');
|
||||
|
||||
this.store.setCheckAll(isCheckAll);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 设置目前勾选的节点
|
||||
* @method setCheckedNodes
|
||||
* @param {Array} nodes 接收勾选节点数据的数组
|
||||
* @param {Boolean} leafOnly 是否只是叶子节点, 若为 true 则仅设置叶子节点的选中状态，默认值为 false
|
||||
*/
|
||||
setCheckedNodes(nodes, leafOnly) {
|
||||
this.store.setCheckedNodes(nodes, leafOnly);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 通过 keys 设置目前勾选的节点
|
||||
* @method setCheckedKeys
|
||||
* @param {Array} keys 勾选节点的 key 的数组
|
||||
* @param {Boolean} leafOnly 是否只是叶子节点, 若为 true 则仅设置叶子节点的选中状态，默认值为 false
|
||||
*/
|
||||
setCheckedKeys(keys, leafOnly) {
|
||||
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
|
||||
this.store.setCheckedKeys(keys, leafOnly);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 通过 key / data 设置某个节点的勾选状态
|
||||
* @method setChecked
|
||||
* @param {all} data 勾选节点的 key 或者 data
|
||||
* @param {Boolean} checked 节点是否选中
|
||||
* @param {Boolean} deep 是否设置子节点 ，默认为 false
|
||||
*/
|
||||
setChecked(data, checked, deep) {
|
||||
this.store.setChecked(data, checked, deep);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组
|
||||
* @method getHalfCheckedNodes
|
||||
* @return {Array} 目前半选中的节点所组成的数组
|
||||
*/
|
||||
getHalfCheckedNodes() {
|
||||
return this.store.getHalfCheckedNodes();
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
|
||||
* @method getHalfCheckedKeys
|
||||
* @return {Array} 目前半选中的节点的 key 所组成的数组
|
||||
*/
|
||||
getHalfCheckedKeys() {
|
||||
return this.store.getHalfCheckedKeys();
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 通过 node 设置某个节点的当前选中状态
|
||||
* @method setCurrentNode
|
||||
* @param {Object} node 待被选节点的 node
|
||||
*/
|
||||
setCurrentNode(node) {
|
||||
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
|
||||
this.store.setUserCurrentNode(node);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 通过 key 设置某个节点的当前选中状态
|
||||
* @method setCurrentKey
|
||||
* @param {all} key 待被选节点的 key，若为 null 则取消当前高亮的节点
|
||||
*/
|
||||
setCurrentKey(key) {
|
||||
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
|
||||
this.store.setCurrentNodeKey(key);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 根据 data 或者 key 拿到 Tree 组件中的 node
|
||||
* @method getNode
|
||||
* @param {all} data 要获得 node 的 key 或者 data
|
||||
*/
|
||||
getNode(data) {
|
||||
return this.store.getNode(data);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 删除 Tree 中的一个节点
|
||||
* @method remove
|
||||
* @param {all} data 要删除的节点的 data 或者 node
|
||||
*/
|
||||
remove(data) {
|
||||
this.store.remove(data);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 为 Tree 中的一个节点追加一个子节点
|
||||
* @method append
|
||||
* @param {Object} data 要追加的子节点的 data
|
||||
* @param {Object} parentNode 子节点的 parent 的 data、key 或者 node
|
||||
*/
|
||||
append(data, parentNode) {
|
||||
this.store.append(data, parentNode);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 为 Tree 的一个节点的前面增加一个节点
|
||||
* @method insertBefore
|
||||
* @param {Object} data 要增加的节点的 data
|
||||
* @param {all} refNode 要增加的节点的后一个节点的 data、key 或者 node
|
||||
*/
|
||||
insertBefore(data, refNode) {
|
||||
this.store.insertBefore(data, refNode);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 为 Tree 的一个节点的后面增加一个节点
|
||||
* @method insertAfter
|
||||
* @param {Object} data 要增加的节点的 data
|
||||
* @param {all} refNode 要增加的节点的前一个节点的 data、key 或者 node
|
||||
*/
|
||||
insertAfter(data, refNode) {
|
||||
this.store.insertAfter(data, refNode);
|
||||
},
|
||||
|
||||
/*
|
||||
* @description 通过 keys 设置节点子元素
|
||||
* @method updateKeyChildren
|
||||
* @param {String, Number} key 节点 key
|
||||
* @param {Object} data 节点数据的数组
|
||||
*/
|
||||
updateKeyChildren(key, data) {
|
||||
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
|
||||
this.store.updateChildren(key, data);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.isTree = true;
|
||||
|
||||
let props = this.props;
|
||||
if (typeof this.props === 'function') props = this.props();
|
||||
if (typeof props !== 'object') throw new Error('props must be of object type.');
|
||||
|
||||
this.store = new TreeStore({
|
||||
key: this.nodeKey,
|
||||
data: this.treeData,
|
||||
lazy: this.lazy,
|
||||
props: props,
|
||||
load: this.load,
|
||||
showCheckbox: this.showCheckbox,
|
||||
showRadio: this.showRadio,
|
||||
currentNodeKey: this.currentNodeKey,
|
||||
checkStrictly: this.checkStrictly || this.checkOnlyLeaf,
|
||||
checkDescendants: this.checkDescendants,
|
||||
expandOnCheckNode: this.expandOnCheckNode,
|
||||
defaultCheckedKeys: this.defaultCheckedKeys,
|
||||
defaultExpandedKeys: this.defaultExpandedKeys,
|
||||
expandCurrentNodeParent: this.expandCurrentNodeParent,
|
||||
autoExpandParent: this.autoExpandParent,
|
||||
defaultExpandAll: this.defaultExpandAll,
|
||||
filterNodeMethod: this.filterNodeMethod,
|
||||
childVisibleForFilterNode: this.childVisibleForFilterNode,
|
||||
showNodeIcon: this.showNodeIcon,
|
||||
isInjectParentInNode: this.isInjectParentInNode
|
||||
});
|
||||
|
||||
this.childNodesId = this.store.root.childNodesId;
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.accordion) {
|
||||
uni.$off(`${this.elId}-tree-node-expand`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ly-tree {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
background: #FFF;
|
||||
color: #606266;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.ly-tree.is-empty {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* lyEmpty-start */
|
||||
.ly-empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
/* lyEmpty-end */
|
||||
|
||||
/* lyLoader-start */
|
||||
.ly-loader {
|
||||
margin-top: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ly-loader-inner,
|
||||
.ly-loader-inner:before,
|
||||
.ly-loader-inner:after {
|
||||
background: #efefef;
|
||||
animation: load 1s infinite ease-in-out;
|
||||
width: .5em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.ly-loader-inner:before,
|
||||
.ly-loader-inner:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.ly-loader-inner:before {
|
||||
left: -1em;
|
||||
}
|
||||
|
||||
.ly-loader-inner {
|
||||
text-indent: -9999em;
|
||||
position: relative;
|
||||
font-size: 22rpx;
|
||||
animation-delay: 0.16s;
|
||||
}
|
||||
|
||||
.ly-loader-inner:after {
|
||||
left: 1em;
|
||||
animation-delay: 0.32s;
|
||||
}
|
||||
/* lyLoader-end */
|
||||
|
||||
@keyframes load {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 0 #efefef;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 -1.5em #efefef;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,538 @@
|
|||
import {
|
||||
markNodeData,
|
||||
objectAssign,
|
||||
arrayFindIndex,
|
||||
getChildState,
|
||||
reInitChecked,
|
||||
getPropertyFromData,
|
||||
isNull,
|
||||
NODE_KEY
|
||||
} from '../tool/util';
|
||||
|
||||
const getStore = function(store) {
|
||||
let thisStore = store;
|
||||
|
||||
return function() {
|
||||
return thisStore;
|
||||
}
|
||||
}
|
||||
|
||||
let nodeIdSeed = 0;
|
||||
|
||||
export default class Node {
|
||||
constructor(options) {
|
||||
this.time = new Date().getTime();
|
||||
this.id = nodeIdSeed++;
|
||||
this.text = null;
|
||||
this.checked = false;
|
||||
this.indeterminate = false;
|
||||
this.data = null;
|
||||
this.expanded = false;
|
||||
this.parentId = null;
|
||||
this.visible = true;
|
||||
this.isCurrent = false;
|
||||
|
||||
for (let name in options) {
|
||||
if (options.hasOwnProperty(name)) {
|
||||
if (name === 'store') {
|
||||
this.store = getStore(options[name]);
|
||||
} else {
|
||||
this[name] = options[name];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.store()) {
|
||||
throw new Error('[Node]store is required!');
|
||||
}
|
||||
|
||||
// internal
|
||||
this.level = 0;
|
||||
this.loaded = false;
|
||||
this.childNodesId = [];
|
||||
this.loading = false;
|
||||
this.label = getPropertyFromData(this, 'label');
|
||||
this.key = this._getKey();
|
||||
this.disabled = getPropertyFromData(this, 'disabled');
|
||||
this.nextSibling = null;
|
||||
this.previousSibling = null;
|
||||
this.icon = '';
|
||||
|
||||
this._handleParentAndLevel();
|
||||
this._handleProps();
|
||||
this._handleExpand();
|
||||
this._handleCurrent();
|
||||
|
||||
if (this.store().lazy) {
|
||||
this.store()._initDefaultCheckedNode(this);
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
|
||||
_getKey() {
|
||||
if (!this.data || Array.isArray(this.data)) return null;
|
||||
|
||||
if (typeof this.data === 'object') {
|
||||
const nodeKey = this.store().key;
|
||||
const key = this.data[nodeKey];
|
||||
|
||||
if (typeof key === 'undefined') {
|
||||
throw new Error(`您配置的node-key为"${nodeKey}"，但数据中并未找到对应"${nodeKey}"属性的值，请检查node-key的配置是否合理`)
|
||||
}
|
||||
|
||||
return key;
|
||||
}
|
||||
|
||||
throw new Error('不合法的data数据');
|
||||
}
|
||||
|
||||
_handleParentAndLevel() {
|
||||
if (this.parentId !== null) {
|
||||
let parent = this.getParent(this.parentId);
|
||||
|
||||
if (this.store().isInjectParentInNode) {
|
||||
this.parent = parent;
|
||||
}
|
||||
|
||||
// 由于这里做了修改，默认第一个对象不会被注册到nodesMap中，所以找不到parent会报错，所以默认parent的level是0
|
||||
if (!parent) {
|
||||
parent = {
|
||||
level: 0
|
||||
}
|
||||
} else {
|
||||
const parentChildNodes = parent.getChildNodes(parent.childNodesId);
|
||||
const index = parent.childNodesId.indexOf(this.key);
|
||||
this.nextSibling = index > -1 ? parentChildNodes[index + 1] : null;
|
||||
this.previousSibling = index > 0 ? parentChildNodes[index - 1] : null;
|
||||
}
|
||||
this.level = parent.level + 1;
|
||||
}
|
||||
}
|
||||
|
||||
_handleProps() {
|
||||
const props = this.store().props;
|
||||
|
||||
if (this.store().showNodeIcon) {
|
||||
if (props && typeof props.icon !== 'undefined') {
|
||||
this.icon = getPropertyFromData(this, 'icon');
|
||||
} else {
|
||||
console.warn('请配置props属性中的"icon"字段')
|
||||
}
|
||||
}
|
||||
|
||||
this.store().registerNode(this);
|
||||
|
||||
if (props && typeof props.isLeaf !== 'undefined') {
|
||||
const isLeaf = getPropertyFromData(this, 'isLeaf');
|
||||
if (typeof isLeaf === 'boolean') {
|
||||
this.isLeafByUser = isLeaf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_handleExpand() {
|
||||
if (this.store().lazy !== true && this.data) {
|
||||
this.setData(this.data);
|
||||
|
||||
if (this.store().defaultExpandAll) {
|
||||
this.expanded = true;
|
||||
}
|
||||
} else if (this.level > 0 && this.store().lazy && this.store().defaultExpandAll) {
|
||||
this.expand();
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.data)) {
|
||||
markNodeData(this, this.data);
|
||||
}
|
||||
|
||||
if (!this.data) return;
|
||||
|
||||
const defaultExpandedKeys = this.store().defaultExpandedKeys;
|
||||
const key = this.store().key;
|
||||
if (key && defaultExpandedKeys && defaultExpandedKeys.indexOf(this.key) !== -1) {
|
||||
this.expand(null, this.store().autoExpandparent);
|
||||
}
|
||||
}
|
||||
|
||||
_handleCurrent() {
|
||||
const key = this.store().key;
|
||||
|
||||
if (key && this.store().currentNodeKey !== undefined && this.key === this.store().currentNodeKey) {
|
||||
this.store().currentNode = this;
|
||||
this.store().currentNode.isCurrent = true;
|
||||
}
|
||||
}
|
||||
|
||||
destroyStore() {
|
||||
getStore(null)
|
||||
}
|
||||
|
||||
setData(data) {
|
||||
if (!Array.isArray(data)) {
|
||||
markNodeData(this, data);
|
||||
}
|
||||
|
||||
this.data = data;
|
||||
this.childNodesId = [];
|
||||
|
||||
let children;
|
||||
if (this.level === 0 && Array.isArray(this.data)) {
|
||||
children = this.data;
|
||||
} else {
|
||||
children = getPropertyFromData(this, 'children') || [];
|
||||
}
|
||||
|
||||
for (let i = 0, j = children.length; i < j; i++) {
|
||||
this.insertChild({
|
||||
data: children[i]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
contains(target, deep = true) {
|
||||
const walk = function(parent) {
|
||||
const children = parent.getChildNodes(parent.childNodesId) || [];
|
||||
let result = false;
|
||||
for (let i = 0, j = children.length; i < j; i++) {
|
||||
const child = children[i];
|
||||
if (child === target || (deep && walk(child))) {
|
||||
result = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
return walk(this);
|
||||
}
|
||||
|
||||
remove() {
|
||||
if (this.parentId !== null) {
|
||||
const parent = this.getParent(this.parentId);
|
||||
parent.removeChild(this);
|
||||
}
|
||||
}
|
||||
|
||||
insertChild(child, index, batch) {
|
||||
if (!child) throw new Error('insertChild error: child is required.');
|
||||
|
||||
if (!(child instanceof Node)) {
|
||||
if (!batch) {
|
||||
const children = this.getChildren(true);
|
||||
if (children.indexOf(child.data) === -1) {
|
||||
if (typeof index === 'undefined' || index < 0) {
|
||||
children.push(child.data);
|
||||
} else {
|
||||
children.splice(index, 0, child.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
objectAssign(child, {
|
||||
parentId: isNull(this.key) ? '' : this.key,
|
||||
store: this.store()
|
||||
});
|
||||
child = new Node(child);
|
||||
}
|
||||
|
||||
child.level = this.level + 1;
|
||||
|
||||
if (typeof index === 'undefined' || index < 0) {
|
||||
this.childNodesId.push(child.key);
|
||||
} else {
|
||||
this.childNodesId.splice(index, 0, child.key);
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
|
||||
insertBefore(child, ref) {
|
||||
let index;
|
||||
if (ref) {
|
||||
index = this.childNodesId.indexOf(ref.id);
|
||||
}
|
||||
this.insertChild(child, index);
|
||||
}
|
||||
|
||||
insertAfter(child, ref) {
|
||||
let index;
|
||||
if (ref) {
|
||||
index = this.childNodesId.indexOf(ref.id);
|
||||
if (index !== -1) index += 1;
|
||||
}
|
||||
this.insertChild(child, index);
|
||||
}
|
||||
|
||||
removeChild(child) {
|
||||
const children = this.getChildren() || [];
|
||||
const dataIndex = children.indexOf(child.data);
|
||||
if (dataIndex > -1) {
|
||||
children.splice(dataIndex, 1);
|
||||
}
|
||||
|
||||
const index = this.childNodesId.indexOf(child.key);
|
||||
|
||||
if (index > -1) {
|
||||
this.store() && this.store().deregisterNode(child);
|
||||
child.parentId = null;
|
||||
this.childNodesId.splice(index, 1);
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
|
||||
removeChildByData(data) {
|
||||
let targetNode = null;
|
||||
|
||||
for (let i = 0; i < this.childNodesId.length; i++) {
|
||||
let node = this.getChildNodes(this.childNodesId);
|
||||
if (node[i].data === data) {
|
||||
targetNode = node[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (targetNode) {
|
||||
this.removeChild(targetNode);
|
||||
}
|
||||
}
|
||||
|
||||
// 为了避免APP端parent嵌套结构导致报错，这里parent需要从nodesMap中获取
|
||||
getParent(parentId) {
|
||||
try {
|
||||
if (!parentId.toString()) return null;
|
||||
return this.store().nodesMap[parentId];
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 为了避免APP端childNodes嵌套结构导致报错，这里childNodes需要从nodesMap中获取
|
||||
getChildNodes(childNodesId) {
|
||||
let childNodes = [];
|
||||
if (childNodesId.length === 0) return childNodes;
|
||||
childNodesId.forEach((key) => {
|
||||
childNodes.push(this.store().nodesMap[key]);
|
||||
})
|
||||
return childNodes;
|
||||
}
|
||||
|
||||
expand(callback, expandparent) {
|
||||
const done = () => {
|
||||
if (expandparent) {
|
||||
let parent = this.getParent(this.parentId);
|
||||
while (parent && parent.level > 0) {
|
||||
parent.expanded = true;
|
||||
parent = this.getParent(parent.parentId);
|
||||
}
|
||||
}
|
||||
this.expanded = true;
|
||||
if (callback) callback();
|
||||
};
|
||||
|
||||
if (this.shouldLoadData()) {
|
||||
this.loadData(function(data) {
|
||||
if (Array.isArray(data)) {
|
||||
if (this.checked) {
|
||||
this.setChecked(true, true);
|
||||
} else if (!this.store().checkStrictly) {
|
||||
reInitChecked(this);
|
||||
}
|
||||
done();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
doCreateChildren(array, defaultProps = {}) {
|
||||
array.forEach((item) => {
|
||||
this.insertChild(objectAssign({
|
||||
data: item
|
||||
}, defaultProps), undefined, true);
|
||||
});
|
||||
}
|
||||
|
||||
collapse() {
|
||||
this.expanded = false;
|
||||
}
|
||||
|
||||
shouldLoadData() {
|
||||
return this.store().lazy === true && this.store().load && !this.loaded;
|
||||
}
|
||||
|
||||
updateLeafState() {
|
||||
if (this.store().lazy === true && this.loaded !== true && typeof this.isLeafByUser !== 'undefined') {
|
||||
this.isLeaf = this.isLeafByUser;
|
||||
return;
|
||||
}
|
||||
const childNodesId = this.childNodesId;
|
||||
if (!this.store().lazy || (this.store().lazy === true && this.loaded === true)) {
|
||||
this.isLeaf = !childNodesId || childNodesId.length === 0;
|
||||
return;
|
||||
}
|
||||
this.isLeaf = false;
|
||||
}
|
||||
|
||||
setChecked(value, deep, recursion, passValue) {
|
||||
this.indeterminate = value === 'half';
|
||||
this.checked = value === true;
|
||||
|
||||
if (this.checked && this.store().expandOnCheckNode) {
|
||||
this.expand(null, true)
|
||||
}
|
||||
|
||||
if (this.store().checkStrictly) return;
|
||||
if (this.store().showRadio) return;
|
||||
|
||||
if (!(this.shouldLoadData() && !this.store().checkDescendants)) {
|
||||
let childNodes = this.getChildNodes(this.childNodesId);
|
||||
let {
|
||||
all,
|
||||
allWithoutDisable
|
||||
} = getChildState(childNodes);
|
||||
|
||||
if (!this.isLeaf && (!all && allWithoutDisable)) {
|
||||
this.checked = false;
|
||||
value = false;
|
||||
}
|
||||
|
||||
const handleDescendants = () => {
|
||||
if (deep) {
|
||||
let childNodes = this.getChildNodes(this.childNodesId)
|
||||
for (let i = 0, j = childNodes.length; i < j; i++) {
|
||||
const child = childNodes[i];
|
||||
passValue = passValue || value !== false;
|
||||
const isCheck = child.disabled ? child.checked : passValue;
|
||||
child.setChecked(isCheck, deep, true, passValue);
|
||||
}
|
||||
const {
|
||||
half,
|
||||
all
|
||||
} = getChildState(childNodes);
|
||||
|
||||
if (!all) {
|
||||
this.checked = all;
|
||||
this.indeterminate = half;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (this.shouldLoadData()) {
|
||||
this.loadData(() => {
|
||||
handleDescendants();
|
||||
reInitChecked(this);
|
||||
}, {
|
||||
checked: value !== false
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
handleDescendants();
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.parentId) return;
|
||||
|
||||
let parent = this.getParent(this.parentId);
|
||||
if (parent && parent.level === 0) return;
|
||||
|
||||
if (!recursion) {
|
||||
reInitChecked(parent);
|
||||
}
|
||||
}
|
||||
|
||||
setRadioChecked(value) {
|
||||
const allNodes = this.store()._getAllNodes().sort((a, b) => b.level - a.level);
|
||||
allNodes.forEach(node => node.setChecked(false, false));
|
||||
this.checked = value === true;
|
||||
}
|
||||
|
||||
getChildren(forceInit = false) {
|
||||
if (this.level === 0) return this.data;
|
||||
const data = this.data;
|
||||
if (!data) return null;
|
||||
|
||||
const props = this.store().props;
|
||||
let children = 'children';
|
||||
if (props) {
|
||||
children = props.children || 'children';
|
||||
}
|
||||
|
||||
if (data[children] === undefined) {
|
||||
data[children] = null;
|
||||
}
|
||||
|
||||
if (forceInit && !data[children]) {
|
||||
data[children] = [];
|
||||
}
|
||||
|
||||
return data[children];
|
||||
}
|
||||
|
||||
updateChildren() {
|
||||
let childNodes = this.getChildNodes(this.childNodesId);
|
||||
const newData = this.getChildren() || [];
|
||||
const oldData = childNodes.map((node) => node.data);
|
||||
|
||||
const newDataMap = {};
|
||||
const newNodes = [];
|
||||
|
||||
newData.forEach((item, index) => {
|
||||
const key = item[NODE_KEY];
|
||||
const isNodeExists = !!key && arrayFindIndex(oldData, data => data[NODE_KEY] === key) >= 0;
|
||||
if (isNodeExists) {
|
||||
newDataMap[key] = {
|
||||
index,
|
||||
data: item
|
||||
};
|
||||
} else {
|
||||
newNodes.push({
|
||||
index,
|
||||
data: item
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.store().lazy) {
|
||||
oldData.forEach((item) => {
|
||||
if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item);
|
||||
});
|
||||
}
|
||||
|
||||
newNodes.forEach(({
|
||||
index,
|
||||
data
|
||||
}) => {
|
||||
this.insertChild({
|
||||
data
|
||||
}, index);
|
||||
});
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
|
||||
loadData(callback, defaultProps = {}) {
|
||||
if (this.store().lazy === true &&
|
||||
this.store().load && !this.loaded &&
|
||||
(!this.loading || Object.keys(defaultProps).length)
|
||||
) {
|
||||
this.loading = true;
|
||||
|
||||
const resolve = (children) => {
|
||||
this.loaded = true;
|
||||
this.loading = false;
|
||||
this.childNodesId = [];
|
||||
this.doCreateChildren(children, defaultProps);
|
||||
this.updateLeafState();
|
||||
|
||||
callback && callback.call(this,children);
|
||||
};
|
||||
|
||||
this.store().load(this, resolve);
|
||||
} else {
|
||||
callback && callback.call(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
import Node from './node';
|
||||
import {
|
||||
getNodeKey,
|
||||
getPropertyFromData
|
||||
} from '../tool/util';
|
||||
|
||||
export default class TreeStore {
|
||||
constructor(options) {
|
||||
this.ready = false;
|
||||
this.currentNode = null;
|
||||
this.currentNodeKey = null;
|
||||
|
||||
Object.assign(this, options);
|
||||
|
||||
if (!this.key) {
|
||||
throw new Error('[Tree] nodeKey is required');
|
||||
}
|
||||
|
||||
this.nodesMap = {};
|
||||
this.root = new Node({
|
||||
data: this.data,
|
||||
store: this
|
||||
});
|
||||
|
||||
if (this.lazy && this.load) {
|
||||
const loadFn = this.load;
|
||||
loadFn(this.root, (data) => {
|
||||
this.root.doCreateChildren(data);
|
||||
this._initDefaultCheckedNodes();
|
||||
this.ready = true;
|
||||
});
|
||||
} else {
|
||||
this._initDefaultCheckedNodes();
|
||||
this.ready = true;
|
||||
}
|
||||
}
|
||||
|
||||
filter(value, data) {
|
||||
const filterNodeMethod = this.filterNodeMethod;
|
||||
const lazy = this.lazy;
|
||||
const _self = this;
|
||||
const traverse = function(node) {
|
||||
const childNodes = node.root ? node.root.getChildNodes(node.root.childNodesId) : node.getChildNodes(node.childNodesId);
|
||||
|
||||
childNodes.forEach((child) => {
|
||||
if (data && typeof data === 'object') {
|
||||
let nodePath = _self.getNodePath(child.data);
|
||||
if (!nodePath.some(pathItem => pathItem[_self.key] === data[_self.key])) {
|
||||
child.visible = false;
|
||||
traverse(child);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (_self.childVisibleForFilterNode) {
|
||||
let parent = child.getParent(child.parentId);
|
||||
child.visible = filterNodeMethod.call(child, value, child.data, child) || (parent && parent.visible);
|
||||
} else {
|
||||
child.visible = filterNodeMethod.call(child, value, child.data, child);
|
||||
}
|
||||
|
||||
traverse(child);
|
||||
});
|
||||
|
||||
if (!node.visible && childNodes.length) {
|
||||
let allHidden = true;
|
||||
allHidden = !childNodes.some(child => child.visible);
|
||||
|
||||
if (node.root) {
|
||||
node.root.visible = allHidden === false;
|
||||
} else {
|
||||
node.visible = allHidden === false;
|
||||
}
|
||||
}
|
||||
|
||||
if (!value) return;
|
||||
|
||||
if (node.visible && !node.isLeaf && !lazy) node.expand();
|
||||
};
|
||||
|
||||
traverse(this);
|
||||
}
|
||||
|
||||
setData(newVal) {
|
||||
const instanceChanged = newVal !== this.root.data;
|
||||
if (instanceChanged) {
|
||||
this.root.setData(newVal);
|
||||
this._initDefaultCheckedNodes();
|
||||
} else {
|
||||
this.root.updateChildren();
|
||||
}
|
||||
}
|
||||
|
||||
getNode(data) {
|
||||
if (data instanceof Node) return data;
|
||||
const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
|
||||
if (!key) return null;
|
||||
return this.nodesMap[key] || null;
|
||||
}
|
||||
|
||||
insertBefore(data, refData) {
|
||||
const refNode = this.getNode(refData);
|
||||
let parent = refNode.getParent(refNode.parentId);
|
||||
parent.insertBefore({
|
||||
data
|
||||
}, refNode);
|
||||
}
|
||||
|
||||
insertAfter(data, refData) {
|
||||
const refNode = this.getNode(refData);
|
||||
let parent = refNode.getParent(refNode.parentId);
|
||||
parent.insertAfter({
|
||||
data
|
||||
}, refNode);
|
||||
}
|
||||
|
||||
remove(data) {
|
||||
const node = this.getNode(data);
|
||||
|
||||
if (node && node.parentId !== null) {
|
||||
let parent = node.getParent(node.parentId);
|
||||
if (node === this.currentNode) {
|
||||
this.currentNode = null;
|
||||
}
|
||||
parent.removeChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
append(data, parentData) {
|
||||
const parentNode = parentData ? this.getNode(parentData) : this.root;
|
||||
|
||||
if (parentNode) {
|
||||
parentNode.insertChild({
|
||||
data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_initDefaultCheckedNodes() {
|
||||
const defaultCheckedKeys = this.defaultCheckedKeys || [];
|
||||
const nodesMap = this.nodesMap;
|
||||
let checkedKeyfromData = [];
|
||||
let totalCheckedKeys = []
|
||||
|
||||
for (let key in nodesMap) {
|
||||
let checked = getPropertyFromData(nodesMap[key], 'checked') || false;
|
||||
checked && checkedKeyfromData.push(key);
|
||||
}
|
||||
|
||||
totalCheckedKeys = Array.from(new Set([...defaultCheckedKeys, ...checkedKeyfromData]));
|
||||
totalCheckedKeys.forEach((checkedKey) => {
|
||||
const node = nodesMap[checkedKey];
|
||||
|
||||
if (node) {
|
||||
node.setChecked(true, !this.checkStrictly);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_initDefaultCheckedNode(node) {
|
||||
const defaultCheckedKeys = this.defaultCheckedKeys || [];
|
||||
|
||||
if (defaultCheckedKeys.indexOf(node.key) !== -1) {
|
||||
node.setChecked(true, !this.checkStrictly);
|
||||
}
|
||||
}
|
||||
|
||||
toggleExpendAll(isExpandAll) {
|
||||
const allNodes = this._getAllNodes();
|
||||
|
||||
allNodes.forEach(item => {
|
||||
const node = this.getNode(item.key);
|
||||
|
||||
if (node) isExpandAll ? node.expand() : node.collapse();
|
||||
});
|
||||
}
|
||||
|
||||
setCheckAll(isCkeckAll) {
|
||||
const allNodes = this._getAllNodes();
|
||||
|
||||
allNodes.forEach(item => {
|
||||
item.setChecked(isCkeckAll, false);
|
||||
});
|
||||
}
|
||||
|
||||
setDefaultCheckedKey(newVal) {
|
||||
if (newVal !== this.defaultCheckedKeys) {
|
||||
this.defaultCheckedKeys = newVal;
|
||||
this._initDefaultCheckedNodes();
|
||||
}
|
||||
}
|
||||
|
||||
registerNode(node) {
|
||||
|
||||
const key = this.key;
|
||||
if (!key || !node || !node.data) return;
|
||||
|
||||
const nodeKey = node.key;
|
||||
if (nodeKey !== undefined) this.nodesMap[node.key] = node;
|
||||
}
|
||||
|
||||
deregisterNode(node) {
|
||||
const key = this.key;
|
||||
if (!key || !node || !node.data) return;
|
||||
|
||||
let childNodes = node.getChildNodes(node.childNodesId);
|
||||
childNodes.forEach(child => {
|
||||
this.deregisterNode(child);
|
||||
});
|
||||
|
||||
delete this.nodesMap[node.key];
|
||||
}
|
||||
|
||||
getNodePath(data) {
|
||||
if (!this.key) throw new Error('[Tree] nodeKey is required in getNodePath');
|
||||
const node = this.getNode(data);
|
||||
if (!node) return [];
|
||||
|
||||
const path = [node.data];
|
||||
let parent = node.getParent(node.parentId);
|
||||
while (parent && parent !== this.root) {
|
||||
path.push(parent.data);
|
||||
parent = parent.getParent(parent.parentId);
|
||||
}
|
||||
return path.reverse();
|
||||
}
|
||||
|
||||
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
|
||||
const checkedNodes = [];
|
||||
const traverse = function(node) {
|
||||
const childNodes = node.root ? node.root.getChildNodes(node.root.childNodesId) : node.getChildNodes(node.childNodesId);
|
||||
|
||||
childNodes.forEach((child) => {
|
||||
if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
|
||||
checkedNodes.push(child.data);
|
||||
}
|
||||
|
||||
traverse(child);
|
||||
});
|
||||
};
|
||||
|
||||
traverse(this);
|
||||
|
||||
return checkedNodes;
|
||||
}
|
||||
|
||||
getCheckedKeys(leafOnly = false, includeHalfChecked = false) {
|
||||
return this.getCheckedNodes(leafOnly, includeHalfChecked).map((data) => (data || {})[this.key]);
|
||||
}
|
||||
|
||||
getHalfCheckedNodes() {
|
||||
const nodes = [];
|
||||
const traverse = function(node) {
|
||||
const childNodes = node.root ? node.root.getChildNodes(node.root.childNodesId) : node.getChildNodes(node.childNodesId);
|
||||
|
||||
childNodes.forEach((child) => {
|
||||
if (child.indeterminate) {
|
||||
nodes.push(child.data);
|
||||
}
|
||||
|
||||
traverse(child);
|
||||
});
|
||||
};
|
||||
|
||||
traverse(this);
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
getHalfCheckedKeys() {
|
||||
return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
|
||||
}
|
||||
|
||||
_getAllNodes() {
|
||||
const allNodes = [];
|
||||
const nodesMap = this.nodesMap;
|
||||
for (let nodeKey in nodesMap) {
|
||||
if (nodesMap.hasOwnProperty(nodeKey)) {
|
||||
allNodes.push(nodesMap[nodeKey]);
|
||||
}
|
||||
}
|
||||
|
||||
return allNodes;
|
||||
}
|
||||
|
||||
updateChildren(key, data) {
|
||||
const node = this.nodesMap[key];
|
||||
if (!node) return;
|
||||
const childNodes = node.getChildNodes(node.childNodesId);
|
||||
for (let i = childNodes.length - 1; i >= 0; i--) {
|
||||
const child = childNodes[i];
|
||||
this.remove(child.data);
|
||||
}
|
||||
for (let i = 0, j = data.length; i < j; i++) {
|
||||
const child = data[i];
|
||||
this.append(child, node.data);
|
||||
}
|
||||
}
|
||||
|
||||
_setCheckedKeys(key, leafOnly = false, checkedKeys) {
|
||||
const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
|
||||
const cache = Object.create(null);
|
||||
const keys = Object.keys(checkedKeys);
|
||||
allNodes.forEach(node => node.setChecked(false, false));
|
||||
for (let i = 0, j = allNodes.length; i < j; i++) {
|
||||
const node = allNodes[i];
|
||||
let nodeKey = node.data[key];
|
||||
|
||||
if (typeof nodeKey === 'undefined') continue;
|
||||
|
||||
nodeKey = nodeKey.toString();
|
||||
let checked = keys.indexOf(nodeKey) > -1;
|
||||
if (!checked) {
|
||||
if (node.checked && !cache[nodeKey]) {
|
||||
node.setChecked(false, false);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
let parent = node.getParent(node.parentId);
|
||||
while (parent && parent.level > 0) {
|
||||
cache[parent.data[key]] = true;
|
||||
parent = parent.getParent(parent.parentId);
|
||||
}
|
||||
|
||||
if (node.isLeaf || this.checkStrictly) {
|
||||
node.setChecked(true, false);
|
||||
continue;
|
||||
}
|
||||
node.setChecked(true, true);
|
||||
|
||||
if (leafOnly) {
|
||||
node.setChecked(false, false);
|
||||
const traverse = function(node) {
|
||||
const childNodes = node.getChildNodes(node.childNodesId);
|
||||
childNodes.forEach((child) => {
|
||||
if (!child.isLeaf) {
|
||||
child.setChecked(false, false);
|
||||
}
|
||||
traverse(child);
|
||||
});
|
||||
};
|
||||
traverse(node);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCheckedNodes(array, leafOnly = false) {
|
||||
const key = this.key;
|
||||
const checkedKeys = {};
|
||||
array.forEach((item) => {
|
||||
checkedKeys[(item || {})[key]] = true;
|
||||
});
|
||||
|
||||
this._setCheckedKeys(key, leafOnly, checkedKeys);
|
||||
}
|
||||
|
||||
setCheckedKeys(keys, leafOnly = false) {
|
||||
this.defaultCheckedKeys = keys;
|
||||
const key = this.key;
|
||||
const checkedKeys = {};
|
||||
keys.forEach((key) => {
|
||||
checkedKeys[key] = true;
|
||||
});
|
||||
|
||||
this._setCheckedKeys(key, leafOnly, checkedKeys);
|
||||
}
|
||||
|
||||
setDefaultExpandedKeys(keys) {
|
||||
keys = keys || [];
|
||||
this.defaultExpandedKeys = keys;
|
||||
|
||||
keys.forEach((key) => {
|
||||
const node = this.getNode(key);
|
||||
if (node) node.expand(null, this.autoExpandParent);
|
||||
});
|
||||
}
|
||||
|
||||
setChecked(data, checked, deep) {
|
||||
const node = this.getNode(data);
|
||||
|
||||
if (node) {
|
||||
node.setChecked(!!checked, deep);
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentNode() {
|
||||
return this.currentNode;
|
||||
}
|
||||
|
||||
setCurrentNode(currentNode) {
|
||||
const prevCurrentNode = this.currentNode;
|
||||
if (prevCurrentNode) {
|
||||
prevCurrentNode.isCurrent = false;
|
||||
}
|
||||
this.currentNode = currentNode;
|
||||
this.currentNode.isCurrent = true;
|
||||
|
||||
this.expandCurrentNodeParent && this.currentNode.expand(null, true)
|
||||
}
|
||||
|
||||
setUserCurrentNode(node) {
|
||||
const key = node[this.key];
|
||||
const currNode = this.nodesMap[key];
|
||||
this.setCurrentNode(currNode);
|
||||
}
|
||||
|
||||
setCurrentNodeKey(key) {
|
||||
if (key === null || key === undefined) {
|
||||
this.currentNode && (this.currentNode.isCurrent = false);
|
||||
this.currentNode = null;
|
||||
return;
|
||||
}
|
||||
const node = this.getNode(key);
|
||||
if (node) {
|
||||
this.setCurrentNode(node);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
export const NODE_KEY = '$treeNodeId';
|
||||
|
||||
export const markNodeData = function(node, data) {
|
||||
if (!data || data[NODE_KEY]) return;
|
||||
Object.defineProperty(data, NODE_KEY, {
|
||||
value: node.id,
|
||||
enumerable: false,
|
||||
configurable: false,
|
||||
writable: false
|
||||
});
|
||||
};
|
||||
|
||||
export const getNodeKey = function(key, data) {
|
||||
if (!data) return null;
|
||||
if (!key) return data[NODE_KEY];
|
||||
return data[key];
|
||||
};
|
||||
|
||||
export const objectAssign = function(target) {
|
||||
for (let i = 1, j = arguments.length; i < j; i++) {
|
||||
let source = arguments[i] || {};
|
||||
for (let prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
let value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// TODO: use native Array.find, Array.findIndex when IE support is dropped
|
||||
export const arrayFindIndex = function(arr, pred) {
|
||||
for (let i = 0; i !== arr.length; ++i) {
|
||||
if (pred(arr[i])) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
export const getChildState = function(node) {
|
||||
let all = true;
|
||||
let none = true;
|
||||
let allWithoutDisable = true;
|
||||
for (let i = 0, j = node.length; i < j; i++) {
|
||||
const n = node[i];
|
||||
if (n.checked !== true || n.indeterminate) {
|
||||
all = false;
|
||||
if (!n.disabled) {
|
||||
allWithoutDisable = false;
|
||||
}
|
||||
}
|
||||
if (n.checked !== false || n.indeterminate) {
|
||||
none = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
all,
|
||||
none,
|
||||
allWithoutDisable,
|
||||
half: !all && !none
|
||||
};
|
||||
};
|
||||
|
||||
export const reInitChecked = function(node) {
|
||||
if (!node || node.childNodesId.length === 0) return;
|
||||
|
||||
let childNodes = node.getChildNodes(node.childNodesId);
|
||||
const {
|
||||
all,
|
||||
none,
|
||||
half
|
||||
} = getChildState(childNodes);
|
||||
if (all) {
|
||||
node.checked = true;
|
||||
node.indeterminate = false;
|
||||
} else if (half) {
|
||||
node.checked = false;
|
||||
node.indeterminate = true;
|
||||
} else if (none) {
|
||||
node.checked = false;
|
||||
node.indeterminate = false;
|
||||
}
|
||||
|
||||
let parent = node.getParent(node.parentId);
|
||||
if (!parent || parent.level === 0) return;
|
||||
|
||||
if (!node.store().checkStrictly) {
|
||||
reInitChecked(parent);
|
||||
}
|
||||
};
|
||||
|
||||
export const getPropertyFromData = function(node, prop) {
|
||||
const props = node.store().props;
|
||||
const data = node.data || {};
|
||||
const config = props[prop];
|
||||
|
||||
if (typeof config === 'function') {
|
||||
return config(data, node);
|
||||
} else if (typeof config === 'string') {
|
||||
return data[config];
|
||||
} else if (typeof config === 'undefined') {
|
||||
const dataProp = data[prop];
|
||||
return dataProp === undefined ? '' : dataProp;
|
||||
}
|
||||
};
|
||||
|
||||
export const isNull = function(v) {
|
||||
return v === undefined || v === null || v === '';
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/* 下拉刷新区域 */
|
||||
.mescroll-downwarp {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下拉刷新--内容区,定位于区域底部 */
|
||||
.mescroll-downwarp .downwarp-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 60rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下拉刷新--提示文本 */
|
||||
.mescroll-downwarp .downwarp-tip {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
color: gray;
|
||||
vertical-align: middle;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 下拉刷新--旋转进度条 */
|
||||
.mescroll-downwarp .downwarp-progress {
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid gray;
|
||||
border-bottom-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.mescroll-downwarp .mescroll-rotate {
|
||||
animation: mescrollDownRotate 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mescrollDownRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!-- 下拉刷新区域 -->
|
||||
<template>
|
||||
<view v-if="mOption.use" class="mescroll-downwarp">
|
||||
<view class="downwarp-content">
|
||||
<view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'transform':downRotate}"></view>
|
||||
<view class="downwarp-tip">{{downText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
option: Object , // down的配置项
|
||||
type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
|
||||
rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
||||
},
|
||||
computed: {
|
||||
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
||||
mOption(){
|
||||
return this.option || {}
|
||||
},
|
||||
// 是否在加载中
|
||||
isDownLoading(){
|
||||
return this.type === 3
|
||||
},
|
||||
// 旋转的角度
|
||||
downRotate(){
|
||||
return 'rotate(' + 360 * this.rate + 'deg)'
|
||||
},
|
||||
// 文本提示
|
||||
downText(){
|
||||
switch (this.type){
|
||||
case 1: return this.mOption.textInOffset;
|
||||
case 2: return this.mOption.textOutOffset;
|
||||
case 3: return this.mOption.textLoading;
|
||||
case 4: return this.mOption.textLoading;
|
||||
default: return this.mOption.textInOffset;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./mescroll-down.css";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!--空布局
|
||||
|
||||
可作为独立的组件, 不使用mescroll的页面也能单独引入, 以便APP全局统一管理:
|
||||
import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
|
||||
<mescroll-empty v-if="isShowEmpty" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
|
||||
|
||||
-->
|
||||
<template>
|
||||
<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
|
||||
<image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" />
|
||||
<view v-if="tip" class="empty-tip">{{ tip }}</view>
|
||||
<view v-if="option.btnText" class="empty-btn" @click="emptyClick">{{ option.btnText }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入全局配置
|
||||
import GlobalOption from './../mescroll-uni-option.js';
|
||||
export default {
|
||||
props: {
|
||||
// empty的配置项: 默认为GlobalOption.up.empty
|
||||
option: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
// 使用computed获取配置,用于支持option的动态配置
|
||||
computed: {
|
||||
// 图标
|
||||
icon() {
|
||||
return this.option.icon == null ? GlobalOption.up.empty.icon : this.option.icon; // 此处不使用短路求值, 用于支持传空串不显示图标
|
||||
},
|
||||
// 文本提示
|
||||
tip() {
|
||||
return this.option.tip == null ? GlobalOption.up.empty.tip : this.option.tip; // 此处不使用短路求值, 用于支持传空串不显示文本提示
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击按钮
|
||||
emptyClick() {
|
||||
this.$emit('emptyclick');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 无任何数据的空布局 */
|
||||
.mescroll-empty {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 100rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mescroll-empty.empty-fixed {
|
||||
z-index: 99;
|
||||
position: absolute; /*transform会使fixed失效,最终会降级为absolute */
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mescroll-empty .empty-icon {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.mescroll-empty .empty-tip {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mescroll-empty .empty-btn {
|
||||
display: inline-block;
|
||||
margin-top: 40rpx;
|
||||
min-width: 200rpx;
|
||||
padding: 18rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1rpx solid #e04b28;
|
||||
border-radius: 60rpx;
|
||||
color: #e04b28;
|
||||
}
|
||||
|
||||
.mescroll-empty .empty-btn:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!-- 回到顶部的按钮 -->
|
||||
<template>
|
||||
<image
|
||||
v-if="mOption.src"
|
||||
class="mescroll-totop"
|
||||
:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-safe-bottom': mOption.safearea}]"
|
||||
:style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom), 'width':addUnit(mOption.width), 'border-radius':addUnit(mOption.radius)}"
|
||||
:src="mOption.src"
|
||||
mode="widthFix"
|
||||
@click="toTopClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// up.toTop的配置项
|
||||
option: Object,
|
||||
// 是否显示
|
||||
value: false
|
||||
},
|
||||
computed: {
|
||||
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
||||
mOption(){
|
||||
return this.option || {}
|
||||
},
|
||||
// 优先显示左边
|
||||
left(){
|
||||
return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
|
||||
},
|
||||
// 右边距离 (优先显示左边)
|
||||
right() {
|
||||
return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addUnit(num){
|
||||
if(!num) return 0;
|
||||
if(typeof num === 'number') return num + 'rpx';
|
||||
return num
|
||||
},
|
||||
toTopClick() {
|
||||
this.$emit('input', false); // 使v-model生效
|
||||
this.$emit('click'); // 派发点击事件
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 回到顶部的按钮 */
|
||||
.mescroll-totop {
|
||||
z-index: 9990;
|
||||
position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
|
||||
right: 20rpx;
|
||||
bottom: 120rpx;
|
||||
width: 72rpx;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s; /* 过渡 */
|
||||
margin-bottom: var(--window-bottom); /* css变量 */
|
||||
}
|
||||
|
||||
/* 适配 iPhoneX */
|
||||
.mescroll-safe-bottom{
|
||||
margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
|
||||
margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 显示 -- 淡入 */
|
||||
.mescroll-totop-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 隐藏 -- 淡出且不接收事件*/
|
||||
.mescroll-totop-out {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/* 上拉加载区域 */
|
||||
.mescroll-upwarp {
|
||||
min-height: 60rpx;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/*提示文本 */
|
||||
.mescroll-upwarp .upwarp-tip,
|
||||
.mescroll-upwarp .upwarp-nodata {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
color: gray;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mescroll-upwarp .upwarp-tip {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/*旋转进度条 */
|
||||
.mescroll-upwarp .upwarp-progress {
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid gray;
|
||||
border-bottom-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.mescroll-upwarp .mescroll-rotate {
|
||||
animation: mescrollUpRotate 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mescrollUpRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!-- 上拉加载区域 -->
|
||||
<template>
|
||||
<view class="mescroll-upwarp">
|
||||
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
||||
<view v-show="isUpLoading">
|
||||
<view class="upwarp-progress mescroll-rotate"></view>
|
||||
<view class="upwarp-tip">{{ mOption.textLoading }}</view>
|
||||
</view>
|
||||
<!-- 无数据 -->
|
||||
<view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
option: Object, // up的配置项
|
||||
type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
|
||||
},
|
||||
computed: {
|
||||
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
||||
mOption() {
|
||||
return this.option || {};
|
||||
},
|
||||
// 加载中
|
||||
isUpLoading() {
|
||||
return this.type === 1;
|
||||
},
|
||||
// 没有更多了
|
||||
isUpNoMore() {
|
||||
return this.type === 2;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import './mescroll-up.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
page {
|
||||
-webkit-overflow-scrolling: touch; /* 使iOS滚动流畅 */
|
||||
}
|
||||
|
||||
.mescroll-body {
|
||||
position: relative; /* 下拉刷新区域相对自身定位 */
|
||||
height: auto; /* 不可固定高度,否则overflow: hidden, 可通过设置最小高度使列表不满屏仍可下拉*/
|
||||
overflow: hidden; /* 遮住顶部下拉刷新区域 */
|
||||
box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
|
||||
}
|
||||
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<view class="mescroll-body" :style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom, 'padding-bottom': padBottomConstant, 'padding-bottom': padBottomEnv }" @touchstart="touchstartEvent" @touchmove="touchmoveEvent" @touchend="touchendEvent" @touchcancel="touchendEvent" >
|
||||
<view class="mescroll-body-content mescroll-touch" :style="{ transform: translateY, transition: transition }">
|
||||
<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
|
||||
<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
|
||||
<view v-if="mescroll.optDown.use" class="mescroll-downwarp">
|
||||
<view class="downwarp-content">
|
||||
<view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'transform': downRotate}"></view>
|
||||
<view class="downwarp-tip">{{downText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<slot></slot>
|
||||
|
||||
<!-- 空布局 -->
|
||||
<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
|
||||
|
||||
<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
|
||||
<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
|
||||
<view v-if="mescroll.optUp.use && !isDownLoading" class="mescroll-upwarp">
|
||||
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
||||
<view v-show="upLoadType===1">
|
||||
<view class="upwarp-progress mescroll-rotate"></view>
|
||||
<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
|
||||
</view>
|
||||
<!-- 无数据 -->
|
||||
<view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
|
||||
<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入mescroll-uni.js,处理核心逻辑
|
||||
import MeScroll from './mescroll-uni.js';
|
||||
// 引入全局配置
|
||||
import GlobalOption from './mescroll-uni-option.js';
|
||||
// 引入空布局组件
|
||||
import MescrollEmpty from './components/mescroll-empty.vue';
|
||||
// 引入回到顶部组件
|
||||
import MescrollTop from './components/mescroll-top.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MescrollEmpty,
|
||||
MescrollTop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mescroll: null, // mescroll实例
|
||||
downHight: 0, //下拉刷新: 容器高度
|
||||
downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
|
||||
downLoadType: 4, // 下拉刷新状态 （inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
|
||||
upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了）
|
||||
isShowEmpty: false, // 是否显示空布局
|
||||
isShowToTop: false, // 是否显示回到顶部按钮
|
||||
windowHeight: 0, // 可使用窗口的高度
|
||||
statusBarHeight: 0 // 状态栏高度
|
||||
};
|
||||
},
|
||||
props: {
|
||||
down: Object, // 下拉刷新的参数配置
|
||||
up: Object, // 上拉加载的参数配置
|
||||
top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||
topbar: Boolean, // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可自动加上状态栏高度的偏移量)
|
||||
bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||
safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
|
||||
height: [String, Number] // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
|
||||
},
|
||||
computed: {
|
||||
// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
|
||||
minHeight(){
|
||||
return this.toPx(this.height || '100%') + 'px'
|
||||
},
|
||||
// 下拉布局往下偏移的距离 (px)
|
||||
numTop() {
|
||||
return this.toPx(this.top) + (this.topbar ? this.statusBarHeight : 0);
|
||||
},
|
||||
padTop() {
|
||||
return this.numTop + 'px';
|
||||
},
|
||||
// 上拉布局往上偏移 (px)
|
||||
numBottom() {
|
||||
return this.toPx(this.bottom);
|
||||
},
|
||||
padBottom() {
|
||||
return this.numBottom + 'px';
|
||||
},
|
||||
padBottomConstant() {
|
||||
return this.safearea ? 'calc(' + this.padBottom + ' + constant(safe-area-inset-bottom))' : this.padBottom;
|
||||
},
|
||||
padBottomEnv() {
|
||||
return this.safearea ? 'calc(' + this.padBottom + ' + env(safe-area-inset-bottom))' : this.padBottom;
|
||||
},
|
||||
// 是否为重置下拉的状态
|
||||
isDownReset() {
|
||||
return this.downLoadType === 3 || this.downLoadType === 4;
|
||||
},
|
||||
// 过渡
|
||||
transition() {
|
||||
return this.isDownReset ? 'transform 300ms' : '';
|
||||
},
|
||||
translateY() {
|
||||
return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
|
||||
},
|
||||
// 是否在加载中
|
||||
isDownLoading(){
|
||||
return this.downLoadType === 3
|
||||
},
|
||||
// 旋转的角度
|
||||
downRotate(){
|
||||
return 'rotate(' + 360 * this.downRate + 'deg)'
|
||||
},
|
||||
// 文本提示
|
||||
downText(){
|
||||
switch (this.downLoadType){
|
||||
case 1: return this.mescroll.optDown.textInOffset;
|
||||
case 2: return this.mescroll.optDown.textOutOffset;
|
||||
case 3: return this.mescroll.optDown.textLoading;
|
||||
case 4: return this.mescroll.optDown.textLoading;
|
||||
default: return this.mescroll.optDown.textInOffset;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//number,rpx,upx,px,% --> px的数值
|
||||
toPx(num) {
|
||||
if (typeof num === 'string') {
|
||||
if (num.indexOf('px') !== -1) {
|
||||
if (num.indexOf('rpx') !== -1) {
|
||||
// "10rpx"
|
||||
num = num.replace('rpx', '');
|
||||
} else if (num.indexOf('upx') !== -1) {
|
||||
// "10upx"
|
||||
num = num.replace('upx', '');
|
||||
} else {
|
||||
// "10px"
|
||||
return Number(num.replace('px', ''));
|
||||
}
|
||||
} else if (num.indexOf('%') !== -1) {
|
||||
// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
|
||||
let rate = Number(num.replace('%', '')) / 100;
|
||||
return this.windowHeight * rate;
|
||||
}
|
||||
}
|
||||
return num ? uni.upx2px(Number(num)) : 0;
|
||||
},
|
||||
//注册列表touchstart事件,用于下拉刷新
|
||||
touchstartEvent(e) {
|
||||
this.mescroll.touchstartEvent(e);
|
||||
},
|
||||
//注册列表touchmove事件,用于下拉刷新
|
||||
touchmoveEvent(e) {
|
||||
this.mescroll.touchmoveEvent(e);
|
||||
},
|
||||
//注册列表touchend事件,用于下拉刷新
|
||||
touchendEvent(e) {
|
||||
this.mescroll.touchendEvent(e);
|
||||
},
|
||||
// 点击空布局的按钮回调
|
||||
emptyClick() {
|
||||
this.$emit('emptyclick', this.mescroll);
|
||||
},
|
||||
// 点击回到顶部的按钮回调
|
||||
toTopClick() {
|
||||
this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
|
||||
this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
|
||||
}
|
||||
},
|
||||
// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
|
||||
created() {
|
||||
let vm = this;
|
||||
|
||||
let diyOption = {
|
||||
// 下拉刷新的配置
|
||||
down: {
|
||||
inOffset(mescroll) {
|
||||
vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
outOffset(mescroll) {
|
||||
vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
onMoving(mescroll, rate, downHight) {
|
||||
// 下拉过程中的回调,滑动过程一直在执行;
|
||||
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||
vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
||||
},
|
||||
showLoading(mescroll, downHight) {
|
||||
vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
|
||||
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
endDownScroll(mescroll) {
|
||||
vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
|
||||
vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
// 派发下拉刷新的回调
|
||||
callback: function(mescroll) {
|
||||
vm.$emit('down', mescroll);
|
||||
}
|
||||
},
|
||||
// 上拉加载的配置
|
||||
up: {
|
||||
// 显示加载中的回调
|
||||
showLoading() {
|
||||
vm.upLoadType = 1;
|
||||
},
|
||||
// 显示无更多数据的回调
|
||||
showNoMore() {
|
||||
vm.upLoadType = 2;
|
||||
},
|
||||
// 隐藏上拉加载的回调
|
||||
hideUpScroll() {
|
||||
vm.upLoadType = 0;
|
||||
},
|
||||
// 空布局
|
||||
empty: {
|
||||
onShow(isShow) {
|
||||
// 显示隐藏的回调
|
||||
vm.isShowEmpty = isShow;
|
||||
}
|
||||
},
|
||||
// 回到顶部
|
||||
toTop: {
|
||||
onShow(isShow) {
|
||||
// 显示隐藏的回调
|
||||
vm.isShowToTop = isShow;
|
||||
}
|
||||
},
|
||||
// 派发上拉加载的回调
|
||||
callback: function(mescroll) {
|
||||
vm.$emit('up', mescroll);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
|
||||
let myOption = JSON.parse(
|
||||
JSON.stringify({
|
||||
down: vm.down,
|
||||
up: vm.up
|
||||
})
|
||||
); // 深拷贝,避免对props的影响
|
||||
MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
|
||||
|
||||
// 初始化MeScroll对象
|
||||
vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
|
||||
// init回调mescroll对象
|
||||
vm.$emit('init', vm.mescroll);
|
||||
|
||||
// 设置高度
|
||||
const sys = uni.getSystemInfoSync();
|
||||
if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
|
||||
if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
|
||||
// 使down的bottomOffset生效
|
||||
vm.mescroll.setBodyHeight(sys.windowHeight);
|
||||
|
||||
// 因为使用的是page的scroll,这里需自定义scrollTo
|
||||
vm.mescroll.resetScrollTo((y, t) => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: y,
|
||||
duration: t
|
||||
})
|
||||
});
|
||||
|
||||
// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
|
||||
if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {
|
||||
} else {
|
||||
vm.mescroll.optUp.toTop.safearea = vm.safearea;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./mescroll-body.css";
|
||||
@import "./components/mescroll-down.css";
|
||||
@import './components/mescroll-up.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
// mescroll-body 和 mescroll-uni 通用
|
||||
|
||||
// import MescrollUni from "./mescroll-uni.vue";
|
||||
// import MescrollBody from "./mescroll-body.vue";
|
||||
|
||||
const MescrollMixin = {
|
||||
// components: { // 非H5端无法通过mixin注册组件, 只能在main.js中注册全局组件或具体界面中注册
|
||||
// MescrollUni,
|
||||
// MescrollBody
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
mescroll: null //mescroll实例对象
|
||||
}
|
||||
},
|
||||
// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
|
||||
onPullDownRefresh(){
|
||||
this.mescroll && this.mescroll.onPullDownRefresh();
|
||||
},
|
||||
// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
|
||||
onPageScroll(e) {
|
||||
this.mescroll && this.mescroll.onPageScroll(e);
|
||||
},
|
||||
// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
|
||||
onReachBottom() {
|
||||
this.mescroll && this.mescroll.onReachBottom();
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
this.mescrollInitByRef(); // 兼容字节跳动小程序
|
||||
},
|
||||
// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序: http://www.mescroll.com/qa.html?v=20200107#q26)
|
||||
mescrollInitByRef() {
|
||||
if(!this.mescroll || !this.mescroll.resetUpScroll){
|
||||
let mescrollRef = this.$refs.mescrollRef;
|
||||
if(mescrollRef) this.mescroll = mescrollRef.mescroll
|
||||
}
|
||||
},
|
||||
// 下拉刷新的回调
|
||||
downCallback() {
|
||||
// mixin默认resetUpScroll
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
// 上拉加载的回调
|
||||
upCallback() {
|
||||
// mixin默认延时500自动结束加载
|
||||
setTimeout(()=>{
|
||||
this.mescroll.endErr();
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default MescrollMixin;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
// 全局配置
|
||||
// mescroll-body 和 mescroll-uni 通用
|
||||
const GlobalOption = {
|
||||
down: {
|
||||
// 其他down的配置参数也可以写,这里只展示了常用的配置:
|
||||
textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
|
||||
textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
|
||||
native: false // 是否使用系统自带的下拉刷新; 默认false; 仅在mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
|
||||
},
|
||||
up: {
|
||||
// 其他up的配置参数也可以写,这里只展示了常用的配置:
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
textNoMore: '-- END --', // 没有更多数据的提示文本
|
||||
offset: 80, // 距底部多远时,触发upCallback
|
||||
isBounce: false, // 默认禁止橡皮筋的回弹效果, 必读事项: http://www.mescroll.com/qa.html?v=190725#q25
|
||||
toTop: {
|
||||
// 回到顶部按钮,需配置src才显示
|
||||
src: "http://www.mescroll.com/img/mescroll-totop.png?v=1", // 图片路径 (建议放入static目录, 如 /static/img/mescroll-totop.png )
|
||||
offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000px
|
||||
right: 20, // 到右边的距离, 默认20 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
|
||||
bottom: 120, // 到底部的距离, 默认120 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
|
||||
width: 72 // 回到顶部图标的宽度, 默认72 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
|
||||
},
|
||||
empty: {
|
||||
use: true, // 是否显示空布局
|
||||
icon: "http://www.mescroll.com/img/mescroll-empty.png?v=1", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
|
||||
tip: '~ 暂无相关数据 ~' // 提示
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default GlobalOption
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
page {
|
||||
height: 100%;
|
||||
box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
|
||||
}
|
||||
|
||||
.mescroll-uni-warp{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mescroll-uni {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200rpx;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
|
||||
}
|
||||
|
||||
/* 定位的方式固定高度 */
|
||||
.mescroll-uni-fixed{
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto; /* 使right生效 */
|
||||
height: auto; /* 使bottom生效 */
|
||||
}
|
||||
|
|
@ -0,0 +1,842 @@
|
|||
/* mescroll
|
||||
* version 1.2.1
|
||||
* 2020-02-08 wenju
|
||||
* http://www.mescroll.com
|
||||
*/
|
||||
|
||||
export default function MeScroll(options, isScrollBody) {
|
||||
let me = this;
|
||||
me.version = '1.2.1'; // mescroll版本号
|
||||
me.options = options || {}; // 配置
|
||||
me.isScrollBody = isScrollBody || false; // 滚动区域是否为原生页面滚动; 默认为scroll-view
|
||||
|
||||
me.isDownScrolling = false; // 是否在执行下拉刷新的回调
|
||||
me.isUpScrolling = false; // 是否在执行上拉加载的回调
|
||||
let hasDownCallback = me.options.down && me.options.down.callback; // 是否配置了down的callback
|
||||
|
||||
// 初始化下拉刷新
|
||||
me.initDownScroll();
|
||||
// 初始化上拉加载,则初始化
|
||||
me.initUpScroll();
|
||||
|
||||
// 自动加载
|
||||
setTimeout(function() { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
|
||||
// 自动触发下拉刷新 (只有配置了down的callback才自动触发下拉刷新)
|
||||
if (me.optDown.use && me.optDown.auto && hasDownCallback) {
|
||||
if (me.optDown.autoShowLoading) {
|
||||
me.triggerDownScroll(); // 显示下拉进度,执行下拉回调
|
||||
} else {
|
||||
me.optDown.callback && me.optDown.callback(me); // 不显示下拉进度,直接执行下拉回调
|
||||
}
|
||||
}
|
||||
// 自动触发上拉加载
|
||||
setTimeout(function(){ // 延时确保先执行down的callback,再执行up的callback,因为部分小程序emit是异步,会导致isUpAutoLoad判断有误
|
||||
me.optUp.use && me.optUp.auto && !me.isUpAutoLoad && me.triggerUpScroll();
|
||||
},100)
|
||||
}, 30); // 需让me.optDown.inited和me.optUp.inited先执行
|
||||
}
|
||||
|
||||
/* 配置参数:下拉刷新 */
|
||||
MeScroll.prototype.extendDownScroll = function(optDown) {
|
||||
// 下拉刷新的配置
|
||||
MeScroll.extend(optDown, {
|
||||
use: true, // 是否启用下拉刷新; 默认true
|
||||
auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
|
||||
native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
|
||||
autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
|
||||
isLock: false, // 是否锁定下拉刷新,默认false;
|
||||
offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
|
||||
startTop: 100, // scroll-view滚动到顶部时,此时的scroll-top不一定为0, 此值用于控制最大的误差
|
||||
fps: 80, // 下拉节流 (值越大每秒刷新频率越高)
|
||||
inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
|
||||
outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
|
||||
bottomOffset: 20, // 当手指touchmove位置在距离body底部20px范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
|
||||
minAngle: 45, // 向下滑动最少偏移的角度,取值区间 [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
|
||||
textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
|
||||
textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
inited: null, // 下拉刷新初始化完毕的回调
|
||||
inOffset: null, // 下拉的距离进入offset范围内那一刻的回调
|
||||
outOffset: null, // 下拉的距离大于offset那一刻的回调
|
||||
onMoving: null, // 下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
|
||||
beforeLoading: null, // 准备触发下拉刷新的回调: 如果return true,将不触发showLoading和callback回调; 常用来完全自定义下拉刷新, 参考案例【淘宝 v6.8.0】
|
||||
showLoading: null, // 显示下拉刷新进度的回调
|
||||
afterLoading: null, // 准备结束下拉的回调. 返回结束下拉的延时执行时间,默认0ms; 常用于结束下拉之前再显示另外一小段动画,才去隐藏下拉刷新的场景, 参考案例【dotJump】
|
||||
endDownScroll: null, // 结束下拉刷新的回调
|
||||
callback: function(mescroll) {
|
||||
// 下拉刷新的回调;默认重置上拉加载列表为第一页
|
||||
mescroll.resetUpScroll();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 配置参数:上拉加载 */
|
||||
MeScroll.prototype.extendUpScroll = function(optUp) {
|
||||
// 上拉加载的配置
|
||||
MeScroll.extend(optUp, {
|
||||
use: true, // 是否启用上拉加载; 默认true
|
||||
auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
|
||||
isLock: false, // 是否锁定上拉加载,默认false;
|
||||
isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
|
||||
isBounce: false, // 默认禁止橡皮筋的回弹效果, 必读事项: http://www.mescroll.com/qa.html?v=190725#q25
|
||||
callback: null, // 上拉加载的回调;function(page,mescroll){ }
|
||||
page: {
|
||||
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
||||
size: 10, // 每页数据的数量
|
||||
time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
|
||||
},
|
||||
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
|
||||
offset: 80, // 距底部多远时,触发upCallback
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
textNoMore: '-- 已经到底啦 --', // 没有更多数据的提示文本
|
||||
inited: null, // 初始化完毕的回调
|
||||
showLoading: null, // 显示加载中的回调
|
||||
showNoMore: null, // 显示无更多数据的回调
|
||||
hideUpScroll: null, // 隐藏上拉加载的回调
|
||||
errDistance: 60, // endErr的时候需往上滑动一段距离,使其往下滑动时再次触发onReachBottom,仅mescroll-body生效
|
||||
toTop: {
|
||||
// 回到顶部按钮,需配置src才显示
|
||||
src: null, // 图片路径,默认null (绝对路径或网络图)
|
||||
offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
|
||||
duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
|
||||
btnClick: null, // 点击按钮的回调
|
||||
onShow: null, // 是否显示的回调
|
||||
zIndex: 9990, // fixed定位z-index值
|
||||
left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取本vue的safearea值)
|
||||
width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
},
|
||||
empty: {
|
||||
use: true, // 是否显示空布局
|
||||
icon: null, // 图标路径
|
||||
tip: '~ 暂无相关数据 ~', // 提示
|
||||
btnText: '', // 按钮
|
||||
btnClick: null, // 点击按钮的回调
|
||||
onShow: null, // 是否显示的回调
|
||||
fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
|
||||
top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
|
||||
zIndex: 99 // fixed定位z-index值
|
||||
},
|
||||
onScroll: false // 是否监听滚动事件
|
||||
})
|
||||
}
|
||||
|
||||
/* 配置参数 */
|
||||
MeScroll.extend = function(userOption, defaultOption) {
|
||||
if (!userOption) return defaultOption;
|
||||
for (let key in defaultOption) {
|
||||
if (userOption[key] == null) {
|
||||
let def = defaultOption[key];
|
||||
if (def != null && typeof def === 'object') {
|
||||
userOption[key] = MeScroll.extend({}, def); // 深度匹配
|
||||
} else {
|
||||
userOption[key] = def;
|
||||
}
|
||||
} else if (typeof userOption[key] === 'object') {
|
||||
MeScroll.extend(userOption[key], defaultOption[key]); // 深度匹配
|
||||
}
|
||||
}
|
||||
return userOption;
|
||||
}
|
||||
|
||||
/* -------初始化下拉刷新------- */
|
||||
MeScroll.prototype.initDownScroll = function() {
|
||||
let me = this;
|
||||
// 配置参数
|
||||
me.optDown = me.options.down || {};
|
||||
me.extendDownScroll(me.optDown);
|
||||
|
||||
// 如果是mescroll-body且配置了native,则禁止自定义的下拉刷新
|
||||
if(me.isScrollBody && me.optDown.native){
|
||||
me.optDown.use = false
|
||||
}else{
|
||||
me.optDown.native = false // 仅mescroll-body支持,mescroll-uni不支持
|
||||
}
|
||||
|
||||
me.downHight = 0; // 下拉区域的高度
|
||||
|
||||
// 在页面中加入下拉布局
|
||||
if (me.optDown.use && me.optDown.inited) {
|
||||
// 初始化完毕的回调
|
||||
setTimeout(function() { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
|
||||
me.optDown.inited(me);
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表touchstart事件 */
|
||||
MeScroll.prototype.touchstartEvent = function(e) {
|
||||
if (!this.optDown.use) return;
|
||||
|
||||
this.startPoint = this.getPoint(e); // 记录起点
|
||||
this.startTop = this.getScrollTop(); // 记录此时的滚动条位置
|
||||
this.lastPoint = this.startPoint; // 重置上次move的点
|
||||
this.maxTouchmoveY = this.getBodyHeight() - this.optDown.bottomOffset; // 手指触摸的最大范围(写在touchstart避免body获取高度为0的情况)
|
||||
this.inTouchend = false; // 标记不是touchend
|
||||
}
|
||||
|
||||
/* 列表touchmove事件 */
|
||||
MeScroll.prototype.touchmoveEvent = function(e) {
|
||||
if (!this.optDown.use) return;
|
||||
if (!this.startPoint) return;
|
||||
let me = this;
|
||||
|
||||
// 节流
|
||||
let t = new Date().getTime();
|
||||
if (me.moveTime && t - me.moveTime < me.moveTimeDiff) { // 小于节流时间,则不处理
|
||||
return;
|
||||
} else {
|
||||
me.moveTime = t
|
||||
if(!me.moveTimeDiff) me.moveTimeDiff = 1000 / me.optDown.fps
|
||||
}
|
||||
|
||||
let scrollTop = me.getScrollTop(); // 当前滚动条的距离
|
||||
let curPoint = me.getPoint(e); // 当前点
|
||||
|
||||
let moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||||
|
||||
// 向下拉 && 在顶部
|
||||
// mescroll-body,直接判定在顶部即可
|
||||
// scroll-view在滚动时不会触发touchmove,当触顶/底/左/右时,才会触发touchmove
|
||||
// scroll-view滚动到顶部时,scrollTop不一定为0; 在iOS的APP中scrollTop可能为负数,不一定和startTop相等
|
||||
if (moveY > 0 && (
|
||||
(me.isScrollBody && scrollTop <= 0)
|
||||
||
|
||||
(!me.isScrollBody && (scrollTop <= 0 || (scrollTop <= me.optDown.startTop && scrollTop === me.startTop)) )
|
||||
)) {
|
||||
// 可下拉的条件
|
||||
if (!me.inTouchend && !me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling &&
|
||||
me.optUp.isBoth))) {
|
||||
|
||||
// 下拉的角度是否在配置的范围内
|
||||
let angle = me.getAngle(me.lastPoint, curPoint); // 两点之间的角度,区间 [0,90]
|
||||
if (angle < me.optDown.minAngle) return; // 如果小于配置的角度,则不往下执行下拉刷新
|
||||
|
||||
// 如果手指的位置超过配置的距离,则提前结束下拉,避免Webview嵌套导致touchend无法触发
|
||||
if (me.maxTouchmoveY > 0 && curPoint.y >= me.maxTouchmoveY) {
|
||||
me.inTouchend = true; // 标记执行touchend
|
||||
me.touchendEvent(); // 提前触发touchend
|
||||
return;
|
||||
}
|
||||
|
||||
me.preventDefault(e); // 阻止默认事件
|
||||
|
||||
let diff = curPoint.y - me.lastPoint.y; // 和上次比,移动的距离 (大于0向下,小于0向上)
|
||||
|
||||
// 下拉距离 < 指定距离
|
||||
if (me.downHight < me.optDown.offset) {
|
||||
if (me.movetype !== 1) {
|
||||
me.movetype = 1; // 加入标记,保证只执行一次
|
||||
me.optDown.inOffset && me.optDown.inOffset(me); // 进入指定距离范围内那一刻的回调,只执行一次
|
||||
me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
|
||||
}
|
||||
me.downHight += diff * me.optDown.inOffsetRate; // 越往下,高度变化越小
|
||||
|
||||
// 指定距离 <= 下拉距离
|
||||
} else {
|
||||
if (me.movetype !== 2) {
|
||||
me.movetype = 2; // 加入标记,保证只执行一次
|
||||
me.optDown.outOffset && me.optDown.outOffset(me); // 下拉超过指定距离那一刻的回调,只执行一次
|
||||
me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
|
||||
}
|
||||
if (diff > 0) { // 向下拉
|
||||
me.downHight += Math.round(diff * me.optDown.outOffsetRate); // 越往下,高度变化越小
|
||||
} else { // 向上收
|
||||
me.downHight += diff; // 向上收回高度,则向上滑多少收多少高度
|
||||
}
|
||||
}
|
||||
|
||||
let rate = me.downHight / me.optDown.offset; // 下拉区域当前高度与指定距离的比值
|
||||
me.optDown.onMoving && me.optDown.onMoving(me, rate, me.downHight); // 下拉过程中的回调,一直在执行
|
||||
}
|
||||
}
|
||||
|
||||
me.lastPoint = curPoint; // 记录本次移动的点
|
||||
}
|
||||
|
||||
/* 列表touchend事件 */
|
||||
MeScroll.prototype.touchendEvent = function(e) {
|
||||
if (!this.optDown.use) return;
|
||||
// 如果下拉区域高度已改变,则需重置回来
|
||||
if (this.isMoveDown) {
|
||||
if (this.downHight >= this.optDown.offset) {
|
||||
// 符合触发刷新的条件
|
||||
this.triggerDownScroll();
|
||||
} else {
|
||||
// 不符合的话 则重置
|
||||
this.downHight = 0;
|
||||
this.optDown.endDownScroll && this.optDown.endDownScroll(this);
|
||||
}
|
||||
this.movetype = 0;
|
||||
this.isMoveDown = false;
|
||||
} else if (!this.isScrollBody && this.getScrollTop() === this.startTop) { // scroll-view到顶/左/右/底的滑动事件
|
||||
let isScrollUp = this.getPoint(e).y - this.startPoint.y < 0; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||||
// 上滑
|
||||
if (isScrollUp) {
|
||||
// 需检查滑动的角度
|
||||
let angle = this.getAngle(this.getPoint(e), this.startPoint); // 两点之间的角度,区间 [0,90]
|
||||
if (angle > 80) {
|
||||
// 检查并触发上拉
|
||||
this.triggerUpScroll(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 根据点击滑动事件获取第一个手指的坐标 */
|
||||
MeScroll.prototype.getPoint = function(e) {
|
||||
if (!e) {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
if (e.touches && e.touches[0]) {
|
||||
return {
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY
|
||||
}
|
||||
} else if (e.changedTouches && e.changedTouches[0]) {
|
||||
return {
|
||||
x: e.changedTouches[0].pageX,
|
||||
y: e.changedTouches[0].pageY
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 计算两点之间的角度: 区间 [0,90]*/
|
||||
MeScroll.prototype.getAngle = function(p1, p2) {
|
||||
let x = Math.abs(p1.x - p2.x);
|
||||
let y = Math.abs(p1.y - p2.y);
|
||||
let z = Math.sqrt(x * x + y * y);
|
||||
let angle = 0;
|
||||
if (z !== 0) {
|
||||
angle = Math.asin(y / z) / Math.PI * 180;
|
||||
}
|
||||
return angle
|
||||
}
|
||||
|
||||
/* 触发下拉刷新 */
|
||||
MeScroll.prototype.triggerDownScroll = function() {
|
||||
if (this.optDown.beforeLoading && this.optDown.beforeLoading(this)) {
|
||||
//return true则处于完全自定义状态
|
||||
} else {
|
||||
this.showDownScroll(); // 下拉刷新中...
|
||||
this.optDown.callback && this.optDown.callback(this); // 执行回调,联网加载数据
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示下拉进度布局 */
|
||||
MeScroll.prototype.showDownScroll = function() {
|
||||
this.isDownScrolling = true; // 标记下拉中
|
||||
if (this.optDown.native) {
|
||||
uni.startPullDownRefresh(); // 系统自带的下拉刷新
|
||||
this.optDown.showLoading && this.optDown.showLoading(this, 0); // 仍触发showLoading,因为上拉加载用到
|
||||
} else{
|
||||
this.downHight = this.optDown.offset; // 更新下拉区域高度
|
||||
this.optDown.showLoading && this.optDown.showLoading(this, this.downHight); // 下拉刷新中...
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示系统自带的下拉刷新时需要处理的业务 */
|
||||
MeScroll.prototype.onPullDownRefresh = function() {
|
||||
this.isDownScrolling = true; // 标记下拉中
|
||||
this.optDown.showLoading && this.optDown.showLoading(this, 0); // 仍触发showLoading,因为上拉加载用到
|
||||
this.optDown.callback && this.optDown.callback(this); // 执行回调,联网加载数据
|
||||
}
|
||||
|
||||
/* 结束下拉刷新 */
|
||||
MeScroll.prototype.endDownScroll = function() {
|
||||
if (this.optDown.native) { // 结束原生下拉刷新
|
||||
this.isDownScrolling = false;
|
||||
this.optDown.endDownScroll && this.optDown.endDownScroll(this);
|
||||
uni.stopPullDownRefresh();
|
||||
return
|
||||
}
|
||||
let me = this;
|
||||
// 结束下拉刷新的方法
|
||||
let endScroll = function() {
|
||||
me.downHight = 0;
|
||||
me.isDownScrolling = false;
|
||||
me.optDown.endDownScroll && me.optDown.endDownScroll(me);
|
||||
!me.isScrollBody && me.setScrollHeight(0) // scroll-view重置滚动区域,使数据不满屏时仍可检查触发翻页
|
||||
}
|
||||
// 结束下拉刷新时的回调
|
||||
let delay = 0;
|
||||
if (me.optDown.afterLoading) delay = me.optDown.afterLoading(me); // 结束下拉刷新的延时,单位ms
|
||||
if (typeof delay === 'number' && delay > 0) {
|
||||
setTimeout(endScroll, delay);
|
||||
} else {
|
||||
endScroll();
|
||||
}
|
||||
}
|
||||
|
||||
/* 锁定下拉刷新:isLock=ture,null锁定;isLock=false解锁 */
|
||||
MeScroll.prototype.lockDownScroll = function(isLock) {
|
||||
if (isLock == null) isLock = true;
|
||||
this.optDown.isLock = isLock;
|
||||
}
|
||||
|
||||
/* 锁定上拉加载:isLock=ture,null锁定;isLock=false解锁 */
|
||||
MeScroll.prototype.lockUpScroll = function(isLock) {
|
||||
if (isLock == null) isLock = true;
|
||||
this.optUp.isLock = isLock;
|
||||
}
|
||||
|
||||
/* -------初始化上拉加载------- */
|
||||
MeScroll.prototype.initUpScroll = function() {
|
||||
let me = this;
|
||||
// 配置参数
|
||||
me.optUp = me.options.up || {
|
||||
use: false
|
||||
};
|
||||
me.extendUpScroll(me.optUp);
|
||||
|
||||
if (!me.optUp.isBounce) me.setBounce(false); // 不允许bounce时,需禁止window的touchmove事件
|
||||
|
||||
if (me.optUp.use === false) return; // 配置不使用上拉加载时,则不初始化上拉布局
|
||||
me.optUp.hasNext = true; // 如果使用上拉,则默认有下一页
|
||||
me.startNum = me.optUp.page.num + 1; // 记录page开始的页码
|
||||
|
||||
// 初始化完毕的回调
|
||||
if (me.optUp.inited) {
|
||||
setTimeout(function() { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
|
||||
me.optUp.inited(me);
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
/*滚动到底部的事件 (仅mescroll-body生效)*/
|
||||
MeScroll.prototype.onReachBottom = function() {
|
||||
if (this.isScrollBody && !this.isUpScrolling) { // 只能支持下拉刷新的时候同时可以触发上拉加载,否则滚动到底部就需要上滑一点才能触发onReachBottom
|
||||
if (!this.optUp.isLock && this.optUp.hasNext) {
|
||||
this.triggerUpScroll();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*列表滚动事件 (仅mescroll-body生效)*/
|
||||
MeScroll.prototype.onPageScroll = function(e) {
|
||||
if (!this.isScrollBody) return;
|
||||
|
||||
// 更新滚动条的位置 (主要用于判断下拉刷新时,滚动条是否在顶部)
|
||||
this.setScrollTop(e.scrollTop);
|
||||
|
||||
// 顶部按钮的显示隐藏
|
||||
if (e.scrollTop >= this.optUp.toTop.offset) {
|
||||
this.showTopBtn();
|
||||
} else {
|
||||
this.hideTopBtn();
|
||||
}
|
||||
}
|
||||
|
||||
/*列表滚动事件*/
|
||||
MeScroll.prototype.scroll = function(e, onScroll) {
|
||||
// 更新滚动条的位置
|
||||
this.setScrollTop(e.scrollTop);
|
||||
// 更新滚动内容高度
|
||||
this.setScrollHeight(e.scrollHeight);
|
||||
|
||||
// 向上滑还是向下滑动
|
||||
if (this.preScrollY == null) this.preScrollY = 0;
|
||||
this.isScrollUp = e.scrollTop - this.preScrollY > 0;
|
||||
this.preScrollY = e.scrollTop;
|
||||
|
||||
// 上滑 && 检查并触发上拉
|
||||
this.isScrollUp && this.triggerUpScroll(true);
|
||||
|
||||
// 顶部按钮的显示隐藏
|
||||
if (e.scrollTop >= this.optUp.toTop.offset) {
|
||||
this.showTopBtn();
|
||||
} else {
|
||||
this.hideTopBtn();
|
||||
}
|
||||
|
||||
// 滑动监听
|
||||
this.optUp.onScroll && onScroll && onScroll()
|
||||
}
|
||||
|
||||
/* 触发上拉加载 */
|
||||
MeScroll.prototype.triggerUpScroll = function(isCheck) {
|
||||
if (!this.isUpScrolling && this.optUp.use && this.optUp.callback) {
|
||||
// 是否校验在底部; 默认不校验
|
||||
if (isCheck === true) {
|
||||
let canUp = false;
|
||||
// 还有下一页 && 没有锁定 && 不在下拉中
|
||||
if (this.optUp.hasNext && !this.optUp.isLock && !this.isDownScrolling) {
|
||||
if (this.getScrollBottom() <= this.optUp.offset) { // 到底部
|
||||
canUp = true; // 标记可上拉
|
||||
}
|
||||
}
|
||||
if (canUp === false) return;
|
||||
}
|
||||
this.showUpScroll(); // 上拉加载中...
|
||||
this.optUp.page.num++; // 预先加一页,如果失败则减回
|
||||
this.isUpAutoLoad = true; // 标记上拉已经自动执行过,避免初始化时多次触发上拉回调
|
||||
this.num = this.optUp.page.num; // 把最新的页数赋值在mescroll上,避免对page的影响
|
||||
this.size = this.optUp.page.size; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.time = this.optUp.page.time; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.optUp.callback(this); // 执行回调,联网加载数据
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示上拉加载中 */
|
||||
MeScroll.prototype.showUpScroll = function() {
|
||||
this.isUpScrolling = true; // 标记上拉加载中
|
||||
this.optUp.showLoading && this.optUp.showLoading(this); // 回调
|
||||
}
|
||||
|
||||
/* 显示上拉无更多数据 */
|
||||
MeScroll.prototype.showNoMore = function() {
|
||||
this.optUp.hasNext = false; // 标记无更多数据
|
||||
this.optUp.showNoMore && this.optUp.showNoMore(this); // 回调
|
||||
}
|
||||
|
||||
/* 隐藏上拉区域**/
|
||||
MeScroll.prototype.hideUpScroll = function() {
|
||||
this.optUp.hideUpScroll && this.optUp.hideUpScroll(this); // 回调
|
||||
}
|
||||
|
||||
/* 结束上拉加载 */
|
||||
MeScroll.prototype.endUpScroll = function(isShowNoMore) {
|
||||
if (isShowNoMore != null) { // isShowNoMore=null,不处理下拉状态,下拉刷新的时候调用
|
||||
if (isShowNoMore) {
|
||||
this.showNoMore(); // isShowNoMore=true,显示无更多数据
|
||||
} else {
|
||||
this.hideUpScroll(); // isShowNoMore=false,隐藏上拉加载
|
||||
}
|
||||
}
|
||||
this.isUpScrolling = false; // 标记结束上拉加载
|
||||
}
|
||||
|
||||
/* 重置上拉加载列表为第一页
|
||||
*isShowLoading 是否显示进度布局;
|
||||
* 1.默认null,不传参,则显示上拉加载的进度布局
|
||||
* 2.传参true, 则显示下拉刷新的进度布局
|
||||
* 3.传参false,则不显示上拉和下拉的进度 (常用于静默更新列表数据)
|
||||
*/
|
||||
MeScroll.prototype.resetUpScroll = function(isShowLoading) {
|
||||
if (this.optUp && this.optUp.use) {
|
||||
let page = this.optUp.page;
|
||||
this.prePageNum = page.num; // 缓存重置前的页码,加载失败可退回
|
||||
this.prePageTime = page.time; // 缓存重置前的时间,加载失败可退回
|
||||
page.num = this.startNum; // 重置为第一页
|
||||
page.time = null; // 重置时间为空
|
||||
if (!this.isDownScrolling && isShowLoading !== false) { // 如果不是下拉刷新触发的resetUpScroll并且不配置列表静默更新,则显示进度;
|
||||
if (isShowLoading == null) {
|
||||
this.removeEmpty(); // 移除空布局
|
||||
this.showUpScroll(); // 不传参,默认显示上拉加载的进度布局
|
||||
} else {
|
||||
this.showDownScroll(); // 传true,显示下拉刷新的进度布局,不清空列表
|
||||
}
|
||||
}
|
||||
this.isUpAutoLoad = true; // 标记上拉已经自动执行过,避免初始化时多次触发上拉回调
|
||||
this.num = page.num; // 把最新的页数赋值在mescroll上,避免对page的影响
|
||||
this.size = page.size; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.time = page.time; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.optUp.callback && this.optUp.callback(this); // 执行上拉回调
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置page.num的值 */
|
||||
MeScroll.prototype.setPageNum = function(num) {
|
||||
this.optUp.page.num = num - 1;
|
||||
}
|
||||
|
||||
/* 设置page.size的值 */
|
||||
MeScroll.prototype.setPageSize = function(size) {
|
||||
this.optUp.page.size = size;
|
||||
}
|
||||
|
||||
/* 联网回调成功,结束下拉刷新和上拉加载
|
||||
* dataSize: 当前页的数据量(必传)
|
||||
* totalPage: 总页数(必传)
|
||||
* systime: 服务器时间 (可空)
|
||||
*/
|
||||
MeScroll.prototype.endByPage = function(dataSize, totalPage, systime) {
|
||||
let hasNext;
|
||||
if (this.optUp.use && totalPage != null) hasNext = this.optUp.page.num < totalPage; // 是否还有下一页
|
||||
this.endSuccess(dataSize, hasNext, systime);
|
||||
}
|
||||
|
||||
/* 联网回调成功,结束下拉刷新和上拉加载
|
||||
* dataSize: 当前页的数据量(必传)
|
||||
* totalSize: 列表所有数据总数量(必传)
|
||||
* systime: 服务器时间 (可空)
|
||||
*/
|
||||
MeScroll.prototype.endBySize = function(dataSize, totalSize, systime) {
|
||||
let hasNext;
|
||||
if (this.optUp.use && totalSize != null) {
|
||||
let loadSize = (this.optUp.page.num - 1) * this.optUp.page.size + dataSize; // 已加载的数据总数
|
||||
hasNext = loadSize < totalSize; // 是否还有下一页
|
||||
}
|
||||
this.endSuccess(dataSize, hasNext, systime);
|
||||
}
|
||||
|
||||
/* 联网回调成功,结束下拉刷新和上拉加载
|
||||
* dataSize: 当前页的数据个数(不是所有页的数据总和),用于上拉加载判断是否还有下一页.如果不传,则会判断还有下一页
|
||||
* hasNext: 是否还有下一页,布尔类型;用来解决这个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据dataSize判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
|
||||
* systime: 服务器时间(可空);用来解决这个小问题:当准备翻下一页时,数据库新增了几条记录,此时翻下一页,前面的几条数据会和上一页的重复;这里传入了systime,那么upCallback的page.time就会有值,把page.time传给服务器,让后台过滤新加入的那几条记录
|
||||
*/
|
||||
MeScroll.prototype.endSuccess = function(dataSize, hasNext, systime) {
|
||||
let me = this;
|
||||
// 结束下拉刷新
|
||||
if (me.isDownScrolling) me.endDownScroll();
|
||||
|
||||
// 结束上拉加载
|
||||
if (me.optUp.use) {
|
||||
let isShowNoMore; // 是否已无更多数据
|
||||
if (dataSize != null) {
|
||||
let pageNum = me.optUp.page.num; // 当前页码
|
||||
let pageSize = me.optUp.page.size; // 每页长度
|
||||
// 如果是第一页
|
||||
if (pageNum === 1) {
|
||||
if (systime) me.optUp.page.time = systime; // 设置加载列表数据第一页的时间
|
||||
}
|
||||
if (dataSize < pageSize || hasNext === false) {
|
||||
// 返回的数据不满一页时,则说明已无更多数据
|
||||
me.optUp.hasNext = false;
|
||||
if (dataSize === 0 && pageNum === 1) {
|
||||
// 如果第一页无任何数据且配置了空布局
|
||||
isShowNoMore = false;
|
||||
me.showEmpty();
|
||||
} else {
|
||||
// 总列表数少于配置的数量,则不显示无更多数据
|
||||
let allDataSize = (pageNum - 1) * pageSize + dataSize;
|
||||
if (allDataSize < me.optUp.noMoreSize) {
|
||||
isShowNoMore = false;
|
||||
} else {
|
||||
isShowNoMore = true;
|
||||
}
|
||||
me.removeEmpty(); // 移除空布局
|
||||
}
|
||||
} else {
|
||||
// 还有下一页
|
||||
isShowNoMore = false;
|
||||
me.optUp.hasNext = true;
|
||||
me.removeEmpty(); // 移除空布局
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏上拉
|
||||
me.endUpScroll(isShowNoMore);
|
||||
}
|
||||
}
|
||||
|
||||
/* 回调失败,结束下拉刷新和上拉加载 */
|
||||
MeScroll.prototype.endErr = function(errDistance) {
|
||||
// 结束下拉,回调失败重置回原来的页码和时间
|
||||
if (this.isDownScrolling) {
|
||||
let page = this.optUp.page;
|
||||
if (page && this.prePageNum) {
|
||||
page.num = this.prePageNum;
|
||||
page.time = this.prePageTime;
|
||||
}
|
||||
this.endDownScroll();
|
||||
}
|
||||
// 结束上拉,回调失败重置回原来的页码
|
||||
if (this.isUpScrolling) {
|
||||
this.optUp.page.num--;
|
||||
this.endUpScroll(false);
|
||||
// 如果是mescroll-body,则需往回滚一定距离
|
||||
if(this.isScrollBody && errDistance !== 0){ // 不处理0
|
||||
if(!errDistance) errDistance = this.optUp.errDistance; // 不传,则取默认
|
||||
this.scrollTo(this.getScrollTop() - errDistance, 0) // 往上回滚的距离
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示空布局 */
|
||||
MeScroll.prototype.showEmpty = function() {
|
||||
this.optUp.empty.use && this.optUp.empty.onShow && this.optUp.empty.onShow(true)
|
||||
}
|
||||
|
||||
/* 移除空布局 */
|
||||
MeScroll.prototype.removeEmpty = function() {
|
||||
this.optUp.empty.use && this.optUp.empty.onShow && this.optUp.empty.onShow(false)
|
||||
}
|
||||
|
||||
/* 显示回到顶部的按钮 */
|
||||
MeScroll.prototype.showTopBtn = function() {
|
||||
if (!this.topBtnShow) {
|
||||
this.topBtnShow = true;
|
||||
this.optUp.toTop.onShow && this.optUp.toTop.onShow(true);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏回到顶部的按钮 */
|
||||
MeScroll.prototype.hideTopBtn = function() {
|
||||
if (this.topBtnShow) {
|
||||
this.topBtnShow = false;
|
||||
this.optUp.toTop.onShow && this.optUp.toTop.onShow(false);
|
||||
}
|
||||
}
|
||||
|
||||
/* 获取滚动条的位置 */
|
||||
MeScroll.prototype.getScrollTop = function() {
|
||||
return this.scrollTop || 0
|
||||
}
|
||||
|
||||
/* 记录滚动条的位置 */
|
||||
MeScroll.prototype.setScrollTop = function(y) {
|
||||
this.scrollTop = y;
|
||||
}
|
||||
|
||||
/* 滚动到指定位置 */
|
||||
MeScroll.prototype.scrollTo = function(y, t) {
|
||||
this.myScrollTo && this.myScrollTo(y, t) // scrollview需自定义回到顶部方法
|
||||
}
|
||||
|
||||
/* 自定义scrollTo */
|
||||
MeScroll.prototype.resetScrollTo = function(myScrollTo) {
|
||||
this.myScrollTo = myScrollTo
|
||||
}
|
||||
|
||||
/* 滚动条到底部的距离 */
|
||||
MeScroll.prototype.getScrollBottom = function() {
|
||||
return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop()
|
||||
}
|
||||
|
||||
/* 计步器
|
||||
star: 开始值
|
||||
end: 结束值
|
||||
callback(step,timer): 回调step值,计步器timer,可自行通过window.clearInterval(timer)结束计步器;
|
||||
t: 计步时长,传0则直接回调end值;不传则默认300ms
|
||||
rate: 周期;不传则默认30ms计步一次
|
||||
* */
|
||||
MeScroll.prototype.getStep = function(star, end, callback, t, rate) {
|
||||
let diff = end - star; // 差值
|
||||
if (t === 0 || diff === 0) {
|
||||
callback && callback(end);
|
||||
return;
|
||||
}
|
||||
t = t || 300; // 时长 300ms
|
||||
rate = rate || 30; // 周期 30ms
|
||||
let count = t / rate; // 次数
|
||||
let step = diff / count; // 步长
|
||||
let i = 0; // 计数
|
||||
let timer = setInterval(function() {
|
||||
if (i < count - 1) {
|
||||
star += step;
|
||||
callback && callback(star, timer);
|
||||
i++;
|
||||
} else {
|
||||
callback && callback(end, timer); // 最后一次直接设置end,避免计算误差
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, rate);
|
||||
}
|
||||
|
||||
/* 滚动容器的高度 */
|
||||
MeScroll.prototype.getClientHeight = function(isReal) {
|
||||
let h = this.clientHeight || 0
|
||||
if (h === 0 && isReal !== true) { // 未获取到容器的高度,可临时取body的高度 (可能会有误差)
|
||||
h = this.getBodyHeight()
|
||||
}
|
||||
return h
|
||||
}
|
||||
MeScroll.prototype.setClientHeight = function(h) {
|
||||
this.clientHeight = h;
|
||||
}
|
||||
|
||||
/* 滚动内容的高度 */
|
||||
MeScroll.prototype.getScrollHeight = function() {
|
||||
return this.scrollHeight || 0;
|
||||
}
|
||||
MeScroll.prototype.setScrollHeight = function(h) {
|
||||
this.scrollHeight = h;
|
||||
}
|
||||
|
||||
/* body的高度 */
|
||||
MeScroll.prototype.getBodyHeight = function() {
|
||||
return this.bodyHeight || 0;
|
||||
}
|
||||
MeScroll.prototype.setBodyHeight = function(h) {
|
||||
this.bodyHeight = h;
|
||||
}
|
||||
|
||||
/* 阻止浏览器默认滚动事件 */
|
||||
MeScroll.prototype.preventDefault = function(e) {
|
||||
// 小程序不支持e.preventDefault
|
||||
// app的bounce只能通过配置pages.json的style.app-plus.bounce为"none"来禁止
|
||||
// cancelable:是否可以被禁用; defaultPrevented:是否已经被禁用
|
||||
if (e && e.cancelable && !e.defaultPrevented) e.preventDefault()
|
||||
}
|
||||
|
||||
/* 是否允许下拉回弹(橡皮筋效果); true或null为允许; false禁止bounce */
|
||||
MeScroll.prototype.setBounce = function(isBounce) {
|
||||
// #ifdef H5
|
||||
if (isBounce === false) {
|
||||
this.optUp.isBounce = false; // 禁止
|
||||
// 标记当前页使用了mescroll (需延时,确保page已切换)
|
||||
setTimeout(function() {
|
||||
let uniPageDom = document.getElementsByTagName('uni-page')[0];
|
||||
uniPageDom && uniPageDom.setAttribute('use_mescroll', true)
|
||||
}, 30);
|
||||
// 避免重复添加事件
|
||||
if (window.isSetBounce) return;
|
||||
window.isSetBounce = true;
|
||||
// 需禁止window的touchmove事件才能有效的阻止bounce
|
||||
window.bounceTouchmove = function(e) {
|
||||
let el = e.target;
|
||||
// 当前touch的元素及父元素是否要拦截touchmove事件
|
||||
let isPrevent = true;
|
||||
while (el !== document.body && el !== document) {
|
||||
if (el.tagName === 'UNI-PAGE') { // 只扫描当前页
|
||||
if (!el.getAttribute('use_mescroll')) {
|
||||
isPrevent = false; // 如果当前页没有使用mescroll,则不阻止
|
||||
}
|
||||
break;
|
||||
}
|
||||
let cls = el.classList;
|
||||
if (cls) {
|
||||
if (cls.contains('mescroll-touch')) { // 采用scroll-view 此处不能过滤mescroll-uni,否则下拉仍然有回弹
|
||||
isPrevent = false; // mescroll-touch无需拦截touchmove事件
|
||||
break;
|
||||
} else if (cls.contains('mescroll-touch-x') || cls.contains('mescroll-touch-y')) {
|
||||
// 如果配置了水平或者垂直滑动
|
||||
let curX = e.touches ? e.touches[0].pageX : e.clientX; // 当前第一个手指距离列表顶部的距离x
|
||||
let curY = e.touches ? e.touches[0].pageY : e.clientY; // 当前第一个手指距离列表顶部的距离y
|
||||
if (!this.preWinX) this.preWinX = curX; // 设置上次移动的距离x
|
||||
if (!this.preWinY) this.preWinY = curY; // 设置上次移动的距离y
|
||||
// 计算两点之间的角度
|
||||
let x = Math.abs(this.preWinX - curX);
|
||||
let y = Math.abs(this.preWinY - curY);
|
||||
let z = Math.sqrt(x * x + y * y);
|
||||
this.preWinX = curX; // 记录本次curX的值
|
||||
this.preWinY = curY; // 记录本次curY的值
|
||||
if (z !== 0) {
|
||||
let angle = Math.asin(y / z) / Math.PI * 180; // 角度区间 [0,90]
|
||||
if ((angle <= 45 && cls.contains('mescroll-touch-x')) || (angle > 45 && cls.contains('mescroll-touch-y'))) {
|
||||
isPrevent = false; // 水平滑动或者垂直滑动,不拦截touchmove事件
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
el = el.parentNode; // 继续检查其父元素
|
||||
}
|
||||
// 拦截touchmove事件:是否可以被禁用&&是否已经被禁用 (这里不使用me.preventDefault(e)的方法,因为某些情况下会报找不到方法的异常)
|
||||
if (isPrevent && e.cancelable && !e.defaultPrevented && typeof e.preventDefault === "function") e.preventDefault();
|
||||
}
|
||||
window.addEventListener('touchmove', window.bounceTouchmove, {
|
||||
passive: false
|
||||
});
|
||||
} else {
|
||||
this.optUp.isBounce = true; // 允许
|
||||
if (window.bounceTouchmove) {
|
||||
window.removeEventListener('touchmove', window.bounceTouchmove);
|
||||
window.bounceTouchmove = null;
|
||||
window.isSetBounce = false;
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<template>
|
||||
<view class="mescroll-uni-warp">
|
||||
<scroll-view :id="viewId" class="mescroll-uni" :class="{'mescroll-uni-fixed':isFixed}" :style="{'height':scrollHeight,'padding-top':padTop,'padding-bottom':padBottom,'padding-bottom':padBottomConstant,'padding-bottom':padBottomEnv,'top':fixedTop,'bottom':fixedBottom,'bottom':fixedBottomConstant,'bottom':fixedBottomEnv}" :scroll-top="scrollTop" :scroll-with-animation="scrollAnim" @scroll="scroll" @touchstart="touchstartEvent" @touchmove="touchmoveEvent" @touchend="touchendEvent" @touchcancel="touchendEvent" :scroll-y='isDownReset' :enable-back-to-top="true">
|
||||
<view class="mescroll-uni-content" :style="{'transform': translateY, 'transition': transition}">
|
||||
<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
|
||||
<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
|
||||
<view v-if="mescroll.optDown.use" class="mescroll-downwarp">
|
||||
<view class="downwarp-content">
|
||||
<view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'transform': downRotate}"></view>
|
||||
<view class="downwarp-tip">{{downText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<slot></slot>
|
||||
|
||||
<!-- 空布局 -->
|
||||
<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
|
||||
|
||||
<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
|
||||
<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
|
||||
<view v-if="mescroll.optUp.use && !isDownLoading" class="mescroll-upwarp">
|
||||
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
||||
<view v-show="upLoadType===1">
|
||||
<view class="upwarp-progress mescroll-rotate"></view>
|
||||
<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
|
||||
</view>
|
||||
<!-- 无数据 -->
|
||||
<view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 回到顶部按钮 (fixed元素,需写在scroll-view外面,防止滚动的时候抖动)-->
|
||||
<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入mescroll-uni.js,处理核心逻辑
|
||||
import MeScroll from './mescroll-uni.js';
|
||||
// 引入全局配置
|
||||
import GlobalOption from './mescroll-uni-option.js';
|
||||
// 引入空布局组件
|
||||
import MescrollEmpty from './components/mescroll-empty.vue';
|
||||
// 引入回到顶部组件
|
||||
import MescrollTop from './components/mescroll-top.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MescrollEmpty,
|
||||
MescrollTop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mescroll: null, // mescroll实例
|
||||
viewId: 'id_' + Math.random().toString(36).substr(2), // 随机生成mescroll的id(不能数字开头,否则找不到元素)
|
||||
downHight: 0, //下拉刷新: 容器高度
|
||||
downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
|
||||
downLoadType: 4, // 下拉刷新状态 （inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
|
||||
upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了）
|
||||
isShowEmpty: false, // 是否显示空布局
|
||||
isShowToTop: false, // 是否显示回到顶部按钮
|
||||
scrollTop: 0, // 滚动条的位置
|
||||
scrollAnim: false, // 是否开启滚动动画
|
||||
windowTop: 0, // 可使用窗口的顶部位置
|
||||
windowBottom: 0, // 可使用窗口的底部位置
|
||||
windowHeight: 0, // 可使用窗口的高度
|
||||
statusBarHeight: 0 // 状态栏高度
|
||||
}
|
||||
},
|
||||
props: {
|
||||
down: Object, // 下拉刷新的参数配置
|
||||
up: Object, // 上拉加载的参数配置
|
||||
top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||
topbar: Boolean, // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可自动加上状态栏高度的偏移量)
|
||||
bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||
safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
|
||||
fixed: { // 是否通过fixed固定mescroll的高度, 默认true
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true
|
||||
}
|
||||
},
|
||||
height: [String, Number] // 指定mescroll的高度, 此项有值,则不使用fixed. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||
},
|
||||
computed: {
|
||||
// 是否使用fixed定位 (当height有值,则不使用)
|
||||
isFixed(){
|
||||
return !this.height && this.fixed
|
||||
},
|
||||
// mescroll的高度
|
||||
scrollHeight(){
|
||||
if (this.isFixed) {
|
||||
return "auto"
|
||||
} else if(this.height){
|
||||
return this.toPx(this.height) + 'px'
|
||||
}else{
|
||||
return "100%"
|
||||
}
|
||||
},
|
||||
// 下拉布局往下偏移的距离 (px)
|
||||
numTop() {
|
||||
return this.toPx(this.top) + (this.topbar ? this.statusBarHeight : 0)
|
||||
},
|
||||
fixedTop() {
|
||||
return this.isFixed ? (this.numTop + this.windowTop) + 'px' : 0
|
||||
},
|
||||
padTop() {
|
||||
return !this.isFixed ? this.numTop + 'px' : 0
|
||||
},
|
||||
// 上拉布局往上偏移 (px)
|
||||
numBottom() {
|
||||
return this.toPx(this.bottom)
|
||||
},
|
||||
fixedBottom() {
|
||||
return this.isFixed ? (this.numBottom + this.windowBottom) + 'px' : 0
|
||||
},
|
||||
fixedBottomConstant(){
|
||||
return this.safearea ? "calc("+this.fixedBottom+" + constant(safe-area-inset-bottom))" : this.fixedBottom
|
||||
},
|
||||
fixedBottomEnv(){
|
||||
return this.safearea ? "calc("+this.fixedBottom+" + env(safe-area-inset-bottom))" : this.fixedBottom
|
||||
},
|
||||
padBottom() {
|
||||
return !this.isFixed ? this.numBottom + 'px' : 0
|
||||
},
|
||||
padBottomConstant(){
|
||||
return this.safearea ? "calc("+this.padBottom+" + constant(safe-area-inset-bottom))" : this.padBottom
|
||||
},
|
||||
padBottomEnv(){
|
||||
return this.safearea ? "calc("+this.padBottom+" + env(safe-area-inset-bottom))" : this.padBottom
|
||||
},
|
||||
// 是否为重置下拉的状态
|
||||
isDownReset(){
|
||||
return this.downLoadType===3 || this.downLoadType===4
|
||||
},
|
||||
// 过渡
|
||||
transition() {
|
||||
return this.isDownReset ? 'transform 300ms' : '';
|
||||
},
|
||||
translateY() {
|
||||
return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
|
||||
},
|
||||
// 是否在加载中
|
||||
isDownLoading(){
|
||||
return this.downLoadType === 3
|
||||
},
|
||||
// 旋转的角度
|
||||
downRotate(){
|
||||
return 'rotate(' + 360 * this.downRate + 'deg)'
|
||||
},
|
||||
// 文本提示
|
||||
downText(){
|
||||
switch (this.downLoadType){
|
||||
case 1: return this.mescroll.optDown.textInOffset;
|
||||
case 2: return this.mescroll.optDown.textOutOffset;
|
||||
case 3: return this.mescroll.optDown.textLoading;
|
||||
case 4: return this.mescroll.optDown.textLoading;
|
||||
default: return this.mescroll.optDown.textInOffset;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//number,rpx,upx,px,% --> px的数值
|
||||
toPx(num){
|
||||
if(typeof num === "string"){
|
||||
if (num.indexOf('px') !== -1) {
|
||||
if(num.indexOf('rpx') !== -1) { // "10rpx"
|
||||
num = num.replace('rpx', '');
|
||||
} else if(num.indexOf('upx') !== -1) { // "10upx"
|
||||
num = num.replace('upx', '');
|
||||
} else { // "10px"
|
||||
return Number(num.replace('px', ''))
|
||||
}
|
||||
}else if (num.indexOf('%') !== -1){
|
||||
// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
|
||||
let rate = Number(num.replace("%","")) / 100
|
||||
return this.windowHeight * rate
|
||||
}
|
||||
}
|
||||
return num ? uni.upx2px(Number(num)) : 0
|
||||
},
|
||||
//注册列表滚动事件,用于下拉刷新和上拉加载
|
||||
scroll(e) {
|
||||
this.mescroll.scroll(e.detail, () => {
|
||||
this.$emit('scroll', this.mescroll) // 此时可直接通过 this.mescroll.scrollTop获取滚动条位置; this.mescroll.isScrollUp获取是否向上滑动
|
||||
})
|
||||
},
|
||||
//注册列表touchstart事件,用于下拉刷新
|
||||
touchstartEvent(e) {
|
||||
this.mescroll.touchstartEvent(e);
|
||||
},
|
||||
//注册列表touchmove事件,用于下拉刷新
|
||||
touchmoveEvent(e) {
|
||||
this.mescroll.touchmoveEvent(e);
|
||||
},
|
||||
//注册列表touchend事件,用于下拉刷新
|
||||
touchendEvent(e) {
|
||||
this.mescroll.touchendEvent(e);
|
||||
},
|
||||
// 点击空布局的按钮回调
|
||||
emptyClick() {
|
||||
this.$emit('emptyclick', this.mescroll)
|
||||
},
|
||||
// 点击回到顶部的按钮回调
|
||||
toTopClick() {
|
||||
this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
|
||||
this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
|
||||
},
|
||||
// 更新滚动区域的高度 (使内容不满屏和到底,都可继续翻页)
|
||||
setClientHeight() {
|
||||
if (this.mescroll.getClientHeight(true) === 0 && !this.isExec) {
|
||||
this.isExec = true; // 避免多次获取
|
||||
this.$nextTick(() => { // 确保dom已渲染
|
||||
let view = uni.createSelectorQuery().in(this).select('#' + this.viewId);
|
||||
view.boundingClientRect(data => {
|
||||
this.isExec = false;
|
||||
if (data) {
|
||||
this.mescroll.setClientHeight(data.height);
|
||||
} else if (this.clientNum != 3) { // 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试3次
|
||||
this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
|
||||
setTimeout(() => {
|
||||
this.setClientHeight()
|
||||
}, this.clientNum * 100)
|
||||
}
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
|
||||
created() {
|
||||
let vm = this;
|
||||
|
||||
let diyOption = {
|
||||
// 下拉刷新的配置
|
||||
down: {
|
||||
inOffset(mescroll) {
|
||||
vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
outOffset(mescroll) {
|
||||
vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
onMoving(mescroll, rate, downHight) {
|
||||
// 下拉过程中的回调,滑动过程一直在执行;
|
||||
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||
vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
||||
},
|
||||
showLoading(mescroll, downHight) {
|
||||
vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
|
||||
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
endDownScroll(mescroll) {
|
||||
vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
|
||||
vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||
},
|
||||
// 派发下拉刷新的回调
|
||||
callback: function(mescroll) {
|
||||
vm.$emit('down', mescroll)
|
||||
}
|
||||
},
|
||||
// 上拉加载的配置
|
||||
up: {
|
||||
// 显示加载中的回调
|
||||
showLoading() {
|
||||
vm.upLoadType = 1;
|
||||
},
|
||||
// 显示无更多数据的回调
|
||||
showNoMore() {
|
||||
vm.upLoadType = 2;
|
||||
},
|
||||
// 隐藏上拉加载的回调
|
||||
hideUpScroll() {
|
||||
vm.upLoadType = 0;
|
||||
},
|
||||
// 空布局
|
||||
empty: {
|
||||
onShow(isShow) { // 显示隐藏的回调
|
||||
vm.isShowEmpty = isShow;
|
||||
}
|
||||
},
|
||||
// 回到顶部
|
||||
toTop: {
|
||||
onShow(isShow) { // 显示隐藏的回调
|
||||
vm.isShowToTop = isShow;
|
||||
}
|
||||
},
|
||||
// 派发上拉加载的回调
|
||||
callback: function(mescroll) {
|
||||
vm.$emit('up', mescroll);
|
||||
// 更新容器的高度 (多mescroll的情况)
|
||||
vm.setClientHeight()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
|
||||
let myOption = JSON.parse(JSON.stringify({
|
||||
'down': vm.down,
|
||||
'up': vm.up
|
||||
})) // 深拷贝,避免对props的影响
|
||||
MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
|
||||
|
||||
// 初始化MeScroll对象
|
||||
vm.mescroll = new MeScroll(myOption);
|
||||
vm.mescroll.viewId = vm.viewId; // 附带id
|
||||
// init回调mescroll对象
|
||||
vm.$emit('init', vm.mescroll);
|
||||
|
||||
// 设置高度
|
||||
const sys = uni.getSystemInfoSync();
|
||||
if(sys.windowTop) vm.windowTop = sys.windowTop;
|
||||
if(sys.windowBottom) vm.windowBottom = sys.windowBottom;
|
||||
if(sys.windowHeight) vm.windowHeight = sys.windowHeight;
|
||||
if(sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
|
||||
// 使down的bottomOffset生效
|
||||
vm.mescroll.setBodyHeight(sys.windowHeight);
|
||||
|
||||
// 因为使用的是scrollview,这里需自定义scrollTo
|
||||
vm.mescroll.resetScrollTo((y, t) => {
|
||||
let curY = vm.mescroll.getScrollTop()
|
||||
vm.scrollAnim = (t !== 0); // t为0,则不使用动画过渡
|
||||
if (t === 0 || t === 300) { // 当t使用默认配置的300时,则使用系统自带的动画过渡
|
||||
vm.scrollTop = curY;
|
||||
vm.$nextTick(function() {
|
||||
vm.scrollTop = y
|
||||
})
|
||||
} else {
|
||||
vm.mescroll.getStep(curY, y, step => { // 此写法可支持配置t
|
||||
vm.scrollTop = step
|
||||
}, t)
|
||||
}
|
||||
})
|
||||
|
||||
// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
|
||||
if(vm.up && vm.up.toTop && vm.up.toTop.safearea!=null){}else{
|
||||
vm.mescroll.optUp.toTop.safearea = vm.safearea
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 设置容器的高度
|
||||
this.setClientHeight()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./mescroll-uni.css";
|
||||
@import "./components/mescroll-down.css";
|
||||
@import './components/mescroll-up.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.signal-gps-grid-list-ctn{
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.signal-gps-grid-list{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 6rpx;
|
||||
}
|
||||
.signal-gps-grid{
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
background-color: #BADED6;
|
||||
margin-right: 4rpx;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="signal-gps-grid-list-ctn">
|
||||
<view class="signal-gps-grid-list">
|
||||
<view class="signal-gps-grid" v-for="(item,index) in 5" :key="index"></view>
|
||||
</view>
|
||||
<view class="signal-gps-grid-list">
|
||||
<view class="signal-gps-grid" v-for="(item,index) in getValueInterval" style="background-color:#11BF96;" :key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* 信号组件
|
||||
* value: 80以上5格，60以上4格，40以上3格，20以上2格，0以上1格，0无信号
|
||||
* 例:<signal value="80"></signal>
|
||||
*/
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
props:{
|
||||
// 信号值0-100
|
||||
value:{
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getValueInterval(){
|
||||
let value = parseInt(this.value);
|
||||
if (value >=80) {
|
||||
return 5;
|
||||
} else if(value >=60 && value < 80){
|
||||
return 4;
|
||||
} else if(value >=40 && value < 60){
|
||||
return 3;
|
||||
} else if(value >=20 && value < 40){
|
||||
return 2;
|
||||
}else if(value >0 && value < 20){
|
||||
return 1;
|
||||
} else{
|
||||
return 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
.tki-tree-mask {
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
z-index: 9998;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
visibility: hidden;
|
||||
}
|
||||
.tki-tree-mask.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.tki-tree-cnt {
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
z-index: 9999;
|
||||
top: 160rpx;
|
||||
transition: all 0.3s ease;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.tki-tree-cnt.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.tki-tree-bar {
|
||||
background-color: #fff;
|
||||
height: 72rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom-width: 1rpx !important;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #f5f5f5;
|
||||
font-size: 32rpx;
|
||||
color: #757575;
|
||||
line-height: 1;
|
||||
}
|
||||
.tki-tree-bar-confirm {
|
||||
color: #07bb07;
|
||||
}
|
||||
.tki-tree-view {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
top: 72rpx;
|
||||
background-color: #fff;
|
||||
padding-top: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.tki-tree-view-sc {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tki-tree-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #757575;
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: 0.2s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tki-tree-item.show {
|
||||
height: 80rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
.tki-tree-item.showchild:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.tki-tree-item.last:before {
|
||||
opacity: 0;
|
||||
}
|
||||
.tki-tree-icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.tki-tree-label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.tki-tree-check {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tki-tree-check-yes,
|
||||
.tki-tree-check-no {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-top-left-radius: 20%;
|
||||
border-top-right-radius: 20%;
|
||||
border-bottom-right-radius: 20%;
|
||||
border-bottom-left-radius: 20%;
|
||||
border-top-width: 1rpx;
|
||||
border-left-width: 1rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-right-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: #07bb07;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tki-tree-check-yes-b {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-top-left-radius: 20%;
|
||||
border-top-right-radius: 20%;
|
||||
border-bottom-right-radius: 20%;
|
||||
border-bottom-left-radius: 20%;
|
||||
background-color: #07bb07;
|
||||
}
|
||||
.tki-tree-check .radio {
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
.tki-tree-check .radio .tki-tree-check-yes-b {
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
.hover-c {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
<template xlang="wxml">
|
||||
<view class="tki-tree">
|
||||
<view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
|
||||
<view class="tki-tree-cnt" :class="{'show':showTree}">
|
||||
<view class="tki-tree-bar">
|
||||
<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
|
||||
<view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
|
||||
<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
|
||||
</view>
|
||||
<view class="tki-tree-view">
|
||||
<scroll-view class="tki-tree-view-sc" :scroll-y="true">
|
||||
<block v-for="(item, index) in treeList" :key="index">
|
||||
<view class="tki-tree-item" :style="[{
|
||||
paddingLeft: item.rank*15 + 'px',
|
||||
zIndex: item.rank*-1 +50
|
||||
}]"
|
||||
:class="{
|
||||
border: border === true,
|
||||
show: item.show,
|
||||
last: item.lastRank,
|
||||
showchild: item.showChild,
|
||||
open: item.open,
|
||||
}">
|
||||
<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
|
||||
<image class="tki-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="selectParent?true:item.lastRank">
|
||||
<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor}">
|
||||
<view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}"></view>
|
||||
</view>
|
||||
<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tki-tree",
|
||||
props: {
|
||||
range: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
idKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
rangeKey: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple: { // 是否可以多选
|
||||
type: Boolean,
|
||||
default: false
|
||||
// default: true
|
||||
},
|
||||
selectParent: { //是否可以选父级
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmColor: { // 确定按钮颜色
|
||||
type: String,
|
||||
default: '' // #07bb07
|
||||
},
|
||||
cancelColor: { // 取消按钮颜色
|
||||
type: String,
|
||||
default: '' // #757575
|
||||
},
|
||||
titleColor: { // 标题颜色
|
||||
type: String,
|
||||
default: '' // #757575
|
||||
},
|
||||
currentIcon: { // 展开时候的ic
|
||||
type: String,
|
||||
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
|
||||
},
|
||||
defaultIcon: { // 折叠时候的ic
|
||||
type: String,
|
||||
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
|
||||
},
|
||||
lastIcon: { // 没有子集的ic
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
border: { // 是否有分割线
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showTree: false,
|
||||
treeList: [],
|
||||
selectIndex: -1,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
_show() {
|
||||
this.showTree = true
|
||||
},
|
||||
_hide() {
|
||||
this.showTree = false
|
||||
},
|
||||
_cancel() {
|
||||
this._hide()
|
||||
this.$emit("cancel", '');
|
||||
},
|
||||
_confirm() {
|
||||
// 处理所选数据
|
||||
let rt = [],
|
||||
obj = {};
|
||||
this.treeList.forEach((v, i) => {
|
||||
if (this.treeList[i].checked) {
|
||||
obj = {}
|
||||
obj.parents = this.treeList[i].parents
|
||||
obj = Object.assign(obj, this.treeList[i].source)
|
||||
// 移除子元素
|
||||
delete obj.children
|
||||
rt.push(obj)
|
||||
}
|
||||
})
|
||||
this._hide()
|
||||
this.$emit("confirm", rt);
|
||||
},
|
||||
//扁平化树结构
|
||||
_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
|
||||
list.forEach(item => {
|
||||
this.treeList.push({
|
||||
id: item[this.idKey],
|
||||
name: item[this.rangeKey],
|
||||
source: item,
|
||||
parentId, // 父级id数组
|
||||
parents, // 父级id数组
|
||||
rank, // 层级
|
||||
showChild: false, //子级是否显示
|
||||
open: false, //是否打开
|
||||
show: rank === 0, // 自身是否显示
|
||||
hideArr: [],
|
||||
orChecked: item.checked ? item.checked : false,
|
||||
checked: item.checked ? item.checked : false,
|
||||
})
|
||||
if (Array.isArray(item.children) && item.children.length > 0) {
|
||||
// console.log(item)
|
||||
let parentid = [...parentId],
|
||||
parentArr = [...parents],
|
||||
childrenid = [...childrenid];
|
||||
delete parentArr.children
|
||||
parentid.push(item[this.idKey]);
|
||||
parentArr.push({
|
||||
[this.idKey]: item[this.idKey],
|
||||
[this.rangeKey]: item[this.rangeKey]
|
||||
})
|
||||
this._renderTreeList(item.children, rank + 1, parentid, parentArr);
|
||||
} else {
|
||||
this.treeList[this.treeList.length - 1].lastRank = true;
|
||||
}
|
||||
})
|
||||
// console.log(list)
|
||||
},
|
||||
// 处理默认选择
|
||||
_defaultSelect() {
|
||||
this.treeList.forEach((v, i) => {
|
||||
if (v.checked) {
|
||||
this.treeList.forEach((v2, i2) => {
|
||||
if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
|
||||
v2.show = true
|
||||
if (v.parentId.includes(v2.id)) {
|
||||
v2.showChild = true;
|
||||
v2.open = true;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击
|
||||
_treeItemTap(item, index) {
|
||||
if (item.lastRank === true) {
|
||||
//点击最后一级时触发事件
|
||||
this.treeList[index].checked = !this.treeList[index].checked
|
||||
this._fixMultiple(index)
|
||||
return;
|
||||
}
|
||||
let list = this.treeList;
|
||||
let id = item.id;
|
||||
item.showChild = !item.showChild;
|
||||
item.open = item.showChild ? true : !item.open;
|
||||
list.forEach((childItem, i) => {
|
||||
if (item.showChild === false) {
|
||||
//隐藏所有子级
|
||||
if (!childItem.parentId.includes(id)) {
|
||||
return;
|
||||
}
|
||||
if (!this.foldAll) {
|
||||
if (childItem.lastRank !== true && !childItem.open) {
|
||||
childItem.showChild = false;
|
||||
}
|
||||
// 为隐藏的内容添加一个标记
|
||||
if (childItem.show) {
|
||||
childItem.hideArr[item.rank] = id
|
||||
}
|
||||
} else {
|
||||
if (childItem.lastRank !== true) {
|
||||
childItem.showChild = false;
|
||||
}
|
||||
}
|
||||
childItem.show = false;
|
||||
} else {
|
||||
// 打开子集
|
||||
if (childItem.parentId[childItem.parentId.length - 1] === id) {
|
||||
childItem.show = true;
|
||||
}
|
||||
// 打开被隐藏的子集
|
||||
if (childItem.parentId.includes(id) && !this.foldAll) {
|
||||
// console.log(childItem.hideArr)
|
||||
if (childItem.hideArr[item.rank] === id) {
|
||||
childItem.show = true;
|
||||
if (childItem.open && childItem.showChild) {
|
||||
childItem.showChild = true
|
||||
} else {
|
||||
childItem.showChild = false
|
||||
}
|
||||
childItem.hideArr[item.rank] = null
|
||||
}
|
||||
// console.log(childItem.hideArr)
|
||||
}
|
||||
}
|
||||
})
|
||||
// console.log(this.treeList)
|
||||
},
|
||||
_treeItemSelect(item, index) {
|
||||
this.treeList[index].checked = !this.treeList[index].checked
|
||||
this._fixMultiple(index)
|
||||
},
|
||||
// 处理单选多选
|
||||
_fixMultiple(index) {
|
||||
if (!this.multiple) {
|
||||
// 如果是单选
|
||||
this.treeList.forEach((v, i) => {
|
||||
if (i != index) {
|
||||
this.treeList[i].checked = false
|
||||
} else {
|
||||
this.treeList[i].checked = true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 重置数据
|
||||
_reTreeList() {
|
||||
this.treeList.forEach((v, i) => {
|
||||
this.treeList[i].checked = v.orChecked
|
||||
})
|
||||
},
|
||||
_initTree(range = this.range){
|
||||
this.treeList = [];
|
||||
this._renderTreeList(range);
|
||||
this.$nextTick(() => {
|
||||
this._defaultSelect(range)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
range(list) {
|
||||
this._initTree(list);
|
||||
},
|
||||
multiple() {
|
||||
if (this.range.length) {
|
||||
this._reTreeList();
|
||||
}
|
||||
},
|
||||
selectParent() {
|
||||
if (this.range.length) {
|
||||
this._reTreeList();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this._initTree();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "./style.css";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId" :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'}"
|
||||
@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error">
|
||||
</canvas>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from './u-charts.js';
|
||||
var canvases = {};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
chartType: {
|
||||
required: true,
|
||||
type: String,
|
||||
default: 'column'
|
||||
},
|
||||
opts: {
|
||||
required: true,
|
||||
type: Object,
|
||||
default () {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: 'u-canvas',
|
||||
},
|
||||
cWidth: {
|
||||
default: 375,
|
||||
},
|
||||
cHeight: {
|
||||
default: 250,
|
||||
},
|
||||
pixelRatio: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
switch (this.chartType) {
|
||||
case 'column':
|
||||
this.initColumnChart();
|
||||
break;
|
||||
case 'line':
|
||||
this.initLineChart();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
initColumnChart() {
|
||||
canvases[this.canvasId] = new uCharts({
|
||||
$this: this,
|
||||
canvasId: this.canvasId,
|
||||
type: 'column',
|
||||
legend: true,
|
||||
fontSize: 11,
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: this.pixelRatio,
|
||||
animation: true,
|
||||
categories: this.opts.categories,
|
||||
series: this.opts.series,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 4,
|
||||
scrollShow: true
|
||||
},
|
||||
yAxis: {
|
||||
//disabled:true
|
||||
},
|
||||
dataLabel: true,
|
||||
width: this.cWidth * this.pixelRatio,
|
||||
height: this.cHeight * this.pixelRatio,
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
initLineChart() {
|
||||
canvases[this.canvasId] = new uCharts({
|
||||
$this: this,
|
||||
canvasId: this.canvasId,
|
||||
type: 'line',
|
||||
fontSize: 11,
|
||||
legend: true,
|
||||
dataLabel: false,
|
||||
dataPointShape: true,
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: this.pixelRatio,
|
||||
categories: this.opts.categories,
|
||||
series: this.opts.series,
|
||||
animation: true,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
type: 'grid',
|
||||
gridColor: '#CCCCCC',
|
||||
gridType: 'dash',
|
||||
dashLength: 8,
|
||||
itemCount: 4,
|
||||
scrollShow: true
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
gridColor: '#CCCCCC',
|
||||
dashLength: 8,
|
||||
splitNumber: 5,
|
||||
min: 10,
|
||||
max: 180,
|
||||
format: (val) => {
|
||||
return val.toFixed(0) + '元'
|
||||
}
|
||||
},
|
||||
width: this.cWidth * this.pixelRatio,
|
||||
height: this.cHeight * this.pixelRatio,
|
||||
extra: {
|
||||
line: {
|
||||
type: 'straight'
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
|
||||
changeData(cid,newdata) {
|
||||
canvases[cid].updateData({
|
||||
series: newdata.series,
|
||||
categories: newdata.categories
|
||||
});
|
||||
},
|
||||
touchStart(e) {
|
||||
canvases[this.canvasId].showToolTip(e, {
|
||||
format: function(item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
canvases[this.canvasId].scrollStart(e);
|
||||
},
|
||||
touchMove(e) {
|
||||
canvases[this.canvasId].scroll(e);
|
||||
},
|
||||
touchEnd(e) {
|
||||
canvases[this.canvasId].scrollEnd(e);
|
||||
},
|
||||
error(e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.charts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,121 @@
|
|||
<style lang='scss' scoped>
|
||||
.canvas{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas"
|
||||
@touchstart="touchLineA" ></canvas>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvaRing:null,
|
||||
cWidth:'',
|
||||
cHeight:'',
|
||||
arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
|
||||
pixelRatio:1,
|
||||
isShow:false,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
canvasId:{
|
||||
type:String,
|
||||
default:"canvasColumn"
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:750
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:550
|
||||
},
|
||||
chartData:{
|
||||
type:[Object],
|
||||
default:null
|
||||
},
|
||||
subtitleFontSize:{
|
||||
type:[String,Number],
|
||||
default:15
|
||||
},
|
||||
offsetY:{
|
||||
type:[String,Number],
|
||||
default:0
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
chartData(newVal){
|
||||
console.log(newVal,"newVal");
|
||||
if(this.isShow){
|
||||
this.showArcbar(this.canvasId,newVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
_self = this;
|
||||
this.cWidth=uni.upx2px(this.width);
|
||||
this.cHeight=uni.upx2px(this.height);
|
||||
this.arcbarWidth=uni.upx2px(20);
|
||||
},
|
||||
mounted() {
|
||||
this.isShow = true;
|
||||
if(!!this.chartData){
|
||||
console.log("ok?");
|
||||
this.showArcbar(this.canvasId,this.chartData);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toJSON(){},
|
||||
// 展示图标的函数 接收参数，一个块的id,一个数据
|
||||
showArcbar(canvasId, chartData) {
|
||||
this.canvaArcbar = new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'arcbar',
|
||||
fontSize:11,
|
||||
legend:false,
|
||||
title: {
|
||||
name: Math.round(chartData.series[0].data*100)+'%',
|
||||
color: chartData.series[0].color,
|
||||
fontSize: 25*_self.pixelRatio,
|
||||
offsetY: parseInt(_self.offsetY)
|
||||
},
|
||||
subtitle: {
|
||||
name: chartData.series[0].name,
|
||||
color: '#666666',
|
||||
fontSize: _self.subtitleFontSize*_self.pixelRatio
|
||||
},
|
||||
extra: {
|
||||
arcbar:{
|
||||
type:'circle',//整圆类型进度条图
|
||||
width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
|
||||
startAngle:1.5//整圆类型只需配置起始角度即可
|
||||
}
|
||||
},
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
dataLabel: true,
|
||||
});
|
||||
},
|
||||
// 点击图表显示的内容
|
||||
touchLineA(e) {
|
||||
// 使用声明的变量canvaLineA
|
||||
this.canvaArcbar.showToolTip(e, {
|
||||
format: function(item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<style lang='scss' scoped>
|
||||
.canvas-leakage{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx'}" class="canvas-leakage" disable-scroll="true"
|
||||
@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvaLineA:null,
|
||||
cWidth:'',
|
||||
cHeight:'',
|
||||
pixelRatio:1,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
extraLineType:{
|
||||
type:String,
|
||||
default:"straight"
|
||||
},
|
||||
yAxisTitle:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
canvasId:{
|
||||
type:String,
|
||||
default:"canvasLine"
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:750
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:550
|
||||
},
|
||||
// 数据
|
||||
chartData:{
|
||||
type:[Object],
|
||||
default:null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
chartData(newVal){
|
||||
this.showAreaFn(this.canvasId,newVal);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
_self = this;
|
||||
this.cWidth=uni.upx2px(this.width);
|
||||
this.cHeight=uni.upx2px(this.height);
|
||||
},
|
||||
mounted() {
|
||||
if(!!this.chartData){
|
||||
this.showAreaFn(this.canvasId,this.chartData);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toJSON(){},
|
||||
showAreaFn(canvasId,chartData){
|
||||
this.canvaLineA=new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'area',
|
||||
fontSize:11,
|
||||
padding:[15,15,0,15],
|
||||
legend:{
|
||||
show:true,
|
||||
padding:5,
|
||||
lineHeight:11,
|
||||
margin:5,
|
||||
},
|
||||
dataLabel:true,
|
||||
dataPointShape:true,
|
||||
dataPointShapeType:'hollow',
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
categories: chartData.categories,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
enableScroll: true,//开启图表拖拽功能
|
||||
xAxis: {
|
||||
disableGrid:false,
|
||||
type:'grid',
|
||||
gridType:'dash',
|
||||
itemCount:4,
|
||||
scrollShow:true,
|
||||
scrollAlign:'left'
|
||||
},
|
||||
yAxis: {
|
||||
// showTitle:!!_self.yAxisTitle?true:false,
|
||||
// title:!!_self.yAxisTitle?_self.yAxisTitle:"",
|
||||
// //disabled:true
|
||||
gridType:'dash',
|
||||
splitNumber:8,
|
||||
min:10,
|
||||
max:180,
|
||||
format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
|
||||
},
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
extra: {
|
||||
// line:{
|
||||
// type: _self.extraLineType
|
||||
// },
|
||||
area:{
|
||||
type: 'curve',
|
||||
opacity:0.2,
|
||||
addLine:true,
|
||||
width:2,
|
||||
gradient:false
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
touchLineA(e){
|
||||
this.canvaLineA.scrollStart(e);
|
||||
},
|
||||
moveLineA(e) {
|
||||
this.canvaLineA.scroll(e);
|
||||
},
|
||||
touchEndLineA(e) {
|
||||
this.canvaLineA.scrollEnd(e);
|
||||
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||||
this.canvaLineA.touchLegend(e);
|
||||
this.canvaLineA.showToolTip(e, {
|
||||
format: function (item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<style lang='scss' scoped>
|
||||
.canvas{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||||
<template v-if="has_data">
|
||||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas" :disable-scroll="true"
|
||||
@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
|
||||
</template>
|
||||
<template v-else>
|
||||
<u-empty text="数据为空" mode="data"></u-empty>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvaColumn:null,
|
||||
cWidth:'',
|
||||
cHeight:'',
|
||||
pixelRatio:1,
|
||||
has_data: false,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
canvasId:{
|
||||
type:String,
|
||||
default:"canvasColumn"
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:750
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:550
|
||||
},
|
||||
chartData:{
|
||||
type:[Object],
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
reshowStatus:{
|
||||
type:Boolean,
|
||||
default() {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
chartData(newVal){
|
||||
if(Object.keys(newVal).length > 0){
|
||||
if(this.canvaColumn){
|
||||
this.canvaColumn.updateData(newVal);
|
||||
} else {
|
||||
this.showColumn(this.canvasId,this.chartData);
|
||||
}
|
||||
|
||||
}
|
||||
this.has_data = Object.keys(newVal).length > 0 ? true : false;
|
||||
},
|
||||
reshowStatus(val){
|
||||
if(Object.keys(this.chartData).length > 0){
|
||||
this.has_data = true;
|
||||
this.showColumn(this.canvasId,this.chartData);
|
||||
} else {
|
||||
this.has_data = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
_self = this;
|
||||
this.cWidth=uni.upx2px(this.width);
|
||||
this.cHeight=uni.upx2px(this.height);
|
||||
},
|
||||
mounted() {
|
||||
if(Object.keys(this.chartData).length > 0){
|
||||
this.has_data = true;
|
||||
this.showColumn(this.canvasId,this.chartData);
|
||||
} else {
|
||||
this.has_data = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toJSON(){},
|
||||
showColumn(canvasId,chartData){
|
||||
// console.log(canvasId,"canvasIdcanvasIdcanvasId");
|
||||
// console.log(chartData,"chartData");
|
||||
this.canvaColumn = new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'column',
|
||||
fontSize:11,
|
||||
padding:[5,15,15,15],
|
||||
legend:{
|
||||
show:true,
|
||||
position:'top',
|
||||
float:'center',
|
||||
itemGap:30,
|
||||
padding:5,
|
||||
margin:5,
|
||||
//backgroundColor:'rgba(41,198,90,0.2)',
|
||||
//borderColor :'rgba(41,198,90,0.5)',
|
||||
borderWidth :1
|
||||
},
|
||||
dataLabel:true,
|
||||
dataPointShape:true,
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
categories: chartData.categories,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
enableScroll: true,
|
||||
reshow:_self.reshowStatus,
|
||||
xAxis: {
|
||||
disableGrid:false,
|
||||
type:'grid',
|
||||
gridType:'dash',
|
||||
itemCount:4,
|
||||
scrollShow:true,
|
||||
scrollAlign:'left',
|
||||
},
|
||||
yAxis: {
|
||||
//disabled:true
|
||||
gridType:'dash',
|
||||
// splitNumber:4,
|
||||
// min:10,
|
||||
// max:180,
|
||||
format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
|
||||
},
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
extra: {
|
||||
column: {
|
||||
type:'group',
|
||||
// width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
|
||||
width:20
|
||||
}
|
||||
},
|
||||
});
|
||||
// 监听图表渲染完成
|
||||
this.canvaColumn.addEventListener('renderComplete', () => {
|
||||
// your code here
|
||||
_self.$emit("onRenderFinsh","ok");
|
||||
console.log("onRenderFinsh","onRenderFinsh");
|
||||
});
|
||||
},
|
||||
touchColumn(e){
|
||||
if(!this.canvaColumn) return;
|
||||
this.canvaColumn.scrollStart(e);
|
||||
},
|
||||
moveColumn(e) {
|
||||
if(!this.canvaColumn) return;
|
||||
this.canvaColumn.scroll(e);
|
||||
},
|
||||
touchEndColumn(e) {
|
||||
if(!this.canvaColumn) return;
|
||||
this.canvaColumn.scrollEnd(e);
|
||||
this.canvaColumn.touchLegend(e, {
|
||||
animation:true,
|
||||
});
|
||||
this.canvaColumn.showToolTip(e, {
|
||||
format: function (item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<style lang='scss' scoped>
|
||||
.canvas-leakage{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||||
<template v-if="has_data">
|
||||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx'}" class="canvas-leakage" disable-scroll="true"
|
||||
@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
||||
</template>
|
||||
<template v-else>
|
||||
<u-empty text="数据为空" mode="data"></u-empty>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvaLineA:null,
|
||||
cWidth:'',
|
||||
cHeight:'',
|
||||
pixelRatio:1,
|
||||
has_data: false
|
||||
}
|
||||
},
|
||||
props:{
|
||||
// 曲线curve，直线straight
|
||||
extraLineType:{
|
||||
type:String,
|
||||
default:"straight"
|
||||
},
|
||||
yAxisTitle:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
canvasId:{
|
||||
type:String,
|
||||
default:"canvasLine"
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:750
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:550
|
||||
},
|
||||
// 数据
|
||||
chartData:{
|
||||
type:[Object],
|
||||
default:null
|
||||
},
|
||||
reshowStatus:{
|
||||
type:Boolean,
|
||||
default() {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
chartData(newVal){
|
||||
if(Object.keys(newVal).length > 0){
|
||||
if(this.canvaLineA){
|
||||
this.canvaLineA.updateData(newVal);
|
||||
} else {
|
||||
this.showLineA(this.canvasId,this.chartData);
|
||||
}
|
||||
|
||||
}
|
||||
this.has_data = Object.keys(newVal).length > 0 ? true : false;
|
||||
},
|
||||
reshowStatus(val){
|
||||
console.log("this.chartData",this.chartData)
|
||||
if(Object.keys(this.chartData).length > 0){
|
||||
this.has_data = true;
|
||||
this.showLineA(this.canvasId,this.chartData);
|
||||
} else {
|
||||
this.has_data = false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
_self = this;
|
||||
this.cWidth=uni.upx2px(this.width);
|
||||
this.cHeight=uni.upx2px(this.height);
|
||||
},
|
||||
mounted() {
|
||||
if(Object.keys(this.chartData).length > 0){
|
||||
this.has_data = true;
|
||||
this.showLineA(this.canvasId,this.chartData);
|
||||
} else {
|
||||
this.has_data = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toJSON(){},
|
||||
showLineA(canvasId,chartData){
|
||||
// console.log("render");
|
||||
this.canvaLineA=new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'line',
|
||||
fontSize:11,
|
||||
padding:[15,15,0,15],
|
||||
legend:{
|
||||
show:true,
|
||||
padding:5,
|
||||
lineHeight:11,
|
||||
margin:5,
|
||||
},
|
||||
dataLabel:true,
|
||||
dataPointShape:true,
|
||||
dataPointShapeType:'hollow',
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
categories: chartData.categories,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
enableScroll: true,//开启图表拖拽功能
|
||||
reshow:_self.reshowStatus,
|
||||
xAxis: {
|
||||
disableGrid:false,
|
||||
type:'grid',
|
||||
gridType:'dash',
|
||||
itemCount:4,
|
||||
scrollShow:true,
|
||||
scrollAlign:'left'
|
||||
},
|
||||
yAxis: {
|
||||
// showTitle:!!_self.yAxisTitle?true:false,
|
||||
// title:!!_self.yAxisTitle?_self.yAxisTitle:"",
|
||||
// //disabled:true
|
||||
gridType:'dash',
|
||||
// splitNumber:8,
|
||||
// min:10,
|
||||
// max:180,
|
||||
format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
|
||||
},
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
extra: {
|
||||
line:{
|
||||
type: _self.extraLineType
|
||||
}
|
||||
},
|
||||
});
|
||||
this.canvaLineA.addEventListener('renderComplete', () => {
|
||||
this.$emit("onRenderComplete",true)
|
||||
});
|
||||
|
||||
},
|
||||
touchLineA(e){
|
||||
this.canvaLineA.scrollStart(e);
|
||||
},
|
||||
moveLineA(e) {
|
||||
this.canvaLineA.scroll(e);
|
||||
},
|
||||
touchEndLineA(e) {
|
||||
this.canvaLineA.scrollEnd(e);
|
||||
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||||
this.canvaLineA.touchLegend(e);
|
||||
this.canvaLineA.showToolTip(e, {
|
||||
format: function (item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<style lang='scss' scoped>
|
||||
.canvas{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas"
|
||||
@touchstart="touchRing" ></canvas>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvaRing:null,
|
||||
cWidth:'',
|
||||
cHeight:'',
|
||||
pixelRatio:1,
|
||||
isShow:false,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
canvasId:{
|
||||
type:String,
|
||||
default:"canvasColumn"
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:750
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:550
|
||||
},
|
||||
chartData:{
|
||||
type:[Object],
|
||||
default:null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
chartData(newVal){
|
||||
console.log(newVal,"newVal");
|
||||
if(this.isShow){
|
||||
this.showRing(this.canvasId,newVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
_self = this;
|
||||
this.cWidth=uni.upx2px(this.width);
|
||||
this.cHeight=uni.upx2px(this.height);
|
||||
},
|
||||
mounted() {
|
||||
this.isShow = true;
|
||||
if(!!this.chartData){
|
||||
console.log("ok?");
|
||||
this.showRing(this.canvasId,this.chartData);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toJSON(){},
|
||||
showRing(canvasId,chartData){
|
||||
this.canvaRing=new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'ring',
|
||||
fontSize:11,
|
||||
padding:[5,5,5,5],
|
||||
legend:{
|
||||
show:true,
|
||||
position:'right',
|
||||
float:'center',
|
||||
itemGap:10,
|
||||
padding:5,
|
||||
lineHeight:26,
|
||||
margin:5,
|
||||
//backgroundColor:'rgba(41,198,90,0.2)',
|
||||
//borderColor :'rgba(41,198,90,0.5)',
|
||||
borderWidth :1
|
||||
},
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
series: chartData.series,
|
||||
animation: false,
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
disablePieStroke: true,
|
||||
dataLabel: true,
|
||||
subtitle: {
|
||||
name: '',
|
||||
color: '#7cb5ec',
|
||||
fontSize: 25*_self.pixelRatio,
|
||||
},
|
||||
title: {
|
||||
name: '总电量',
|
||||
color: '#666666',
|
||||
fontSize: 15*_self.pixelRatio,
|
||||
},
|
||||
extra: {
|
||||
pie: {
|
||||
offsetAngle: 0,
|
||||
ringWidth: 26*_self.pixelRatio,
|
||||
labelWidth:15
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
touchRing(e){
|
||||
this.canvaRing.touchLegend(e, {
|
||||
animation : false
|
||||
});
|
||||
this.canvaRing.showToolTip(e, {
|
||||
format: function (item) {
|
||||
return item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<style lang='scss' scoped>
|
||||
.canvas{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas" :disable-scroll="true"
|
||||
@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvaColumn:null,
|
||||
cWidth:'',
|
||||
cHeight:'',
|
||||
pixelRatio:1,
|
||||
isShow:false,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
canvasId:{
|
||||
type:String,
|
||||
default:"canvasColumn"
|
||||
},
|
||||
width:{
|
||||
type:[String,Number],
|
||||
default:750
|
||||
},
|
||||
height:{
|
||||
type:[String,Number],
|
||||
default:550
|
||||
},
|
||||
chartData:{
|
||||
type:[Object],
|
||||
default:null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// chartData(newVal){
|
||||
// console.log(newVal,"newVal");
|
||||
// if(this.isShow){
|
||||
// this.showColumn(this.canvasId,newVal);
|
||||
// }
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
_self = this;
|
||||
this.cWidth=uni.upx2px(this.width);
|
||||
this.cHeight=uni.upx2px(this.height);
|
||||
},
|
||||
mounted() {
|
||||
// this.isShow = true;
|
||||
if(!!this.chartData){
|
||||
this.showColumn(this.canvasId,this.chartData);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toJSON(){},
|
||||
showColumn(canvasId,chartData){
|
||||
console.log(canvasId,"canvasIdcanvasIdcanvasId");
|
||||
console.log(chartData,"chartData");
|
||||
|
||||
this.canvaColumn=new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'column',
|
||||
padding:[15,15,0,15],
|
||||
legend:{
|
||||
show:true,
|
||||
padding:5,
|
||||
lineHeight:11,
|
||||
margin:0,
|
||||
},
|
||||
fontSize:11,
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
animation: false,
|
||||
rotate:true,
|
||||
// #ifdef MP-ALIPAY
|
||||
rotateLock:true,//百度及支付宝需要锁定旋转
|
||||
// #endif
|
||||
categories: chartData.categories,
|
||||
series: chartData.series,
|
||||
xAxis: {
|
||||
disableGrid:true,
|
||||
},
|
||||
yAxis: {
|
||||
//disabled:true
|
||||
},
|
||||
dataLabel: true,
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
extra: {
|
||||
column: {
|
||||
type:'group',
|
||||
width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
|
||||
meter:{
|
||||
//这个是外层边框的宽度
|
||||
border:4,
|
||||
//这个是内部填充颜色
|
||||
fillColor:'#E5FDC3'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
touchColumn(e){
|
||||
this.canvaColumn.scrollStart(e);
|
||||
},
|
||||
moveColumn(e) {
|
||||
this.canvaColumn.scroll(e);
|
||||
},
|
||||
touchEndColumn(e) {
|
||||
this.canvaColumn.scrollEnd(e);
|
||||
this.canvaColumn.touchLegend(e, {
|
||||
animation:true,
|
||||
});
|
||||
this.canvaColumn.showToolTip(e, {
|
||||
format: function (item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.signal-gps-grid-list-ctn{
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.signal-gps-grid-list{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 6rpx;
|
||||
}
|
||||
.signal-gps-grid{
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
background-color: #BADED6;
|
||||
margin-right: 4rpx;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="signal-gps-grid-list-ctn">
|
||||
<view class="signal-gps-grid-list">
|
||||
<view class="signal-gps-grid" v-for="(item,index) in 5" :key="index"></view>
|
||||
</view>
|
||||
<view class="signal-gps-grid-list">
|
||||
<view class="signal-gps-grid" v-for="(item,index) in getValueInterval" style="background-color:#11BF96;" :key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* 信号组件
|
||||
* value: 80以上5格，60以上4格，40以上3格，20以上2格，0以上1格，0无信号
|
||||
* 例:<signal value="80"></signal>
|
||||
*/
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
props:{
|
||||
// 信号值0-100
|
||||
value:{
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getValueInterval(){
|
||||
let value = parseInt(this.value);
|
||||
if (value >=80) {
|
||||
return 5;
|
||||
} else if(value >=60 && value < 80){
|
||||
return 4;
|
||||
} else if(value >=40 && value < 60){
|
||||
return 3;
|
||||
} else if(value >=20 && value < 40){
|
||||
return 2;
|
||||
}else if(value >0 && value < 20){
|
||||
return 1;
|
||||
} else{
|
||||
return 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
export default {
|
||||
'contact': '\ue100',
|
||||
'person': '\ue101',
|
||||
'personadd': '\ue102',
|
||||
'contact-filled': '\ue130',
|
||||
'person-filled': '\ue131',
|
||||
'personadd-filled': '\ue132',
|
||||
'phone': '\ue200',
|
||||
'email': '\ue201',
|
||||
'chatbubble': '\ue202',
|
||||
'chatboxes': '\ue203',
|
||||
'phone-filled': '\ue230',
|
||||
'email-filled': '\ue231',
|
||||
'chatbubble-filled': '\ue232',
|
||||
'chatboxes-filled': '\ue233',
|
||||
'weibo': '\ue260',
|
||||
'weixin': '\ue261',
|
||||
'pengyouquan': '\ue262',
|
||||
'chat': '\ue263',
|
||||
'qq': '\ue264',
|
||||
'videocam': '\ue300',
|
||||
'camera': '\ue301',
|
||||
'mic': '\ue302',
|
||||
'location': '\ue303',
|
||||
'mic-filled': '\ue332',
|
||||
'speech': '\ue332',
|
||||
'location-filled': '\ue333',
|
||||
'micoff': '\ue360',
|
||||
'image': '\ue363',
|
||||
'map': '\ue364',
|
||||
'compose': '\ue400',
|
||||
'trash': '\ue401',
|
||||
'upload': '\ue402',
|
||||
'download': '\ue403',
|
||||
'close': '\ue404',
|
||||
'redo': '\ue405',
|
||||
'undo': '\ue406',
|
||||
'refresh': '\ue407',
|
||||
'star': '\ue408',
|
||||
'plus': '\ue409',
|
||||
'minus': '\ue410',
|
||||
'circle': '\ue411',
|
||||
'checkbox': '\ue411',
|
||||
'close-filled': '\ue434',
|
||||
'clear': '\ue434',
|
||||
'refresh-filled': '\ue437',
|
||||
'star-filled': '\ue438',
|
||||
'plus-filled': '\ue439',
|
||||
'minus-filled': '\ue440',
|
||||
'circle-filled': '\ue441',
|
||||
'checkbox-filled': '\ue442',
|
||||
'closeempty': '\ue460',
|
||||
'refreshempty': '\ue461',
|
||||
'reload': '\ue462',
|
||||
'starhalf': '\ue463',
|
||||
'spinner': '\ue464',
|
||||
'spinner-cycle': '\ue465',
|
||||
'search': '\ue466',
|
||||
'plusempty': '\ue468',
|
||||
'forward': '\ue470',
|
||||
'back': '\ue471',
|
||||
'left-nav': '\ue471',
|
||||
'checkmarkempty': '\ue472',
|
||||
'home': '\ue500',
|
||||
'navigate': '\ue501',
|
||||
'gear': '\ue502',
|
||||
'paperplane': '\ue503',
|
||||
'info': '\ue504',
|
||||
'help': '\ue505',
|
||||
'locked': '\ue506',
|
||||
'more': '\ue507',
|
||||
'flag': '\ue508',
|
||||
'home-filled': '\ue530',
|
||||
'gear-filled': '\ue532',
|
||||
'info-filled': '\ue534',
|
||||
'help-filled': '\ue535',
|
||||
'more-filled': '\ue537',
|
||||
'settings': '\ue560',
|
||||
'list': '\ue562',
|
||||
'bars': '\ue563',
|
||||
'loop': '\ue565',
|
||||
'paperclip': '\ue567',
|
||||
'eye': '\ue568',
|
||||
'arrowup': '\ue580',
|
||||
'arrowdown': '\ue581',
|
||||
'arrowleft': '\ue582',
|
||||
'arrowright': '\ue583',
|
||||
'arrowthinup': '\ue584',
|
||||
'arrowthindown': '\ue585',
|
||||
'arrowthinleft': '\ue586',
|
||||
'arrowthinright': '\ue587',
|
||||
'pulldown': '\ue588',
|
||||
'closefill': '\ue589',
|
||||
'sound': '\ue590',
|
||||
'scan': '\ue612'
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,44 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
// import api from '@/common/api/api.js'
|
||||
import {post,get,DELETE,put} from "@/common/api/request.js"
|
||||
import config from "@/common/api/config.js"
|
||||
import store from "@/store/index"
|
||||
import utils from './utils/utils.js'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
// main.js
|
||||
import uView from 'uview-ui';
|
||||
import tuiIcon from "@/components/icon/icon.vue";
|
||||
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
|
||||
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
|
||||
Vue.use(uView);
|
||||
Vue.component('tuiIcon', tuiIcon);
|
||||
Vue.component('mescroll-body', MescrollBody);
|
||||
Vue.component('mescroll-uni', MescrollUni);
|
||||
import tools from '@/utils/tools'
|
||||
const tui = {
|
||||
toast: function(text, duration, success) {
|
||||
uni.showToast({
|
||||
title: text,
|
||||
icon: success ? 'success' : 'none',
|
||||
duration: duration || 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
import { throttle } from './utils/publicMethods';
|
||||
// Vue.prototype.$api = api;
|
||||
Vue.prototype.$post = post;
|
||||
Vue.prototype.$get = get;
|
||||
Vue.prototype.$DELETE = DELETE;
|
||||
Vue.prototype.$put = put;
|
||||
Vue.prototype.$config = config;
|
||||
Vue.prototype.$tools = tools;
|
||||
Vue.prototype.$utils = utils;
|
||||
Vue.prototype.$throttle = throttle;
|
||||
Vue.prototype.$tui = tui;
|
||||
Vue.prototype.$store = store;
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
{
|
||||
"name" : "谷云智控",
|
||||
"appid" : "__UNI__DA105AD",
|
||||
"description" : "谷云智控是基于物联网、云计算、移动互联、大数据、人工智能灯新技术，搭建能源站整体能源管控体系。",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : 100,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"nvueCompiler" : "uni-app",
|
||||
"compilerVersion" : "3.0.4",
|
||||
"modules" : {
|
||||
"Maps" : {},
|
||||
"Geolocation" : {}
|
||||
},
|
||||
"distribute" : {
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_LOCATION_EXTRA_COMMANDS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_SURFACE_FLINGER\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
|
||||
},
|
||||
"ios" : {
|
||||
"idfa" : false,
|
||||
"dSYMs" : false
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"geolocation" : {
|
||||
"amap" : {
|
||||
"__platform__" : [ "ios", "android" ],
|
||||
"appkey_ios" : "0f4c556fcd2984c83d0d55290dfcecd2",
|
||||
"appkey_android" : "0f4c556fcd2984c83d0d55290dfcecd2"
|
||||
}
|
||||
},
|
||||
"maps" : {
|
||||
"amap" : {
|
||||
"appkey_ios" : "0f4c556fcd2984c83d0d55290dfcecd2",
|
||||
"appkey_android" : "0f4c556fcd2984c83d0d55290dfcecd2"
|
||||
}
|
||||
},
|
||||
"ad" : {}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"quickapp" : {},
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx9cf4a89f7d3adb49",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"postcss" : true,
|
||||
"es6" : false
|
||||
},
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "获取您的位置将为您提供更优质的服务,如将地图定位到你的位置"
|
||||
}
|
||||
},
|
||||
"optimization" : {
|
||||
"subPackages" : true
|
||||
},
|
||||
"runmode" : "liberate", // 开启分包优化后，必须配置资源释放模式
|
||||
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
|
||||
},
|
||||
"h5" : {
|
||||
"devServer" : {
|
||||
"https" : false,
|
||||
"port" : 8055
|
||||
},
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "hc-zhyd-app",
|
||||
"version": "1.0.0",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"flyio": "^0.6.14",
|
||||
"mqtt": "^3.0.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://e.coding.net/fengsl/zhihuiyongdian/hc-app-power.git"
|
||||
},
|
||||
"description": ""
|
||||
}
|
||||
|
|
@ -0,0 +1,813 @@
|
|||
{
|
||||
"easycom": {
|
||||
// 下载安装方式
|
||||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/auth/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录",
|
||||
"navigationBarBackgroundColor": "#1890ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/auth/defalut",
|
||||
"style": {
|
||||
"navigationBarTitleText": "项目"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/auth/passwordLogin",
|
||||
"style": {
|
||||
"navigationBarTitleText": "密码登录",
|
||||
"navigationBarBackgroundColor": "#1890ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/auth/companyRegister",
|
||||
"style": {
|
||||
"navigationBarTitleText": "企业注册"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// "path": "pages/index/enter",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "综合能源管理"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "path": "pages/index/guidePage",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "综合能源管理"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
"path": "pages/tabBar/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单",
|
||||
"enablePullDownRefresh": true
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/home",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"enablePullDownRefresh": true
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/tabBar/project",
|
||||
"style": {
|
||||
"navigationBarTitleText": "项目"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/tabBar/alarm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "实时报警"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/tabBar/my",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
// "navigationStyle": "custom",
|
||||
}
|
||||
}, {
|
||||
"path": "pages/tabBar/scan",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加设备"
|
||||
// "navigationStyle": "custom",
|
||||
}
|
||||
}
|
||||
// , {
|
||||
// "path": "pages/oneselfUser/index",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "个人用户",
|
||||
// "enablePullDownRefresh": true
|
||||
// // "navigationStyle": "custom"
|
||||
// }
|
||||
// }
|
||||
],
|
||||
"subPackages": [
|
||||
// {
|
||||
// "root": "pages/auth/",
|
||||
// "pages": [
|
||||
// // {
|
||||
// // "path": "login",
|
||||
// // "style": {
|
||||
// // "navigationBarTitleText": "登入"
|
||||
// // }
|
||||
// // },
|
||||
// {
|
||||
// "path": "registerGuide",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "选择用户"
|
||||
// }
|
||||
// }, {
|
||||
// "path": "userRegister",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "用户注册"
|
||||
// }
|
||||
// }, {
|
||||
// "path": "companyRegister",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "企业注册"
|
||||
// }
|
||||
// }, {
|
||||
// "path": "forgotPassword",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "忘记密码"
|
||||
// }
|
||||
// }, {
|
||||
// "path": "registerLoading",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "用户注册"
|
||||
// }
|
||||
// }]
|
||||
// },
|
||||
{
|
||||
"root": "pages/home/more/",
|
||||
"pages": [{
|
||||
"path": "moreNavBar",
|
||||
"style": {
|
||||
"navigationBarTitleText": "全部应用"
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/battery/",
|
||||
"pages": [{
|
||||
"path": "battery-info",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电池详情"
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/tabBar/my/",
|
||||
"pages": [{
|
||||
"path": "setup",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置"
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "passwordModify",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改密码"
|
||||
}
|
||||
}, {
|
||||
"path": "maintenanceRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "维保记录",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "help",
|
||||
"style": {
|
||||
"navigationBarTitleText": "帮助"
|
||||
}
|
||||
}, {
|
||||
"path": "about",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于"
|
||||
}
|
||||
}, {
|
||||
"path": "newAlarmRemind",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新警报提醒"
|
||||
}
|
||||
}, {
|
||||
"path": "projectServe",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工程服务",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "addMaintenancePeople",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加维保人员"
|
||||
}
|
||||
}, {
|
||||
"path": "onlineServe",
|
||||
"style": {
|
||||
"navigationBarTitleText": "联系我们",
|
||||
"navigationBarBackgroundColor": "#0066cc"
|
||||
}
|
||||
}, {
|
||||
"path": "aboutUs",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关注我们"
|
||||
}
|
||||
}, {
|
||||
"path": "privacyPolicy",
|
||||
"style": {
|
||||
"navigationBarTitleText": "隐私政策"
|
||||
}
|
||||
}, {
|
||||
"path": "userPolicy",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用户协议"
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"root": "pages/home/smoke/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "烟雾"
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"root": "pages/home/temperature/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "温湿度",
|
||||
"navigationBarBackgroundColor": "#1c9aff"
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "device",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "deviceDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备详情"
|
||||
}
|
||||
}, {
|
||||
"path": "alarmCenter",
|
||||
"style": {
|
||||
"navigationBarTitleText": "告警中心",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "placeManage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "场所管理",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "placeDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "场所详情"
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"root": "pages/home/waterLevel/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "水位水压",
|
||||
"navigationBarBackgroundColor": "#1c9aff"
|
||||
}
|
||||
}, {
|
||||
"path": "realTime",
|
||||
"style": {
|
||||
"navigationBarTitleText": "实时数据",
|
||||
"navigationBarBackgroundColor": "#1c9aff"
|
||||
}
|
||||
}, {
|
||||
"path": "device",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "deviceDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备详情"
|
||||
}
|
||||
}, {
|
||||
"path": "alarmCenter",
|
||||
"style": {
|
||||
"navigationBarTitleText": "告警中心",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "placeManage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "场所管理",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "placeDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "场所详情"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/home/wisdomElectricity/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "全部",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
}, {
|
||||
"path": "lineRoadList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "线路列表"
|
||||
}
|
||||
}, {
|
||||
"path": "timerSetting/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "定时设置"
|
||||
}
|
||||
}, {
|
||||
"path": "timerSetting/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑定时"
|
||||
}
|
||||
}, {
|
||||
"path": "electricityDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备详情"
|
||||
}
|
||||
}, {
|
||||
"path": "switchWarn",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分合闸警示",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "alarmRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "报警记录",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "energyAnalysis/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用能分析",
|
||||
"navigationBarBackgroundColor": "#1c9aff"
|
||||
}
|
||||
}, {
|
||||
"path": "energyAnalysis/monthDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "月度分析"
|
||||
}
|
||||
}, {
|
||||
"path": "wbjl/maintenanceRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "维保信息列表",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "wbjl/maintenanceDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "维保信息"
|
||||
}
|
||||
}, {
|
||||
"path": "wbjl/addRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": " 添加维保信息"
|
||||
}
|
||||
}, {
|
||||
"path": "realTime/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "实时状态"
|
||||
}
|
||||
}, {
|
||||
"path": "realTime/parameterSetup",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备参数调整"
|
||||
}
|
||||
}, {
|
||||
"path": "realTime/alarmConfig",
|
||||
"style": {
|
||||
"navigationBarTitleText": "告警配置"
|
||||
}
|
||||
}, {
|
||||
"path": "historyCurve/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史状态",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/home/electricalFire/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电气火灾"
|
||||
}
|
||||
}, {
|
||||
"path": "device",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备"
|
||||
}
|
||||
}, {
|
||||
"path": "smokeDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "烟感设备详情"
|
||||
}
|
||||
}, {
|
||||
"path": "cameraDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "摄像头设备详情"
|
||||
}
|
||||
}, {
|
||||
"path": "runingRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "运行记录"
|
||||
}
|
||||
}, {
|
||||
"path": "alarmCenter",
|
||||
"style": {
|
||||
"navigationBarTitleText": "告警中心"
|
||||
}
|
||||
}, {
|
||||
"path": "alarmDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "记录详情"
|
||||
}
|
||||
}, {
|
||||
"path": "placeManage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "场所管理"
|
||||
}
|
||||
}, {
|
||||
"path": "placeDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "场所详情"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/home/warnAnalysis/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "警告分析"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/project/",
|
||||
"pages": [{
|
||||
"path": "index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "项目详情"
|
||||
}
|
||||
}, {
|
||||
"path": "projectUser",
|
||||
"style": {
|
||||
"navigationBarTitleText": "项目成员列表",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "deviceGroup/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备分组",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "deviceGroup/deviceList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分组设备列表",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "space/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "空间管理",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "space/deviceList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "空间设备管理",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "space/addDeviceList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "空间设备添加",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "equipmentStatus/status",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备列表",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "projectMap",
|
||||
"style": {
|
||||
"navigationBarTitleText": "项目分布"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电气安全监管"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/allAlarm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "全部报警",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/temperature",
|
||||
"style": {
|
||||
"navigationBarTitleText": "温度",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/temperatureAlarm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "温度报警"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/leakageCurrent",
|
||||
"style": {
|
||||
"navigationBarTitleText": "漏电流",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/temperature-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "温度历史趋势"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/leakage-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电流历史趋势"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/overload",
|
||||
"style": {
|
||||
"navigationBarTitleText": "过流过载"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/leakageAlarm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "漏电报警"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/leakageSelfChecking",
|
||||
"style": {
|
||||
"navigationBarTitleText": "漏电自检"
|
||||
}
|
||||
}, {
|
||||
"path": "electricalSafeMange/otherAlarm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "智慧能源管理"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/electricity",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电量",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/electricity-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电量明细"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/load",
|
||||
"style": {
|
||||
"navigationBarTitleText": "负载",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/control",
|
||||
"style": {
|
||||
"navigationBarTitleText": "控制管理"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/iotBreaker",
|
||||
"style": {
|
||||
"navigationBarTitleText": "物联网断路器",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}, {
|
||||
"path": "smartEnergy/lineRoadNaming",
|
||||
"style": {
|
||||
"navigationBarTitleText": "线路取名和功率限定"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/user/",
|
||||
"pages": [{
|
||||
"path": "renew",
|
||||
"style": {
|
||||
"navigationBarTitleText": "续费充值"
|
||||
}
|
||||
}, {
|
||||
"path": "equipmentManage",
|
||||
"style": {
|
||||
// "navigationBarTitleText":"设备管理",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "equipmentSetting",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置"
|
||||
// "navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "instructRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "记录"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/my/",
|
||||
"pages": [{
|
||||
"path": "helpCenter",
|
||||
"style": {
|
||||
"navigationBarTitleText": "帮助中心",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#999",
|
||||
"selectedColor": "#0066cc",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"list": [{
|
||||
"pagePath": "pages/tabBar/home",
|
||||
"text": "首页",
|
||||
"iconPath": "static/images/toolbar/home.png",
|
||||
"selectedIconPath": "static/images/toolbar/home-active.png"
|
||||
}, {
|
||||
"pagePath": "pages/tabBar/project",
|
||||
"text": "项目",
|
||||
"iconPath": "static/images/toolbar/project.png",
|
||||
"selectedIconPath": "static/images/toolbar/project-active.png"
|
||||
}, {
|
||||
"pagePath": "pages/tabBar/scan",
|
||||
"text": "扫一扫",
|
||||
"iconPath": "static/images/toolbar/scan.png",
|
||||
"selectedIconPath": "static/images/toolbar/scan-active.png"
|
||||
}, {
|
||||
"pagePath": "pages/tabBar/alarm",
|
||||
"text": "报警",
|
||||
"iconPath": "static/images/toolbar/alarm.png",
|
||||
"selectedIconPath": "static/images/toolbar/alarm-active.png"
|
||||
}, {
|
||||
"pagePath": "pages/tabBar/my",
|
||||
"text": "我的",
|
||||
"iconPath": "static/images/toolbar/my.png",
|
||||
"selectedIconPath": "static/images/toolbar/my-active.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#CEDCFF",
|
||||
// "navigationBarBackgroundColor": "#11BF96",
|
||||
"backgroundColor": "#F0F0F0"
|
||||
},
|
||||
"condition": { //模式配置，仅开发期间生效
|
||||
"current": 0, //当前激活的模式(list 的索引项)
|
||||
"list": [
|
||||
{
|
||||
"path": "pages/auth/passwordLogin",
|
||||
"name": "默认页面" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/order",
|
||||
"name": "订单" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/my/helpCenter",
|
||||
"name": "帮助中心" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/auth/passwordLogin",
|
||||
"name": "密码登录" ,//模式名称
|
||||
"query": "mode=1&user=17859911022&pwd=888888"
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/realTime/parameterSetup",
|
||||
"name": "设备参数调整" ,//模式名称
|
||||
"query": "deviceId=ed41e7462f5041aa98780ce3062765d0&deviceKey=1267240812100022"
|
||||
},
|
||||
{
|
||||
"path": "pages/project/space/index",
|
||||
"name": "标签管理" ,//模式名称
|
||||
// "query": "projectId=62&projectRole=root&typeName=设备组"
|
||||
"query": "projectId=62&projectRole=root&typeName=空间"
|
||||
},
|
||||
{
|
||||
"path": "pages/project/space/deviceList",
|
||||
"name": "空间设备管理" ,//模式名称
|
||||
"query": "labelCode=16&projectId=63&projectRole=root&tagType=57135cfcdfa74d39b05aa04237893121&isDefault=Y"
|
||||
},
|
||||
{
|
||||
"path": "pages/project/deviceGroup/index",
|
||||
"name": "设备分组" ,//模式名称
|
||||
"query": "projectId=62"
|
||||
},
|
||||
{
|
||||
"path": "pages/project/space/addDeviceList",
|
||||
"name": "空间设备添加" ,//模式名称
|
||||
"query": "labelCode=16"
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/realTime/alarmConfig",
|
||||
"name": "告警配置" ,//模式名称
|
||||
"query": "deviceKey=1267240812100027"
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/scan",
|
||||
"name": "扫码" //模式名称
|
||||
},{
|
||||
"path": "pages/tabBar/home",
|
||||
"name": "首页" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/project",
|
||||
"name": "项目" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/project/index",
|
||||
"name": "项目详情" ,//模式名称
|
||||
"query": "projectId=62&projectCode=bd80a3c80c394dae8a2d8138713f2bcf"
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/my",
|
||||
"name": "我的" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/my/onlineServe",
|
||||
"name": "联系我们" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/project/equipmentStatus/status",
|
||||
"name": "设备列表" ,//模式名称
|
||||
"query": "projectId=62&adminFlag=true&projectRole=root"
|
||||
},
|
||||
{
|
||||
"path": "pages/project/projectUser",
|
||||
"name": "用户列表" ,//模式名称
|
||||
"query": "projectId=56"
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/alarm",
|
||||
"name": "报警" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/timerSetting/index",
|
||||
"name": "定时设置" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/index",
|
||||
"name": "智慧用电" //模式名称
|
||||
},
|
||||
{
|
||||
"path": "pages/home/warnAnalysis/index",
|
||||
"name": "警告分析"
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/electricityDetail",
|
||||
"name": "设备详情",
|
||||
"query": "deviceId=d137ad68c6204a3c9d58fc032aea4805"
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/energyAnalysis/index",
|
||||
"name": "用能分析",
|
||||
"query": "deviceId=26162221dc3340c59099c77cff0a170b&prodKey=B7L-NET-G1(4G+485+LAN)&deviceKey=12502012410109101875&projectName=18046102872的项目&deviceName=内部总闸（勿操作）"
|
||||
},
|
||||
{
|
||||
"path": "pages/project/electricalSafeMange/index",
|
||||
"name": "电气",
|
||||
"query": "projectId=16"
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/realTime/index",
|
||||
"name": "设备实时状态",
|
||||
"query": "deviceId=1ca512016cc749a7a12fe0116c9429bb&prodKey=B7L-NET-G1(4G+485+LAN)&deviceKey=12502012410109105377&projectName=成套柜样品&deviceName=配电柜演示箱0001"
|
||||
},
|
||||
{
|
||||
"path": "pages/home/wisdomElectricity/energyAnalysis/monthDetail",
|
||||
"name": "用能分析月份详情",
|
||||
"query": "deviceId=e36f0cb0bc5f442e939747d1f070d2a0&month=2022-07"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<style lang='scss' scoped>
|
||||
.companyRegister{
|
||||
width: 100%;
|
||||
&-form{
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="companyRegister">
|
||||
<view class="companyRegister-form">
|
||||
<u-form class="" :model="form" ref="uForm" label-width="240">
|
||||
<u-form-item required label="企业名称" prop="companyName"><u-input v-model="form.companyName" placeholder="请输入企业名称" /></u-form-item>
|
||||
<u-form-item required label="企业社会统一码" prop="companyCode"><u-input v-model="form.companyCode" placeholder="请输入企业社会统一码" /></u-form-item>
|
||||
<u-form-item required label="法人姓名" prop="legalName"><u-input v-model="form.legalName" placeholder="请输入法人姓名" /></u-form-item>
|
||||
<u-form-item required label="登录账号" prop="username"><u-input v-model="form.username" placeholder="请输入登录账号" /></u-form-item>
|
||||
<u-form-item required label="登录密码" prop="password"><u-input v-model="form.password" type="password" placeholder="请输入登录密码" /></u-form-item>
|
||||
<u-form-item required label="手机号码" prop="phoneNumber"><u-input v-model="form.phoneNumber" type="text" placeholder="请输入手机号码" /></u-form-item>
|
||||
<u-form-item required label="验证码" prop="messageCode">
|
||||
<u-input placeholder="请输入验证码" v-model="form.messageCode" type="text"></u-input>
|
||||
<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
|
||||
<u-button class="mt30" type="primary" @click="submit">提交</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _this;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
codeTips: '', // 验证码文字
|
||||
form: {
|
||||
companyName: '',
|
||||
companyCode:"",
|
||||
legalName: '',
|
||||
username:"",
|
||||
password: '',
|
||||
phoneNumber:"",
|
||||
messageCode:""
|
||||
},
|
||||
rules: {
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
message: '企业名称不能为空',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
companyCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入企业社会统一码',
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
legalName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入法人姓名',
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入登入账号',
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
phoneNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号码',
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
messageCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机验证码',
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
_this = this;
|
||||
},
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
methods: {
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码',
|
||||
mask: true
|
||||
})
|
||||
this.$post("/sms/registered",{phoneNumber:this.form.phoneNumber,expirationTime:90,smsType:1}).then((res)=>{
|
||||
if(res.code === 200){
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送', 3000);
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}else{
|
||||
this.$tui.toast(res.msg, 3000);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送', 3000);
|
||||
}
|
||||
},
|
||||
codeChange(text) {
|
||||
this.codeTips = text;
|
||||
},
|
||||
submit() {
|
||||
this.$refs.uForm.validate(valid => {
|
||||
console.log(valid,"valid");
|
||||
if (valid) {
|
||||
let registerData = {
|
||||
tenantName:this.form.companyName,
|
||||
tenantCode:this.form.companyCode,
|
||||
corporation:this.form.legalName,
|
||||
username:this.form.username,
|
||||
password:this.form.password,
|
||||
phoneNumber:this.form.phoneNumber,
|
||||
captcha:this.form.messageCode,
|
||||
}
|
||||
this.$post("/system/registered",registerData).then((res)=>{
|
||||
console.log(res,"res");
|
||||
if(res.code === 200){
|
||||
uni.reLaunch({
|
||||
url:`./registerLoading?phonenumber=${this.form.phoneNumber}`
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 3000,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch((err)=>{
|
||||
console.log(err,"err");
|
||||
})
|
||||
// if (this.form.messageCode) {
|
||||
// console.log('验证通过');
|
||||
// uni.reLaunch({
|
||||
// url:`./registerLoading?phonenumber=${this.form.phonenumber}`
|
||||
// })
|
||||
// } else{
|
||||
// this.$u.toast('请输入短信验证码');
|
||||
// }
|
||||
|
||||
} else {
|
||||
console.log('验证失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,666 @@
|
|||
<style>
|
||||
page{
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-circle-progress{
|
||||
// transform: rotate(-90deg);
|
||||
}
|
||||
.password-edit-box{
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 30rpx;
|
||||
margin-top: 30rpx;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 25rpx;
|
||||
.password-edit-txt{
|
||||
}
|
||||
.password-edit-btn-box{
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
.u-progress-content{
|
||||
// transform: rotate(90deg);
|
||||
// margin-right: -40rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
text-align: center;
|
||||
.u-progress-info{
|
||||
font-size: 30rpx;
|
||||
color: #349BFF;
|
||||
// transform: rotate(90deg);
|
||||
}
|
||||
.item-content-left-txt{
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.project{
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
background-color: #F9F9F9;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.project-header{
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
background: #f9f9f9;
|
||||
&-btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.map-box{
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30rpx;
|
||||
height: 294rpx;
|
||||
.project-map{
|
||||
width: 690rpx;
|
||||
height: 334rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
padding: $paddingTB 30rpx;
|
||||
.project-item{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 6rpx 0px rgba(158,158,158,0.2);
|
||||
border-radius: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
margin-bottom: 20rpx;
|
||||
.item-header{
|
||||
padding: 20rpx;
|
||||
.item-header-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item-header-top-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.diconfont{
|
||||
color: #015EEA;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.item-name{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.item-header-time{
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.item-header-bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10rpx 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
.diconfont{
|
||||
font-size: 22rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item-content-left{
|
||||
width: 250rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.item-content-progress-box{
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// height: 100rpx;
|
||||
// overflow: hidden;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.item-content-line{
|
||||
height: 162rpx;
|
||||
width: 2rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
.item-content-right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.content-item{
|
||||
width:50%;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 4rpx;
|
||||
.item-value{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarm-box{
|
||||
border-top: 2rpx solid #eee;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
.alarm-item{
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN;
|
||||
.item-value{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.item-label{
|
||||
margin-top: 10rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-box{
|
||||
color: #666;
|
||||
&-info{
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
&-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-title-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
padding: 20rpx;
|
||||
background: #DFEAFF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.project-box-summary{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
color: #000;
|
||||
&-item{
|
||||
width: 33%;
|
||||
display: flex;
|
||||
padding-bottom: 10rpx;
|
||||
font-size: 25rpx;
|
||||
&-label{
|
||||
width: 150rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-value{
|
||||
color: #FA7B26;
|
||||
}
|
||||
}
|
||||
}
|
||||
.electric-box{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
color: #000;
|
||||
&-item{
|
||||
width: 46%;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 25rpx;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f7f9fd;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
padding: 10rpx 0;
|
||||
&-label{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
&-value{
|
||||
// color: #FA7B26;
|
||||
text{
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.areaPopup-content{
|
||||
padding: 40rpx;
|
||||
}
|
||||
}
|
||||
::v-deep .u-btn--primary--plain{
|
||||
background-color:#fff !important;
|
||||
}
|
||||
.slot-content{
|
||||
padding: 30rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="project">
|
||||
<view class="project-header">
|
||||
<view class="map-box">
|
||||
<map class="project-map" :scale="11" :latitude="mapLatitude" :longitude="mapLongitude" :markers="mapMarkers"></map>
|
||||
</view>
|
||||
<u-search style="background: #fff;" placeholder="搜索项目" :show-action="true" v-model="searchValue" @custom="onSearchFn" @search="onSearchFn"></u-search>
|
||||
</view>
|
||||
<view >
|
||||
<u-empty text="项目列表" margin-top="200" mode="list">
|
||||
<view slot="bottom">
|
||||
<u-button type="primary" @click="loginShow=true">添加项目</u-button>
|
||||
</view>
|
||||
</u-empty>
|
||||
|
||||
|
||||
</view>
|
||||
<u-modal v-model="loginShow" confirm-text="去登录" @confirm="goLogin">
|
||||
<view class="slot-content">
|
||||
请先登录
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getLenPx} from "@/utils/mapCalculate.js"
|
||||
var QQMapWX = require('@/utils/qqmap-wx-jssdk.min');
|
||||
// 实例化API核心类
|
||||
var qqmapsdk = new QQMapWX({
|
||||
key: 'XQTBZ-HP5CG-FRFQN-QCFTJ-LTG76-LSF6G'
|
||||
});
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginShow:false,
|
||||
passwordStatus:false,
|
||||
customStyle: {
|
||||
color: '#0066CC',
|
||||
borderColor:'#0066CC',
|
||||
height:'60rpx'
|
||||
},
|
||||
// 地区选择------------start
|
||||
isAllChecked:false,
|
||||
isOpenCity:false,
|
||||
isOpenCounty:false,
|
||||
|
||||
areaPopupFlag:false,
|
||||
provinceSelectFlag:false,
|
||||
citySelectFlag:false,
|
||||
countySelectFlag:false,
|
||||
|
||||
provinceList:null,
|
||||
cityList:null,
|
||||
countyList:null,
|
||||
areaForm:{
|
||||
province:"",
|
||||
city:"",
|
||||
county:""
|
||||
},
|
||||
// 地区选择------------end
|
||||
itemStyle:{
|
||||
marginTop:"30rpx",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius:"20rpx",
|
||||
backgroundColor:"#fff",
|
||||
padding:"22rpx",
|
||||
},
|
||||
searchValue:"",
|
||||
projectList:null,
|
||||
regionalismCode:0,
|
||||
mapLatitude:"26.04",
|
||||
mapLongitude:"119.21",
|
||||
mapMarkers: [],
|
||||
opts: {
|
||||
color: ["#2897ff"],
|
||||
padding: undefined,
|
||||
title: {
|
||||
name: "80%",
|
||||
fontSize: 12,
|
||||
color: "#2897ff"
|
||||
},
|
||||
subtitle: {
|
||||
name: "设备在线率",
|
||||
fontSize: 10,
|
||||
color: "#666666"
|
||||
},
|
||||
extra: {
|
||||
arcbar: {
|
||||
type: "default",
|
||||
width: 6,
|
||||
backgroundColor: "#f3f4f5",
|
||||
startAngle: 0.75,
|
||||
endAngle: 0.25,
|
||||
gap: 2,
|
||||
linearType: "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// this.getUserInfo()
|
||||
},
|
||||
onShow() {
|
||||
if(this.passwordStatus == true){
|
||||
// this.getUserInfo()
|
||||
}
|
||||
// this.mescroll.resetUpScroll()
|
||||
},
|
||||
methods: {
|
||||
goLogin(){
|
||||
// 在C页面内 navigateBack，将返回A页面
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
getUserInfo() {
|
||||
this.$get("/system/user/profile").then((res) => {
|
||||
console.log(res, "res");
|
||||
if (!res.data) return;
|
||||
if(res.data.updateTime == undefined){
|
||||
this.passwordStatus = true;
|
||||
}else{
|
||||
this.passwordStatus = false;
|
||||
}
|
||||
uni.setStorageSync("tenantInfo", res.data.tenant)
|
||||
uni.setStorageSync("userInfo", res.data)
|
||||
})
|
||||
},
|
||||
goPassword(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabBar/my/passwordModify'
|
||||
})
|
||||
},
|
||||
getOnlineRate(item){
|
||||
let deviceTotal = item.tenantIndexVo.deviceTotal||0;
|
||||
let onlineTotal = item.tenantIndexVo.onlineTotal||0;
|
||||
let onlineRate = (onlineTotal/deviceTotal);
|
||||
return onlineRate;
|
||||
},
|
||||
getOnlineRateTxt(item){
|
||||
let deviceTotal = item.tenantIndexVo.deviceTotal||0;
|
||||
let onlineTotal = item.tenantIndexVo.onlineTotal||0;
|
||||
if(deviceTotal === 0 && onlineTotal === 0){
|
||||
return '';
|
||||
}else{
|
||||
let onlineRateTxt = ((onlineTotal/deviceTotal)*100).toFixed(1) + '%';
|
||||
return onlineRateTxt;
|
||||
}
|
||||
},
|
||||
restoreDefaultFn(){
|
||||
this.regionalismCode = 0;
|
||||
this.areaForm = {
|
||||
province:"",
|
||||
city:"",
|
||||
county:""
|
||||
}
|
||||
this.confirmFindAreaFn();
|
||||
},
|
||||
goProjectMapFn(){
|
||||
console.log("点击地图")
|
||||
let projectListStr = this.projectList && this.projectList.length>0?JSON.stringify(this.projectList):"";
|
||||
uni.navigateTo({
|
||||
url:`/pages/project/projectMap?projectList=${projectListStr}`
|
||||
})
|
||||
},
|
||||
// 提交项目
|
||||
confirmFindAreaFn(){
|
||||
this.areaPopupFlag = false;
|
||||
this.mescroll.resetUpScroll();
|
||||
},
|
||||
|
||||
// 地区选择------------start
|
||||
countyConfirmFn(e){
|
||||
this.areaForm.county = e[0].label;
|
||||
this.regionalismCode = e[0].value;
|
||||
},
|
||||
cityConfirmFn(e){
|
||||
this.areaForm.city = e[0].label;
|
||||
this.regionalismCode = e[0].value;
|
||||
this.isOpenCounty = true;
|
||||
this.countyList = null;
|
||||
this.areaForm.county = "";
|
||||
},
|
||||
provinceConfirmFn(e){
|
||||
this.areaForm.province = e[0].label;
|
||||
this.regionalismCode = e[0].value;
|
||||
this.isOpenCity = true;
|
||||
this.isOpenCounty = false;
|
||||
this.countyList = null;
|
||||
this.cityList = null;
|
||||
this.areaForm.city = "";
|
||||
this.areaForm.county = "";
|
||||
},
|
||||
openCountySelectFn(){
|
||||
this.countySelectFlag = true;
|
||||
// this.countyList = null;
|
||||
if(this.regionalismCode===0 || !this.isOpenCounty || (this.countyList && this.countyList.length>0)) return;
|
||||
this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
|
||||
console.log(res,"res");
|
||||
if(res.code == 200){
|
||||
this.countyList = res.data.map((item)=>{
|
||||
return {
|
||||
value: item.regionalismCode,
|
||||
label: item.regionalismName
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 打开城市
|
||||
openCitySelectFn(){
|
||||
this.citySelectFlag = true;
|
||||
// this.cityList = null;
|
||||
if(this.regionalismCode===0 || !this.isOpenCity || (this.cityList && this.cityList.length>0)) return;
|
||||
|
||||
this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
|
||||
console.log(res,"res");
|
||||
if(res.code == 200){
|
||||
this.cityList = res.data.map((item)=>{
|
||||
return {
|
||||
value: item.regionalismCode,
|
||||
label: item.regionalismName
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 打开省
|
||||
openProvinceSelectFn(){
|
||||
this.provinceSelectFlag = true;
|
||||
if(this.provinceList && this.provinceList.length>0) return;
|
||||
this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
|
||||
console.log(res,"res");
|
||||
if(res.code == 200){
|
||||
this.provinceList = res.data.map((item)=>{
|
||||
return {
|
||||
value: item.regionalismCode,
|
||||
label: item.regionalismName
|
||||
}
|
||||
});
|
||||
console.log(this.provinceList,"this.provinceList");
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 地区选择------------end
|
||||
onSearchFn(e){
|
||||
this.loginShow=true
|
||||
// this.mescroll.resetUpScroll();
|
||||
},
|
||||
setProjectAddress(){
|
||||
this.addressShow = false;
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
qqmapsdk.reverseGeocoder({
|
||||
location:{
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
},
|
||||
success: (res1) =>{
|
||||
console.log("res1",res1.result);
|
||||
this.$put("/iot/project",{
|
||||
...this.projectList[0],
|
||||
projectLat:res.latitude,
|
||||
projectLng:res.longitude,
|
||||
projectAddress:res.address+res.name,
|
||||
regionalismCode:res1.result.ad_info.adcode
|
||||
}).then(editres=>{
|
||||
console.log("editres",editres)
|
||||
this.addressShow = false;
|
||||
if(editres.code == 200){
|
||||
this.mescroll.resetUpScroll();
|
||||
}else{
|
||||
this.$refs.uToast.show({
|
||||
title: editres.msg,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$refs.uToast.show({
|
||||
title: err.msg,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
/*上拉加载的回调*/
|
||||
upCallback(page) {
|
||||
// let pageNum = page.num; // 页码, 默认从1开始
|
||||
// let pageSize = page.size; // 页长, 默认每页10条
|
||||
// let obj = {
|
||||
// pageSize:pageSize,
|
||||
// pageNum:pageNum,
|
||||
// // projectName:this.searchValue
|
||||
// // projectId:this.projectIdVal,
|
||||
// // deviceState:this.screeningValue,
|
||||
// }
|
||||
// if(this.regionalismCode) obj.regionalismCode = this.regionalismCode;
|
||||
// if(this.searchValue) obj.projectName = this.searchValue;
|
||||
// this.$get("/app/project/table",obj).then((res)=>{
|
||||
// if (res.rows && res.rows.length>0) {
|
||||
|
||||
// // 接口返回的当前页数据列表 (数组)
|
||||
// let curPageData = res.rows;
|
||||
// // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||||
// let curPageLen = curPageData.length;
|
||||
|
||||
// this.mapLatitude = curPageData[0].projectLat;
|
||||
// this.mapLongitude = curPageData[0].projectLng;
|
||||
// curPageData.forEach((item,index)=>{
|
||||
// this.mapMarkers.push({
|
||||
// latitude: item.projectLat,
|
||||
// longitude: item.projectLng,
|
||||
// iconPath: '../../static/images/project/location-blue.png',
|
||||
// label:{
|
||||
// content:item.projectName,
|
||||
// textAlign:'right',
|
||||
// color:'#2897ff',
|
||||
// anchorX: -(0.5 * getLenPx(item.projectName, 9)),
|
||||
// fontSize:9
|
||||
// },
|
||||
// width:18,
|
||||
// height:20
|
||||
// })
|
||||
// let res = {
|
||||
// series: [
|
||||
// {
|
||||
// name: "正确率",
|
||||
// data: this.getOnlineRate(item)
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
// let opts = JSON.parse(JSON.stringify(this.opts));
|
||||
// this.opts.title.name = this.getOnlineRateTxt(item)
|
||||
// curPageData[index].chartData = JSON.parse(JSON.stringify(res));
|
||||
// curPageData[index].opts = JSON.parse(JSON.stringify(this.opts));
|
||||
// })
|
||||
|
||||
// //设置列表数据
|
||||
// if(pageNum == 1) this.projectList = []; //如果是第一页需手动置空列表
|
||||
// this.projectList = this.projectList.concat(curPageData); //追加新数据
|
||||
// this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
||||
// // this.mescroll.endByPage(curPageLen, res.data.total)
|
||||
// // this.mescroll.endSuccess(curPageData.length);
|
||||
// if(res.total >= 1){
|
||||
// if(!curPageData[0].projectAddress && pageNum == 1){
|
||||
// this.addressShow = true;
|
||||
// }else if(!this.projectList[0].projectAddress){
|
||||
// this.addressShow = true;
|
||||
// }else{
|
||||
// this.addressShow = false;
|
||||
// }
|
||||
// }
|
||||
// } else{
|
||||
// this.projectList = [];
|
||||
// this.mescroll.endErr();
|
||||
// this.mescroll.showEmpty();
|
||||
// // this.mescroll.endUpScroll(true);
|
||||
// }
|
||||
// }).catch(()=>{
|
||||
// //联网失败, 结束加载
|
||||
// this.mescroll.endErr();
|
||||
// }).finally(()=>{
|
||||
// // this.dropdownIsOpen = false;
|
||||
// })
|
||||
},
|
||||
enterDetailFn(item){
|
||||
uni.navigateTo({
|
||||
url:`../project/index?projectId=${item.projectId}&projectCode=${item.projectCode}`
|
||||
})
|
||||
},
|
||||
goDeviceList(item){
|
||||
uni.navigateTo({
|
||||
url:`../project/equipmentStatus/status?projectId=${item.projectId}`
|
||||
})
|
||||
},
|
||||
onCollapseChangeFn(e,x,y){
|
||||
console.log(e,"e");
|
||||
console.log(x,"x");
|
||||
console.log(y,"y")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<style lang="scss" scoped>
|
||||
.register-ctn{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 60rpx;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.register-form{
|
||||
background-color: #fff;
|
||||
border-radius: $uni-border-radius-lg;
|
||||
padding: 40rpx;
|
||||
box-shadow: $box-shadow;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.login-bg{
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.login-header{
|
||||
text-align: center;
|
||||
&-img{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
&-text{
|
||||
font-size: 46rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.login-function-ctn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 20rpx;
|
||||
// padding: 30rpx 0rpx;
|
||||
}
|
||||
.login-form-title{
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 800;
|
||||
color: #262626;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="register-ctn">
|
||||
<view class="login-bg">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
|
||||
</view>
|
||||
<view class="login-header">
|
||||
<view class="">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-app-logo.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-logo.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- <view class="login-header-text">综合能源管理</view> -->
|
||||
</view>
|
||||
<view class="register-form">
|
||||
<view class="login-form-title">找回密码</view>
|
||||
<u-form :model="form" :rules="rules" ref="uForm">
|
||||
<u-form-item label="用户类型" label-width="170" left-icon="account">
|
||||
<u-input @click="openUserTypeSelectFn" v-model="form.userType" type="select" placeholder="请选择用户类型"/>
|
||||
<u-select v-model="usetTypeShow" :default-value="[0]" @confirm="userTypeConfirmFn" :list="usetTypeList"></u-select>
|
||||
</u-form-item>
|
||||
<u-form-item label="手机号" label-width="170" prop="phonenumber" left-icon="phone">
|
||||
<u-input v-model="form.phonenumber" maxlength="11" placeholder="请输入手机号"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="验证码" label-width="170" prop="code" left-icon="email">
|
||||
<u-input v-model="form.code" maxlength="8" placeholder="请输入验证码"/>
|
||||
<u-button slot="right" type="primary" size="mini" @click="getCode">{{tips}}</u-button>
|
||||
</u-form-item>
|
||||
<u-form-item label="新密码" label-width="170" prop="password" left-icon="lock">
|
||||
<u-input v-model="form.password" type="password" placeholder="请输入密码"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="重复密码" label-width="170" prop="rePassword" left-icon="lock">
|
||||
<u-input v-model="form.rePassword" type="password" placeholder="请确认密码"/>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="login-function-ctn">
|
||||
<text class="text--base--main" @click="goLoginFn">去登入</text>
|
||||
</view>
|
||||
<view class="mt30">
|
||||
<u-button @click="confirmEditFn" type="primary" shape="circle">确认修改</u-button>
|
||||
</view>
|
||||
<u-verification-code seconds="90" ref="uCode" @change="codeChange"></u-verification-code>
|
||||
<u-modal ref="uModal" v-model="isSuccess" content="密码修改成功,现在前往登入" confirm-text="好的" @confirm="confirmGoPage" :async-close="true"></u-modal>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
usetTypeShow:false,
|
||||
form:{
|
||||
equipment:"",
|
||||
phonenumber:"",
|
||||
code:"",
|
||||
password:"",
|
||||
rePassword:"",
|
||||
userType:'企业用户',
|
||||
userTypeVal: 'TENANT'
|
||||
},
|
||||
tips:'',
|
||||
usetTypeList:[
|
||||
// {
|
||||
// value: 'PERSONAL',
|
||||
// label: '普通用户'
|
||||
// },
|
||||
{
|
||||
value: 'TENANT',
|
||||
label: '企业用户'
|
||||
}],
|
||||
rules:{
|
||||
equipment:[{
|
||||
required:true,
|
||||
message: '请输入设备',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
phonenumber:[{
|
||||
required:true,
|
||||
message:"请输入电话号码",
|
||||
trigger:"blur"
|
||||
},{
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
return this.$u.test.mobile(value);
|
||||
},
|
||||
message: '手机号码不正确',
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ['change','blur'],
|
||||
}],
|
||||
code:[{
|
||||
required:true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
password:[{
|
||||
required:true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur',
|
||||
},{
|
||||
min:6,
|
||||
max:18,
|
||||
message: '请输入6-18位密码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
rePassword:[{
|
||||
required:true,
|
||||
message: '请重新输入密码',
|
||||
trigger: 'blur',
|
||||
},{
|
||||
validator: (rule, value, callback) => {
|
||||
return value === this.form.password;
|
||||
},
|
||||
message: '两次输入的密码不相等',
|
||||
trigger: ['change','blur'],
|
||||
}],
|
||||
},
|
||||
isSuccess: false
|
||||
}
|
||||
},
|
||||
onReady(){
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
onLoad(e) {
|
||||
this.form.userType = e.userType=="user"?"普通用户":"企业用户";
|
||||
this.form.userTypeVal = e.userType=="user"?"PERSONAL":"TENANT";
|
||||
},
|
||||
methods:{
|
||||
userTypeConfirmFn(e){
|
||||
console.log(e,"e");
|
||||
this.form.userType = e[0].label;
|
||||
this.form.userTypeVal = e[0].value;
|
||||
},
|
||||
openUserTypeSelectFn(){
|
||||
this.usetTypeShow = true;
|
||||
},
|
||||
goLoginFn(){
|
||||
uni.reLaunch({
|
||||
url:"./login"
|
||||
})
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
this.$post("/sms/password",{phoneNumber:this.form.phonenumber,expirationTime:90}).then((res)=>{
|
||||
if(res.code === 200){
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送', 3000);
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送', 3000);
|
||||
}
|
||||
},
|
||||
// 提交修改
|
||||
confirmEditFn(){
|
||||
this.$refs.uForm.validate(valid => {
|
||||
console.log(valid,"valid")
|
||||
if (valid) {
|
||||
// if(!this.model.agreement) return this.$u.toast('请勾选协议');
|
||||
console.log('验证通过');
|
||||
if(!this.form.userType){
|
||||
this.$tui.toast("请选择用户类型", 3000);
|
||||
return;
|
||||
}
|
||||
let url = "/system/user/profile/retrievePwd";
|
||||
this.$put(url,{
|
||||
newPassword:this.form.password,
|
||||
phoneNumber:this.form.phonenumber,
|
||||
userType: this.form.userTypeVal,
|
||||
// captcha:this.form.code,
|
||||
code:this.form.code
|
||||
}).then((res)=>{
|
||||
console.log(res,"Res");
|
||||
if(res.code==200){
|
||||
// this.$tui.toast('修改成功', 2000, true);
|
||||
// uni.reLaunch({
|
||||
// url:"./login"
|
||||
// })
|
||||
this.isSuccess = true;
|
||||
}else{
|
||||
this.$tui.toast(res.msg, 3000);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('验证失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
confirmGoPage() {
|
||||
this.isSuccess = true;
|
||||
uni.reLaunch({
|
||||
url:"./login"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,431 @@
|
|||
<style lang="scss" scoped>
|
||||
.login-ctn{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 500rpx;
|
||||
background: #fff;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.login-bg{
|
||||
width: 100%;
|
||||
height: 515rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.login-header{
|
||||
// text-align: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
.login-header-img-box{
|
||||
margin-top: 132rpx;
|
||||
margin-left: 2rpx;
|
||||
border-radius: 50%;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
&-img{
|
||||
display: block;
|
||||
// width: 502rpx;
|
||||
// height: 226rpx;
|
||||
width: 198rpx;
|
||||
height: 198rpx;
|
||||
// border-radius: 50%;
|
||||
// margin-top: 40rpx;
|
||||
}
|
||||
&-text{
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.login-form-ctn{
|
||||
// padding: 0rpx 60rpx;
|
||||
// margin-top: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.login-form{
|
||||
// box-shadow: $box-shadow;
|
||||
background-color: #fff;
|
||||
// border-radius: 20rpx;
|
||||
margin-top: 120rpx;
|
||||
padding: 20rpx 60rpx;
|
||||
&-title{
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 800;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-button-ctn{
|
||||
// padding: 0rpx 0;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.register-box{
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
color: #848484;
|
||||
font-weight: 500;
|
||||
}
|
||||
.login-function-ctn{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 30rpx 0rpx;
|
||||
}
|
||||
.login-version-info{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 40rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #aaa;
|
||||
}
|
||||
.protocol-box{
|
||||
padding: 20rpx 0;
|
||||
color: #f5f5f5;
|
||||
font-size: 26rpx;
|
||||
text{
|
||||
color: #0066cc;
|
||||
}
|
||||
}
|
||||
.other-login-box{
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.other-login-item{
|
||||
.other-login-bg{
|
||||
width:100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #0066cc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.other-login-name{
|
||||
color: #7d7d7d;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="login-ctn">
|
||||
<view class="login-bg">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
|
||||
</view>
|
||||
<view class="login-header">
|
||||
<view class="login-header-img-box">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="login-header-text">{{appConfig.name}}</view>
|
||||
</view>
|
||||
<view class="login-form-ctn">
|
||||
<view class="login-form" v-if="checkLoading" style="display: flex;justify-content: center;padding-top: 20px;align-items: center;">
|
||||
<u-loading mode="flower" size="50"></u-loading>
|
||||
<text>加载中</text>
|
||||
</view>
|
||||
<view class="login-form" v-else>
|
||||
<u-button v-if="loginToken" type="primary" shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',height:'100rpx' }" @click="wxLogin()">一键登录</u-button>
|
||||
<u-button v-else type="primary" shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',height:'100rpx' }" open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin">一键手机号注册</u-button>
|
||||
<view class="protocol-box">
|
||||
<u-checkbox v-model="protocolStatus">阅读并同意以下协议<text @click.stop="goPolicy">《用户协议》</text></u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-login-box">
|
||||
<view class="other-login-item" @click="goPasswordLogin">
|
||||
<view class="other-login-bg">
|
||||
<u-icon name="lock-fill" color="#fff" size="56"></u-icon>
|
||||
</view>
|
||||
<text class="other-login-name">密码登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="login-version-info">
|
||||
<view>Copyright 2022-2024 {{appConfig.companyName}} Powered By DSservice</view>
|
||||
<view>{{appConfig.contractRecordNumber || ''}}</view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let userToken = '';
|
||||
import config from "@/common/api/config.js"
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
protocolStatus:false,
|
||||
usetTypeValue: '企业用户',
|
||||
list: [
|
||||
{
|
||||
name: '普通用户',
|
||||
},
|
||||
{
|
||||
name: '企业用户',
|
||||
}
|
||||
],
|
||||
captchaData:null,
|
||||
current: 0,
|
||||
form:{
|
||||
username:"",
|
||||
password:"",
|
||||
code:""
|
||||
},
|
||||
rules: {
|
||||
// 字段名称
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号/账号',
|
||||
trigger: ['change','blur'],
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['change','blur'],
|
||||
}
|
||||
]
|
||||
},
|
||||
// 用户openid
|
||||
wxOpenid:'',
|
||||
// 后端是否有该用户
|
||||
IsUser:false,
|
||||
loginToken:'',
|
||||
checkLoading:true,
|
||||
isInit:true,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
appConfig() {
|
||||
return this.$store.state.app.appConfig
|
||||
},
|
||||
},
|
||||
onLoad(e) {
|
||||
userToken = uni.getStorageSync('userToken');
|
||||
console.log("userToken",userToken)
|
||||
if(userToken){
|
||||
uni.switchTab({
|
||||
url:"../tabBar/project"
|
||||
})
|
||||
}
|
||||
console.log("logo",this.$store.state.app.appConfig)
|
||||
this.usetTypeValue = e.userType=="user"?"普通用户":"企业用户";
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// #ifdef MP-WEIXIN
|
||||
if(!userToken){
|
||||
this.getWxCode();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
// 跳转密码登录页
|
||||
goPasswordLogin(){
|
||||
uni.reLaunch({
|
||||
url: './passwordLogin'
|
||||
});
|
||||
},
|
||||
goPolicy(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabBar/my/userPolicy'
|
||||
})
|
||||
},
|
||||
getWxCode(){
|
||||
this.loginToken = '';
|
||||
uni.login({
|
||||
provider: 'weixin', //使用微信登录
|
||||
success: (loginRes) => {
|
||||
console.log("loginCode",loginRes.code);
|
||||
this.wxOpenid = loginRes.code;
|
||||
this.checkWxUserStatus(loginRes.code)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 这里向后端获取用户注册状态
|
||||
checkWxUserStatus(code){
|
||||
this.$post('/checkWxRegister',{loginCode:code}).then(res=>{
|
||||
console.log("用户注册状态",res)
|
||||
if(res.code == 200){
|
||||
// 有token直接登录
|
||||
if(res.token){
|
||||
this.loginToken = res.token;
|
||||
}else{
|
||||
this.loginToken = '';
|
||||
if(this.isInit){
|
||||
uni.navigateTo({
|
||||
url:'/pages/auth/defalut'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
this.loginToken = '';
|
||||
if(this.isInit){
|
||||
uni.navigateTo({
|
||||
url:'/pages/auth/defalut'
|
||||
})
|
||||
}
|
||||
}
|
||||
this.isInit = false;
|
||||
this.checkLoading = false;
|
||||
}).catch(err=>{
|
||||
this.loginToken = '';
|
||||
this.checkLoading = false;
|
||||
if(this.isInit){
|
||||
uni.navigateTo({
|
||||
url:'/pages/auth/defalut'
|
||||
})
|
||||
}
|
||||
this.isInit = false;
|
||||
})
|
||||
},
|
||||
// 微信登录，使用token直接登录
|
||||
wxLogin(){
|
||||
if(!this.protocolStatus){
|
||||
this.$refs.uToast.show({
|
||||
title: '请先阅读并同意用户协议',
|
||||
})
|
||||
}else if(this.loginToken){
|
||||
this.$tui.toast('登录成功', 3000, true);
|
||||
this.$store.dispatch('setLogin', this.loginToken);
|
||||
uni.setStorage({
|
||||
key:'userType',
|
||||
data: this.loginToken,
|
||||
}).then(res => {
|
||||
if (this.usetTypeValue=="普通用户") {
|
||||
uni.reLaunch({
|
||||
url:"../oneselfUser/index"
|
||||
})
|
||||
} else{
|
||||
uni.switchTab({
|
||||
url:"../tabBar/project"
|
||||
})
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.$refs.uToast.show({
|
||||
title: '登录失败请再次尝试',
|
||||
type: 'error',
|
||||
})
|
||||
this.wxLogin();
|
||||
}
|
||||
},
|
||||
// 微信获取手机号登录，openid + 手机号code
|
||||
wxPhoneLogin(e){
|
||||
const { errMsg = '', errno = '', code = '' } = e.detail;
|
||||
console.log("phonecode",code);
|
||||
if (errMsg === 'getPhoneNumber:ok') { // 用户同意授权
|
||||
if(!this.protocolStatus){
|
||||
this.$refs.uToast.show({
|
||||
title: '请先阅读并同意用户协议',
|
||||
})
|
||||
}else{
|
||||
uni.login({
|
||||
provider: 'weixin', //使用微信登录
|
||||
success: (loginRes) => {
|
||||
console.log("loginCode",loginRes.code);
|
||||
this.$post('/wxLogin',{loginCode:loginRes.code,phoneCode:code}).then(res=>{
|
||||
console.log(res)
|
||||
if(res.code == 200 && res.token){
|
||||
this.$refs.uToast.show({
|
||||
title: '登录成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$store.dispatch('setLogin', res.token);
|
||||
uni.setStorage({
|
||||
key:'userType',
|
||||
data: this.loginToken,
|
||||
}).then(res => {
|
||||
if (this.usetTypeValue=="普通用户") {
|
||||
uni.reLaunch({
|
||||
url:"../oneselfUser/index"
|
||||
})
|
||||
} else{
|
||||
uni.switchTab({
|
||||
url:"../tabBar/project"
|
||||
})
|
||||
}
|
||||
})
|
||||
}else if(!res.token){
|
||||
this.$refs.uToast.show({
|
||||
title: '获取token失败',
|
||||
type: 'error',
|
||||
})
|
||||
}else{
|
||||
this.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
}).catch(error=>{
|
||||
this.$refs.uToast.show({
|
||||
title: error.msg,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
if (errno === 1400001) { // 手机号授权购买次数不足跳转账密登录页面
|
||||
this.triggerEvent('cancel')
|
||||
this.$refs.uToast.show({
|
||||
icon: false,
|
||||
title: '手机号授权次数不足，请更换登录方式或联系管理员充值',
|
||||
type: 'error',
|
||||
duration: 3500
|
||||
})
|
||||
} else { // 用户取消授权
|
||||
this.$refs.uToast.show({
|
||||
title: '您取消了授权',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,464 @@
|
|||
<style lang="scss" scoped>
|
||||
.login-ctn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 500rpx;
|
||||
background: #fff;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.login-bg {
|
||||
width: 100%;
|
||||
height: 515rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.login-header-img-box {
|
||||
margin-top: 132rpx;
|
||||
margin-left: 2rpx;
|
||||
border-radius: 50%;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&-img {
|
||||
display: block;
|
||||
width: 198rpx;
|
||||
height: 198rpx;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.login-form-ctn {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.login-form {
|
||||
background-color: #fff;
|
||||
padding: 20rpx 60rpx;
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 800;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button-ctn {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.login-function-ctn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 30rpx 0rpx;
|
||||
}
|
||||
|
||||
.login-version-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 40rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.protocol-box {
|
||||
padding: 20rpx 0;
|
||||
color: #f5f5f5;
|
||||
font-size: 26rpx;
|
||||
|
||||
text {
|
||||
color: #0066cc;
|
||||
}
|
||||
}
|
||||
|
||||
.other-login-box {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.other-login-item {
|
||||
.other-login-bg {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #07c160;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.other-login-name {
|
||||
color: #7d7d7d;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="login-ctn">
|
||||
<view class="login-bg">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
|
||||
</view>
|
||||
<view class="login-header">
|
||||
<view class="login-header-img-box">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="login-header-text">{{appConfig.name}}</view>
|
||||
</view>
|
||||
<view class="login-form-ctn">
|
||||
<view class="login-form">
|
||||
<u-form :model="form" :rules="rules" ref="uForm">
|
||||
<u-form-item label=" " label-width="60" prop="username" left-icon="account"
|
||||
:left-icon-style="{ color: '#ccc', fontSize: '30rpx' }">
|
||||
<u-input v-model="form.username" placeholder="请输入手机号/账号" />
|
||||
</u-form-item>
|
||||
<u-form-item label=" " label-width="60" prop="password" left-icon="lock-open"
|
||||
:left-icon-style="{ color: '#ccc', fontSize: '36rpx' }">
|
||||
<u-input class="password-input" v-model="form.password" type="password" placeholder="请输入密码" />
|
||||
</u-form-item>
|
||||
<!-- <u-form-item label=" " label-width="60" prop="code" left-icon="chat"
|
||||
:left-icon-style="{ color: '#ccc', fontSize: '34rpx' }">
|
||||
<u-image slot="right" mode="scaleToFill" width="160" height="60" @click="getCodeImageFn"
|
||||
:src="'data:image/jpg;base64,' + captchaData.img"></u-image>
|
||||
<u-input v-model="form.code" placeholder="请输入验证码" />
|
||||
</u-form-item> -->
|
||||
</u-form>
|
||||
<!-- <view class="login-function-ctn" v-if="current===0">
|
||||
<text class="text--base--grey" @click="goForgotPasswordFn">忘记密码?</text>
|
||||
</view> -->
|
||||
<view class="login-button-ctn">
|
||||
<u-button shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)' , height:'100rpx' }"
|
||||
@click="submit" type="primary">立即登录</u-button>
|
||||
</view>
|
||||
<view class="protocol-box">
|
||||
<u-checkbox v-model="protocolStatus">阅读并同意以下协议<text @click.stop="goPolicy">《用户协议》</text></u-checkbox>
|
||||
</view>
|
||||
<view class="other-login-box">
|
||||
<view class="other-login-item" @click="goWxLogin">
|
||||
<view class="other-login-bg">
|
||||
<u-icon name="weixin-fill" color="#fff" size="56"></u-icon>
|
||||
</view>
|
||||
<text class="other-login-name">微信登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="login-version-info">
|
||||
<view>Copyright 2022-2024 {{appConfig.companyName}} Powered By DSservice</view>
|
||||
<view>{{appConfig.contractRecordNumber || ''}}</view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let userToken = '';
|
||||
import config from "@/common/api/config.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
protocolStatus: false,
|
||||
usetTypeValue: '企业用户',
|
||||
list: [{
|
||||
name: '普通用户',
|
||||
},
|
||||
{
|
||||
name: '企业用户',
|
||||
}
|
||||
],
|
||||
captchaData: null,
|
||||
current: 0,
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
code: ""
|
||||
},
|
||||
mode:null,
|
||||
rules: {
|
||||
// 字段名称
|
||||
username: [{
|
||||
required: true,
|
||||
message: '请输入手机号/账号',
|
||||
trigger: ['change', 'blur'],
|
||||
}, ],
|
||||
password: [{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: ['change', 'blur'],
|
||||
}],
|
||||
code: [{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['change', 'blur'],
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
appConfig() {
|
||||
return this.$store.state.app.appConfig
|
||||
},
|
||||
},
|
||||
onLoad(e) {
|
||||
// 普通二维码参数转小程序参数
|
||||
if (e.q && e.q != "undefined") { //扫码进入
|
||||
const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
|
||||
//GetWxMiniProgramUrlParam() 这个方法是解析链接地址中的参数方法
|
||||
e = this.GetWxMiniProgramUrlParam(qrUrl); //此处就是我们要获取的参数 json
|
||||
}
|
||||
console.log("当前参数",e)
|
||||
if(e.mode){
|
||||
this.mode = e.mode;
|
||||
}
|
||||
if(e.mode == '1'){ //mode:1 带密码参数直接登录
|
||||
this.form.username = e.user || '';
|
||||
this.form.password = e.pwd || '';
|
||||
this.autoLogin()
|
||||
}else{
|
||||
userToken = uni.getStorageSync('userToken');
|
||||
console.log("userToken", userToken)
|
||||
if (userToken) {
|
||||
uni.switchTab({
|
||||
url: "../tabBar/project"
|
||||
})
|
||||
} else {
|
||||
// this.getCodeImageFn();
|
||||
}
|
||||
}
|
||||
|
||||
this.usetTypeValue = e.userType == "user" ? "普通用户" : "企业用户";
|
||||
|
||||
},
|
||||
onShow() {
|
||||
if(this.mode != '1'){
|
||||
uni.getStorage({
|
||||
key: 'username',
|
||||
}).then(res => {
|
||||
// 如果返回数组为两位就是正确
|
||||
if (res.length == 2) {
|
||||
this.form.username = res[1].data;
|
||||
}
|
||||
return uni.getStorage({
|
||||
key: 'password',
|
||||
})
|
||||
}).then(res => {
|
||||
if (res.length == 2) {
|
||||
this.form.password = res[1].data;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
methods: {
|
||||
GetWxMiniProgramUrlParam(url) {
|
||||
let theRequest = {};
|
||||
if (url.indexOf("#") != -1) {
|
||||
const str = url.split("#")[1];
|
||||
const strs = str.split("&");
|
||||
for (let i = 0; i < strs.length; i++) {
|
||||
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
|
||||
}
|
||||
} else if (url.indexOf("?") != -1) {
|
||||
const str = url.split("?")[1];
|
||||
const strs = str.split("&");
|
||||
for (let i = 0; i < strs.length; i++) {
|
||||
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
|
||||
}
|
||||
}
|
||||
return theRequest;
|
||||
},
|
||||
// 跳转密码登录页
|
||||
goWxLogin(){
|
||||
uni.reLaunch({
|
||||
url: './login'
|
||||
});
|
||||
},
|
||||
goPolicy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/tabBar/my/userPolicy'
|
||||
})
|
||||
},
|
||||
goForgotPasswordFn() {
|
||||
uni.navigateTo({
|
||||
url: `./forgotPassword?userType=${this.usetTypeValue=="普通用户"?"user":"company"}`
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
getCodeImageFn() {
|
||||
this.$get("/captchaImage").then((res) => {
|
||||
console.log(res, "resss");
|
||||
this.captchaData = res;
|
||||
})
|
||||
},
|
||||
// 自动登录
|
||||
autoLogin(){
|
||||
uni.request({
|
||||
url: config.baseUrl + "/login",
|
||||
method: "POST",
|
||||
data: {
|
||||
username: this.form.username,
|
||||
password: this.form.password,
|
||||
},
|
||||
header: {
|
||||
UserType: this.usetTypeValue == "普通用户" ? "PERSONAL" : "TENANT"
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
if (res.data.token) {
|
||||
this.$refs.uToast.show({
|
||||
title: '登录成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$store.dispatch('setLogin', res.data.token);
|
||||
uni.setStorage({
|
||||
key: 'userType',
|
||||
data: this.usetTypeValue,
|
||||
}).then(res => {
|
||||
return uni.setStorage({
|
||||
key: 'username',
|
||||
data: this.form.username,
|
||||
})
|
||||
}).then(res => {
|
||||
return uni.setStorage({
|
||||
key: 'password',
|
||||
data: this.form.password,
|
||||
})
|
||||
}).then(res => {
|
||||
setTimeout(() => {
|
||||
if (this.usetTypeValue == "普通用户") {
|
||||
uni.reLaunch({
|
||||
url: "../oneselfUser/index"
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "../tabBar/project"
|
||||
})
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
} else {
|
||||
this.$u.toast(res.data.msg)
|
||||
this.form.code = "";
|
||||
// this.getCodeImageFn();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
if(!this.protocolStatus){
|
||||
this.$refs.uToast.show({
|
||||
title: '请先阅读并同意用户协议',
|
||||
})
|
||||
}else{
|
||||
this.$refs.uForm.validate(valid => {
|
||||
if (valid) {
|
||||
uni.request({
|
||||
url: config.baseUrl + "/login",
|
||||
method: "POST",
|
||||
data: {
|
||||
username: this.form.username,
|
||||
password: this.form.password,
|
||||
// code: this.form.code,
|
||||
// uuid: this.captchaData.uuid,
|
||||
},
|
||||
header: {
|
||||
UserType: this.usetTypeValue == "普通用户" ? "PERSONAL" : "TENANT"
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
if (res.data.token) {
|
||||
this.$refs.uToast.show({
|
||||
title: '登录成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$store.dispatch('setLogin', res.data.token);
|
||||
uni.setStorage({
|
||||
key: 'userType',
|
||||
data: this.usetTypeValue,
|
||||
}).then(res => {
|
||||
return uni.setStorage({
|
||||
key: 'username',
|
||||
data: this.form.username,
|
||||
})
|
||||
}).then(res => {
|
||||
return uni.setStorage({
|
||||
key: 'password',
|
||||
data: this.form.password,
|
||||
})
|
||||
}).then(res => {
|
||||
setTimeout(() => {
|
||||
if (this.usetTypeValue == "普通用户") {
|
||||
uni.reLaunch({
|
||||
url: "../oneselfUser/index"
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "../tabBar/project"
|
||||
})
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
} else {
|
||||
this.$u.toast(res.data.msg)
|
||||
this.form.code = "";
|
||||
// this.getCodeImageFn();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('验证失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<style lang='scss' scoped>
|
||||
.registerGuide{
|
||||
width: 100%;
|
||||
&-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* bottom: 0;
|
||||
right: 0; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-btn{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 300rpx;
|
||||
width: 100%;
|
||||
padding: 0 40rpx;
|
||||
&-company,&-user{
|
||||
width: 100%;
|
||||
height: 130rpx;
|
||||
background: #FEB531;
|
||||
box-shadow: 0px 0px 10px 0px rgba(192, 192, 192, 0.5);
|
||||
border-radius: 8px;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
&-user{
|
||||
background-color: #B8E3FC;
|
||||
color: #364F82;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="registerGuide">
|
||||
<view class="registerGuide-bg">
|
||||
<u-image mode="scaleToFill" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/my/online-bg.jpg"></u-image>
|
||||
</view>
|
||||
<!-- <view class="registerGuide-btn">
|
||||
<view class="registerGuide-btn-company flex-center" @click="goRegisterCompanyFn">企业用户</view>
|
||||
<view class="registerGuide-btn-user flex-center" @click="goRegisterUserFn">普通用户</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goRegisterUserFn(){
|
||||
// uni.navigateTo({
|
||||
// url:"./userRegister"
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url:"./login?userType=user"
|
||||
})
|
||||
},
|
||||
goRegisterCompanyFn(){
|
||||
// uni.navigateTo({
|
||||
// url:"./companyRegister"
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url:"./login?userType=company"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<style lang='scss' scoped>
|
||||
.registerLoading{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40rpx $paddingLR;
|
||||
&-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 50rpx;
|
||||
}
|
||||
&-text{
|
||||
color: #666;
|
||||
}
|
||||
.bottom-btn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 40rpx ;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="registerLoading">
|
||||
<view class="registerLoading-content">
|
||||
<u-icon name="checkbox-mark" size="140" color="#60C13D"></u-icon>
|
||||
<view class="registerLoading-text pt20">
|
||||
<text>恭喜您注册成功，您的账号(</text>
|
||||
<text class="">{{phonenumber}}</text>
|
||||
<text>)</text>
|
||||
<text v-if="userType!='userType'">系统正在审核中，请耐心等待。</text>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bottom-btn">
|
||||
<u-button type="primary" @click="goLoginFn">去登入</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phonenumber:"",
|
||||
userType:"user"
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.userType = e.userType;
|
||||
this.phonenumber = e.phonenumber;
|
||||
},
|
||||
methods: {
|
||||
goLoginFn(){
|
||||
uni.reLaunch({
|
||||
url:"./login"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<style lang="scss" scoped>
|
||||
.register-ctn{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 60rpx;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.register-form{
|
||||
background-color: #fff;
|
||||
border-radius: $uni-border-radius-lg;
|
||||
padding: 40rpx;
|
||||
box-shadow: $box-shadow;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.login-bg{
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.login-header{
|
||||
text-align: center;
|
||||
&-img{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
&-text{
|
||||
font-size: 46rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.login-function-ctn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class="register-ctn">
|
||||
<view class="login-bg">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
|
||||
</view>
|
||||
<view class="login-header">
|
||||
<view class="">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-app-logo.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-logo.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<view class="login-header-text">综合能源管理</view>
|
||||
</view>
|
||||
<view class="register-form">
|
||||
<u-form :model="form" :rules="rules" ref="uForm">
|
||||
<u-form-item label="用户名" label-width="170" prop="username" left-icon="account">
|
||||
<u-input v-model="form.username" placeholder="请输入用户名"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="密码" label-width="170" prop="password" left-icon="lock">
|
||||
<u-input v-model="form.password" type="password" placeholder="请输入密码"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="手机号" label-width="170" prop="phonenumber" left-icon="phone">
|
||||
<u-input v-model="form.phonenumber" maxlength="11" placeholder="请输入手机号"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="验证码" label-width="170" prop="code" left-icon="email">
|
||||
<u-input v-model="form.code" maxlength="8" placeholder="请输入验证码"/>
|
||||
<u-button slot="right" type="primary" size="mini" @click="getCode">{{tips}}</u-button>
|
||||
</u-form-item>
|
||||
<!-- <u-form-item label="重复密码" label-width="170" prop="rePassword" left-icon="lock">
|
||||
<u-input v-model="form.rePassword" placeholder="请确认密码"/>
|
||||
</u-form-item> -->
|
||||
</u-form>
|
||||
<view class="login-function-ctn">
|
||||
<text class="text--base--main" @click="goLoginFn">已有账号</text>
|
||||
<text class="text--base--grey" @click="goForgotPasswordFn">忘记密码?</text>
|
||||
</view>
|
||||
<view class="mt30">
|
||||
<u-button @click="registerFn" type="primary" shape="circle">注册</u-button>
|
||||
</view>
|
||||
<u-verification-code seconds="90" ref="uCode" @change="codeChange"></u-verification-code>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
form:{
|
||||
username:"",
|
||||
phonenumber:"",
|
||||
code:"",
|
||||
password:"",
|
||||
},
|
||||
tips:'',
|
||||
rules:{
|
||||
username:[{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
phonenumber:[{
|
||||
required:true,
|
||||
message:"请输入电话号码",
|
||||
trigger:"blur"
|
||||
},{
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
return this.$u.test.mobile(value);
|
||||
},
|
||||
message: '手机号码不正确',
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ['change','blur'],
|
||||
}],
|
||||
code:[{
|
||||
required:true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
password:[{
|
||||
required:true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur',
|
||||
},{
|
||||
min:6,
|
||||
max:18,
|
||||
message: '请输入6-18位密码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady(){
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
goLoginFn(){
|
||||
uni.reLaunch({
|
||||
url:"./login"
|
||||
})
|
||||
},
|
||||
goForgotPasswordFn(){
|
||||
uni.navigateTo({
|
||||
url:"./forgotPassword"
|
||||
})
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
// sms/registered
|
||||
this.$post("/sms/registered",{phoneNumber:this.form.phonenumber,expirationTime:90,smsType:1}).then((res)=>{
|
||||
if(res.code === 200){
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送', 3000);
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}else{
|
||||
this.$tui.toast(res.msg, 3000);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送', 3000);
|
||||
}
|
||||
},
|
||||
// end() {
|
||||
// this.$u.toast('倒计时结束');
|
||||
// },
|
||||
// start() {
|
||||
// this.$u.toast('倒计时开始');
|
||||
// },
|
||||
registerFn(){
|
||||
this.$refs.uForm.validate(valid => {
|
||||
console.log(valid,"valid")
|
||||
if (valid) {
|
||||
// if(!this.model.agreement) return this.$u.toast('请勾选协议');
|
||||
console.log('验证通过');
|
||||
// system/personal
|
||||
// this.$post("/system/registered",{
|
||||
this.$post("/system/personal",{
|
||||
username:this.form.username,
|
||||
password:this.form.password,
|
||||
phoneNumber:this.form.phonenumber,
|
||||
captcha:this.form.code,
|
||||
}).then((res)=>{
|
||||
console.log(res,"Res");
|
||||
if(res.code==200){
|
||||
this.$tui.toast('注册成功', 3000, true);
|
||||
uni.reLaunch({
|
||||
url:`./login?userType=user`
|
||||
})
|
||||
// uni.reLaunch({
|
||||
// url:`./registerLoading?phonenumber=${this.form.phonenumber}`
|
||||
// })
|
||||
}else{
|
||||
this.$tui.toast(res.msg, 3000);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('验证失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,393 @@
|
|||
<style lang="scss" scoped>
|
||||
.battery-info-ctn{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.bottom-nav-list-ctn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 12rpx 0;
|
||||
z-index: 2;
|
||||
box-shadow: 0px 0px 4px rgba(192,192,192,0.7);
|
||||
background-color: #fff;
|
||||
.bottom-nav-box{
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&-text{
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
.middle-icon{
|
||||
padding: 10rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 100%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -40rpx;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
box-shadow: $box-shadow;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
.middle-text{
|
||||
position: absolute;
|
||||
bottom: -2rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-ctn{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// width: 750rpx;
|
||||
// height: 1334rpx;
|
||||
}
|
||||
.battery-info-content{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40rpx;
|
||||
z-index: 2;
|
||||
width: 680rpx;
|
||||
transform: translateX(-50%);
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
&-signal{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.battery-info-signal{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.battery-info-signal-gps,.battery-info-signal-gsm{
|
||||
display: flex;
|
||||
&-text{
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
.battery-info-row-two{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
.track-popup-ctn{
|
||||
width: 600rpx;
|
||||
.track-popup-title{
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 6rpx;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
.track-popup-start-time{
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
padding-top: 40rpx;
|
||||
&-label{
|
||||
padding-left: 15rpx;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
}
|
||||
.track-popup-end-time{
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
padding-top: 40rpx;
|
||||
&-label{
|
||||
padding-left: 15rpx;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
}
|
||||
.track-popup-day{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20rpx;
|
||||
&-btn{
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
}
|
||||
.tarck-popup-button{
|
||||
display: flex;
|
||||
border-top: 1px solid #eee;
|
||||
&-query,&-cancel{
|
||||
width: 50%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-query{
|
||||
border-left: 1px solid #eee;
|
||||
color: #1989FA;
|
||||
}
|
||||
}
|
||||
.alarm-list{
|
||||
|
||||
}
|
||||
.alarm-list-title{
|
||||
padding-left: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.alarm-list{
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
.bottom-trace-ctn{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 160rpx;
|
||||
transform: translateX(-50%);
|
||||
// width: 300rpx;
|
||||
z-index: 2;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
font-weight: 550;
|
||||
}
|
||||
</style>
|
||||
<!-- :style="{'height': pageHeight + 'px'}" -->
|
||||
<template>
|
||||
<view class="battery-info-ctn">
|
||||
<map class="map-ctn" :markers="markers" :latitude="26.036984" :longitude="119.210329" :show-compass="false"></map>
|
||||
<view class="battery-info-content">
|
||||
<u-collapse>
|
||||
<u-collapse-item title="电池信息" >
|
||||
<view class="battery-info-signal ">
|
||||
<view class="battery-info-signal-gps">
|
||||
<view class="battery-info-signal-gps-text">GPS</view>
|
||||
<!-- <view class=""></view> -->
|
||||
<signal value="85"></signal>
|
||||
</view>
|
||||
<view class="battery-info-signal-gsm ">
|
||||
<view class="battery-info-signal-gsm-text">GSM</view>
|
||||
<signal value="60"></signal>
|
||||
</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">名称：哒哒哒哒哒哒</view>
|
||||
<view class="battery-info-row-right">状态：静止(54天)</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">编号：027023590110</view>
|
||||
<view class="battery-info-row-right">设防状态：撤防</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">控制：已通电</view>
|
||||
<view class="battery-info-row-right">定位类型：静止(54天)</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">当日里程：0</view>
|
||||
<view class="battery-info-row-right">总里程：499.1</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">电压：57.79（主店接通）</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">通信：2020年9月25日11:53:28</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">定位：2020年9月25日11:53:39</view>
|
||||
</view>
|
||||
<view class="battery-info-row-two pt20">
|
||||
<view class="battery-info-row-left">地址：福建省宁德市周宁县944县道</view>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<view class="bottom-nav-list-ctn">
|
||||
<view class="bottom-nav-box" @click="openTrackFn">
|
||||
<tui-icon name="guiji" size="52"></tui-icon>
|
||||
<view class="bottom-nav-box-text pt10">轨迹</view>
|
||||
</view>
|
||||
<view class="bottom-nav-box" @click="openAlarmListFn">
|
||||
<tui-icon name="lingdang" size="52"></tui-icon>
|
||||
<view class="bottom-nav-box-text pt10">报警</view>
|
||||
</view>
|
||||
<view class="bottom-nav-box" @click="beginTraceFn">
|
||||
<view class="middle-icon pb10">
|
||||
<tui-icon name="zhuizong" size="52" :color="traceShowFlag?'#39CD5F':'#999999'"></tui-icon>
|
||||
</view>
|
||||
<view class="middle-text">追踪</view>
|
||||
</view>
|
||||
<view class="bottom-nav-box" @click="openBlackoutFn">
|
||||
<tui-icon name="duankailianjie" size="52"></tui-icon>
|
||||
<view class="bottom-nav-box-text pt10">断电</view>
|
||||
</view>
|
||||
<view class="bottom-nav-box" @click="electricityFlag = true">
|
||||
<tui-icon name="lianjie" size="52"></tui-icon>
|
||||
<view class="bottom-nav-box-text pt10">通电</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 轨迹 -->
|
||||
<u-popup v-model="trackFlag" mode="center" border-radius="24">
|
||||
<view class="track-popup-ctn">
|
||||
<view class="track-popup-title">轨迹</view>
|
||||
<view class="track-popup-start-time">
|
||||
<u-icon name="clock"></u-icon>
|
||||
<text class="track-popup-start-time-label">开始时间</text>
|
||||
<text>2020-09-25 00:00:00</text>
|
||||
<u-picker mode="time" v-model="startTimePicker" :params="startTimeParams" default-time="2020-07-02 13:01:00"></u-picker>
|
||||
</view>
|
||||
<view class="track-popup-end-time">
|
||||
<u-icon name="clock"></u-icon>
|
||||
<text class="track-popup-end-time-label">结束时间</text>
|
||||
<text>2020-09-25 15:27:42</text>
|
||||
<u-picker mode="time" v-model="endTimePicker" :params="startTimeParams" default-time="2020-07-02 13:01:00"></u-picker>
|
||||
</view>
|
||||
<view class="track-popup-day">
|
||||
<view class="track-popup-day-btn">当天</view>
|
||||
<view class="track-popup-day-btn">昨天</view>
|
||||
<view class="track-popup-day-btn">前天</view>
|
||||
</view>
|
||||
<view class="tarck-popup-button">
|
||||
<view class="tarck-popup-button-cancel" @click="trackFlag = false">取消</view>
|
||||
<view class="tarck-popup-button-query" @click="tarckQueryBtnFn">查询</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 警报列表 -->
|
||||
<u-popup v-model="alarmFlag" mode="bottom" border-radius="16" :closeable="true">
|
||||
<view class="alarm-content">
|
||||
<view class="alarm-list-title">报警</view>
|
||||
<scroll-view scroll-y="true" style="height: 300rpx;">
|
||||
<view class="alarm-list">
|
||||
<view v-for="index in 20" :key="index">
|
||||
第{{index}}个报警
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 追踪时间 -->
|
||||
<view class="bottom-trace-ctn" v-if="traceShowFlag">
|
||||
<text>追踪时间：{{traceTimeStr}}</text>
|
||||
</view>
|
||||
<!-- 断电 -->
|
||||
<u-modal v-model="blackoutFlag" content="您确定是否进行断电操作" :show-cancel-button="true" :confirm="blackoutConfirmFn"></u-modal>
|
||||
<!-- 通电 -->
|
||||
<u-modal v-model="electricityFlag" content="您确定是否进行通电操作" :show-cancel-button="true" :confirm="electricityConfirmFn"></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import signal from "../../components/signal/signal"
|
||||
let _this;
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
markers:[{
|
||||
id:"1",
|
||||
iconPath:"http://static.drgyen.com/app/hc-app-power/images/car.png",
|
||||
latitude:"26.036984",
|
||||
longitude:"119.210329",
|
||||
width:40,
|
||||
height:40
|
||||
}],
|
||||
trackFlag:false, // 轨迹
|
||||
alarmFlag:false, // 警报
|
||||
startTimePicker:false, // 开始时间选项
|
||||
endTimePicker:false, // 结束时间选项
|
||||
startTimeStr:"", // 开始时间
|
||||
endTimeStr:"", // 结束时间
|
||||
startTimeParams: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: true,
|
||||
minute: true,
|
||||
second: true
|
||||
},
|
||||
// 追踪模块--------start
|
||||
traceSeconds:0, // 秒
|
||||
traceMinute:0, // 分钟
|
||||
traceHour:0, // 小时
|
||||
traceTimeStr:"00:00:00", // 计时
|
||||
traceTimer:null,
|
||||
traceShowFlag:false,
|
||||
// 追踪模块--------end
|
||||
blackoutFlag:false,
|
||||
electricityFlag:false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
_this = this;
|
||||
this.startTimeStr = new Date();
|
||||
console.log(this.startTimeStr,"this.startTimeStr")
|
||||
// let timer = setInterval(this.startTimer(),1000);
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.traceTimer);
|
||||
},
|
||||
methods:{
|
||||
openTrackFn(){
|
||||
console.log("打开轨迹");
|
||||
this.trackFlag = true;
|
||||
},
|
||||
openAlarmListFn(){
|
||||
console.log("打开警报");
|
||||
this.alarmFlag = true;
|
||||
},
|
||||
// 轨迹查询按钮
|
||||
tarckQueryBtnFn(){
|
||||
this.trackFlag = false;
|
||||
},
|
||||
// 开始追踪
|
||||
beginTraceFn(){
|
||||
this.traceShowFlag = !this.traceShowFlag;
|
||||
if (this.traceShowFlag) {
|
||||
this.traceTimer = setInterval(function(){
|
||||
_this.startTimer();
|
||||
},1000)
|
||||
} else{
|
||||
clearInterval(this.traceTimer);
|
||||
}
|
||||
|
||||
},
|
||||
// 计时
|
||||
startTimer () {
|
||||
this.traceSeconds += 1;
|
||||
if (this.traceSeconds >= 60) {
|
||||
this.traceSeconds = 0;
|
||||
this.traceMinute = this.traceMinute + 1;
|
||||
}
|
||||
if (this.traceMinute >= 60) {
|
||||
this.traceMinute = 0;
|
||||
this.traceHour = this.traceHour + 1;
|
||||
}
|
||||
this.traceTimeStr = (this.traceHour < 10 ? '0' + this.traceHour : this.traceHour) + ':' + (this.traceMinute < 10 ? '0' + this.traceMinute : this.traceMinute) + ':' + (this.traceSeconds < 10 ? '0' + this.traceSeconds : this.traceSeconds);
|
||||
},
|
||||
// 打开断电提示框
|
||||
openBlackoutFn(){
|
||||
this.blackoutFlag = true;
|
||||
},
|
||||
// 确认断电
|
||||
blackoutConfirmFn(){
|
||||
this.blackoutFlag = false;
|
||||
},
|
||||
// 确认通电
|
||||
electricityConfirmFn(){
|
||||
this.electricityFlag = false;
|
||||
}
|
||||
},
|
||||
components:{signal}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<style lang='scss' scoped>
|
||||
.alarmCenter{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FBF8FB;
|
||||
&-header{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
&-picker{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-search{
|
||||
width: calc(100% - 200rpx);
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #FBF8FB;
|
||||
}
|
||||
&-box{
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: $box-shadow;
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
&-rightTop-icon{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
|
||||
}
|
||||
&-top{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
&-info{
|
||||
display: flex;
|
||||
padding-top: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
padding: $paddingTB $paddingLR;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
&-label{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarmCenter-content{
|
||||
padding: 70rpx $paddingLR;
|
||||
padding-bottom: 40rpx;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
&-bottom-btn{
|
||||
padding: 0 30rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="alarmCenter">
|
||||
<view class="alarmCenter-header">
|
||||
<view class="alarmCenter-header-picker flex-center" @click="selectShow = true">
|
||||
<text>{{currentLabel}}</text>
|
||||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||||
</view>
|
||||
<u-search class="alarmCenter-header-search" :show-action="false"></u-search>
|
||||
</view>
|
||||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="alarmCenter-list">
|
||||
<view class="alarmCenter-box" v-for="(item,index) in 3" :key="index" @click="goAlarmDetailFn(item)">
|
||||
<view class="alarmCenter-box-top">
|
||||
<tuiIcon v-if="true" name="yichuli" @click.stop="alarmShowFlag = true" color="#82C974" size="80" class="alarmCenter-box-rightTop-icon"></tuiIcon>
|
||||
<u-tag v-else text="我知道了" size="mini" color="#1B9DFF" shape="circle" class="alarmCenter-box-rightTop-icon" ></u-tag>
|
||||
<view class="alarmCenter-box-top-name text-bold">烟雾探测报警器</view>
|
||||
<view class="alarmCenter-box-top-info">
|
||||
<tuiIcon name="anquan" class="pr20" color="#1B9EF1" size="60" ></tuiIcon>
|
||||
<view class="">
|
||||
<view class="alarmCenter-box-address">
|
||||
<text>区域：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-state">
|
||||
<text>状态：</text>
|
||||
<text>正常</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom">
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">编号：</text>
|
||||
<text>20210210210210101</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">位置：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">时间：</text>
|
||||
<text>2021-01-21 10:20:20</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">详细地址：</text>
|
||||
<text>福建省福州市闽侯县上街镇乌龙江大道</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||||
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
|
||||
<view class="alarmCenter-content">
|
||||
<view class="alarmCenter-content-row">项目：上海德润谷云物联科技有限公司集团有限公司</view>
|
||||
<view class="alarmCenter-content-row">地址：福建省福州市闽侯县</view>
|
||||
<view class="alarmCenter-content-row">线路：总路</view>
|
||||
<view class="alarmCenter-content-row">报警类型：异常分闸</view>
|
||||
<view class="alarmCenter-content-row">报警时间：2020年12月8日09:30:41</view>
|
||||
<view class="alarmCenter-content-row">联系人：林工</view>
|
||||
<view class="alarmCenter-content-row">联系电话：15860886888</view>
|
||||
<view class="alarmCenter-content-bottom-btn">
|
||||
<u-button type="primary" shape="circle">立即处理</u-button>
|
||||
<view class="pt20"></view>
|
||||
<u-button type="primary" shape="circle">填写维保</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentLabel:"全部",
|
||||
selectShow:false, // 选择框开关
|
||||
alarmShowFlag:false, // 警报信息开关
|
||||
stateList:[{
|
||||
label:"全部",
|
||||
value:1
|
||||
},{
|
||||
label:"已处理",
|
||||
value:2
|
||||
},{
|
||||
label:"未处理",
|
||||
value:3
|
||||
}]
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
onConfirmSelectFn(e){
|
||||
console.log(e,"eeeeees");
|
||||
this.currentLabel = e[0].label;
|
||||
},
|
||||
goAlarmDetailFn(item){
|
||||
uni.navigateTo({
|
||||
url:"./alarmDetail"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<style lang='scss' scoped>
|
||||
.alarmDetail{
|
||||
width: 100%;
|
||||
padding: 0rpx $paddingLR;
|
||||
&-row{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
&-label{
|
||||
color: #666;
|
||||
}
|
||||
&-value{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
/* &-bottom-btn{
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: $paddingLR;
|
||||
} */
|
||||
&-popup-content{
|
||||
padding: 30rpx $paddingLR;
|
||||
}
|
||||
.popup-alarmType-box{
|
||||
width: 100%;
|
||||
border-radius: 40rpx;
|
||||
color: #1D9AFD;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.currentSelectValue{
|
||||
color: #fff;
|
||||
background-color: #1D9AFD;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="alarmDetail">
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">场所名称</view>
|
||||
<view class="alarmDetail-row-value">德润物业</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">设备类型</view>
|
||||
<view class="alarmDetail-row-value">烟雾探测报警器</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">编号</view>
|
||||
<view class="alarmDetail-row-value">德润物业</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">位置</view>
|
||||
<view class="alarmDetail-row-value">中青大厦18楼101北区</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">警情类型</view>
|
||||
<view class="alarmDetail-row-value">
|
||||
<text class="pr10" style="color: #FC5D42;">火警</text>
|
||||
<tuiIcon name="huozai" color="#FC5D42"></tuiIcon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">电池电压</view>
|
||||
<view class="alarmDetail-row-value">3.0V</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">信号强度</view>
|
||||
<view class="alarmDetail-row-value">96mp</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">CPU温度</view>
|
||||
<view class="alarmDetail-row-value">20°C</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">发生时间</view>
|
||||
<view class="alarmDetail-row-value">2021-1-25 16:01:33</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">详细地址</view>
|
||||
<view class="alarmDetail-row-value">福建省福州市闽侯县上街镇乌龙江</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">负责人员</view>
|
||||
<view class="alarmDetail-row-value">林工</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">处理时间</view>
|
||||
<view class="alarmDetail-row-value">2021年1月25日16:02:35</view>
|
||||
</view>
|
||||
<view class="alarmDetail-row">
|
||||
<view class="alarmDetail-row-label">处理结果</view>
|
||||
<view class="alarmDetail-row-value">已处理</view>
|
||||
</view>
|
||||
<u-button type="primary" @click="alarmDealwithFlag=true">立即处理</u-button>
|
||||
<u-popup v-model="alarmDealwithFlag" mode="bottom">
|
||||
<view class="alarmDetail-popup-content">
|
||||
<view class="popup-alarmType-list">
|
||||
<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='test'}" @click="pickActionFn('test')">火警测试</view>
|
||||
<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='misinformation'}" @click="pickActionFn('misinformation')">火警误报</view>
|
||||
<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='real'}" @click="pickActionFn('real')">真实火警</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-alarmType-btn flex-between">
|
||||
<u-button class="flex1" @click="dealwithLaterFn">稍后处理</u-button>
|
||||
<u-button class="flex1" type="primary">确定</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
alarmDealwithFlag:false,
|
||||
currentActionAlarmType:"test" // 当前
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
pickActionFn(text){
|
||||
this.currentActionAlarmType = text;
|
||||
switch (text){
|
||||
case "value":
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
dealwithLaterFn(){
|
||||
this.alarmDealwithFlag = false;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<style lang='scss' scoped>
|
||||
.cameraDetail{
|
||||
width: 100%;
|
||||
&-video{
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
video,live-player{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="cameraDetail">
|
||||
<view class="cameraDetail-video">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<video src="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" controls></video>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<live-player
|
||||
src="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"
|
||||
autoplay
|
||||
@statechange="statechange"
|
||||
@error="error"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
statechange(e){
|
||||
console.log('live-player code:', e.detail.code)
|
||||
},
|
||||
error(e){
|
||||
console.error('live-player error:', e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<style lang='scss' scoped>
|
||||
.device{
|
||||
width: 100%;
|
||||
&-content{
|
||||
padding: 30rpx $paddingLR;
|
||||
}
|
||||
&-total{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
&-icon{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: #1C9AFF;
|
||||
}
|
||||
}
|
||||
&-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="device">
|
||||
<pickerGroup :leftSelectList="leftSelectList" leftValue="1" :rightValue="rightValue"
|
||||
:rightSelectList="rightSelectList" @onRightConfirm="onRightConfirmFn"></pickerGroup>
|
||||
<!-- <view class="device-header">
|
||||
<u-select v-model="sceneShowFlag" :list="sceneList"></u-select>
|
||||
</view> -->
|
||||
<view class="device-content">
|
||||
<view class="device-total">
|
||||
<view class="device-total-icon">
|
||||
<tuiIcon name="yanwu" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
<view class="pl20 text-bold">该场所设备总：6</view>
|
||||
</view>
|
||||
<view class="device-list">
|
||||
<u-swipe-action :show="item.show" :index="index" btn-width="140"
|
||||
v-for="(item, index) in list" :key="item.id"
|
||||
@click="onClickFn" @open="open" :options="options"
|
||||
>
|
||||
<view class="device-box">
|
||||
<view class="device-box-info">
|
||||
<view class="pb20">
|
||||
<text style="color: #666;">编号：</text>
|
||||
<text class="text-bold">{{item.number}}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text style="color: #666;">位置：</text>
|
||||
<text class="text-bold">{{item.location}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" :style="{color:true?'#FE5D3F':true?'#F69906':'#1C9AFF'}">{{true?'火警':true?'故障':'正常'}}</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
<!-- <view class="device-box">
|
||||
<view class="device-box-info">
|
||||
<view class="">
|
||||
<text style="color: #666;">编号：</text>
|
||||
<text>2021021212333</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text style="color: #666;">位置：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">火警</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import pickerGroup from "@/components/electricalSafe/pickerGroup.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
number: '20210120173218F01',
|
||||
location: '中青大厦18楼101北区',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
number: '20210120173218F01',
|
||||
location: '中青大厦18楼102北区',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
number: '20210120173218F01',
|
||||
location: '中青大厦18楼103北区',
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
show: false,
|
||||
options: [
|
||||
{
|
||||
text: '详情',
|
||||
style: {
|
||||
backgroundColor: '#1CB7FF'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#FF6050'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
|
||||
leftSelectList:[{label:"厕所",value:"1"},{label:"2栋",value:"2"}],
|
||||
rightSelectList:[{label:"烟感",value:"yangan"},{label:"摄像头",value:"camera"}],
|
||||
leftValue:"1",
|
||||
rightValue:"yangan",
|
||||
}
|
||||
},
|
||||
components:{pickerGroup},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
onRightConfirmFn(e){
|
||||
console.log(e,"e");
|
||||
this.rightValue = e;
|
||||
},
|
||||
onClickFn(index,index1){
|
||||
console.log(index,"index");
|
||||
console.log(index1,"index1");
|
||||
if(index1 == 1) {
|
||||
this.list.splice(index, 1) ;
|
||||
this.$u.toast(`删除了第${index}个cell`, 3000);
|
||||
} else {
|
||||
this.list[index].show = false;
|
||||
|
||||
|
||||
uni.navigateTo({
|
||||
url:`./${this.rightValue === 'yangan'?'smokeDetail':'cameraDetail'}`
|
||||
})
|
||||
}
|
||||
},
|
||||
// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
|
||||
open(index) {
|
||||
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
|
||||
// 原本为'false'，再次设置为'false'会无效
|
||||
this.list[index].show = true;
|
||||
this.list.map((val, idx) => {
|
||||
if(index != idx) this.list[idx].show = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<style lang='scss' scoped>
|
||||
.electricalFire{
|
||||
width: 100%;
|
||||
&-header{
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, #1C9AFF 0%, #FFFFFF 100%);
|
||||
&-total{
|
||||
width:300rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
&-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
&-content{
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top: 100rpx;
|
||||
width: 160rpx;
|
||||
height: 146rpx;
|
||||
transform: translateX(-80rpx);
|
||||
z-index: 1;
|
||||
}
|
||||
&-number{
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-text{
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
color: #fff;
|
||||
background-color: #40AAFF;
|
||||
border-radius: 25rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
width: 80%;
|
||||
padding: 20rpx 0;
|
||||
/* height: 100rpx; */
|
||||
background: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
box-shadow: 0px 0px 8px 0px rgba(202, 202, 202, 0.77);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
&-box{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #feb84a;
|
||||
&:first-child{
|
||||
border-right: 1px solid #F2F2F2;
|
||||
}
|
||||
&-icon{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
background-color: #feb84a;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-nav-list{
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
.nav-box-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 14rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
/* background-color: #5fadfd; */
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="electricalFire">
|
||||
<view class="electricalFire-header">
|
||||
<view class="electricalFire-header-total">
|
||||
<u-image class="electricalFire-header-total-bg" width="300" height="300" src="http://static.drgyen.com/app/hc-app-power/images/home/electricalFire/deciveTotal.png"></u-image>
|
||||
<view class="electricalFire-header-total-content">
|
||||
<view class="electricalFire-header-total-number">30</view>
|
||||
<view class="electricalFire-header-total-text mt20">设备总数</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="electricalFire-header-info">
|
||||
<view class="electricalFire-header-info-box">
|
||||
<view class="electricalFire-header-info-box-icon">
|
||||
<tuiIcon name="jinggao1" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
<text>故障：2</text>
|
||||
</view>
|
||||
<view class="electricalFire-header-info-box" style="color: #FE5D3F;">
|
||||
<view class="electricalFire-header-info-box-icon" style="background-color: #FE5D3F;">
|
||||
<tuiIcon name="huozai" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
<text>火警：1</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="electricalFire-nav-list mt30">
|
||||
<!-- <view class="electricalFire-nav-box">
|
||||
<view class="">
|
||||
<tuiIcon name="yanwu"></tuiIcon>
|
||||
</view>
|
||||
<view class="">设备</view>
|
||||
</view> -->
|
||||
<u-grid :col="3" :border="false">
|
||||
<u-grid-item v-for="(item,index) in navList" :key="index" @click="goNavBoxFn(item)">
|
||||
<view class="nav-box-icon" :style="{backgroundColor:item.bgColor}">
|
||||
<tuiIcon :name="item.icon" color="#fff" size="50"></tuiIcon>
|
||||
</view>
|
||||
<view class="grid-text">{{item.name}}</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navList:[{
|
||||
name:"设备",
|
||||
icon:"yanwu",
|
||||
bgColor:"#5fadfd",
|
||||
url:"./device"
|
||||
},{
|
||||
name:"场所管理",
|
||||
icon:"yanwu",
|
||||
bgColor:"#31c7bb",
|
||||
url:"./placeManage"
|
||||
},{
|
||||
name:"告警中心",
|
||||
icon:"loudianyujing",
|
||||
bgColor:"#fc7d7b",
|
||||
url:"./alarmCenter"
|
||||
},{
|
||||
name:"消息中心",
|
||||
icon:"zixun",
|
||||
bgColor:"#fe994a",
|
||||
url:""
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goNavBoxFn(item){
|
||||
console.log(item,"item");
|
||||
uni.navigateTo({
|
||||
url:item.url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<style lang='scss' scoped>
|
||||
.placeDetail{
|
||||
width: 100%;
|
||||
&-info{
|
||||
padding: 30rpx $paddingLR;
|
||||
position: relative;
|
||||
&-row{
|
||||
padding-bottom: 20rpx;
|
||||
&-label{
|
||||
color: #777;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-state{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 30rpx;
|
||||
color: #F69906;
|
||||
}
|
||||
}
|
||||
&-line{
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #F5F5F9;
|
||||
}
|
||||
&-director-ctn{
|
||||
padding: 30rpx $paddingLR;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
&-director{
|
||||
&-row{
|
||||
padding-bottom: 20rpx;
|
||||
&-label{
|
||||
color: #777;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-director-icon{
|
||||
background-color: #1C9AFF;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-bottom-btn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="placeDetail">
|
||||
<view class="placeDetail-info">
|
||||
<view class="placeDetail-info-state">故障</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">名称：</text>
|
||||
<text>场所19#</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">区域：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">详情地址：</text>
|
||||
<text>福建省福州市闽侯县上街镇乌龙江中青大厦</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">所属项目：</text>
|
||||
<text>德润项目A1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-line"></view>
|
||||
<view class="placeDetail-director-ctn">
|
||||
<view class="placeDetail-director">
|
||||
<view class="placeDetail-director-row">
|
||||
<text class="placeDetail-director-row-label">负责人：</text>
|
||||
<text>陈工</text>
|
||||
</view>
|
||||
<view class="placeDetail-director-row">
|
||||
<text class="placeDetail-director-row-label">手机号：</text>
|
||||
<text>158600000000</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-director-icon flex-center" @click="callPhoneFn">
|
||||
<tuiIcon name="lianxiwomen" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-line"></view>
|
||||
<view class="placeDetail-bottom-btn">
|
||||
<u-button type="default" class="flex1">删除</u-button>
|
||||
<u-button type="primary" class="flex1">修改</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
callPhoneFn(){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '114' //仅为示例
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<style lang='scss' scoped>
|
||||
.placeManage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FBF8FB;
|
||||
&-header{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
justify-content: space-between;
|
||||
&-picker{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-search{
|
||||
width: calc(100% - 280rpx);
|
||||
}
|
||||
&-icon{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1C9AFF;
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: 30rpx $paddingLR;
|
||||
}
|
||||
&-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx;
|
||||
border-radius: 26rpx;
|
||||
box-shadow: $box-shadow;
|
||||
margin-bottom: 28rpx;
|
||||
background-color: #fff;
|
||||
&-info{
|
||||
width: 90%;
|
||||
&-address{
|
||||
color: #666666;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<view class="placeManage">
|
||||
<view class="placeManage-header">
|
||||
<view class="placeManage-header-picker flex-center" @click="selectShow = true">
|
||||
<text>{{currentLabel}}</text>
|
||||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||||
</view>
|
||||
<u-search class="placeManage-header-search" :show-action="false"></u-search>
|
||||
<view class="placeManage-header-icon flex-center">
|
||||
<u-icon name="plus" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="placeManage-list">
|
||||
<view class="placeManage-box" v-for="(item,index) in 3" :key="index" @click="goPlaceDetailFn">
|
||||
<view class="placeManage-box-info">
|
||||
<view class="placeManage-box-info-name pb15">楼道南区</view>
|
||||
<view class="placeManage-box-info-address">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#999DB2"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentLabel:"德润项目A1",
|
||||
selectShow:false, // 选择框开关
|
||||
stateList:[{
|
||||
label:"德润项目A1",
|
||||
value:1
|
||||
},{
|
||||
label:"德润项目A2",
|
||||
value:2
|
||||
},{
|
||||
label:"德润项目A3",
|
||||
value:3
|
||||
}]
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goPlaceDetailFn(){
|
||||
uni.navigateTo({
|
||||
url:"./placeDetail"
|
||||
})
|
||||
},
|
||||
onConfirmSelectFn(e){
|
||||
console.log(e,"eeeeees");
|
||||
this.currentLabel = e[0].label;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<style lang='scss' scoped>
|
||||
.runingRecord{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F9F9F9;
|
||||
&-list{
|
||||
padding-right: $paddingLR;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
&-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-time{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-right: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
position: relative;
|
||||
&-circle{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 50%;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
transform: translate(10rpx,10rpx);
|
||||
border-radius: 50%;
|
||||
background-color: #FF5D3F;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
width: 480rpx;
|
||||
height: 120rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 20rpx;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="runingRecord">
|
||||
<view class="runingRecord-list">
|
||||
<view class="runingRecord-box" v-for="(item,index) in 5" :key="index">
|
||||
<view class="runingRecord-box-time">
|
||||
<text>2021-1-25 09:40:11</text>
|
||||
<view class="runingRecord-box-time-circle"></view>
|
||||
</view>
|
||||
<view class="runingRecord-box-info">
|
||||
<view class="runingRecord-box-info-status">
|
||||
<text>状态：</text>
|
||||
<text>火警</text>
|
||||
</view>
|
||||
<view class="runingRecord-box-info-intensity">
|
||||
<text>信号强度：</text>
|
||||
<text>30mp</text>
|
||||
</view>
|
||||
<view class="runingRecord-box-info-status">
|
||||
<text>当前电池电压：</text>
|
||||
<text>3V</text>
|
||||
</view>
|
||||
<view class="runingRecord-box-info-intensity">
|
||||
<text>CPU温度：</text>
|
||||
<text>20°C</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<style lang='scss' scoped>
|
||||
.deviceDetail{
|
||||
width: 100%;
|
||||
&-info{
|
||||
padding: 30rpx $paddingLR;
|
||||
&-header-right{
|
||||
display: flex;
|
||||
.icon-ctn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info-content{
|
||||
display: flex;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
&-info-text{
|
||||
width: calc(100% - 200rpx);
|
||||
padding-left: 30rpx;
|
||||
font-size: $uni-font-size-sm;
|
||||
&-row{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-bottom: 14rpx;
|
||||
&-label{
|
||||
width: 130rpx;
|
||||
color: #777;
|
||||
text-align: right;
|
||||
}
|
||||
&-value{
|
||||
width: calc(100% - 130rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info-runRecord{
|
||||
width: 90%;
|
||||
height: 70rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1C9AFF;
|
||||
border: 1px solid #1C9AFF;
|
||||
}
|
||||
&-line{
|
||||
width: 100%;
|
||||
height: 4rpx;
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
&-relation-device-info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $paddingTB $paddingLR;
|
||||
align-items: center;
|
||||
.icon{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #1C9AFF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&-camera,&-smoke{
|
||||
&-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #F0EDF1;
|
||||
}
|
||||
&-box{
|
||||
padding: 30rpx $paddingLR;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
&-label{
|
||||
width: 60rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="deviceDetail">
|
||||
<view class="deviceDetail-info">
|
||||
<view class="deviceDetail-info-header flex-between">
|
||||
<view class="deviceDetail-info-header-left">
|
||||
<text>烟雾探测报警器</text>
|
||||
<u-tag class="ml20" text="正常" size="mini" type="success" />
|
||||
</view>
|
||||
<view class="deviceDetail-info-header-right">
|
||||
<view class="icon-ctn">
|
||||
<tuiIcon name="dianchidianya" color="#30A3DF"></tuiIcon>
|
||||
<text class="pl10">3.0V</text>
|
||||
</view>
|
||||
<view class="icon-ctn ml30">
|
||||
<tuiIcon name="zuxinh" color="#30A3DF"></tuiIcon>
|
||||
<text class="pl10">离线</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceDetail-info-content">
|
||||
<u-image src="http://static.drgyen.com/app/hc-app-power/images/car.png" width="200" height="200"></u-image>
|
||||
<view class="deviceDetail-info-text">
|
||||
<view class="deviceDetail-info-text-row">
|
||||
<view class="deviceDetail-info-text-row-label">运营商：</view>
|
||||
<view class="deviceDetail-info-text-row-value">德润HC-IOT</view>
|
||||
</view>
|
||||
<view class="deviceDetail-info-text-row">
|
||||
<view class="deviceDetail-info-text-row-label">编号：</view>
|
||||
<view class="deviceDetail-info-text-row-value">20200000000000000</view>
|
||||
</view>
|
||||
<view class="deviceDetail-info-text-row">
|
||||
<view class="deviceDetail-info-text-row-label">位置：</view>
|
||||
<view class="deviceDetail-info-text-row-value">德润科技18楼101北区</view>
|
||||
</view>
|
||||
<view class="deviceDetail-info-text-row">
|
||||
<view class="deviceDetail-info-text-row-label">详情地址：</view>
|
||||
<view class="deviceDetail-info-text-row-value">福建省福州市闽侯县上街镇</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceDetail-info-runRecord" @click="goRuningRecord">运行记录</view>
|
||||
</view>
|
||||
<view class="deviceDetail-line"></view>
|
||||
<view class="deviceDetail-relation-device-info">
|
||||
<view class="title">关联设备信息</view>
|
||||
<view class="icon">
|
||||
<u-icon name="plus" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceDetail-camera">
|
||||
<view class="deviceDetail-camera-header">
|
||||
<text>摄像头</text>
|
||||
<text>2个</text>
|
||||
</view>
|
||||
<view class="deviceDetail-camera-list">
|
||||
<view class="deviceDetail-camera-box" v-for="(item,index) in 2" :key="index">
|
||||
<view class="deviceDetail-camera-box-info">
|
||||
<view class="deviceDetail-camera-box-row">
|
||||
<text class="deviceDetail-camera-box-row-label">名称：</text>
|
||||
<text class="deviceDetail-camera-box-row-value">北区</text>
|
||||
</view>
|
||||
<view class="deviceDetail-camera-box-row">
|
||||
<text class="deviceDetail-camera-box-row-label">地址：</text>
|
||||
<text class="deviceDetail-camera-box-row-value">中青大厦18楼101北区</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceDetail-camera-box-status" :style="{color:getDeviceStatusColorFn(1)}">火警</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceDetail-smoke">
|
||||
<view class="deviceDetail-smoke-header">
|
||||
<text>烟雾</text>
|
||||
<text>2个</text>
|
||||
</view>
|
||||
<view class="deviceDetail-smoke-list">
|
||||
<view class="deviceDetail-smoke-box" v-for="(item,index) in 2" :key="index">
|
||||
<view class="deviceDetail-smoke-box-info">
|
||||
<view class="deviceDetail-smoke-box-row">
|
||||
<text class="deviceDetail-smoke-box-row-label">名称：</text>
|
||||
<text class="deviceDetail-smoke-box-row-value">北区</text>
|
||||
</view>
|
||||
<view class="deviceDetail-smoke-box-row">
|
||||
<text class="deviceDetail-smoke-box-row-label">地址：</text>
|
||||
<text class="deviceDetail-smoke-box-row-value">中青大厦18楼101北区</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceDetail-smoke-box-status" :style="{color:getDeviceStatusColorFn(1)}">火警</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goRuningRecord(){
|
||||
uni.navigateTo({
|
||||
url:"./runingRecord"
|
||||
})
|
||||
},
|
||||
getDeviceStatusColorFn(status){
|
||||
switch (status){
|
||||
case 1:
|
||||
return "green"
|
||||
break;
|
||||
case 2:
|
||||
return "#ccc"
|
||||
break;
|
||||
case 3:
|
||||
return "#2292EF"
|
||||
break;
|
||||
case 4:
|
||||
return "#F59B24"
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<style lang='scss' scoped>
|
||||
.moreNavBar{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-nav{
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: $box-shadow;
|
||||
// height: 400rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 30rpx;
|
||||
&-box{
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
&-icon{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
// padding: 16rpx;
|
||||
// background: linear-gradient(-55deg, #52AA52, #76D296);
|
||||
// box-shadow: 0px 9px 15px 0px rgba(87, 175, 91, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="moreNavBar">
|
||||
<view class="home-nav">
|
||||
<view class="home-nav-box" v-for="(item,index) in navListArr" :key="index" @click="goFuctionUrlFn(item)">
|
||||
<!-- <image src="../../static/images/car.png" mode=""></image> -->
|
||||
<view class="home-nav-box-icon" :style="{background:item.background,boxShadow:item.boxShadow}">
|
||||
<tui-icon :name="item.icon" size="50" color="#fff"></tui-icon>
|
||||
</view>
|
||||
<view class="home-nav-box-text">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import allNavList from "@/common/script/allNavList.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navListArr:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log(allNavList,"allNavList");
|
||||
this.navListArr = allNavList;
|
||||
},
|
||||
methods: {
|
||||
goFuctionUrlFn(item){
|
||||
uni.navigateTo({
|
||||
url:item.url
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<style lang='scss' scoped>
|
||||
@keyframes myrotate{
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.rotateAction{
|
||||
animation:myrotate 2s linear infinite;
|
||||
}
|
||||
.smoke{
|
||||
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
/* background-color: #eee; */
|
||||
&-top{
|
||||
width: 100%;
|
||||
height: 450rpx;
|
||||
position: relative;
|
||||
&-bottom-wave{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
&-circle{
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
&-bg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
&-line{
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -130rpx;
|
||||
margin-top: -130rpx;
|
||||
/* transform: translate(-50%,-50%); */
|
||||
z-index: 2;
|
||||
}
|
||||
&-text{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
/* height: 60rpx; */
|
||||
font-size: 50rpx;
|
||||
z-index: 99;
|
||||
transform: translate(0,-50%);
|
||||
text-align: center;
|
||||
color: #1C87FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-alarm-list{
|
||||
padding: 30rpx $paddingLR;
|
||||
}
|
||||
&-alarm-box{
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: $box-shadow;
|
||||
margin-bottom: 30rpx;
|
||||
&-info{
|
||||
padding: 0 10rpx;
|
||||
|
||||
}
|
||||
}
|
||||
&-normal{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
&-img{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
&-text{
|
||||
padding-top: 20rpx;
|
||||
width: 200rpx;
|
||||
margin: 0 auto;
|
||||
color: #96BBF3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="smoke">
|
||||
<!-- <u-navbar back-text="返回" title="剑未配妥，出门已是江湖" :background="background" :border-bottom="false"></u-navbar> -->
|
||||
<view class="smoke-top" :style="{backgroundColor:getCurrentMainColor}">
|
||||
<view class="smoke-top-circle">
|
||||
<u-image class="smoke-top-circle-bg" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/circle.png"></u-image>
|
||||
<view class="smoke-top-circle-line">
|
||||
|
||||
</view>
|
||||
<u-image class="rotateAction" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/line.png"></u-image>
|
||||
<view class="smoke-top-circle-text" :style="{color:getCurrentMainColor}">{{currentState}}</view>
|
||||
</view>
|
||||
<u-image class="smoke-top-bottom-wave" width="100%" height="128rpx" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/wave.png"></u-image>
|
||||
</view>
|
||||
<view class="smoke-normal" v-if="currentState=='正常'">
|
||||
<view class="smoke-normal-img">
|
||||
<u-image width="100%" height="100%" src="/static/images/home/smoke/normal.png"></u-image>
|
||||
</view>
|
||||
<view class="smoke-normal-text">
|
||||
场所很安全暂无设备异常
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body v-else top="0" ref="mescrollRef" bottom="100" height="400" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="smoke-alarm-list">
|
||||
<view class="smoke-alarm-box flex-center" v-for="(item,index) in 3" :key="index">
|
||||
<tuiIcon name="huozai" color="#FA5E42" size="60"></tuiIcon>
|
||||
<view class="smoke-alarm-box-info">
|
||||
<view class="smoke-alarm-box-info-name">火警为最高级报警，提示头部：已火警为首</view>
|
||||
<view class="smoke-alarm-box-info-subtitle text--mini--grey">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentState:"故障",
|
||||
currentMainColor:""
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
computed:{
|
||||
getCurrentMainColor(){
|
||||
switch (this.currentState){
|
||||
case "正常":
|
||||
return "#1C9AFF";
|
||||
break;
|
||||
case "火警":
|
||||
return "#FF4E2D";
|
||||
break;
|
||||
case "故障":
|
||||
return "#FFAE2E";
|
||||
break;
|
||||
default:
|
||||
return "#1C9AFF";
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: this.getCurrentMainColor,
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<style lang='scss' scoped>
|
||||
.alarmCenter{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FBF8FB;
|
||||
&-header{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
&-picker{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-search{
|
||||
width: calc(100% - 200rpx);
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #FBF8FB;
|
||||
}
|
||||
&-box{
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: $box-shadow;
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
&-rightTop-icon{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
|
||||
}
|
||||
&-top{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
&-info{
|
||||
display: flex;
|
||||
padding-top: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
padding: $paddingTB $paddingLR;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
&-label{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarmCenter-content{
|
||||
padding: 70rpx $paddingLR;
|
||||
padding-bottom: 40rpx;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
&-bottom-btn{
|
||||
padding: 0 30rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="alarmCenter">
|
||||
<view class="alarmCenter-header">
|
||||
<view class="alarmCenter-header-picker flex-center" @click="selectShow = true">
|
||||
<text>{{currentLabel}}</text>
|
||||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||||
</view>
|
||||
<u-search class="alarmCenter-header-search" :show-action="false"></u-search>
|
||||
</view>
|
||||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="alarmCenter-list">
|
||||
<view class="alarmCenter-box" v-for="(item,index) in 3" :key="index" @click="goAlarmDetailFn(item)">
|
||||
<view class="alarmCenter-box-top">
|
||||
<tuiIcon v-if="true" name="yichuli" @click.stop="alarmShowFlag = true" color="#82C974" size="80" class="alarmCenter-box-rightTop-icon"></tuiIcon>
|
||||
<u-tag v-else text="我知道了" size="mini" color="#1B9DFF" shape="circle" class="alarmCenter-box-rightTop-icon" ></u-tag>
|
||||
<view class="alarmCenter-box-top-name text-bold">烟雾探测报警器</view>
|
||||
<view class="alarmCenter-box-top-info">
|
||||
<tuiIcon name="zaixian" class="pr20" color="#2C9004" size="60" ></tuiIcon>
|
||||
<view class="">
|
||||
<view class="alarmCenter-box-address">
|
||||
<text>区域：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-state">
|
||||
<text>状态：</text>
|
||||
<text>正常</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom">
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">编号：</text>
|
||||
<text>20210210210210101</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">位置：</text>
|
||||
<text>德润18楼101北区</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">时间：</text>
|
||||
<text>2021-01-21 10:20:20</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">详细地址：</text>
|
||||
<text>福建省福州市闽侯县上街镇乌龙江大道</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||||
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
|
||||
<view class="alarmCenter-content">
|
||||
<view class="alarmCenter-content-row">项目：德润科技集团有限公司</view>
|
||||
<view class="alarmCenter-content-row">地址：福建省福州市闽侯县</view>
|
||||
<view class="alarmCenter-content-row">线路：总路</view>
|
||||
<view class="alarmCenter-content-row">报警类型：异常分闸</view>
|
||||
<view class="alarmCenter-content-row">报警时间：2020年12月8日09:30:41</view>
|
||||
<view class="alarmCenter-content-row">联系人：林工</view>
|
||||
<view class="alarmCenter-content-row">联系电话：15860886888</view>
|
||||
<view class="alarmCenter-content-bottom-btn">
|
||||
<u-button type="primary" shape="circle">立即处理</u-button>
|
||||
<view class="pt20"></view>
|
||||
<u-button type="primary" shape="circle">填写维保</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentLabel:"全部",
|
||||
selectShow:false, // 选择框开关
|
||||
alarmShowFlag:false, // 警报信息开关
|
||||
stateList:[{
|
||||
label:"全部",
|
||||
value:1
|
||||
},{
|
||||
label:"已处理",
|
||||
value:2
|
||||
},{
|
||||
label:"未处理",
|
||||
value:3
|
||||
}]
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
onConfirmSelectFn(e){
|
||||
console.log(e,"eeeeees");
|
||||
this.currentLabel = e[0].label;
|
||||
},
|
||||
goAlarmDetailFn(item){
|
||||
uni.navigateTo({
|
||||
url:"./alarmDetail"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<style lang='scss' scoped>
|
||||
.device{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F9F9F9;
|
||||
&-header{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
&-header-picker{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background-color: rgba(256,256,256,0.1);
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
&-list{
|
||||
width: 100%;
|
||||
padding: $paddingTB 30rpx;
|
||||
}
|
||||
&-box{
|
||||
width: 100%;
|
||||
border: 10rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
&-info{
|
||||
font-size: 24rpx;
|
||||
&-name{
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
&-state{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 42rpx;
|
||||
&-icon{
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #00DD00;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="device">
|
||||
<view class="device-header">
|
||||
<view class="device-header-picker flex-between" @click="projectPickShow = true">
|
||||
<view class="">
|
||||
<tuiIcon name="xiangmu" class="pr10" color="#1C9AFF"></tuiIcon>
|
||||
<text>德润智慧园区项目</text>
|
||||
</view>
|
||||
<u-icon size="22" name="arrow-down-fill" color="#ccc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body top="80" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="device-list">
|
||||
<view class="device-box" v-for="(item,index) in 4" :key="index" @click="goDetailFn(item)">
|
||||
<view class="device-box-img pr20">
|
||||
<u-image width="160" height="180" src=http://static.drgyen.com/app/hc-app-power/images/home/waterLevel/device.jpg"></u-image>
|
||||
</view>
|
||||
<view class="device-box-info">
|
||||
<view class="device-box-info-name">A区饮水间</view>
|
||||
<view class="device-box-info-id pb10">
|
||||
<text class="text--base--grey">水表编号：</text>
|
||||
<text>20210120173218F01</text>
|
||||
</view>
|
||||
<view class="device-box-info-waterValue">
|
||||
<text class="text--base--grey">总用水量：</text>
|
||||
<text>125t</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-box-state">
|
||||
<view class="device-box-state-icon"></view>
|
||||
<view class="device-box-state-text">在线</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projectPickShow:false,
|
||||
projectPickList:[{
|
||||
label:"德润智慧园区项目",
|
||||
value:"hcwl"
|
||||
}],
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goDetailFn(item){
|
||||
uni.navigateTo({
|
||||
url:"./deviceDetail"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<style lang='scss' scoped>
|
||||
.deviceDetail{
|
||||
width: 100%;
|
||||
&-content{
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
&-row{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="deviceDetail">
|
||||
<view class="deviceDetail-content">
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">场所名称</view>
|
||||
<view class="">德润物业</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">设备</view>
|
||||
<view class="">A区饮水间</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">编号</view>
|
||||
<view class="">202101201561</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">设备状态</view>
|
||||
<view class="">在线18楼101北区</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">总用水量</view>
|
||||
<view class="">125t</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">所属项目</view>
|
||||
<view class="">德润智慧园区</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<style lang='scss' scoped>
|
||||
.temperature{
|
||||
width: 100%;
|
||||
&-header{
|
||||
width: 100%;
|
||||
/* height: 400rpx; */
|
||||
background-color: #1C9AFF;
|
||||
&-total{
|
||||
width: 270rpx;
|
||||
height: 270rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
&-img{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
&-text{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 99;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding-top: 30rpx;
|
||||
&-number{
|
||||
font-size: 56rpx;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10rpx;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
padding: 30rpx $paddingLR;
|
||||
&-content{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
&-box{
|
||||
width: 32%;
|
||||
text-align: center;
|
||||
&-info{
|
||||
width: 2rpx;
|
||||
height: 50rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-nav{
|
||||
width: 100%;
|
||||
padding: $paddingTB $paddingLR;
|
||||
&-box-icon{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="temperature">
|
||||
<view class="temperature-header">
|
||||
<view class="temperature-header-total">
|
||||
<!-- <u-image width="100%" height="100%" class="temperature-header-total-img" src="@/static/images/home/temperature/header-bg.png"></u-image> -->
|
||||
<view class="temperature-header-total-text">
|
||||
<view class="temperature-header-total-text-number">30</view>
|
||||
<view class="pt20">设备总数</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="temperature-header-info">
|
||||
<view class="temperature-header-info-content">
|
||||
<view class="temperature-header-info-box">
|
||||
<view class="text--base--grey">设备在线</view>
|
||||
<view class="text--base--main">48</view>
|
||||
</view>
|
||||
<view class="temperature-header-info-box-line"></view>
|
||||
<view class="temperature-header-info-box">
|
||||
<view class="text--base--grey">设备离线</view>
|
||||
<view class="text--base--grey">20</view>
|
||||
</view>
|
||||
<view class="temperature-header-info-box-line"></view>
|
||||
<view class="temperature-header-info-box">
|
||||
<view class="text--base--grey">今日报警数</view>
|
||||
<view class="text--base--alarm">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="temperature-nav">
|
||||
<u-grid :col="3" :border="false">
|
||||
<u-grid-item v-for="(item,index) in navList" :key="index" @click="goNavBoxFn(item.url)">
|
||||
<view class="temperature-nav-box-icon flex-center" :style="{backgroundColor:item.bgColor}">
|
||||
<tuiIcon :name="item.icon" size="62" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
<view class="grid-text">{{item.name}}</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navList:[{
|
||||
icon:"wenshidu",
|
||||
name:"设备",
|
||||
bgColor:"#7AC2FE",
|
||||
url:"./device"
|
||||
},{
|
||||
icon:"changsuoguanli",
|
||||
name:"场所管理",
|
||||
bgColor:"#28C4B9",
|
||||
url:"./placeManage"
|
||||
},{
|
||||
icon:"jingbao",
|
||||
name:"告警中心",
|
||||
bgColor:"#FE5E5F",
|
||||
url:"./alarmCenter"
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goNavBoxFn(url){
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<style lang='scss' scoped>
|
||||
.placeDetail{
|
||||
width: 100%;
|
||||
&-info{
|
||||
padding: 30rpx $paddingLR;
|
||||
position: relative;
|
||||
&-row{
|
||||
padding-bottom: 20rpx;
|
||||
&-label{
|
||||
color: #777;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-state{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 30rpx;
|
||||
color: #F69906;
|
||||
}
|
||||
}
|
||||
&-line{
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #F5F5F9;
|
||||
}
|
||||
&-director-ctn{
|
||||
padding: 30rpx $paddingLR;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
&-director{
|
||||
&-row{
|
||||
padding-bottom: 20rpx;
|
||||
&-label{
|
||||
color: #777;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-director-icon{
|
||||
background-color: #1C9AFF;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-bottom-btn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="placeDetail">
|
||||
<view class="placeDetail-info">
|
||||
<view class="placeDetail-info-state">故障</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">名称：</text>
|
||||
<text>场所19#</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">区域：</text>
|
||||
<text>德润科技18楼101北区</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">详情地址：</text>
|
||||
<text>福建省福州市闽侯县上街镇乌龙江中青大厦18楼</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">所属项目：</text>
|
||||
<text>德润项目A1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-line"></view>
|
||||
<view class="placeDetail-director-ctn">
|
||||
<view class="placeDetail-director">
|
||||
<view class="placeDetail-director-row">
|
||||
<text class="placeDetail-director-row-label">负责人：</text>
|
||||
<text>陈工</text>
|
||||
</view>
|
||||
<view class="placeDetail-director-row">
|
||||
<text class="placeDetail-director-row-label">手机号：</text>
|
||||
<text>158600000000</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-director-icon flex-center" @click="callPhoneFn">
|
||||
<tuiIcon name="lianxiwomen" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-line"></view>
|
||||
<view class="placeDetail-bottom-btn">
|
||||
<u-button type="default" class="flex1">删除</u-button>
|
||||
<u-button type="primary" class="flex1">修改</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
callPhoneFn(){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '114' //仅为示例
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<style lang='scss' scoped>
|
||||
.placeManage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FBF8FB;
|
||||
&-header{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
justify-content: space-between;
|
||||
&-picker{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-search{
|
||||
width: calc(100% - 280rpx);
|
||||
}
|
||||
&-icon{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1C9AFF;
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: 30rpx $paddingLR;
|
||||
}
|
||||
&-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx;
|
||||
border-radius: 26rpx;
|
||||
box-shadow: $box-shadow;
|
||||
margin-bottom: 28rpx;
|
||||
background-color: #fff;
|
||||
&-info{
|
||||
width: 90%;
|
||||
&-address{
|
||||
color: #666666;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<view class="placeManage">
|
||||
<view class="placeManage-header">
|
||||
<view class="placeManage-header-picker flex-center" @click="selectShow = true">
|
||||
<text>{{currentLabel}}</text>
|
||||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||||
</view>
|
||||
<u-search class="placeManage-header-search" :show-action="false"></u-search>
|
||||
<view class="placeManage-header-icon flex-center">
|
||||
<u-icon name="plus" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="placeManage-list">
|
||||
<view class="placeManage-box" v-for="(item,index) in 3" :key="index" @click="goPlaceDetailFn">
|
||||
<view class="placeManage-box-info">
|
||||
<view class="placeManage-box-info-name pb15">楼道南区</view>
|
||||
<view class="placeManage-box-info-address">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#999DB2"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentLabel:"德润项目A1",
|
||||
selectShow:false, // 选择框开关
|
||||
stateList:[{
|
||||
label:"德润项目A1",
|
||||
value:1
|
||||
},{
|
||||
label:"德润项目A2",
|
||||
value:2
|
||||
},{
|
||||
label:"德润项目A3",
|
||||
value:3
|
||||
}]
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goPlaceDetailFn(){
|
||||
uni.navigateTo({
|
||||
url:"./placeDetail"
|
||||
})
|
||||
},
|
||||
onConfirmSelectFn(e){
|
||||
console.log(e,"eeeeees");
|
||||
this.currentLabel = e[0].label;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,573 @@
|
|||
<style lang='scss' scoped>
|
||||
.warnAnalysis {
|
||||
width: 100%;
|
||||
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.alrmAnalysis,
|
||||
.alrmWarning,
|
||||
.tradeAnalyzeAlarm,
|
||||
.warningTrend {
|
||||
|
||||
/* padding-bottom: 30rpx; */
|
||||
&-header {
|
||||
padding: 20rpx $paddingLR;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0px 4rpx 4rpx 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.alrmAnalysis-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 40rpx 0;
|
||||
padding-bottom: 20rpx;
|
||||
.alrmAnalysis-title {
|
||||
width: 130rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.alrmAnalysis-info {
|
||||
width: calc(100% - 130rpx);
|
||||
font-size: 22rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-auto-columns: repeat(2, 50%);
|
||||
}
|
||||
}
|
||||
.alrm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
&-circle {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
/* background-color: #C93548; */
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.alrmWarning-content {
|
||||
width: 100%;
|
||||
padding: 40rpx $paddingLR;
|
||||
|
||||
.alrmWarning-alam {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
&-title {
|
||||
color: #D9382A;
|
||||
/* width: 140rpx; */
|
||||
/* display: flex; */
|
||||
/* justify-content: center; */
|
||||
/* align-items: center; */
|
||||
}
|
||||
}
|
||||
|
||||
.alrmWarning-warning {
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.alrmWarning-alam-trend,
|
||||
.alrmWarning-warning-trend {
|
||||
width: 170rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alrmWarning-alam-today-alrm,
|
||||
.alrmWarning-alam-yesterday-alrm,
|
||||
.alrmWarning-warning-today-alrm,
|
||||
.alrmWarning-warning-yesterday-alrm {
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas-yesterdayAlrmId,
|
||||
.canvas-todayAlrmId {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.tradeAnalyzeAlarm-content {
|
||||
padding: 40rpx 25rpx;
|
||||
|
||||
.canvas-tradeAnalyzeAlarm {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.warningTrend-content {
|
||||
padding: 40rpx 25rpx;
|
||||
|
||||
.canvas-warningTrend {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="warnAnalysis" v-if="pageShowFlag">
|
||||
<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
|
||||
<view class="">
|
||||
<view class="alrmAnalysis" >
|
||||
<view class="alrmAnalysis-header">
|
||||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||||
<text class="pl20">报警分析</text>
|
||||
</view>
|
||||
<view class="alrmAnalysis-content" v-if="alarmCategoriesList && alarmCategoriesList.length>0">
|
||||
<view class="alrmAnalysis-title">报警</view>
|
||||
<view class="alrmAnalysis-info">
|
||||
<view class="alrm-row" v-for="(item,index) in alarmCategoriesList" :key="item.typeCode">
|
||||
<view class="alrm-row-circle" :style="{backgroundColor:item.color}"></view>
|
||||
<view class="alrm-row-text pl10">
|
||||
<text class="pr15">{{item.typeName}}</text>
|
||||
<text class="text--base--grey">|</text>
|
||||
<text class="pl15">{{item.ratio}}%</text>
|
||||
<text class="pl15" style="color: #999;">{{item.alarmTotal}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||||
</view>
|
||||
<view class="alrmWarning">
|
||||
<view class="alrmWarning-header">
|
||||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||||
<text class="pl20">报警预警分析</text>
|
||||
</view>
|
||||
<view class="alrmWarning-content" >
|
||||
<view class="alrmWarning-alam"v-if="alarmAnalysisStatisticsData">
|
||||
<view class="alrmWarning-alam-title">报警 ></view>
|
||||
<view class="alrmWarning-alam-today-alrm">
|
||||
<canvas canvas-id="todayAlrmId" class="canvas-todayAlrmId"></canvas>
|
||||
<view class="pt20" style="color: #D9382A;">今日报警</view>
|
||||
</view>
|
||||
<view class="alrmWarning-alam-yesterday-alrm">
|
||||
<canvas canvas-id="yesterdayAlrmId" class="canvas-yesterdayAlrmId"></canvas>
|
||||
<view class="pt20">昨日报警</view>
|
||||
</view>
|
||||
<view class="alrmWarning-alam-trend">
|
||||
<view>
|
||||
<text class="pr10">{{alarmAnalysisStatisticsData.dayOnDay}}%</text>
|
||||
<u-icon :name="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
|
||||
size="40"></u-icon>
|
||||
</view>
|
||||
<view>同比</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||||
<view class="alrmWarning-warning" v-if="warningAnalysisStatisticsData">
|
||||
<view style="color: #D18820;">预警 ></view>
|
||||
<view class="alrmWarning-warning-today-alrm">
|
||||
<canvas canvas-id="todayWarningId" class="canvas-todayAlrmId"></canvas>
|
||||
<view class="pt20" style="color: #D9382A;">今日报警</view>
|
||||
</view>
|
||||
<view class="alrmWarning-warning-yesterday-alrm">
|
||||
<canvas canvas-id="yesterdayWarningId" class="canvas-yesterdayAlrmId"></canvas>
|
||||
<view class="pt20">昨日报警</view>
|
||||
</view>
|
||||
<view class="alrmWarning-warning-trend">
|
||||
<view class="">
|
||||
<text class="pr10">{{warningAnalysisStatisticsData.dayOnDay}}%</text>
|
||||
<!-- <u-icon name="arrow-upward" color="#E23F34" size="40"></u-icon> -->
|
||||
<u-icon :name="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
|
||||
size="40"></u-icon>
|
||||
</view>
|
||||
<view class="">同比</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tradeAnalyzeAlarm">
|
||||
<view class="tradeAnalyzeAlarm-header">
|
||||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||||
<text class="pl20">行业报警分析</text>
|
||||
</view>
|
||||
<view class="tradeAnalyzeAlarm-content" v-if="industryAlarmAnalysisList && industryAlarmAnalysisList.length>0">
|
||||
<canvas canvas-id="tradeAnalyzeAlarmId" class="canvas-tradeAnalyzeAlarm"></canvas>
|
||||
</view>
|
||||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||||
</view>
|
||||
<view class="warningTrend">
|
||||
<view class="warningTrend-header">
|
||||
<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
|
||||
<text class="pl20">报警预警趋势</text>
|
||||
</view>
|
||||
<view class="warningTrend-content" v-if="alarmWarningTrendData">
|
||||
<canvas canvas-id="warningTrendId" class="canvas-warningTrend" disable-scroll=true @touchstart="touchLineA"
|
||||
@touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
||||
</view>
|
||||
<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
alarmTodayWidth: "",
|
||||
alarmTodayHeight: "",
|
||||
alarmTodayArcbarWidth: "",
|
||||
|
||||
pixelRatio: 1,
|
||||
|
||||
tradeAnalyzeWidth: "",
|
||||
tradeAnalyzeHeight: "",
|
||||
|
||||
warningTrendWidth: "",
|
||||
warningTrendHeight: "",
|
||||
|
||||
alarmColorList: ["#C93548", "#5E5490", "#52B249", "#F7A23E", "#EA9B87", "#A94791", "#F1DF31", "#DE5654", "#2DAEE5"],
|
||||
alarmCategoriesList: null, // 报警分析列表
|
||||
warningAnalysisStatisticsData: null, // 预警分析
|
||||
alarmAnalysisStatisticsData: null, // 报警分析
|
||||
alarmWarningTrendData:null, // 报警预警趋势
|
||||
industryAlarmAnalysisList:null, // 行业报警分析
|
||||
showCurveA: null ,// 趋势图chart
|
||||
pageShowFlag:false,
|
||||
|
||||
// list: [{
|
||||
// name: '待收货'
|
||||
// }, {
|
||||
// name: '待付款'
|
||||
// }, {
|
||||
// name: '待评价',
|
||||
// count: 5
|
||||
// }],
|
||||
// current: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
_self = this;
|
||||
this.alarmTodayWidth = uni.upx2px(140);
|
||||
this.alarmTodayHeight = uni.upx2px(140);
|
||||
this.alarmTodayArcbarWidth = uni.upx2px(20);
|
||||
|
||||
this.tradeAnalyzeWidth = uni.upx2px(700);
|
||||
this.tradeAnalyzeHeight = uni.upx2px(300);
|
||||
|
||||
this.warningTrendWidth = uni.upx2px(700);
|
||||
this.warningTrendHeight = uni.upx2px(300);
|
||||
|
||||
this.getPageDataFn();
|
||||
},
|
||||
methods: {
|
||||
// change(index) {
|
||||
// this.current = index;
|
||||
// },
|
||||
// 获取页面数据
|
||||
getPageDataFn() {
|
||||
this.$get("/app/index/warning-analysis", {}).then((res) => {
|
||||
console.log(res, "res");
|
||||
this.alarmCategoriesList = res.data.alarmCategoriesList.map((item, index, arr) => {
|
||||
item.color = this.alarmColorList[index];
|
||||
if (index + 1 > this.alarmColorList.length) {
|
||||
item.color = this.alarmColorList[index - this.alarmColorList.length];
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.alarmAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
|
||||
return item.alarmDivide === "ALARM";
|
||||
})
|
||||
this.warningAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
|
||||
return item.alarmDivide === "WARNING";
|
||||
})
|
||||
console.log(this.alarmAnalysisStatisticsData,"alarmAnalysisStatisticsData");
|
||||
console.log(this.warningAnalysisStatisticsData,"warningAnalysisStatisticsData");
|
||||
this.alarmWarningTrendData = res.data.alarmChartDataVo;
|
||||
this.industryAlarmAnalysisList = res.data.industryAlarmList;
|
||||
this.showAlarmAnalysisStatisticsFn(); // 报警分析
|
||||
this.showWarningAnalysisStatisticsFn(); // 预警分析
|
||||
this.showAlarmWarningTrendFn(this.alarmWarningTrendData); // 报警预警趋势
|
||||
this.showIndustryAlarmAnalysisFn(this.industryAlarmAnalysisList); // 行业报警分析
|
||||
}).finally(()=>{
|
||||
this.pageShowFlag = true;
|
||||
})
|
||||
},
|
||||
// 渲染报警分析
|
||||
showIndustryAlarmAnalysisFn(data) {
|
||||
let series = data.map((item) => {
|
||||
return {
|
||||
name: item.industryName,
|
||||
data: item.total
|
||||
}
|
||||
})
|
||||
|
||||
//自定义文案示例，需设置format字段
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
series[i].format = () => {
|
||||
return series[i].name + series[i].data
|
||||
};
|
||||
}
|
||||
// _self.textarea = JSON.stringify(res.data.data.Ring);
|
||||
this.showRing("tradeAnalyzeAlarmId", {
|
||||
series: series
|
||||
})
|
||||
},
|
||||
// 渲染报警预警趋势
|
||||
showAlarmWarningTrendFn(data) {
|
||||
let LineA = {
|
||||
categories: data.name,
|
||||
series: [{
|
||||
name: "报警",
|
||||
data: data.alarm
|
||||
}, {
|
||||
name: "预警",
|
||||
data: data.warning
|
||||
}]
|
||||
};
|
||||
_self.showCurve("warningTrendId", LineA)
|
||||
},
|
||||
// 渲染预警分析模块
|
||||
showWarningAnalysisStatisticsFn(){
|
||||
if(!this.warningAnalysisStatisticsData) return;
|
||||
// 预警总数
|
||||
let warningTotalValue = this.warningAnalysisStatisticsData.todayAlarm + this.warningAnalysisStatisticsData.yesterdayAlarm;
|
||||
// 今日预警数据
|
||||
let todayWarningData = {
|
||||
title: this.warningAnalysisStatisticsData.todayAlarm + "",
|
||||
series: [{
|
||||
color: "#D9382A",
|
||||
data: this.warningAnalysisStatisticsData.todayAlarm / warningTotalValue || 0,
|
||||
index: 0,
|
||||
legendShape: "circle",
|
||||
name: "",
|
||||
pointShape: "circle",
|
||||
show: true,
|
||||
type: "arcbar"
|
||||
}]
|
||||
}
|
||||
// 昨日预警数据
|
||||
let yesterdayWarningData = {
|
||||
title: this.warningAnalysisStatisticsData.yesterdayAlarm + "",
|
||||
series: [{
|
||||
color: "#2DAEE5",
|
||||
data: this.warningAnalysisStatisticsData.yesterdayAlarm / warningTotalValue || 0,
|
||||
index: 0,
|
||||
legendShape: "circle",
|
||||
name: "",
|
||||
pointShape: "circle",
|
||||
show: true,
|
||||
type: "arcbar"
|
||||
}]
|
||||
}
|
||||
this.showArcbar("todayWarningId", {
|
||||
width: this.alarmTodayWidth,
|
||||
height: this.alarmTodayHeight
|
||||
}, todayWarningData);
|
||||
this.showArcbar("yesterdayWarningId", {
|
||||
width: this.alarmTodayWidth,
|
||||
height: this.alarmTodayHeight
|
||||
}, yesterdayWarningData);
|
||||
},
|
||||
// 渲染报警分析模块
|
||||
showAlarmAnalysisStatisticsFn() {
|
||||
if(!this.alarmAnalysisStatisticsData) return;
|
||||
// 报警总数
|
||||
let alarmTotalValue = this.alarmAnalysisStatisticsData.todayAlarm + this.alarmAnalysisStatisticsData.yesterdayAlarm;
|
||||
// 今日报警数据
|
||||
let todayAlrmData = {
|
||||
title: this.alarmAnalysisStatisticsData.todayAlarm + "",
|
||||
series: [{
|
||||
color: "#D9382A",
|
||||
data: this.alarmAnalysisStatisticsData.todayAlarm / alarmTotalValue || 0,
|
||||
index: 0,
|
||||
legendShape: "circle",
|
||||
name: "",
|
||||
pointShape: "circle",
|
||||
show: true,
|
||||
type: "arcbar"
|
||||
}]
|
||||
}
|
||||
// 昨日报警数据
|
||||
let yesterdayAlrmData = {
|
||||
title: this.alarmAnalysisStatisticsData.yesterdayAlarm + "",
|
||||
series: [{
|
||||
color: "#2DAEE5",
|
||||
data: this.alarmAnalysisStatisticsData.yesterdayAlarm / alarmTotalValue || 0,
|
||||
index: 0,
|
||||
legendShape: "circle",
|
||||
name: "",
|
||||
pointShape: "circle",
|
||||
show: true,
|
||||
type: "arcbar"
|
||||
}]
|
||||
}
|
||||
|
||||
// 找到id为todayAlrmId的块
|
||||
this.showArcbar("todayAlrmId", {
|
||||
width: this.alarmTodayWidth,
|
||||
height: this.alarmTodayHeight
|
||||
}, todayAlrmData);
|
||||
this.showArcbar("yesterdayAlrmId", {
|
||||
width: this.alarmTodayWidth,
|
||||
height: this.alarmTodayHeight
|
||||
}, yesterdayAlrmData);
|
||||
|
||||
},
|
||||
// 环形
|
||||
showRing(canvasId, chartData) {
|
||||
let canvaRing = new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'ring',
|
||||
fontSize:11,
|
||||
padding:[5,5,5,5],
|
||||
legend:{
|
||||
show:true,
|
||||
position:'right',
|
||||
float:'center',
|
||||
itemGap:10,
|
||||
padding:5,
|
||||
lineHeight:26,
|
||||
margin:5,
|
||||
borderWidth :1
|
||||
},
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
series: chartData.series,
|
||||
animation: false,
|
||||
width: _self.tradeAnalyzeWidth * _self.pixelRatio,
|
||||
height: _self.tradeAnalyzeHeight * _self.pixelRatio,
|
||||
disablePieStroke: true,
|
||||
dataLabel: true,
|
||||
|
||||
extra: {
|
||||
pie: {
|
||||
offsetAngle: 0,
|
||||
ringWidth: 15*_self.pixelRatio,
|
||||
labelWidth:15
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
toJSON() {},
|
||||
// 进度圆环图 接收参数:一个块的id,一个数据
|
||||
showArcbar(canvasId, sizeObj, chartData) {
|
||||
let canvaLineA = new uCharts({
|
||||
$this: _self,
|
||||
canvasId: canvasId,
|
||||
type: 'arcbar',
|
||||
fontSize: 11,
|
||||
legend: false,
|
||||
title: {
|
||||
name: chartData.title,
|
||||
color: chartData.series[0].color,
|
||||
fontSize: 18
|
||||
},
|
||||
subtitle: {
|
||||
// name: chartData.series[0].name,
|
||||
// color: '#666666',
|
||||
// fontSize: 15*_self.pixelRatio
|
||||
},
|
||||
extra: {
|
||||
arcbar: {
|
||||
type: 'circle', //整圆类型进度条图
|
||||
width: 4, //圆弧的宽度
|
||||
startAngle: 1.5 //整圆类型只需配置起始角度即可
|
||||
}
|
||||
},
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: 1,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
width: sizeObj.width,
|
||||
height: sizeObj.height,
|
||||
dataLabel: true,
|
||||
});
|
||||
},
|
||||
// 曲线图
|
||||
showCurve(canvasId, chartData) {
|
||||
this.showCurveA = new uCharts({
|
||||
$this: _self,
|
||||
canvasId: canvasId,
|
||||
type: 'line',
|
||||
fontSize: 11,
|
||||
padding: [15, 20, 0, 15],
|
||||
legend: {
|
||||
show: true,
|
||||
padding: 5,
|
||||
lineHeight: 11,
|
||||
margin: 0,
|
||||
},
|
||||
dataLabel: true,
|
||||
dataPointShape: true,
|
||||
background: '#FFFFFF',
|
||||
pixelRatio: _self.pixelRatio,
|
||||
categories: chartData.categories,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
enableScroll: true, //开启图表拖拽功能
|
||||
xAxis: {
|
||||
disableGrid: false,
|
||||
type: 'grid',
|
||||
gridType: 'dash',
|
||||
itemCount: 7,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
},
|
||||
// xAxis: {
|
||||
// disableGrid:false,
|
||||
// type:'grid',
|
||||
// gridType:'dash',
|
||||
// itemCount:4,
|
||||
// scrollShow:true,
|
||||
// scrollAlign:'left'
|
||||
// },
|
||||
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
gridColor: '#CCCCCC',
|
||||
dashLength: 8,
|
||||
splitNumber: 5,
|
||||
format: (val) => {
|
||||
return val.toFixed(0)
|
||||
}
|
||||
},
|
||||
width: _self.warningTrendWidth * _self.pixelRatio,
|
||||
height: _self.warningTrendHeight * _self.pixelRatio,
|
||||
extra: {
|
||||
line: {
|
||||
type: 'curve'
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
touchLineA(e) {
|
||||
this.showCurveA.scrollStart(e);
|
||||
},
|
||||
moveLineA(e) {
|
||||
this.showCurveA.scroll(e);
|
||||
},
|
||||
touchEndLineA(e) {
|
||||
this.showCurveA.scrollEnd(e);
|
||||
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||||
this.showCurveA.touchLegend(e);
|
||||
this.showCurveA.showToolTip(e, {
|
||||
format: function(item, category) {
|
||||
return category + ' ' + item.name + ':' + item.data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<style lang='scss' scoped>
|
||||
.alarmCenter{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FBF8FB;
|
||||
&-header{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
&-picker{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-search{
|
||||
width: calc(100% - 200rpx);
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #FBF8FB;
|
||||
}
|
||||
&-box{
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: $box-shadow;
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
&-rightTop-icon{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
|
||||
}
|
||||
&-top{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
&-info{
|
||||
display: flex;
|
||||
padding-top: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
padding: $paddingTB $paddingLR;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
&-label{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alarmCenter-content{
|
||||
padding: 70rpx $paddingLR;
|
||||
padding-bottom: 40rpx;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
&-bottom-btn{
|
||||
padding: 0 30rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="alarmCenter">
|
||||
<view class="alarmCenter-header">
|
||||
<view class="alarmCenter-header-picker flex-center" @click="selectShow = true">
|
||||
<text>{{currentLabel}}</text>
|
||||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||||
</view>
|
||||
<u-search class="alarmCenter-header-search" :show-action="false"></u-search>
|
||||
</view>
|
||||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="alarmCenter-list">
|
||||
<view class="alarmCenter-box" v-for="(item,index) in 3" :key="index" @click="goAlarmDetailFn(item)">
|
||||
<view class="alarmCenter-box-top">
|
||||
<tuiIcon v-if="true" name="yichuli" @click.stop="alarmShowFlag = true" color="#82C974" size="80" class="alarmCenter-box-rightTop-icon"></tuiIcon>
|
||||
<u-tag v-else text="我知道了" size="mini" color="#1B9DFF" shape="circle" class="alarmCenter-box-rightTop-icon" ></u-tag>
|
||||
<view class="alarmCenter-box-top-name text-bold">烟雾探测报警器</view>
|
||||
<view class="alarmCenter-box-top-info">
|
||||
<tuiIcon name="zaixian" class="pr20" color="#2C9004" size="60" ></tuiIcon>
|
||||
<view class="">
|
||||
<view class="alarmCenter-box-address">
|
||||
<text>区域：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-state">
|
||||
<text>状态：</text>
|
||||
<text>正常</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom">
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">编号：</text>
|
||||
<text>20210210210210101</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">位置：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">时间：</text>
|
||||
<text>2021-01-21 10:20:20</text>
|
||||
</view>
|
||||
<view class="alarmCenter-box-bottom-row">
|
||||
<text class="alarmCenter-box-bottom-row-label">详细地址：</text>
|
||||
<text>福建省福州市闽侯县上街镇乌龙江大道</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||||
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
|
||||
<view class="alarmCenter-content">
|
||||
<view class="alarmCenter-content-row">项目：上海德润谷云物联科技有限公司集团有限公司</view>
|
||||
<view class="alarmCenter-content-row">地址：福建省福州市闽侯县</view>
|
||||
<view class="alarmCenter-content-row">线路：总路</view>
|
||||
<view class="alarmCenter-content-row">报警类型：异常分闸</view>
|
||||
<view class="alarmCenter-content-row">报警时间：2020年12月8日09:30:41</view>
|
||||
<view class="alarmCenter-content-row">联系人：林工</view>
|
||||
<view class="alarmCenter-content-row">联系电话：15860886888</view>
|
||||
<view class="alarmCenter-content-bottom-btn">
|
||||
<u-button type="primary" shape="circle">立即处理</u-button>
|
||||
<view class="pt20"></view>
|
||||
<u-button type="primary" shape="circle">填写维保</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentLabel:"全部",
|
||||
selectShow:false, // 选择框开关
|
||||
alarmShowFlag:false, // 警报信息开关
|
||||
stateList:[{
|
||||
label:"全部",
|
||||
value:1
|
||||
},{
|
||||
label:"已处理",
|
||||
value:2
|
||||
},{
|
||||
label:"未处理",
|
||||
value:3
|
||||
}]
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
onConfirmSelectFn(e){
|
||||
console.log(e,"eeeeees");
|
||||
this.currentLabel = e[0].label;
|
||||
},
|
||||
goAlarmDetailFn(item){
|
||||
uni.navigateTo({
|
||||
url:"./alarmDetail"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<style lang='scss' scoped>
|
||||
.device{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F9F9F9;
|
||||
&-header{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
&-header-picker{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background-color: rgba(256,256,256,0.1);
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
&-list{
|
||||
width: 100%;
|
||||
padding: $paddingTB 30rpx;
|
||||
}
|
||||
&-box{
|
||||
width: 100%;
|
||||
border: 10rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
&-info{
|
||||
font-size: 24rpx;
|
||||
&-name{
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
&-state{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 42rpx;
|
||||
&-icon{
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #00DD00;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="device">
|
||||
<view class="device-header">
|
||||
<view class="device-header-picker flex-between" @click="projectPickShow = true">
|
||||
<view class="">
|
||||
<tuiIcon name="xiangmu" class="pr10" color="#1C9AFF"></tuiIcon>
|
||||
<text>德润物联智慧园区项目</text>
|
||||
</view>
|
||||
<u-icon size="22" name="arrow-down-fill" color="#ccc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body top="80" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="device-list">
|
||||
<view class="device-box" v-for="(item,index) in 4" :key="index" @click="goDetailFn(item)">
|
||||
<view class="device-box-img pr20">
|
||||
<u-image width="160" height="180" src="http://static.drgyen.com/app/hc-app-power/images/home/waterLevel/device.jpg"></u-image>
|
||||
</view>
|
||||
<view class="device-box-info">
|
||||
<view class="device-box-info-name">A区饮水间</view>
|
||||
<view class="device-box-info-id pb10">
|
||||
<text class="text--base--grey">水表编号：</text>
|
||||
<text>20210120173218F01</text>
|
||||
</view>
|
||||
<view class="device-box-info-waterValue">
|
||||
<text class="text--base--grey">总用水量：</text>
|
||||
<text>125t</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-box-state">
|
||||
<view class="device-box-state-icon"></view>
|
||||
<view class="device-box-state-text">在线</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projectPickShow:false,
|
||||
projectPickList:[{
|
||||
label:"德润物联智慧园区项目",
|
||||
value:"hcwl"
|
||||
}],
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goDetailFn(item){
|
||||
uni.navigateTo({
|
||||
url:"./deviceDetail"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<style lang='scss' scoped>
|
||||
.deviceDetail{
|
||||
width: 100%;
|
||||
&-content{
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
&-row{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="deviceDetail">
|
||||
<view class="deviceDetail-content">
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">场所名称</view>
|
||||
<view class="">德润物业</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">设备</view>
|
||||
<view class="">A区饮水间</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">编号</view>
|
||||
<view class="">202101201561</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">设备状态</view>
|
||||
<view class="">在线18楼101北区</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">总用水量</view>
|
||||
<view class="">125t</view>
|
||||
</view>
|
||||
<view class="deviceDetail-row ">
|
||||
<view class="">所属项目</view>
|
||||
<view class="">德润物联智慧园区</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<style lang='scss' scoped>
|
||||
.waterLevel{
|
||||
width: 100%;
|
||||
&-header{
|
||||
width: 100%;
|
||||
/* height: 400rpx; */
|
||||
background-color: #1C9AFF;
|
||||
&-total{
|
||||
width: 270rpx;
|
||||
height: 270rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
&-img{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
&-text{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 99;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
&-number{
|
||||
font-size: 56rpx;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
padding: 30rpx $paddingLR;
|
||||
&-content{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
&-box{
|
||||
width: 32%;
|
||||
text-align: center;
|
||||
&-info{
|
||||
width: 2rpx;
|
||||
height: 50rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-nav{
|
||||
width: 100%;
|
||||
padding: $paddingTB $paddingLR;
|
||||
&-box-icon{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="waterLevel">
|
||||
<view class="waterLevel-header">
|
||||
<view class="waterLevel-header-total">
|
||||
<u-image width="100%" height="100%" class="waterLevel-header-total-img" src="http://static.drgyen.com/app/hc-app-power/images/home/waterLevel/header-bg.png"></u-image>
|
||||
<view class="waterLevel-header-total-text">
|
||||
<view class="waterLevel-header-total-text-number">30</view>
|
||||
<view class="">水表总数</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="waterLevel-header-info">
|
||||
<view class="waterLevel-header-info-content">
|
||||
<view class="waterLevel-header-info-box">
|
||||
<view class="text--base--grey">设备在线</view>
|
||||
<view class="text--base--main">48</view>
|
||||
</view>
|
||||
<view class="waterLevel-header-info-box-line"></view>
|
||||
<view class="waterLevel-header-info-box">
|
||||
<view class="text--base--grey">设备离线</view>
|
||||
<view class="text--base--grey">20</view>
|
||||
</view>
|
||||
<view class="waterLevel-header-info-box-line"></view>
|
||||
<view class="waterLevel-header-info-box">
|
||||
<view class="text--base--grey">今日报警数</view>
|
||||
<view class="text--base--alarm">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="waterLevel-nav">
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item v-for="(item,index) in navList" :key="index" @click="goNavBoxFn(item.url)">
|
||||
<view class="waterLevel-nav-box-icon flex-center" :style="{backgroundColor:item.bgColor}">
|
||||
<tuiIcon :name="item.icon" size="62" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
<view class="grid-text">{{item.name}}</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navList:[{
|
||||
icon:"shuibiao",
|
||||
name:"设备",
|
||||
bgColor:"#7AC2FE",
|
||||
url:"./device"
|
||||
},{
|
||||
icon:"changsuoguanli",
|
||||
name:"场所管理",
|
||||
bgColor:"#28C4B9",
|
||||
url:"./placeManage"
|
||||
},{
|
||||
icon:"jingbao",
|
||||
name:"告警中心",
|
||||
bgColor:"#FE5E5F",
|
||||
url:"./alarmCenter"
|
||||
},{
|
||||
icon:"chaoqishuibiao",
|
||||
name:"实时数据",
|
||||
bgColor:"#7284DE",
|
||||
url:"./realTime"
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goNavBoxFn(url){
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<style lang='scss' scoped>
|
||||
.placeDetail{
|
||||
width: 100%;
|
||||
&-info{
|
||||
padding: 30rpx $paddingLR;
|
||||
position: relative;
|
||||
&-row{
|
||||
padding-bottom: 20rpx;
|
||||
&-label{
|
||||
color: #777;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-state{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 30rpx;
|
||||
color: #F69906;
|
||||
}
|
||||
}
|
||||
&-line{
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #F5F5F9;
|
||||
}
|
||||
&-director-ctn{
|
||||
padding: 30rpx $paddingLR;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
&-director{
|
||||
&-row{
|
||||
padding-bottom: 20rpx;
|
||||
&-label{
|
||||
color: #777;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-director-icon{
|
||||
background-color: #1C9AFF;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-bottom-btn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="placeDetail">
|
||||
<view class="placeDetail-info">
|
||||
<view class="placeDetail-info-state">故障</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">名称：</text>
|
||||
<text>场所19#</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">区域：</text>
|
||||
<text>中青大厦18楼101北区</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">详情地址：</text>
|
||||
<text>福建省福州市闽侯县上街镇乌龙江中青大厦</text>
|
||||
</view>
|
||||
<view class="placeDetail-info-row">
|
||||
<text class="placeDetail-info-row-label">所属项目：</text>
|
||||
<text>德润项目A1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-line"></view>
|
||||
<view class="placeDetail-director-ctn">
|
||||
<view class="placeDetail-director">
|
||||
<view class="placeDetail-director-row">
|
||||
<text class="placeDetail-director-row-label">负责人：</text>
|
||||
<text>陈工</text>
|
||||
</view>
|
||||
<view class="placeDetail-director-row">
|
||||
<text class="placeDetail-director-row-label">手机号：</text>
|
||||
<text>158600000000</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-director-icon flex-center" @click="callPhoneFn">
|
||||
<tuiIcon name="lianxiwomen" color="#fff"></tuiIcon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeDetail-line"></view>
|
||||
<view class="placeDetail-bottom-btn">
|
||||
<u-button type="default" class="flex1">删除</u-button>
|
||||
<u-button type="primary" class="flex1">修改</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
callPhoneFn(){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '114' //仅为示例
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<style lang='scss' scoped>
|
||||
.placeManage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FBF8FB;
|
||||
&-header{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
justify-content: space-between;
|
||||
&-picker{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
&-search{
|
||||
width: calc(100% - 280rpx);
|
||||
}
|
||||
&-icon{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1C9AFF;
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: 30rpx $paddingLR;
|
||||
}
|
||||
&-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx;
|
||||
border-radius: 26rpx;
|
||||
box-shadow: $box-shadow;
|
||||
margin-bottom: 28rpx;
|
||||
background-color: #fff;
|
||||
&-info{
|
||||
width: 90%;
|
||||
&-address{
|
||||
color: #666666;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<view class="placeManage">
|
||||
<view class="placeManage-header">
|
||||
<view class="placeManage-header-picker flex-center" @click="selectShow = true">
|
||||
<text>{{currentLabel}}</text>
|
||||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||||
</view>
|
||||
<u-search class="placeManage-header-search" :show-action="false"></u-search>
|
||||
<view class="placeManage-header-icon flex-center">
|
||||
<u-icon name="plus" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<view class="placeManage-list">
|
||||
<view class="placeManage-box" v-for="(item,index) in 3" :key="index" @click="goPlaceDetailFn">
|
||||
<view class="placeManage-box-info">
|
||||
<view class="placeManage-box-info-name pb15">楼道南区</view>
|
||||
<view class="placeManage-box-info-address">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#999DB2"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentLabel:"德润项目A1",
|
||||
selectShow:false, // 选择框开关
|
||||
stateList:[{
|
||||
label:"德润项目A1",
|
||||
value:1
|
||||
},{
|
||||
label:"德润项目A2",
|
||||
value:2
|
||||
},{
|
||||
label:"德润项目A3",
|
||||
value:3
|
||||
}]
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad() {},
|
||||
methods: {
|
||||
goPlaceDetailFn(){
|
||||
uni.navigateTo({
|
||||
url:"./placeDetail"
|
||||
})
|
||||
},
|
||||
onConfirmSelectFn(e){
|
||||
console.log(e,"eeeeees");
|
||||
this.currentLabel = e[0].label;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,458 @@
|
|||
<style lang='scss' scoped>
|
||||
.realTime{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f9f9f9;
|
||||
&-header{
|
||||
width: 100%;
|
||||
background-color: #1C9BFF;
|
||||
}
|
||||
&-header-picker{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background-color: rgba(256,256,256,0.1);
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
&-header-info{
|
||||
display: flex;
|
||||
height: 200rpx;
|
||||
padding: 20rpx 0;
|
||||
&-total{
|
||||
color: #fff;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid rgba($color: #fff, $alpha: 0.2);
|
||||
&-number{
|
||||
font-size: 46rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
&-month{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
&-box{
|
||||
padding-left: 50rpx;
|
||||
display: flex;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
&-picker{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-date-type{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: 12rpx;
|
||||
&-box{
|
||||
text-align: center;
|
||||
width: 120rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.picker-line{
|
||||
width: 2rpx;
|
||||
height: 30rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
&-date-value{
|
||||
width: 260rpx;
|
||||
padding: 20rpx 0;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.realTime-date{
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 20rpx;
|
||||
&-title{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
}
|
||||
&-money-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
padding: 20rpx;
|
||||
&-detail{
|
||||
color: #999DB2;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.canvas-chart{
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
}
|
||||
&-table-header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
&-box{
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
&-box-month{
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&-table{
|
||||
width: 100%;
|
||||
&-row{
|
||||
display: flex;
|
||||
padding-top: 20rpx;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-value{
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
&-value-month{
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* &-calendar{
|
||||
background-color: #F5F5F9;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&-box{
|
||||
width: 104rpx;
|
||||
text-align: center;
|
||||
padding: 6rpx 0;
|
||||
&-money{
|
||||
font-size: 24rpx;
|
||||
color: #FA6400;
|
||||
}
|
||||
}
|
||||
} */
|
||||
&-year-table{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 32%);
|
||||
grid-auto-columns: repeat(2, 32%);
|
||||
grid-gap: 10rpx 2% ;
|
||||
}
|
||||
&-year-box{
|
||||
background-color: #F5F5F9;
|
||||
padding: 10rpx 30rpx;
|
||||
&-money{
|
||||
font-size: 24rpx;
|
||||
color: #FA6400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.monthDetail-popup{
|
||||
width: 600rpx;
|
||||
padding: 30rpx;
|
||||
.monthDetail-header{
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
&-box{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.monthDetail-list{
|
||||
|
||||
}
|
||||
.monthDetail-box{
|
||||
display: flex;
|
||||
&-value{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<view class="realTime">
|
||||
<view class="realTime-header">
|
||||
<view class="realTime-header-picker flex-between" @click="projectPickShow = true">
|
||||
<view class="">
|
||||
<tuiIcon name="xiangmu" class="pr10" color="#fff"></tuiIcon>
|
||||
<text>德润物联智慧园区项目</text>
|
||||
</view>
|
||||
<u-icon size="22" name="arrow-down-fill" color="#fff" ></u-icon>
|
||||
</view>
|
||||
<view class="realTime-header-info">
|
||||
<view class="realTime-header-info-total">
|
||||
<view class="realTime-header-info-total-number">20256</view>
|
||||
<view class="">总用水量(t)</view>
|
||||
</view>
|
||||
<view class="realTime-header-info-month">
|
||||
<view class="realTime-header-info-month-box pt10">
|
||||
<view class="">
|
||||
<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
|
||||
<text class="pr20">本月水量</text>
|
||||
</view>
|
||||
<view>137t</view>
|
||||
</view>
|
||||
<view class="realTime-header-info-month-box">
|
||||
<view class="">
|
||||
<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
|
||||
<text class="pr20">上月水量</text>
|
||||
</view>
|
||||
<view>265t</view>
|
||||
</view>
|
||||
<view class="realTime-header-info-month-box">
|
||||
<view class="">
|
||||
<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
|
||||
<text class="pr20">今年水量</text>
|
||||
</view>
|
||||
<view>7265t</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="realTime-content">
|
||||
<view class="realTime-picker">
|
||||
<view class="realTime-picker-date-type">
|
||||
<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='day'?'#1C9AFF':''}" @click="switchDateTypeFn('day')">日</view>
|
||||
<view class="picker-line"></view>
|
||||
<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='month'?'#1C9AFF':''}" @click="switchDateTypeFn('month')">月</view>
|
||||
<view class="picker-line"></view>
|
||||
<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='year'?'#1C9AFF':''}" @click="switchDateTypeFn('year')">年</view>
|
||||
</view>
|
||||
|
||||
<view class="realTime-picker-date-value" @click="dayPickerFlag = true">
|
||||
<picker mode="date" :fields="currentDateType" @change="onDayPickerConfirmFn">
|
||||
<text class="pr10">{{currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue}}</text>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="realTime-date" v-if="currentDateType=='day'">
|
||||
<view class="realTime-date-title">用水量分析</view>
|
||||
<lineScroll :chartData="chartData" width="630" height="400" extraLineType="curve"></lineScroll>
|
||||
<view class="realTime-date-table-header">
|
||||
<view class="realTime-date-table-header-box">类别</view>
|
||||
<view class="realTime-date-table-header-box">水量(t)</view>
|
||||
<view class="realTime-date-table-header-box">水费(元)</view>
|
||||
</view>
|
||||
<view class="realTime-date-table">
|
||||
<view class="realTime-date-table-row" v-for="(item,index) in dayWaterMoneyList" :key="index">
|
||||
<view class="realTime-date-table-row-value">{{item.typeName}}</view>
|
||||
<view class="realTime-date-table-row-value">{{item.waterValue}}</view>
|
||||
<view class="realTime-date-table-row-value">{{item.waterMoney}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="realTime-date" v-if="currentDateType=='month'">
|
||||
<view class="realTime-date-money-title">
|
||||
<view>用水量分析</view>
|
||||
<!-- <view class="realTime-date-money-title-detail" @click="goMonthDetailFn">
|
||||
<text class="pr10">详情</text>
|
||||
<text>></text>
|
||||
</view> -->
|
||||
</view>
|
||||
<columnScroll :chartData="chartData" width="630" height="400" ></columnScroll>
|
||||
<view class="realTime-date-table-header">
|
||||
<view class="realTime-date-table-header-box-month">日期</view>
|
||||
<view class="realTime-date-table-header-box-month">水量(t)</view>
|
||||
<view class="realTime-date-table-header-box-month">水费(元)</view>
|
||||
<view class="realTime-date-table-header-box-month"></view>
|
||||
</view>
|
||||
<view class="realTime-date-table">
|
||||
<view class="realTime-date-table-row" v-for="(item,index) in monthWaterMoneyList" :key="index">
|
||||
<view class="realTime-date-table-row-value-month">{{item.day}}</view>
|
||||
<view class="realTime-date-table-row-value-month">{{item.waterMonthValueTotal}}</view>
|
||||
<view class="realTime-date-table-row-value-month">{{item.waterMonthMoneyTotal}}</view>
|
||||
<view class="realTime-date-table-row-value-month" @click="openMonthDetailFn(item)">
|
||||
<text>详情</text>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="realTime-date" v-if="currentDateType=='year'">
|
||||
<view class="realTime-date-title">用水量分析</view>
|
||||
<ring :chartData="ringChartData" width="630" height="400" ></ring>
|
||||
<view class="realTime-date-year-table">
|
||||
<view class="realTime-date-year-box" v-for="(item,index) in 12" :key="index">
|
||||
<view class="">{{item+1}}月</view>
|
||||
<view class="realTime-date-year-box-money">9.87吨</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
|
||||
<u-popup v-model="monthDetailShow" mode="center">
|
||||
<view class="monthDetail-popup">
|
||||
<view class="monthDetail-title pb10">2021-01-28</view>
|
||||
<view class="monthDetail-header">
|
||||
<view class="monthDetail-header-box">类别</view>
|
||||
<view class="monthDetail-header-box">水量(t)</view>
|
||||
<view class="monthDetail-header-box">水费(元)</view>
|
||||
</view>
|
||||
<view class="monthDetail-list" v-if="monthDetailData">
|
||||
<view class="monthDetail-box" v-for="(item,index) in monthDetailData.waterMonthValueList" :key="index">
|
||||
<view class="monthDetail-box-value">A区</view>
|
||||
<view class="monthDetail-box-value">26</view>
|
||||
<view class="monthDetail-box-value">1300</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self = this;
|
||||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||||
import columnScroll from "@/components/uchartComponents/column-scroll.vue"
|
||||
import ring from "@/components/uchartComponents/ring.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
monthDetailShow:false,
|
||||
monthDetailData:null,
|
||||
|
||||
currentDateType:"day",
|
||||
currentDayValue:"",
|
||||
currentMonthValue:"",
|
||||
currentYearValue:"",
|
||||
|
||||
projectPickShow:false,
|
||||
projectPickList:[{
|
||||
label:"德润物联智慧园区项目",
|
||||
value:"hcwl"
|
||||
}],
|
||||
dayWaterMoneyList:[{
|
||||
typeName:"A区",
|
||||
waterValue:128,
|
||||
waterMoney:200
|
||||
},{
|
||||
typeName:"B区",
|
||||
waterValue:168,
|
||||
waterMoney:300
|
||||
}],
|
||||
monthWaterMoneyList:[{
|
||||
day:1,
|
||||
waterMonthValueTotal:50,
|
||||
waterMonthMoneyTotal:200,
|
||||
waterMonthValueList:[{
|
||||
label:"A区",
|
||||
value:31,
|
||||
money:22
|
||||
},{
|
||||
label:"B区",
|
||||
value:2,
|
||||
money:26
|
||||
}]
|
||||
},{
|
||||
day:1,
|
||||
waterMonthValueTotal:50,
|
||||
waterMonthMoneyTotal:200,
|
||||
waterMonthValueList:[{
|
||||
label:"A区",
|
||||
value:31,
|
||||
money:22
|
||||
},{
|
||||
label:"B区",
|
||||
value:2,
|
||||
money:26
|
||||
}]
|
||||
}],
|
||||
|
||||
chartData:null,
|
||||
ringChartData:null
|
||||
}
|
||||
},
|
||||
components:{lineScroll,columnScroll,ring},
|
||||
onLoad() {
|
||||
_self = this;
|
||||
this.currentDayValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||||
this.currentMonthValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
|
||||
this.currentYearValue = this.$u.timeFormat(new Date().getTime(), 'yyyy');
|
||||
this.getServerData();
|
||||
|
||||
},
|
||||
methods: {
|
||||
openMonthDetailFn(item){
|
||||
this.monthDetailData = item;
|
||||
this.monthDetailShow = true;
|
||||
},
|
||||
onDayPickerConfirmFn(e){
|
||||
// this.dayPickerValue = e.detail.value;
|
||||
// currentDayValue:"",
|
||||
// currentMonthValue:"",
|
||||
// currentYearValue:""
|
||||
switch (this.currentDateType){
|
||||
case "day":
|
||||
this.currentDayValue = e.detail.value;
|
||||
break;
|
||||
case "month":
|
||||
this.currentMonthValue = e.detail.value;
|
||||
break;
|
||||
case "year":
|
||||
this.currentYearValue = e.detail.value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
switchDateTypeFn(dateType){
|
||||
console.log(dateType,"dateType");
|
||||
this.currentDateType = dateType;
|
||||
},
|
||||
getServerData(){
|
||||
uni.request({
|
||||
url: 'https://www.ucharts.cn/data.json',
|
||||
data:{
|
||||
},
|
||||
success: function(res) {
|
||||
console.log(res.data.data)
|
||||
let LineA={categories:[],series:[]};
|
||||
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
|
||||
LineA.categories=res.data.data.LineA.categories;
|
||||
LineA.series=res.data.data.LineA.series;
|
||||
_self.chartData = LineA;
|
||||
// _self.textarea = JSON.stringify(res.data.data.LineA);
|
||||
// _self.showLineA("canvasLineA",LineA);
|
||||
console.log(_self.ringChartData,"ringChartData");
|
||||
_self.ringChartData = {};
|
||||
_self.ringChartData ={
|
||||
series:[],
|
||||
};
|
||||
_self.ringChartData.series=res.data.data.Ring.series;
|
||||
// 自定义文案示例，需设置format字段
|
||||
for(let i = 0 ;i < _self.ringChartData.series.length;i++){
|
||||
_self.ringChartData.series[i].format=()=>{return _self.ringChartData.series[i].name+_self.ringChartData.series[i].data};
|
||||
}
|
||||
|
||||
},
|
||||
fail: () => {
|
||||
// _self.tips="网络错误，小程序端请检查合法域名";
|
||||
},
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
<style lang="scss" scoped>
|
||||
.alarmRecord{
|
||||
width: 100%;
|
||||
background-color: #F9F9F9;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
}
|
||||
&-info-list{
|
||||
background-color: #F9F9F9;
|
||||
padding: $paddingTB $paddingLR;
|
||||
margin-top: 72rpx;
|
||||
}
|
||||
.scrollbtm{
|
||||
margin-bottom: 110rpx;
|
||||
}
|
||||
&-info-box{
|
||||
width: 100%;
|
||||
border-radius: $uni-border-radius-lg;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-msg{
|
||||
padding: 20rpx;
|
||||
/* border-bottom: 2px dotted #A1A1A1; */
|
||||
border-bottom: 1px dashed #A1A1A1;
|
||||
position: relative;
|
||||
}
|
||||
.box-checkbox{
|
||||
position: absolute;
|
||||
left: 14rpx;
|
||||
top: 14rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.box-dealwith{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
z-index: 1;
|
||||
padding-left: 50rpx;
|
||||
padding-top: 50rpx;
|
||||
}
|
||||
.box-left-line{
|
||||
width: 8rpx;
|
||||
height: 180rpx;
|
||||
background: #93CDFC;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 20rpx;
|
||||
top: 4rpx;
|
||||
// left: 40rpx;
|
||||
// top: 20rpx;
|
||||
}
|
||||
&-msg-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.msg-row-icon{
|
||||
border-radius: $uni-border-radius-circle;
|
||||
/* padding: 10rpx; */
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $main-color;
|
||||
z-index: 10;
|
||||
}
|
||||
.msg-row-text{
|
||||
color: #000;
|
||||
width: calc(100% - 50rpx);
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
&-info-box-msg-row-ctn{
|
||||
position: relative;
|
||||
}
|
||||
&-info-box-msg-content{
|
||||
display: flex;
|
||||
.alarmRecord-info-box-msg-warning{
|
||||
width: 120rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FF3F3F;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.bottom-btn-ctn{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: $box-shadow;
|
||||
// .bottom-btn{
|
||||
// width: 50%;
|
||||
// }
|
||||
&-lf{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.alarmInfo-content{
|
||||
padding: 70rpx $paddingLR;
|
||||
padding-bottom: 40rpx;
|
||||
&-row{
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
&-bottom-btn{
|
||||
padding: 0 30rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="alarmRecord">
|
||||
<view class="alarmRecord-header">
|
||||
<u-input :disabled="true" style="width: 240rpx;" input-align="center" v-model="beginDate" @click="beginDatePickerShow = true" />
|
||||
<view class="">至</view>
|
||||
<u-input :disabled="true" style="width: 240rpx;" input-align="center" v-model="endDate" @click="endDatePickerShow = true" />
|
||||
<u-button type="primary" size="mini" :ripple="true" :disabled="toalLen === 0" @click="headerBtnHandleFn">{{checkboxShowFlag | checkBtnName}}</u-button>
|
||||
</view>
|
||||
<view class="alarmRecord-info-list" :class="{'scrollbtm': checkboxShowFlag}">
|
||||
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<view class="alarmRecord-info-box" v-for="(item,index) in lineRoadList" :key="index">
|
||||
<view class="alarmRecord-info-box-msg">
|
||||
<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag && item.processStatus == 'UNPROCESS'" @change="checkboxChange($event, item.projectId)"></u-checkbox> -->
|
||||
<view class="box-checkbox" v-if="checkboxShowFlag && item.processStatus == 'UNPROCESS'">
|
||||
<checkbox :value="item.recordId" :checked="selCheck.includes(item.recordId)" color="#1C9AFF"/>
|
||||
</view>
|
||||
<view class="box-dealwith" @click="openDealwithFn(item)">
|
||||
<tuiIcon :name="item.processStatus== 'UNPROCESS'?'weichuli':'yichuli'" size="80" :color="item.processStatus== 'UNPROCESS'?'#BE2D08':'#71B943'"></tuiIcon>
|
||||
</view>
|
||||
<view class="alarmRecord-info-box-msg-content">
|
||||
<view class="alarmRecord-info-box-msg-warning">{{item.alarmDivide=='ALARM'?"报警":"预警"}}</view>
|
||||
<view class="alarmRecord-info-box-msg-row-ctn">
|
||||
<view class="box-left-line"></view>
|
||||
<view class="alarmRecord-info-box-msg-row">
|
||||
<view class="msg-row-icon">
|
||||
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
|
||||
</view>
|
||||
<view class="msg-row-text pl20">项目：{{item.projectName}}</view>
|
||||
</view>
|
||||
<view class="alarmRecord-info-box-msg-row">
|
||||
<view class="msg-row-icon">
|
||||
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
|
||||
</view>
|
||||
<view class="msg-row-text pl20">地点：{{item.projectAddress}}</view>
|
||||
</view>
|
||||
<view class="alarmRecord-info-box-msg-row">
|
||||
<view class="msg-row-icon">
|
||||
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
|
||||
</view>
|
||||
<view class="msg-row-text pl20">线路：{{item.deviceName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="alarmRecord-info-box-bottom">
|
||||
<text>时间：{{item.alarmTime}}</text>
|
||||
<text>报警类型：{{item.typeName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
<view class="bottom-btn-ctn" v-if="checkboxShowFlag">
|
||||
<!-- <u-button type="warning" class="bottom-btn" @click="cancelDealWithFn">取消</u-button> -->
|
||||
<view class="bottom-btn-ctn-lf">
|
||||
<checkbox color="#1C9AFF" :checked="checkedAll" @click="checkedAllClick"/>
|
||||
<text>全选</text>
|
||||
<text style="margin-left: 20rpx;">{{chckLen}}/{{toalLen}}</text>
|
||||
</view>
|
||||
<u-button type="primary" size="medium " :ripple="true" class="bottom-btn" @click="handleNowFn">立即处理</u-button>
|
||||
</view>
|
||||
<u-picker mode="time" :params="params" v-model="beginDatePickerShow" @confirm="beginDateConfirmFn"></u-picker>
|
||||
<u-picker mode="time" :params="params" v-model="endDatePickerShow" @confirm="endDateConfirmFn"></u-picker>
|
||||
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
|
||||
<view class="alarmInfo-content">
|
||||
<view class="alarmInfo-content-row">项目：{{currentPickInfoData.projectName}}</view>
|
||||
<view class="alarmInfo-content-row">地址：{{currentPickInfoData.projectAddress}}</view>
|
||||
<view class="alarmInfo-content-row">线路：{{currentPickInfoData.deviceName}}</view>
|
||||
<view class="alarmInfo-content-row">报警类型：{{currentPickInfoData.typeName}}</view>
|
||||
<view class="alarmInfo-content-row">报警时间：{{currentPickInfoData.alarmTime}}</view>
|
||||
<!-- <view class="alarmInfo-content-row">联系人：{{}}</view>
|
||||
<view class="alarmInfo-content-row">联系电话：{{}}</view> -->
|
||||
<view class="alarmInfo-content-bottom-btn">
|
||||
<u-button type="primary" shape="circle" :ripple="true" @click="projectHandleNowFn(currentPickInfoData)">立即处理</u-button>
|
||||
<!-- <view class="pt20"></view> -->
|
||||
<!-- <u-button type="primary" shape="circle" @click="fiilMaintenanceFn">填写维保</u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkboxShowFlag:false, // 按钮开关
|
||||
alarmShowFlag:false, // 报警信息弹框开关
|
||||
// currentPickInfoData:null, // 当前选择的报警信息
|
||||
params:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
timestamp: true, // 1.3.7版本提供
|
||||
},
|
||||
beginDatePickerShow:false,
|
||||
endDatePickerShow:false,
|
||||
beginDate:"",
|
||||
endDate:"",
|
||||
deviceId:"",
|
||||
lineRoadList:[],
|
||||
currentPickInfoData: {},
|
||||
selCheck: [],
|
||||
checkedAll: false
|
||||
}
|
||||
},
|
||||
mixins:[MescrollMixin],
|
||||
onLoad(e) {
|
||||
this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||||
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||||
this.deviceId = e.deviceId;
|
||||
},
|
||||
methods: {
|
||||
subtractOneDay(dateStr) {
|
||||
// 将字符串转换为Date对象
|
||||
const date = new Date(dateStr);
|
||||
|
||||
// 减去一天
|
||||
date.setDate(date.getDate() - 1);
|
||||
|
||||
// 格式化为yyyy-mm-dd
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
/*上拉加载的回调*/
|
||||
upCallback(page) {
|
||||
let pageNum = page.num; // 页码, 默认从1开始
|
||||
let pageSize = page.size; // 页长, 默认每页10条
|
||||
let beginTime = this.subtractOneDay(this.beginDate);
|
||||
let obj = {
|
||||
pageSize:pageSize,
|
||||
pageNum:pageNum,
|
||||
deviceId:this.deviceId,
|
||||
beginTime:beginTime,
|
||||
endTime:this.endDate,
|
||||
}
|
||||
this.$get("/app/alarm/table",obj).then((res)=>{
|
||||
// console.log(res,"ressssssssssss");
|
||||
if (res.rows && res.rows.length>0) {
|
||||
// 接口返回的当前页数据列表 (数组)
|
||||
let curPageData = res.rows;
|
||||
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||||
let curPageLen = curPageData.length;
|
||||
//设置列表数据
|
||||
if(pageNum == 1) this.lineRoadList = []; //如果是第一页需手动置空列表
|
||||
this.lineRoadList = this.lineRoadList.concat(curPageData); //追加新数据
|
||||
this.handleCheck(curPageData);
|
||||
this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
||||
// this.mescroll.endByPage(curPageLen, res.data.total)
|
||||
// this.mescroll.endSuccess(curPageData.length);
|
||||
} else{
|
||||
this.lineRoadList = [];
|
||||
this.mescroll.endErr();
|
||||
this.mescroll.showEmpty();
|
||||
// this.mescroll.endUpScroll(true);
|
||||
}
|
||||
}).catch(()=>{
|
||||
//联网失败, 结束加载
|
||||
this.mescroll.endErr();
|
||||
})
|
||||
},
|
||||
fiilMaintenanceFn(){
|
||||
let queryDataStr = JSON.stringify(this.currentPickInfoData);
|
||||
uni.navigateTo({
|
||||
url:`/pages/home/wisdomElectricity/wbjl/addRecord?alrmData=${queryDataStr}`,
|
||||
success: () => {
|
||||
this.alarmShowFlag = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
openDealwithFn(item){
|
||||
// console.log(item,"item");
|
||||
if(this.checkboxShowFlag) {
|
||||
this.$tui.toast('当前为批处理，请先取消批处理', 3000);
|
||||
return false;
|
||||
}
|
||||
if(item.processStatus == 'UNPROCESS'){
|
||||
this.alarmShowFlag = true;
|
||||
this.currentPickInfoData = item;
|
||||
}
|
||||
},
|
||||
cancelDealWithFn(){
|
||||
this.lineRoadList.forEach((item)=>{
|
||||
item.checkedFlag = false;
|
||||
})
|
||||
this.checkboxShowFlag = false;
|
||||
},
|
||||
beginDateConfirmFn(e){
|
||||
console.log(e,"e")
|
||||
this.beginDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
endDateConfirmFn(e){
|
||||
console.log(e,"e")
|
||||
this.endDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
headerBtnHandleFn(){
|
||||
if (this.checkboxShowFlag) {
|
||||
this.checkboxShowFlag = false;
|
||||
this.selCheck = [];
|
||||
this.checkAll = false;
|
||||
} else{
|
||||
this.checkboxShowFlag = true;
|
||||
}
|
||||
},
|
||||
checkboxChange(e) {
|
||||
this.selCheck = e.detail.value;
|
||||
},
|
||||
checkedAllClick(){
|
||||
const _this = this;
|
||||
this.checkedAll = !this.checkedAll;
|
||||
if(this.checkedAll){
|
||||
this.selCheck = [];
|
||||
this.lineRoadList.forEach(item => {
|
||||
if(item.processStatus == 'UNPROCESS'){
|
||||
if(!_this.selCheck.includes(item.recordId)){
|
||||
_this.selCheck.push(item.recordId);
|
||||
}
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.selCheck = [];
|
||||
}
|
||||
},
|
||||
handleCheck(data) {
|
||||
if(this.checkedAll){
|
||||
data.forEach(item => {
|
||||
if(item.processStatus == 'UNPROCESS'){
|
||||
if(!this.selCheck.includes(item.recordId)){
|
||||
this.selCheck.push(item.recordId);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleNowFn() {
|
||||
this.$post('/app/alarm/batch-update', {recordIds: this.selCheck}).then(res => {
|
||||
if(res.code == 200) {
|
||||
this.$tui.toast('处理成功', 3000, true);
|
||||
this.updateState(this.selCheck);
|
||||
this.selCheck = [];
|
||||
this.checkboxShowFlag = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
projectHandleNowFn(data) {
|
||||
this.selCheck = [data.recordId];
|
||||
this.handleNowFn();
|
||||
this.alarmShowFlag = false;
|
||||
},
|
||||
updateState(selCheck) {
|
||||
this.lineRoadList.forEach(item => {
|
||||
if(selCheck.includes(item.recordId)) {
|
||||
item.processStatus = 'PROCESSED';
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
checkAll() {
|
||||
return this.lineRoadList.every(item => {
|
||||
return item.processStatus == 'UNPROCESS' && this.selCheck.includes(item.recordId);
|
||||
});
|
||||
},
|
||||
toalLen() {
|
||||
return this.lineRoadList.length || 0;
|
||||
},
|
||||
chckLen() {
|
||||
return this.selCheck.length || 0;
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
checkBtnName(flag) {
|
||||
if(flag) {
|
||||
return '取消批量处理';
|
||||
} else {
|
||||
return '批量处理';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,732 @@
|
|||
<template>
|
||||
<view class="electricity">
|
||||
<view class="electricity-header">
|
||||
<view class="electricity-info">
|
||||
<view class="electricity-info-title-box">
|
||||
<view class="electricity-info-title">
|
||||
{{deviceInfoData && deviceInfoData.deviceName}}
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<span class="diconfont dicon-icon_xiugai" @click="editMenuShow=true"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="electricity-info-msg">
|
||||
<view class="electricity-info-msg-text">
|
||||
<view class="msg-row">
|
||||
<view class="msg-row-label">所属项目：</view>
|
||||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.projectName}}</view>
|
||||
</view>
|
||||
<view class="msg-row">
|
||||
<view class="msg-row-label">设备组：</view>
|
||||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.groupName}}</view>
|
||||
</view>
|
||||
<view class="msg-row">
|
||||
<view class="msg-row-label">设备类型：</view>
|
||||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.deviceTypeName}}</view>
|
||||
</view>
|
||||
<view class="msg-row">
|
||||
<view class="msg-row-label">设备编号：</view>
|
||||
<view class="msg-row-value ellipsis">{{deviceInfoData && deviceInfoData.deviceKey}}</view>
|
||||
</view>
|
||||
<view class="msg-row">
|
||||
<view class="msg-row-label">注册时间：</view>
|
||||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.createTime}}</view>
|
||||
</view>
|
||||
<!-- <view class="msg-row">
|
||||
<view class="msg-row-label">设备名称：</view>
|
||||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.deviceName}}</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="msg-row">
|
||||
<view class="msg-row-label">设备地址：</view>
|
||||
<view class="msg-row-value-box">
|
||||
<view class="msg-row-address">{{deviceInfoData && deviceInfoData.deviceAddress}}</view>
|
||||
<view class="diconfont dicon-dingwei"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="electricity-info-msg-img">
|
||||
<u-image width="160" height="160" v-if="deviceInfoData.deviceImage"
|
||||
:src="$tools.getIotFileUrl(deviceInfoData.deviceImage)"></u-image>
|
||||
<u-image width="160" height="160" v-else
|
||||
src="http://static.drgyen.com/app/hc-app-power/images/switch.png"></u-image>
|
||||
<view class="mt20"></view>
|
||||
<!-- <u-button size="mini" :custom-style="customStyle" shape="circle" :plain="true" @click="editMenuShow=true">
|
||||
<view class="diconfont dicon-icon_bianji" style="font-size: 22rpx;margin-right: 6rpx;"></view>
|
||||
修改设备
|
||||
</u-button> -->
|
||||
</view>
|
||||
<!-- <view class="electricity-info-msg-segmentation">
|
||||
<view class="electricity-info-msg-segmentation-left"></view>
|
||||
<view class="electricity-info-msg-segmentation-right"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="electricity-info-address-box">
|
||||
<view class="msg-row-label">设备地址：</view>
|
||||
<view class="msg-row-value-box">
|
||||
<view class="msg-row-address">{{deviceInfoData && deviceInfoData.deviceAddress}}</view>
|
||||
<view class="diconfont dicon-dingwei"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空间标签 -->
|
||||
<view class="electricity-info-label">
|
||||
<u-tag v-for="(val,i) in deviceInfoData.deviceLabel" size="mini" :key="i" :text="val" type="primary"
|
||||
style="margin-right: 10rpx;" />
|
||||
</view>
|
||||
<view class="electricity-info-state">
|
||||
<view class="electricity-info-state-box" v-if="deviceInfoData">
|
||||
<view class="electricity-info-state-box-text"
|
||||
:style="{color:deviceInfoData && deviceInfoData.deviceState=='ONLINE'?'#16D2AF':deviceInfoData.deviceState=='OFFLINE'?'#FE5277':'#aaa'}">
|
||||
{{deviceInfoData && deviceInfoData.deviceState=='ONLINE'?"在线":deviceInfoData.deviceState=='OFFLINE'?"离线":"未激活"}}
|
||||
</view>
|
||||
<view class="electricity-info-state-box-title">设备状态</view>
|
||||
</view>
|
||||
<!-- <view class="electricity-info-state-box-line"></view> -->
|
||||
<view class="electricity-info-state-box">
|
||||
<view v-if="deviceInfoData.deviceType == 'GATEWAY_CONTROLLER'" class="electricity-info-state-box-text"
|
||||
:style="{color:deviceInfoData && deviceInfoData.tenantAlarmVo?'#FE5277':'#16D2AF'}">
|
||||
{{deviceInfoData && deviceInfoData.tenantAlarmVo?"异常":"正常"}}
|
||||
</view>
|
||||
<view v-else class="electricity-info-state-box-text"
|
||||
:style="{color:deviceInfoData && deviceInfoData.deviceAlarmState?'#FE5277':'#16D2AF'}">
|
||||
{{deviceInfoData && deviceInfoData.deviceAlarmState?"异常":"正常"}}
|
||||
</view>
|
||||
<view class="electricity-info-state-box-title">报警状态</view>
|
||||
</view>
|
||||
<!-- <view class="electricity-info-state-box-line"></view> -->
|
||||
<view class="electricity-info-state-box">
|
||||
<view class="electricity-info-state-box-text">
|
||||
<template v-if="deviceInfoData.signal > 0">
|
||||
<template v-if="deviceInfoData.signal == 1">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlieyg.png"
|
||||
class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="deviceInfoData.signal == 2">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlielg.png"
|
||||
class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="deviceInfoData.signal == 3">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesg.png"
|
||||
class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="deviceInfoData.signal == 4">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesig.png"
|
||||
class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="deviceInfoData.signal == 5">
|
||||
<tuiIcon name="xinhaowuge" color="#16D2AF"></tuiIcon>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tuiIcon name="xinhaolx" color="#FE5277"></tuiIcon>
|
||||
</template>
|
||||
<!-- <tuiIcon :name="deviceInfoData.signal > 0?'xinhao':'xinhaolx'" :color="deviceInfoData.signal > 0?'#16D2AF':'#ff0000'"></tuiIcon> -->
|
||||
<text class="pl10"
|
||||
:style="{color:deviceInfoData.signal > 0?'#16D2AF':'#FE5277'}">{{deviceInfoData.signal > 0 ? getDictionary('signalType',deviceInfoData.stype) : '异常'}}</text>
|
||||
</view>
|
||||
<view class="electricity-info-state-box-title">信号状态</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-notice-bar mode="horizontal" type="error" bg-color="transparent" :list="alrmNotice" :is-circular="playState"
|
||||
:play-state="playState?'play':'paused'"></u-notice-bar>
|
||||
|
||||
<view class="home-title">
|
||||
<view class="home-title-txt">
|
||||
设备信息
|
||||
</view>
|
||||
<view class="home-title-remark"></view>
|
||||
</view>
|
||||
|
||||
<view class="menu-box">
|
||||
<view class="home-menu-item menu-item" v-for="(item,index) in menuList" :key="index"
|
||||
@click="goFunction(item,index)">
|
||||
<view class="home-menu-item-header">
|
||||
<view class="home-menu-item-left">
|
||||
<view class="home-menu-item-name">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="home-menu-item-remark">
|
||||
{{item.remark}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="home-menu-item-right">
|
||||
<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="home-menu-item-bg" :class="['diconfont',item.icon]" :style="{backgroundImage:item.background}"></view>
|
||||
<view class="home-menu-item-bg-two" :class="['diconfont',item.icon]" :style="{color:item.twoColor}"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-popup v-model="uploadImgFlag" mode="center" :closeable="true" border-radius="16">
|
||||
<view class="uploadImg">
|
||||
<view class="uploadImg-title">
|
||||
<text class="pr20">设备图片</text>
|
||||
<tuiIcon name="huabanx" color="#FF6600" size="50"></tuiIcon>
|
||||
</view>
|
||||
<view class="pt20 pb20">
|
||||
<u-upload ref="uUpload" max-count="1" :action="action" :header="uploadHeader" :size-type="['compressed']"
|
||||
:max-size="1024*1024" @on-success="onUploadSuccessFn"></u-upload>
|
||||
</view>
|
||||
<u-button @click="onSubmitEditImageFn" type="primary">提交</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
|
||||
<u-modal v-model="editDeviceModalShow" title="修改设备名称" :show-cancel-button="true"
|
||||
@confirm="$throttle(editDeviceNameFn, 500)">
|
||||
<view class="slot-content">
|
||||
<u-input v-model="editDeviceName" :focus="true" border type="text" placeholder="请输入设备名称"></u-input>
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import getDictionary from "@/utils/dataDictionary.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuList:[
|
||||
{
|
||||
name:'实时状态',
|
||||
remark:'掌握运行状态',
|
||||
icon:"dicon-icon_shishi",
|
||||
url:"/pages/home/wisdomElectricity/realTime/index",
|
||||
background:"linear-gradient(180deg, #6596D2, #1E5095);",
|
||||
twoColor: "rgba(29, 77, 144, 0.1);"
|
||||
},
|
||||
{
|
||||
name: "报警记录",
|
||||
remark: "数智化管理",
|
||||
icon: "dicon-icon_gaojingjilu",
|
||||
url: "./alarmRecord",
|
||||
background: "linear-gradient(0deg, #D94353, #FF887C);",
|
||||
twoColor: "rgba(217, 67, 83,0.1);"
|
||||
},
|
||||
{
|
||||
name: "用能分析",
|
||||
remark: "一目了然",
|
||||
icon: "dicon-icon_yongnengfenxi",
|
||||
url: "./energyAnalysis/index",
|
||||
background: "linear-gradient(0deg, #7244EF, #9388F9);",
|
||||
twoColor: "rgba(114, 68, 239,0.1);"
|
||||
},
|
||||
{
|
||||
name: "历史曲线",
|
||||
remark: "数据统计",
|
||||
icon: "dicon-icon_jiance",
|
||||
url: "./historyCurve/index",
|
||||
background: "linear-gradient(0deg, #2365C0, #24B4E9);",
|
||||
twoColor: "rgba(35, 101, 192,0.1);"
|
||||
},
|
||||
{
|
||||
name: "维保记录",
|
||||
remark: "精准保护",
|
||||
icon: "dicon-icon_weibao",
|
||||
url: "./wbjl/maintenanceRecord",
|
||||
background: "linear-gradient(0deg, #F28E26, #FFC574);",
|
||||
twoColor: "rgba(242, 142, 38,0.1);"
|
||||
},
|
||||
{
|
||||
name: "分合闸警示",
|
||||
remark: "开关记录",
|
||||
icon: "dicon-fenhezhajingshi",
|
||||
url: "./switchWarn",
|
||||
background: "linear-gradient(0deg, #199582, #6AD6C3);",
|
||||
twoColor: "rgba(25, 149, 130,0.1);"
|
||||
}
|
||||
],
|
||||
// 演示地址，请勿直接使用
|
||||
action: '',
|
||||
uploadHeader: {},
|
||||
editImgDataStr: "",
|
||||
uploadCode: -1,
|
||||
deviceId: "", // 设备ID
|
||||
uploadImgFlag: false,
|
||||
alrmNotice: [],
|
||||
playState: false,
|
||||
customStyle: {
|
||||
color: '#0066CC',
|
||||
borderColor: '#0066CC',
|
||||
height: '56rpx'
|
||||
},
|
||||
editMenuList: [{
|
||||
text: '修改设备名称',
|
||||
},
|
||||
{
|
||||
text: '修改设备图片',
|
||||
}
|
||||
],
|
||||
editMenuShow: false,
|
||||
editDeviceModalShow: '',
|
||||
editDeviceName: '',
|
||||
deviceInfoData: {},
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.action = this.$config.baseUrl + "/common/upload";
|
||||
const userToken = uni.getStorageSync('userToken');
|
||||
this.uploadHeader = {
|
||||
"Authorization": userToken,
|
||||
"Content-Type": "multipart/form-data"
|
||||
}
|
||||
this.deviceId = e.deviceId;
|
||||
this.getDeviceInfoFn();
|
||||
},
|
||||
methods: {
|
||||
getDictionary,
|
||||
editDeviceNameFn() {
|
||||
let obj = {
|
||||
deviceId: this.deviceInfoData.deviceId,
|
||||
deviceName: this.editDeviceName
|
||||
}
|
||||
this.$put("/app/device/edit-image", obj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$u.toast(res.msg, 3000);
|
||||
this.getDeviceInfoFn();
|
||||
} else {
|
||||
this.$u.toast(res.msg, 3000);
|
||||
}
|
||||
})
|
||||
},
|
||||
selectMenu(e) {
|
||||
console.log("点击菜单", this.editMenuList[e].text)
|
||||
if (this.editMenuList[e].text == '修改设备图片') {
|
||||
this.uploadImgFlag = true;
|
||||
} else if (this.editMenuList[e].text == '修改设备名称') {
|
||||
this.editDeviceName = this.deviceInfoData.deviceName;
|
||||
this.editDeviceModalShow = true;
|
||||
}
|
||||
},
|
||||
onUploadSuccessFn(data, index, lists, name) {
|
||||
console.log(lists, "成功");
|
||||
this.uploadCode = lists[0].response.code;
|
||||
this.editImgDataStr = lists[0].response.fileName;
|
||||
},
|
||||
onSubmitEditImageFn() {
|
||||
if (this.uploadCode > -1 && this.uploadCode != 200) {
|
||||
this.$tui.toast('图片正在上传，请稍后', 3000);
|
||||
return false;
|
||||
}
|
||||
this.$put("/app/device/edit-image", {
|
||||
deviceId: this.deviceId,
|
||||
deviceImage: this.editImgDataStr
|
||||
}).then((res) => {
|
||||
console.log(res, "res");
|
||||
this.uploadCode = -1;
|
||||
if (res.code === 200) {
|
||||
this.$refs.uUpload.clear();
|
||||
this.uploadImgFlag = false;
|
||||
this.getDeviceInfoFn();
|
||||
} else {
|
||||
this.$tui.toast(res.msg, 3000)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取设备信息
|
||||
getDeviceInfoFn() {
|
||||
// this.$get("/app/device/info",{deviceId:this.deviceId}).then((res)=>{
|
||||
this.$get("/app/device/" + this.deviceId).then((res) => {
|
||||
console.log(res, "ressda");
|
||||
if (res.data.signal) {
|
||||
res.data.signal = Number(res.data.signal);
|
||||
}
|
||||
if (res.data.deviceLabel && res.data.deviceLabel[0] == '空间') {
|
||||
res.data.deviceLabel.shift();
|
||||
}
|
||||
this.deviceInfoData = res.data;
|
||||
// this.deviceInfoData.deviceAddr = '啊哈年少多金辣三丁颗粒剂阿卡受打击考拉'
|
||||
// 最新报警
|
||||
if (res.data.tenantAlarmVo) {
|
||||
let {
|
||||
projectName,
|
||||
spaceName,
|
||||
projectAddress,
|
||||
deviceName,
|
||||
alarmTime,
|
||||
typeName
|
||||
} = res.data.tenantAlarmVo;
|
||||
let alarmStr =
|
||||
`${projectAddress || "-"} ${(projectName + spaceName) || "-"}中${deviceName || "-"} 于${alarmTime || "-"}发生${typeName || "-"}`
|
||||
this.alrmNotice.push(alarmStr);
|
||||
this.playState = true;
|
||||
} else {
|
||||
this.alrmNotice.push("暂无警报");
|
||||
}
|
||||
})
|
||||
},
|
||||
// 跳转
|
||||
goFunction(item, index) {
|
||||
console.log(item, "item");
|
||||
uni.navigateTo({
|
||||
url: `${item.url}?deviceId=${this.deviceId}&prodKey=${this.deviceInfoData.prodKey}&deviceKey=${this.deviceInfoData.deviceKey}&projectName=${this.deviceInfoData.projectName}&deviceName=${this.deviceInfoData.deviceName}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
::v-deep .header-bg {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.electricity {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20rpx 45rpx;
|
||||
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
&-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.electricity-info-title-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.electricity-info-title-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.electricity-info-title {
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 550;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.diconfont {
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
padding: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* z-index: 1; */
|
||||
/* margin-bottom: 20rpx; */
|
||||
&-id {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* padding-bottom: 20rpx; */
|
||||
padding: 30rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-info-msg {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 0;
|
||||
|
||||
.electricity-info-msg-img {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.electricity-info-msg-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.msg-row {
|
||||
display: flex;
|
||||
padding-bottom: 12rpx;
|
||||
width: 460rpx;
|
||||
|
||||
/* border: 1px solid red; */
|
||||
&-label {
|
||||
width: 140rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-value {
|
||||
width: calc(100% - 140rpx);
|
||||
}
|
||||
|
||||
.msg-row-value-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.msg-row-address {
|
||||
max-width: 278rpx;
|
||||
white-space: nowrap;
|
||||
/* 确保文本在一行内显示 */
|
||||
overflow: hidden;
|
||||
/* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis;
|
||||
/* 使用省略号表示文本溢出 */
|
||||
}
|
||||
|
||||
.diconfont {
|
||||
color: #0066CC;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-segmentation {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #1C9AFF;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
}
|
||||
|
||||
&-left {
|
||||
transform: translateX(-20rpx);
|
||||
}
|
||||
|
||||
&-right {
|
||||
transform: translateX(20rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.electricity-info-address-box {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
padding-bottom: 12rpx;
|
||||
|
||||
.msg-row-label {
|
||||
width: 140rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.msg-row-value-box {
|
||||
width: calc(100% - 140rpx);
|
||||
}
|
||||
|
||||
.msg-row-value-box {
|
||||
display: flex;
|
||||
/* align-items: center; */
|
||||
|
||||
.msg-row-address {
|
||||
/* white-space: nowrap; */
|
||||
/* 确保文本在一行内显示 */
|
||||
/* overflow: hidden; */
|
||||
/* 隐藏溢出的内容 */
|
||||
/* text-overflow: ellipsis; */
|
||||
/* 使用省略号表示文本溢出 */
|
||||
}
|
||||
|
||||
.diconfont {
|
||||
color: #0066CC;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.electricity-info-label {
|
||||
padding: 0 30rpx;
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 15rpx;
|
||||
|
||||
.home-title-txt {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.home-title-remark {
|
||||
margin-left: 20rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20rpx;
|
||||
.menu-item{
|
||||
width: 320rpx;
|
||||
height: 200rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx 20rpx 15rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&:nth-child(2n-1) {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.home-menu-item-header {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.home-menu-item-name {
|
||||
font-weight: 550;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.home-menu-item-remark {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.home-menu-item-right {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
background: #EFEFEF;
|
||||
border-radius: 50%;
|
||||
padding-left: 2rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.home-menu-item-value{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 550;
|
||||
}
|
||||
.home-menu-item-bg {
|
||||
position: absolute;
|
||||
right: 37rpx;
|
||||
bottom: 26rpx;
|
||||
font-size: 75rpx;
|
||||
z-index: 99;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.home-menu-item-bg-two{
|
||||
position: absolute;
|
||||
right: 44rpx;
|
||||
bottom: 26rpx;
|
||||
font-size: 75rpx;
|
||||
z-index: 98;
|
||||
}
|
||||
}
|
||||
.border-box{
|
||||
height:1px;
|
||||
background: #E0E3E5;
|
||||
}
|
||||
}
|
||||
|
||||
&-info-state {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
&-box {
|
||||
width: 32%;
|
||||
/* padding-top: 30rpx; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-title {
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: #289A00;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.ico-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-box-line {
|
||||
width: 2rpx;
|
||||
height: 70rpx;
|
||||
background: #ccc;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.function-list {
|
||||
padding: $paddingTB $paddingLR;
|
||||
}
|
||||
|
||||
.icon-bg-box {
|
||||
padding: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
transform: rotate(45deg);
|
||||
|
||||
.diconfont {
|
||||
transform: rotate(-45deg);
|
||||
font-size: 50rpx;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadImg {
|
||||
padding: 70rpx 30rpx 40rpx 30rpx;
|
||||
width: 600rpx;
|
||||
|
||||
/* height:; */
|
||||
&-title {
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: 550;
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slot-content {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,657 @@
|
|||
<template>
|
||||
<view class="energyAnalysis">
|
||||
<view class="energyAnalysis-header">
|
||||
<view class="energyAnalysis-header-name">{{projectData.projectName}}</view>
|
||||
<picker mode="selector" :range="devArr" range-key="deviceLabel" @change="changeDeviceFn">
|
||||
<view class="energyAnalysis-header-equipmentId" >
|
||||
设备：{{deviceName}}
|
||||
<view class="changeIcon">
|
||||
<u-icon name="arrow-down" color="#fff" :size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="energyAnalysis-header-electricity-consumption">
|
||||
<view class="electricity-consumption-info">
|
||||
<view class="electricity-consumption-info-number">{{currentMonth}}</view>
|
||||
<view class="">本月累计用电量</view>
|
||||
</view>
|
||||
<view class="electricity-consumption-info">
|
||||
<view class="electricity-consumption-info-number">{{lastMonth}}</view>
|
||||
<view class="">上月总用电量</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="energyAnalysis-header-signal">
|
||||
<template v-if="projectData.signal > 0">
|
||||
<template v-if="projectData.signal == 1">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlieyg.png" class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="projectData.signal == 2">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlielg.png" class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="projectData.signal == 3">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesg.png" class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="projectData.signal == 4">
|
||||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesig.png" class="ico-img"></image>
|
||||
</template>
|
||||
<template v-else-if="projectData.signal == 5">
|
||||
<tuiIcon name="xinhaowuge" color="#289A00"></tuiIcon>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tuiIcon name="xinhaolx" color="#ff0000"></tuiIcon>
|
||||
</template>
|
||||
<text class="pl10" :style="{color:projectData.signal > 0?'#FFF':'#ff0000'}">{{projectData.signal > 0 ? getDictionary('signalType',projectData.stype) : '异常'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="energyAnalysis-content">
|
||||
<view class="energyAnalysis-picker">
|
||||
<view class="energyAnalysis-picker-date-type">
|
||||
<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='day'?'#1C9AFF':''}" @click="switchDateTypeFn('day')">日</view>
|
||||
<view class="picker-line"></view>
|
||||
<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='month'?'#1C9AFF':''}" @click="switchDateTypeFn('month')">月</view>
|
||||
<view class="picker-line"></view>
|
||||
<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='year'?'#1C9AFF':''}" @click="switchDateTypeFn('year')">年</view>
|
||||
</view>
|
||||
|
||||
<view class="energyAnalysis-picker-date-value" @click="dayPickerFlag = true">
|
||||
<picker mode="date" :fields="currentDateType" @change="onDayPickerConfirmFn">
|
||||
<text class="pr10">{{currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue}}</text>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data-loading" v-if="dataLoading">
|
||||
<u-loading mode="circle" size="40"></u-loading>
|
||||
<view class="data-loading-txt">
|
||||
查询中...
|
||||
</view>
|
||||
</view>
|
||||
<view class="energyAnalysis-date" v-else-if="currentDateType=='day'">
|
||||
<view class="energyAnalysis-date-title">电量分析</view>
|
||||
<lineScroll width="630" height="400" extraLineType="curve"
|
||||
v-show="polyLineChart"
|
||||
:reshowStatus="polyLineChart"
|
||||
:chartData="chartData"
|
||||
@onRenderComplete="onRenderComplete" >
|
||||
</lineScroll>
|
||||
<view class="energyAnalysis-date-title" v-if="dayElectricityType==1">电量电费</view>
|
||||
<view class="energyAnalysis-date-table" v-if="dayElectricityType==1">
|
||||
<view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||||
<view class="energyAnalysis-date-table-row-title">{{item.ruleName}}</view>
|
||||
<view class="energyAnalysis-date-table-row-degree">{{item.pw}}度</view>
|
||||
<view class="energyAnalysis-date-table-row-money">{{item.rate}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="energyAnalysis-date" v-else-if="currentDateType=='month'">
|
||||
<view class="energyAnalysis-date-money-title">
|
||||
<view>电量分析</view>
|
||||
<view class="energyAnalysis-date-money-title-detail" v-if="dayElectricityType==1" @click="goMonthDetailFn">
|
||||
<text class="pr10">详情</text>
|
||||
<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<columnScroll width="630" height="400"
|
||||
:chartData="chartData"
|
||||
:reshowStatus="barChart"
|
||||
v-show="barChart"
|
||||
@onRenderFinsh="onRenderFinshBar"
|
||||
></columnScroll>
|
||||
<view class="energyAnalysis-date-calendar">
|
||||
<view class="energyAnalysis-date-calendar-box" v-for="(item,index) in analysisData.xName" :key="index">
|
||||
<view class="energyAnalysis-date-calendar-box-day">{{item}}</view>
|
||||
<view class="energyAnalysis-date-calendar-box-money">{{analysisData.nowData[index]===null?0:analysisData.nowData[index]}}</view>
|
||||
</view>
|
||||
<!-- <view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||||
<view class="energyAnalysis-date-table-row-title">{{item.typeName}}</view>
|
||||
<view class="energyAnalysis-date-table-row-degree">{{item.degree}}度</view>
|
||||
<view class="energyAnalysis-date-table-row-money">{{item.money}}元</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="energyAnalysis-date-title" v-if="dayElectricityType==2">电量电费</view>
|
||||
<view class="energyAnalysis-date-table" v-if="dayElectricityType==2">
|
||||
<view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||||
<view class="energyAnalysis-date-table-row-title">{{item.ruleName}}</view>
|
||||
<view class="energyAnalysis-date-table-row-degree">{{item.pw}}度</view>
|
||||
<view class="energyAnalysis-date-table-row-money">{{item.rate}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="energyAnalysis-date" v-else-if="currentDateType=='year'">
|
||||
<view class="energyAnalysis-date-title">电量分析</view>
|
||||
<ring width="630" height="400"
|
||||
:chartData="ringChartData"
|
||||
></ring>
|
||||
<view class="energyAnalysis-date-year-table">
|
||||
<view class="energyAnalysis-date-year-box" v-for="(item,index) in analysisData.xName" :key="index">
|
||||
<view class="">{{item}}月</view>
|
||||
<view class="energyAnalysis-date-year-box-money">{{analysisData.nowData[index]===null?0:analysisData.nowData[index]}}度</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <u-picker v-model="dayPickerFlag" :params="timeParams" mode="time" @confirm="onDayPickerConfirmFn"></u-picker> -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
|
||||
// import uCharts from '@/components/u-charts/u-charts.js';
|
||||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||||
import columnScroll from "@/components/uchartComponents/column-scroll.vue"
|
||||
import ring from "@/components/uchartComponents/ring.vue"
|
||||
import math from "@/utils/math.js"
|
||||
import getDictionary from "@/utils/dataDictionary.js"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceId: null,
|
||||
deviceKey: null,
|
||||
deviceName: null,
|
||||
gatewayObj:{
|
||||
deviceId: null,
|
||||
deviceKey: null,
|
||||
deviceName: null,
|
||||
},
|
||||
dayPickerFlag:false,
|
||||
// dayPickerValue:"",
|
||||
projectData: {},
|
||||
devicesData: {},
|
||||
currentMonth: 0,
|
||||
lastMonth: 0,
|
||||
chartData: {},
|
||||
ringChartData: {},
|
||||
analysisData: null,
|
||||
timeParams: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: true,
|
||||
minute: true,
|
||||
second: true
|
||||
},
|
||||
// 电价合同：1 峰谷计价，2 阶梯计价
|
||||
dayElectricityType:1,
|
||||
dayElectricityList:[],
|
||||
currentDateType:"day",
|
||||
currentDayValue:"",
|
||||
currentMonthValue:"",
|
||||
currentYearValue:"",
|
||||
devArr: [],
|
||||
polyLineChart: false,
|
||||
barChart: false,
|
||||
dataLoading:false,
|
||||
}
|
||||
},
|
||||
components:{lineScroll,columnScroll,ring},
|
||||
onLoad(e) {
|
||||
console.log("当前页面获取参数为",e)
|
||||
this.deviceId = e.deviceId;
|
||||
this.deviceKey = e.deviceKey;
|
||||
this.deviceName = e.deviceName;
|
||||
this.gatewayObj = {
|
||||
deviceId: e.deviceId,
|
||||
deviceKey: e.deviceKey,
|
||||
deviceName: e.deviceName,
|
||||
deviceLabel: e.deviceName+'('+e.deviceKey+')'
|
||||
}
|
||||
this.currentDayValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||||
this.currentMonthValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
|
||||
this.currentYearValue = this.$u.timeFormat(new Date().getTime(), 'yyyy');
|
||||
_self = this;
|
||||
// this.cWidth=uni.upx2px(750);
|
||||
// this.cHeight=uni.upx2px(550);
|
||||
this.getServerData()
|
||||
},
|
||||
methods: {
|
||||
getDictionary,
|
||||
goMonthDetailFn(){
|
||||
// console.log("点击月份详情","./monthDetail?deviceId="+this.deviceId+"&date="+this.currentMonthValue)
|
||||
uni.navigateTo({
|
||||
url:"./monthDetail?deviceId="+this.deviceId+"&month="+this.currentMonthValue
|
||||
})
|
||||
},
|
||||
switchDateTypeFn(dateType){
|
||||
console.log(dateType,"dateType");
|
||||
this.currentDateType = dateType;
|
||||
this.getServerData();
|
||||
},
|
||||
onDayPickerConfirmFn(e){
|
||||
switch (this.currentDateType){
|
||||
case "day":
|
||||
this.currentDayValue = e.detail.value;
|
||||
break;
|
||||
case "month":
|
||||
this.currentMonthValue = e.detail.value;
|
||||
break;
|
||||
case "year":
|
||||
this.currentYearValue = e.detail.value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.getServerData();
|
||||
},
|
||||
initData(){
|
||||
if(this.currentDateType == 'day'){
|
||||
let name = [
|
||||
"1:00",
|
||||
"2:00",
|
||||
"3:00",
|
||||
"4:00",
|
||||
"5:00",
|
||||
"6:00",
|
||||
"7:00",
|
||||
"8:00",
|
||||
"9:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
"19:00",
|
||||
"20:00",
|
||||
"21:00",
|
||||
"22:00",
|
||||
"23:00",
|
||||
"24:00"
|
||||
];
|
||||
let data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
|
||||
LineA.series.push({
|
||||
// name: '今日',
|
||||
name: name,
|
||||
data: data,
|
||||
color: '#07AEFC'
|
||||
});
|
||||
LineA.series.push({
|
||||
// name: '昨日',
|
||||
name: name,
|
||||
data: data,
|
||||
color: '#FFB660'
|
||||
});
|
||||
this.chartData = LineA;
|
||||
this.analysisData = {
|
||||
nowData:data,
|
||||
pastData:data,
|
||||
xName:name,
|
||||
}
|
||||
} else if (this.currentDateType == 'month') {
|
||||
let name = [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
"31"
|
||||
]
|
||||
let data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
|
||||
LineA.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
color: '#07AEFC'
|
||||
});
|
||||
this.chartData = LineA;
|
||||
this.analysisData = {
|
||||
nowData:data,
|
||||
xName:name,
|
||||
}
|
||||
} else if (this.currentDateType == 'year') {
|
||||
let name = [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12"
|
||||
]
|
||||
let nowData = [0,0,0,0,0,0,0,0,0,0,0,0]
|
||||
let pieData = [];
|
||||
name.forEach((item, index) => {
|
||||
pieData.push({
|
||||
name: `${item}月`,
|
||||
data: nowData[index],
|
||||
format: () => {
|
||||
return `${item}月：${nowData[index]}度`
|
||||
}
|
||||
})
|
||||
})
|
||||
this.ringChartData = {
|
||||
series: pieData
|
||||
};
|
||||
this.analysisData = {
|
||||
nowData:nowData,
|
||||
xName:name,
|
||||
}
|
||||
}
|
||||
},
|
||||
getServerData(){
|
||||
let {currentDateType, currentDayValue, currentMonthValue, currentYearValue} = this;
|
||||
let date = currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue;
|
||||
// console.log("当前日期",date)
|
||||
|
||||
let pastTime = this.$u.date(new Date(date).getTime(date)-60*60*24*1000);
|
||||
this.dataLoading = true;
|
||||
// console.log("昨天",pastTime);
|
||||
this.$get('/app/smart/power/analysis', {deviceId: this.deviceId, date: date})
|
||||
.then(res => {
|
||||
if(res.code == 200) {
|
||||
let data = res.data;
|
||||
this.projectData = data.parent;
|
||||
this.devicesData = data.children;
|
||||
this.currentMonth = math.divide(data.currentMonth,1000);
|
||||
this.lastMonth = math.divide(data.lastMonth,1000);
|
||||
if(data.parent.deviceId == this.deviceId){
|
||||
this.deviceKey = data.main.deviceKey;
|
||||
this.deviceId = data.main.deviceId;
|
||||
this.deviceName = data.main.deviceName;
|
||||
}
|
||||
this.devArr = this.devicesData.map(item => {
|
||||
return {
|
||||
deviceId: item.deviceId,
|
||||
deviceKey: item.deviceKey,
|
||||
deviceName: item.deviceName,
|
||||
deviceLabel: item.deviceName+'('+item.deviceKey+')'
|
||||
}
|
||||
});
|
||||
// this.devArr.unshift(this.gatewayObj)
|
||||
this.dayElectricityType = data.powerRateVo?data.powerRateVo[0].contractType:1;
|
||||
this.dayElectricityList = data.powerRateVo?data.powerRateVo[0].ruleRateVoList:[];
|
||||
|
||||
if(data.powerAnalysisChartDataVo.nowData){
|
||||
data.powerAnalysisChartDataVo.nowData.forEach((item,index)=>{
|
||||
data.powerAnalysisChartDataVo.nowData[index] = math.divide(item,1000)
|
||||
})
|
||||
}
|
||||
if(data.powerAnalysisChartDataVo.pastData){
|
||||
data.powerAnalysisChartDataVo.pastData.forEach((item,index)=>{
|
||||
data.powerAnalysisChartDataVo.pastData[index] = math.divide(item,1000)
|
||||
})
|
||||
}
|
||||
|
||||
// 图表数据处理
|
||||
this.analysisData = data.powerAnalysisChartDataVo;
|
||||
const {xName = [], nowData = [], pastData = []} = data.powerAnalysisChartDataVo;
|
||||
let LineA={categories:[],series:[]};
|
||||
LineA.categories = xName;
|
||||
if(currentDateType == 'day'){
|
||||
LineA.series.push({
|
||||
// name: '今日',
|
||||
name: date,
|
||||
data: nowData,
|
||||
color: '#07AEFC'
|
||||
});
|
||||
LineA.series.push({
|
||||
// name: '昨日',
|
||||
name: pastTime,
|
||||
data: pastData,
|
||||
color: '#FFB660'
|
||||
});
|
||||
this.chartData = LineA;
|
||||
} else if (currentDateType == 'month') {
|
||||
LineA.series.push({
|
||||
name: this.currentMonthValue,
|
||||
data: nowData,
|
||||
color: '#07AEFC'
|
||||
});
|
||||
this.chartData = LineA;
|
||||
} else if (currentDateType == 'year') {
|
||||
let pieData = [];
|
||||
xName.forEach((item, index) => {
|
||||
pieData.push({
|
||||
name: `${item}月`,
|
||||
data: nowData[index],
|
||||
format: () => {
|
||||
return `${item}月：${nowData[index]}度`
|
||||
}
|
||||
})
|
||||
})
|
||||
this.ringChartData = {
|
||||
series: pieData
|
||||
};
|
||||
console.log(pieData,"pieData");
|
||||
}
|
||||
}else{
|
||||
this.$u.toast(res.msg);
|
||||
this.initData();
|
||||
}
|
||||
this.dataLoading = false;
|
||||
}).catch(err=>{
|
||||
this.dataLoading = false;
|
||||
this.initData();
|
||||
})
|
||||
},
|
||||
changeDeviceFn(e) {
|
||||
console.log(e)
|
||||
let index = +e.detail.value;
|
||||
let data = this.devArr[index];
|
||||
this.deviceKey = data.deviceKey;
|
||||
this.deviceId = data.deviceId;
|
||||
this.deviceName = data.deviceName;
|
||||
this.getServerData();
|
||||
},
|
||||
onRenderComplete() {
|
||||
this.polyLineChart = true;
|
||||
},
|
||||
onRenderFinshBar() {
|
||||
this.barChart = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
||||
.energyAnalysis{
|
||||
width: 100%;
|
||||
&-header{
|
||||
width: 100%;
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #1C9AFF;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
&-equipmentId{
|
||||
padding-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.changeIcon{
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
top: 3rpx;
|
||||
}
|
||||
}
|
||||
&-name{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-electricity-consumption{
|
||||
display: flex;
|
||||
}
|
||||
&-signal{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20rpx;
|
||||
background-color: #FF8A00;
|
||||
padding: 10rpx 26rpx;
|
||||
color: #fff;
|
||||
border-top-left-radius: 50rpx;
|
||||
border-bottom-left-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ico-img{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.pl10{
|
||||
position: relative;
|
||||
top: 5rpx;
|
||||
}
|
||||
}
|
||||
.electricity-consumption-info{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
padding-top: 20rpx;
|
||||
&-number{
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
&-picker{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-date-type{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: 12rpx;
|
||||
&-box{
|
||||
text-align: center;
|
||||
width: 120rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.picker-line{
|
||||
width: 2rpx;
|
||||
height: 30rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
&-date-value{
|
||||
width: 260rpx;
|
||||
padding: 20rpx 0;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.energyAnalysis-date{
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 20rpx;
|
||||
&-title{
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
}
|
||||
&-money-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
padding: 20rpx;
|
||||
&-detail{
|
||||
color: #999DB2;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.canvas-chart{
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
}
|
||||
&-table{
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
&-row{
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
background-color: #F5F5F9;
|
||||
margin-bottom: 20rpx;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-title{
|
||||
color: #1C9AFF;
|
||||
}
|
||||
&-title,&-degree,&-money{
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-calendar{
|
||||
background-color: #F5F5F9;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&-box{
|
||||
width: 104rpx;
|
||||
text-align: center;
|
||||
padding: 6rpx 0;
|
||||
/* background-color: #F5F5F9; */
|
||||
&-money{
|
||||
font-size: 24rpx;
|
||||
color: #FA6400;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-year-table{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 32%);
|
||||
grid-auto-columns: repeat(2, 32%);
|
||||
grid-gap: 10rpx 2% ;
|
||||
}
|
||||
&-year-box{
|
||||
background-color: #F5F5F9;
|
||||
padding: 10rpx 30rpx;
|
||||
&-money{
|
||||
font-size: 24rpx;
|
||||
color: #FA6400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-loading{
|
||||
text-align: center;
|
||||
padding: 100rpx;
|
||||
.data-loading-txt{
|
||||
margin-top: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<style lang='scss' scoped>
|
||||
.monthDetail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $paddingTB $paddingLR;
|
||||
background-color: #F9F9F9;
|
||||
&-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-unit{
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
&-table{
|
||||
|
||||
margin-top: 20rpx;
|
||||
&-header{
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
color: #1C9AFF;
|
||||
box-shadow: $box-shadow;
|
||||
&-th{
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
&-row{
|
||||
display: flex;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: $box-shadow;
|
||||
margin-top: 24rpx;
|
||||
&:last-child{
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
&-tr{
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100rpx;
|
||||
.value{
|
||||
color: #FA6400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="monthDetail">
|
||||
<view class="monthDetail-header">
|
||||
<view class="monthDetail-header-title">
|
||||
<tuiIcon name="riqi" color="#1296DB"></tuiIcon>
|
||||
<picker mode="date" fields="month" @change="onDayPickerConfirmFn">
|
||||
<text class="text-bold pl20">{{month}}</text>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="monthDetail-header-unit">度/元</view>
|
||||
</view>
|
||||
<view class="monthDetail-table">
|
||||
<view class="monthDetail-table-header">
|
||||
<view class="monthDetail-table-header-th" v-for="(item,index) in headerList" :key="index">{{item}}</view>
|
||||
</view>
|
||||
<view class="monthDetail-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||||
<view class="monthDetail-table-row-tr" v-if="item.name==0">合计</view>
|
||||
<view class="monthDetail-table-row-tr" v-else>{{item.name}}日</view>
|
||||
<view class="monthDetail-table-row-tr" v-for="(val,i) in item.ruleRateVoList" :key="i">
|
||||
<view class="">{{toDecimal(val.pw)}}</view>
|
||||
<view class="value">{{toDecimal(val.rate)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceId:'',
|
||||
month:'',
|
||||
dayElectricityList:[],
|
||||
headerList:['日期','总','峰','谷','平']
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.deviceId = option.deviceId;
|
||||
this.month = option.month;
|
||||
if(this.month){
|
||||
this.getServerData()
|
||||
}else{
|
||||
this.$u.toast('请选择日期!');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getServerData(){
|
||||
this.$get('/app/smart/power/analysis', {deviceId: this.deviceId, date: this.month}).then(res=>{
|
||||
if(res.code == 200) {
|
||||
let data = res.data;
|
||||
// 抽离头部
|
||||
this.headerList = ['日期'];
|
||||
data?.powerRateVo[0].ruleRateVoList.forEach(item=>{
|
||||
this.headerList.push(item.ruleName)
|
||||
})
|
||||
// 计算每日总数据
|
||||
data.powerRateVo.forEach((item,index)=>{
|
||||
if(item.name!=0){
|
||||
let pw = 0;
|
||||
let rate = 0;
|
||||
item.ruleRateVoList.forEach((val,i)=>{
|
||||
pw+=val.pw;
|
||||
rate+=val.rate;
|
||||
})
|
||||
data.powerRateVo[index].ruleRateVoList.unshift({
|
||||
pw,
|
||||
rate,
|
||||
ruleName: "总"
|
||||
})
|
||||
}
|
||||
})
|
||||
this.dayElectricityList = data.powerRateVo
|
||||
}else{
|
||||
this.$u.toast(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
onDayPickerConfirmFn(e){
|
||||
this.month = e.target.value;
|
||||
this.getServerData()
|
||||
},
|
||||
// 保留3位小数
|
||||
toDecimal(x) {
|
||||
var f = parseFloat(x);
|
||||
if (isNaN(f)) {
|
||||
return;
|
||||
}
|
||||
f = Math.round(x*1000)/1000;
|
||||
return f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,645 @@
|
|||
<style lang='scss' scoped>
|
||||
.historyCurve{
|
||||
width: 100%;
|
||||
background-color: #F9F9F9;
|
||||
:not(not) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-header{
|
||||
/* position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
&-date{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
&-leakage{
|
||||
margin-top: 20rpx;
|
||||
&-title{
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-content{
|
||||
background-color: #fff;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
&-switch{
|
||||
display: flex;
|
||||
border: 1px solid #FF6600;
|
||||
width: 600rpx;
|
||||
margin: 0 auto;
|
||||
&-box{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
border-right: 1px solid #ff6600;
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
/* .middle-box{
|
||||
border-left: 1px solid #ff6600;
|
||||
border-right: 1px solid #ff6600;
|
||||
} */
|
||||
.leakageAction{
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&-chart{
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
margin-top: 30rpx;
|
||||
&-table{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-list{
|
||||
height: 480rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="historyCurve">
|
||||
<view class="historyCurve-header">
|
||||
<view class="historyCurve-header-date" @click="beginDatePickerShow = true">
|
||||
<text class="pr15">{{currentSelectorValue.deviceName}}</text>
|
||||
<u-icon name="arrow-down-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
<view class="historyCurve-header-date" @click="endDatePickerShow = true">
|
||||
<text class="pr15">{{endDate}}</text>
|
||||
<u-icon name="arrow-down-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 漏电 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">漏电</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:leakageCurrentPickIndex==index}" @click="switchLeakageFn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="leakageColumn" @onRenderFinsh="onRenderFinshFn1" v-if="leakageChartA" v-show="leakageCurrentPickIndex==0" :chartData="inColumnData"></columnScroll>
|
||||
<lineScroll v-if="leakageChartB" canvasId="leakageLine" v-show="leakageCurrentPickIndex==1" :chartData="inColumnData"></lineScroll>
|
||||
<htable v-show="leakageCurrentPickIndex==2" :prodDataList="inColumnData"></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 电压 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">电压</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:voltageCurrentPickIndex==index}" @click="switchVoltageFn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="voltageColumn" @onRenderFinsh="onRenderFinshFn2" v-if="voltageChartA" v-show="voltageCurrentPickIndex==0" :chartData="uColumnData"></columnScroll>
|
||||
<lineScroll v-if="voltageChartB" canvasId="voltageLine" v-show="voltageCurrentPickIndex==1" :chartData="uColumnData"></lineScroll>
|
||||
<htable v-show="voltageCurrentPickIndex==2" :prodDataList="uColumnData"></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 电流 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">电流</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:electricCurrentPickIndex==index}" @click="switchElectricFn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="electricColumn" @onRenderFinsh="onRenderFinshFn3" v-if="electricChartA" v-show="electricCurrentPickIndex==0" :chartData="iColumnData"></columnScroll>
|
||||
<lineScroll v-if="electricChartB" canvasId="electricLine" v-show="electricCurrentPickIndex==1" :chartData="iColumnData"></lineScroll>
|
||||
<htable v-show="electricCurrentPickIndex==2" :prodDataList="iColumnData" ></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度1 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路1温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:temperatureCurrentPickIndex==index}" @click="switchTemperatureFn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="temperatureColumn" @onRenderFinsh="onRenderFinshFn4" v-if="temperatureChartA" v-show="temperatureCurrentPickIndex==0" :chartData="lineRoad1ColumnData"></columnScroll>
|
||||
<lineScroll v-if="temperatureChartB" canvasId="temperatureLine" v-show="temperatureCurrentPickIndex==1" :chartData="lineRoad1ColumnData"></lineScroll>
|
||||
<htable v-show="temperatureCurrentPickIndex==2" :prodDataList="lineRoad1ColumnData"></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度2 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路2温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:temperatureCurrent2PickIndex==index}" @click="switchTemperature2Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="temperatureColumn2" @onRenderFinsh="onRenderFinshFn5" v-if="temperature2ChartA" v-show="temperatureCurrent2PickIndex==0" :chartData="lineRoad2ColumnData"></columnScroll>
|
||||
<lineScroll v-if="temperature2ChartB" canvasId="temperatureLine2" v-show="temperatureCurrent2PickIndex==1" :chartData="lineRoad2ColumnData"></lineScroll>
|
||||
<htable v-show="temperatureCurrent2PickIndex==2" :prodDataList="lineRoad2ColumnData"></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度3 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路3温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:temperatureCurrent3PickIndex==index}" @click="switchTemperature3Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="temperatureColumn3" @onRenderFinsh="onRenderFinshFn6" v-if="temperature3ChartA" v-show="temperatureCurrent3PickIndex==0" :chartData="lineRoad3ColumnData"></columnScroll>
|
||||
<lineScroll v-if="temperature3ChartB" canvasId="temperatureLine3" v-show="temperatureCurrent3PickIndex==1" :chartData="lineRoad3ColumnData"></lineScroll>
|
||||
<htable v-show="temperatureCurrent3PickIndex==2" :prodDataList="lineRoad3ColumnData"></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度4 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路4温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:temperatureCurrent4PickIndex==index}" @click="switchTemperature4Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<columnScroll canvasId="temperatureColumn4" v-if="temperature4ChartA" v-show="temperatureCurrent4PickIndex==0" :chartData="lineRoad4ColumnData"></columnScroll>
|
||||
<lineScroll v-if="temperature4ChartB" canvasId="temperatureLine4" v-show="temperatureCurrent4PickIndex==1" :chartData="lineRoad4ColumnData"></lineScroll>
|
||||
<htable v-show="temperatureCurrent4PickIndex==2" :prodDataList="lineRoad4ColumnData"></htable>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-picker mode="selector" :range="selectorData" range-key="deviceName" v-model="beginDatePickerShow" @confirm="selectorOnConfirmFn"></u-picker>
|
||||
<u-picker mode="time" :params="params" v-model="endDatePickerShow" @confirm="endDateConfirmFn"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
let _self;
|
||||
import uCharts from '@/components/u-charts/u-charts.js';
|
||||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||||
import columnScroll from "@/components/uchartComponents/column-scroll.vue";
|
||||
import htable from "@/components/historyCmp/table.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceId:"",
|
||||
prodKey:"",
|
||||
appInfo:{},
|
||||
|
||||
switchList:[],
|
||||
beginDatePickerShow:false,
|
||||
endDatePickerShow:false,
|
||||
|
||||
currentSelectorValue:{},
|
||||
selectorData:[],
|
||||
|
||||
beginDate:"",
|
||||
endDate:"",
|
||||
params:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
timestamp: true, // 1.3.7版本提供
|
||||
},
|
||||
historyCurveData:null, // 历史曲线数据
|
||||
|
||||
leakageCurrentPickIndex:null, // 下标
|
||||
voltageCurrentPickIndex:null,
|
||||
electricCurrentPickIndex:null,
|
||||
temperatureCurrentPickIndex:null,
|
||||
temperatureCurrent2PickIndex:null,
|
||||
temperatureCurrent3PickIndex:null,
|
||||
temperatureCurrent4PickIndex:null,
|
||||
|
||||
// columnData:null,
|
||||
// columnDataB:null,
|
||||
// columnDataC:null,
|
||||
// columnDataD:null,
|
||||
|
||||
// lineAData:null,
|
||||
// lineADataB:null,
|
||||
// lineADataC:null,
|
||||
// lineADataD:null,
|
||||
|
||||
leakageChartA:false,
|
||||
voltageChartA:false,
|
||||
electricChartA:false,
|
||||
temperatureChartA:false,
|
||||
temperature2ChartA:false,
|
||||
temperature3ChartA:false,
|
||||
temperature4ChartA:false,
|
||||
|
||||
leakageChartB:false,
|
||||
voltageChartB:false,
|
||||
electricChartB:false,
|
||||
temperatureChartB:false,
|
||||
temperature2ChartB:false,
|
||||
temperature3ChartB:false,
|
||||
temperature4ChartB:false,
|
||||
|
||||
uColumnData:null,// 电压数据
|
||||
inColumnData:null,// 漏电流数据
|
||||
iColumnData:null, // 电流数据
|
||||
lineRoad1ColumnData:null, // 线路1温度
|
||||
lineRoad2ColumnData:null, // 线路2温度
|
||||
lineRoad3ColumnData:null, // 线路3温度
|
||||
lineRoad4ColumnData:null, // 线路4温度
|
||||
}
|
||||
},
|
||||
components:{lineScroll,columnScroll,htable},
|
||||
onLoad(e) {
|
||||
_self = this;
|
||||
this.initVueDataFn();
|
||||
// this.beginDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
|
||||
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||||
|
||||
this.deviceId = e.deviceId;
|
||||
this.prodKey = e.prodKey;
|
||||
this.deviceKey = e.deviceKey;
|
||||
console.log(e,"e");
|
||||
// this.cWidth=uni.upx2px(750);
|
||||
// this.cHeight=uni.upx2px(550);
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this.getDeviceInfoListFn();
|
||||
},
|
||||
methods: {
|
||||
// onRenderFinshFn1(e){
|
||||
// console.log(e,"ok?");
|
||||
// setTimeout(()=>{
|
||||
// _self.temperatureChartA = true;
|
||||
// setTimeout(()=>{
|
||||
// _self.temperature2ChartA = true;
|
||||
// setTimeout(()=>{
|
||||
// _self.temperature3ChartA = true;
|
||||
// setTimeout(()=>{
|
||||
// _self.temperature4ChartA = true;
|
||||
// setTimeout(()=>{
|
||||
// _self.voltageChartA = true;
|
||||
// setTimeout(()=>{
|
||||
// _self.electricChartA = true;
|
||||
// },1000) // 电流渲染开关
|
||||
// },1000) // 电压渲染开关
|
||||
// },1000) // 温度4渲染开关
|
||||
// },1000) // 温度3渲染开关
|
||||
// },1000) // 温度2渲染开关
|
||||
// },1000) // 温度1渲染开关
|
||||
// },
|
||||
onRenderFinshFn1(e){
|
||||
_self.voltageChartA = true;
|
||||
},
|
||||
onRenderFinshFn2(e){
|
||||
_self.electricChartA = true;
|
||||
},
|
||||
onRenderFinshFn3(e){
|
||||
_self.temperatureChartA = true;
|
||||
},
|
||||
onRenderFinshFn4(e){
|
||||
_self.temperature2ChartA = true;
|
||||
},
|
||||
onRenderFinshFn5(e){
|
||||
_self.temperature3ChartA = true;
|
||||
},
|
||||
onRenderFinshFn6(e){
|
||||
_self.temperature4ChartA = true;
|
||||
},
|
||||
|
||||
getDeviceInfoListFn(){
|
||||
this.$get(`/app/device/children/${this.deviceId}`).then((res)=>{
|
||||
console.log(res,"Res");
|
||||
if(res.data.length>0){
|
||||
console.log(res,"Res");
|
||||
this.selectorData = res.data;
|
||||
this.currentSelectorValue = this.selectorData[0];
|
||||
this.getServerData();
|
||||
}
|
||||
}).catch(()=>{
|
||||
this.selectorData = []
|
||||
})
|
||||
},
|
||||
endDateConfirmFn(e){
|
||||
console.log(e,"eeeeeeeeee");
|
||||
this.endDate = `${e.year}-${e.month}-${e.day}`;
|
||||
console.log(this.endDate,"this.endDate");
|
||||
// let timestampStr = new Date(this.endDate);
|
||||
// console.log(timestampStr,"timestampStr");
|
||||
this.getServerData();
|
||||
|
||||
},
|
||||
selectorOnConfirmFn(e){
|
||||
console.log(e,"e");
|
||||
this.currentSelectorValue = this.selectorData[e];
|
||||
this.getServerData();
|
||||
},
|
||||
initVueDataFn(){
|
||||
// this.pixelRatio = 1;
|
||||
this.leakageCurrentPickIndex = 0;
|
||||
this.voltageCurrentPickIndex = 0;
|
||||
this.electricCurrentPickIndex = 0;
|
||||
this.temperatureCurrentPickIndex = 0;
|
||||
this.temperatureCurrent2PickIndex = 0;
|
||||
this.temperatureCurrent3PickIndex = 0;
|
||||
this.temperatureCurrent4PickIndex = 0;
|
||||
this.switchList=["柱状图","折线图","数据视图"];
|
||||
},
|
||||
switchElectricFn(item,index){
|
||||
this.electricCurrentPickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.electricChartB) return;
|
||||
_self.electricChartB = true;
|
||||
}
|
||||
},
|
||||
switchTemperatureFn(item,index){
|
||||
this.temperatureCurrentPickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.temperatureChartB) return;
|
||||
_self.temperatureChartB = true;
|
||||
}
|
||||
},
|
||||
switchTemperature2Fn(item,index){
|
||||
this.temperatureCurrent2PickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.temperature2ChartB) return;
|
||||
_self.temperature2ChartB = true;
|
||||
}
|
||||
},
|
||||
switchTemperature2Fn(item,index){
|
||||
this.temperatureCurrent2PickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.temperature2ChartB) return;
|
||||
_self.temperature2ChartB = true;
|
||||
}
|
||||
},
|
||||
switchTemperature3Fn(item,index){
|
||||
this.temperatureCurrent3PickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.temperature3ChartB) return;
|
||||
_self.temperature3ChartB = true;
|
||||
}
|
||||
},
|
||||
switchTemperature4Fn(item,index){
|
||||
this.temperatureCurrent4PickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.temperature4ChartB) return;
|
||||
_self.temperature4ChartB = true;
|
||||
}
|
||||
},
|
||||
switchVoltageFn(item,index){
|
||||
this.voltageCurrentPickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.voltageChartB) return;
|
||||
_self.voltageChartB = true;
|
||||
}
|
||||
},
|
||||
switchLeakageFn(item,index){
|
||||
this.leakageCurrentPickIndex = index;
|
||||
if(index === 1){
|
||||
if(_self.leakageChartB) return;
|
||||
_self.leakageChartB = true;
|
||||
}
|
||||
},
|
||||
// 获取数据
|
||||
getServerData(){
|
||||
let isIos = false;
|
||||
try{
|
||||
const res = uni.getSystemInfoSync();
|
||||
if(res.system.indexOf("iOS") != -1){
|
||||
isIos = true;
|
||||
}
|
||||
console.log(isIos,"isIos")
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
}
|
||||
// 解决ios端转换时间戳时间格式
|
||||
if(isIos){
|
||||
this.endDate = this.endDate.replace(/-/g,'/');
|
||||
}
|
||||
let timestampStr = new Date(this.endDate + " 00:00:00"),
|
||||
currentDayTimestamp = timestampStr.getTime(),
|
||||
lastDayTimeStamp = (currentDayTimestamp + (24*60*60*1000));
|
||||
console.log(timestampStr,"timestampStr");
|
||||
console.log(currentDayTimestamp,"currentDayTimestamp");
|
||||
console.log(lastDayTimeStamp,"lastDayTimeStamp");
|
||||
const userToken = uni.getStorageSync('userToken');
|
||||
// console.log(_self.currentSelectorValue.deviceKey,"_self.currentSelectorValue.deviceKey");
|
||||
this.$get("/app/common/appInfo").then((res)=>{
|
||||
console.log(res,"Ress");
|
||||
// this.appInfo = res.data;
|
||||
uni.request({
|
||||
url:_self.$config.iotOsBaseUrl + "/openapi/sign/dev/data/upload/list",
|
||||
method:"POST",
|
||||
header:{
|
||||
appkey:res.data.appkey,
|
||||
sign:res.data.sign,
|
||||
timestamp:res.data.timestamp,
|
||||
Authorization:userToken
|
||||
},
|
||||
data:{
|
||||
cmd: "up",
|
||||
current: 1,
|
||||
deviceKey: _self.currentSelectorValue.deviceKey,
|
||||
fields: "i,u,in,t8,t6,t4,t2,t7,t5,t3,t1",
|
||||
listWhere: [
|
||||
{
|
||||
"field": "time",
|
||||
"operator": "gt_eq",
|
||||
"val":currentDayTimestamp,
|
||||
"valType": "time"
|
||||
},
|
||||
{
|
||||
"field": "time",
|
||||
"operator": "lt",
|
||||
"val": lastDayTimeStamp,
|
||||
"valType": "time"
|
||||
}
|
||||
],
|
||||
orderType: 1,
|
||||
prodPk: _self.currentSelectorValue.prodKey,
|
||||
size: 99999
|
||||
},
|
||||
success:function(res) {
|
||||
console.log(res,"resssASSSSS");
|
||||
if(res.data.code !=200 || res.data.data.records.length==0) {
|
||||
_self.$tui.toast("无数据",3000)
|
||||
return;
|
||||
}
|
||||
let timeArrList = [],
|
||||
uList = [],
|
||||
iList = [],
|
||||
inList = [],
|
||||
lineRoadOneT1List = [],
|
||||
lineRoadOneT2List = [],
|
||||
lineRoadTwoT3List = [],
|
||||
lineRoadTwoT4List = [],
|
||||
lineRoadThreeT5List = [],
|
||||
lineRoadThreeT6List = [],
|
||||
lineRoadFourT7List = [],
|
||||
lineRoadFourT8List = [];
|
||||
// {
|
||||
// series: [
|
||||
// {name: "成交量A", data: [35, 8, 25, 37, 4, 20]},
|
||||
// {name: "成交量B", data: [70, 40, 65, 100, 44, 68]},
|
||||
// ],
|
||||
// categories:[2021,2020,2022]
|
||||
// }
|
||||
// this.uColumnData = {
|
||||
// series:[{name:""}],
|
||||
// categories:timeArrList
|
||||
// }
|
||||
res.data.data.records.forEach((item,index)=>{
|
||||
// 解决ios端转换时间戳时间格式
|
||||
if(isIos){
|
||||
let createTime = item.time.replace(/-/g,'/');
|
||||
timeArrList.push(_self.$u.timeFormat(new Date(createTime).getTime(), 'hh:MM:ss') || "-");
|
||||
}else{
|
||||
timeArrList.push(_self.$u.timeFormat(new Date(item.time).getTime(), 'hh:MM:ss') || "-");
|
||||
}
|
||||
|
||||
uList.push(item.u || 0);
|
||||
iList.push(item.i || 0);
|
||||
inList.push(item.in || 0)
|
||||
lineRoadOneT1List.push(item.t1 || 0);
|
||||
lineRoadOneT2List.push(item.t2 || 0);
|
||||
lineRoadTwoT3List.push(item.t3 || 0);
|
||||
lineRoadTwoT4List.push(item.t4 || 0);
|
||||
lineRoadThreeT5List.push(item.t5 || 0);
|
||||
lineRoadThreeT6List.push(item.t6 || 0);
|
||||
lineRoadFourT7List.push(item.t7 || 0);
|
||||
lineRoadFourT8List.push(item.t8 || 0);
|
||||
})
|
||||
_self.inColumnData = {
|
||||
series:[{name:"漏电流(A)",data:inList}],
|
||||
categories:timeArrList
|
||||
}
|
||||
_self.uColumnData = {
|
||||
series:[{name:"电压(V)",data:uList}],
|
||||
categories:timeArrList
|
||||
}
|
||||
_self.iColumnData = {
|
||||
series:[{name:"电流(A)",data:iList}],
|
||||
categories:timeArrList
|
||||
}
|
||||
_self.lineRoad1ColumnData = {
|
||||
series:[
|
||||
{name:"进线路1温度(°C)",data:lineRoadOneT1List},
|
||||
{name:"出线路1温度(°C)",data:lineRoadOneT2List},
|
||||
],
|
||||
categories:timeArrList
|
||||
}
|
||||
_self.lineRoad2ColumnData = {
|
||||
series:[
|
||||
{name:"进线路2温度(°C)",data:lineRoadTwoT3List},
|
||||
{name:"出线路2温度(°C)",data:lineRoadTwoT4List},
|
||||
],
|
||||
categories:timeArrList
|
||||
}
|
||||
_self.lineRoad3ColumnData = {
|
||||
series:[
|
||||
{name:"进线路3温度(°C)",data:lineRoadThreeT5List},
|
||||
{name:"出线路3温度(°C)",data:lineRoadThreeT6List},
|
||||
],
|
||||
categories:timeArrList
|
||||
}
|
||||
_self.lineRoad4ColumnData = {
|
||||
series:[
|
||||
{name:"进线路4温度(°C)",data:lineRoadFourT7List},
|
||||
{name:"出线路4温度(°C)",data:lineRoadFourT8List},
|
||||
],
|
||||
categories:timeArrList
|
||||
}
|
||||
|
||||
_self.leakageChartA = true; // 漏电渲染开关
|
||||
|
||||
console.log(_self.uColumnData,"_self.uColumnData");
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err,'errASSS');
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// uni.request({
|
||||
// url: 'https://www.ucharts.cn/data.json',
|
||||
// data:{
|
||||
// },
|
||||
// success: function(res) {
|
||||
// console.log(res.data.data)
|
||||
// _self.historyCurveData = res.data.data;
|
||||
// //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
|
||||
// // _self.columnData = {categories:[],series:[]};
|
||||
// // _self.columnData.categories=res.data.data.LineA.categories;
|
||||
// // _self.columnData.series=res.data.data.LineA.series;
|
||||
// // _self.leakageChartA = true;
|
||||
|
||||
// // setTimeout(()=>{
|
||||
// // _self.columnDataB = {categories:[],series:[]};
|
||||
// // _self.columnDataB.categories=res.data.data.LineA.categories;
|
||||
// // _self.columnDataB.series=res.data.data.LineA.series;
|
||||
// // setTimeout(()=>{
|
||||
// // _self.voltageChartA = true;
|
||||
// // },1000)
|
||||
// _self.columnDataC = {categories:[],series:[]};
|
||||
// _self.columnDataC.categories=res.data.data.LineA.categories;
|
||||
// _self.columnDataC.series=res.data.data.LineA.series;
|
||||
// setTimeout(()=>{
|
||||
// _self.temperatureChartA = true;
|
||||
// },2000)
|
||||
// // _self.columnDataD = {categories:[],series:[]};
|
||||
// // _self.columnDataD.categories=res.data.data.LineA.categories;
|
||||
// // _self.columnDataD.series=res.data.data.LineA.series;
|
||||
// // setTimeout(()=>{
|
||||
// // _self.electricChartA = true;
|
||||
// // },3000)
|
||||
// },
|
||||
// fail: () => {
|
||||
// _self.tips="网络错误，小程序端请检查合法域名";
|
||||
// },
|
||||
// });
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.historyCurve-leakage{
|
||||
margin-top: 20rpx;
|
||||
&-title{
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-content{
|
||||
background-color: #fff;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
&-switch{
|
||||
display: flex;
|
||||
border: 1px solid #FF6600;
|
||||
width: 600rpx;
|
||||
margin: 0 auto;
|
||||
&-box{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
border-right: 1px solid #ff6600;
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
/* .middle-box{
|
||||
border-left: 1px solid #ff6600;
|
||||
border-right: 1px solid #ff6600;
|
||||
} */
|
||||
.leakageAction{
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&-chart{
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
&-table{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-list{
|
||||
height: 480rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
export default {
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switchList: ["柱状图","折线图","数据视图"],
|
||||
pickIndex: 0,
|
||||
barChart: false,
|
||||
polyLineChart: false,
|
||||
tableChart: false,
|
||||
dataSource: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dataSource = this.chartData;
|
||||
},
|
||||
watch: {
|
||||
chartData(newVal) {
|
||||
this.dataSource = newVal;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchFn(item,index){
|
||||
this.pickIndex = index;
|
||||
this.barChart = false;
|
||||
this.polyLineChart = false;
|
||||
this.tableChart = false;
|
||||
},
|
||||
onRenderFinshBar() {
|
||||
this.barChart = true;
|
||||
},
|
||||
onRenderComplete() {
|
||||
this.polyLineChart = true;
|
||||
},
|
||||
onRenderFinshTable() {
|
||||
this.tableChart = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:pickIndex==index}" @click="switchFn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<template v-if="pickIndex == 0">
|
||||
<columnScroll canvasId="electricColumn" @onRenderFinsh="onRenderFinshBar" :width="690" :chartData="dataSource" :reshowStatus="barChart" v-show="barChart"></columnScroll>
|
||||
</template>
|
||||
<template v-else-if="pickIndex == 1">
|
||||
<lineScroll canvasId="electricLine" @onRenderComplete="onRenderComplete" :width="690" :chartData="dataSource" :reshowStatus="polyLineChart" v-show="polyLineChart"></lineScroll>
|
||||
</template>
|
||||
<template v-else-if="pickIndex == 2">
|
||||
<htable :prodDataList="dataSource" @onRenderFinsh="onRenderFinshTable" v-show="tableChart" :reshowStatus="tableChart"></htable>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||||
import columnScroll from "@/components/uchartComponents/column-scroll.vue";
|
||||
import htable from "@/components/historyCmp/table.vue"
|
||||
|
||||
import mixins from '../common/mixins.js'
|
||||
export default {
|
||||
mixins:[mixins],
|
||||
components:{lineScroll,columnScroll,htable}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../common/common.scss'
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:pickIndex==index}" @click="switchFn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<template v-if="pickIndex == 0">
|
||||
<columnScroll canvasId="leakageColumn" @onRenderFinsh="onRenderFinshBar" :width="690" :chartData="dataSource" :reshowStatus="barChart" v-show="barChart"></columnScroll>
|
||||
</template>
|
||||
<template v-else-if="pickIndex == 1">
|
||||
<lineScroll canvasId="leakageLine" @onRenderComplete="onRenderComplete" :width="690" :chartData="dataSource" :reshowStatus="polyLineChart" v-show="polyLineChart"></lineScroll>
|
||||
</template>
|
||||
<template v-else-if="pickIndex == 2">
|
||||
<htable :prodDataList="dataSource" @onRenderFinsh="onRenderFinshTable" v-show="tableChart" :reshowStatus="tableChart"></htable>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||||
import columnScroll from "@/components/uchartComponents/column-scroll.vue";
|
||||
import htable from "@/components/historyCmp/table.vue"
|
||||
|
||||
import mixins from '../common/mixins.js'
|
||||
export default {
|
||||
mixins:[mixins],
|
||||
components:{lineScroll,columnScroll,htable}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../common/common.scss'
|
||||
</style>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 温度1 -->
|
||||
<view class="historyCurve-leakage">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路1温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:line1_pickIndex==index}" @click="switch1Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<template v-if="line1_pickIndex == 0">
|
||||
<columnScroll canvasId="temperatureColumn1" @onRenderFinsh="onRenderFinshBarLine1" :width="690" :chartData="line1_dataSource" :reshowStatus="line1_barChart" v-show="line1_barChart"></columnScroll>
|
||||
</template>
|
||||
<template v-else-if="line1_pickIndex == 1">
|
||||
<lineScroll canvasId="temperatureLine1" @onRenderComplete="onRenderCompleteLine1" :width="690" :chartData="line1_dataSource" :reshowStatus="line1_polyLineChart" v-show="line1_polyLineChart"></lineScroll>
|
||||
</template>
|
||||
<template v-else-if="line1_pickIndex == 2">
|
||||
<htable :prodDataList="line1_dataSource" @onRenderFinsh="onRenderFinshTableLine1" v-show="line1_tableChart" :reshowStatus="line1_tableChart"></htable>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度2 -->
|
||||
<view class="historyCurve-leakage" v-if="render2">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路2温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:line2_pickIndex==index}" @click="switch2Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<template v-if="line2_pickIndex == 0">
|
||||
<columnScroll canvasId="temperatureColumn2" @onRenderFinsh="onRenderFinshBarLine2" :width="690" :chartData="line2_dataSource" :reshowStatus="line2_barChart" v-show="line2_barChart"></columnScroll>
|
||||
</template>
|
||||
<template v-else-if="line2_pickIndex == 1">
|
||||
<lineScroll canvasId="temperatureLine2" @onRenderComplete="onRenderCompleteLine2" :width="690" :chartData="line2_dataSource" :reshowStatus="line2_polyLineChart" v-show="line2_polyLineChart"></lineScroll>
|
||||
</template>
|
||||
<template v-else-if="line2_pickIndex == 2">
|
||||
<htable :prodDataList="line2_dataSource" @onRenderFinsh="onRenderFinshTableLine2" v-show="line2_tableChart" :reshowStatus="line2_tableChart"></htable>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度3 -->
|
||||
<view class="historyCurve-leakage" v-if="render3">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路3温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:line3_pickIndex==index}" @click="switch3Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<template v-if="line3_pickIndex == 0">
|
||||
<columnScroll canvasId="temperatureColumn3" @onRenderFinsh="onRenderFinshBarLine3" :width="690" :chartData="line3_dataSource" :reshowStatus="line3_barChart" v-show="line3_barChart"></columnScroll>
|
||||
</template>
|
||||
<template v-else-if="line3_pickIndex == 1">
|
||||
<lineScroll canvasId="temperatureLine3" @onRenderComplete="onRenderCompleteLine3" :width="690" :chartData="line3_dataSource" :reshowStatus="line3_polyLineChart" v-show="line3_polyLineChart"></lineScroll>
|
||||
</template>
|
||||
<template v-else-if="line3_pickIndex == 2">
|
||||
<htable :prodDataList="line3_dataSource" @onRenderFinsh="onRenderFinshTableLine3" v-show="line3_tableChart" :reshowStatus="line3_tableChart"></htable>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 温度4 -->
|
||||
<view class="historyCurve-leakage" v-if="render4">
|
||||
<view class="historyCurve-leakage-title">
|
||||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||||
<text class="pl20">线路4温度</text>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-content">
|
||||
<view class="historyCurve-leakage-switch">
|
||||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||||
:class="{leakageAction:line4_pickIndex==index}" @click="switch4Fn(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<view class="historyCurve-leakage-chart">
|
||||
<template v-if="line4_pickIndex == 0">
|
||||
<columnScroll canvasId="temperatureColumn4" @onRenderFinsh="onRenderFinshBarLine4" :width="690" :chartData="line4_dataSource" :reshowStatus="line4_barChart" v-show="line4_barChart"></columnScroll>
|
||||
</template>
|
||||
<template v-else-if="line4_pickIndex == 1">
|
||||
<lineScroll canvasId="temperatureLine4" @onRenderComplete="onRenderCompleteLine4" :width="690" :chartData="line4_dataSource" :reshowStatus="line4_polyLineChart" v-show="line4_polyLineChart"></lineScroll>
|
||||
</template>
|
||||
<template v-else-if="line4_pickIndex == 2">
|
||||
<htable :prodDataList="line4_dataSource" @onRenderFinsh="onRenderFinshTableLine4" v-show="line4_tableChart" :reshowStatus="line4_tableChart"></htable>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||||
import columnScroll from "@/components/uchartComponents/column-scroll.vue";
|
||||
import htable from "@/components/historyCmp/table.vue"
|
||||
|
||||
export default {
|
||||
components:{lineScroll,columnScroll,htable},
|
||||
props: {
|
||||
lineRoad1Data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
lineRoad2Data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
lineRoad3Data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
lineRoad4Data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switchList: ["柱状图","折线图","数据视图"],
|
||||
line1_pickIndex: 0,
|
||||
line1_barChart: false,
|
||||
line1_polyLineChart: false,
|
||||
line1_tableChart: false,
|
||||
line1_dataSource: {},
|
||||
|
||||
line2_pickIndex: 0,
|
||||
line2_barChart: false,
|
||||
line2_polyLineChart: false,
|
||||
line2_tableChart: false,
|
||||
line2_dataSource: {},
|
||||
|
||||
line3_pickIndex: 0,
|
||||
line3_barChart: false,
|
||||
line3_polyLineChart: false,
|
||||
line3_tableChart: false,
|
||||
line3_dataSource: {},
|
||||
|
||||
line4_pickIndex: 0,
|
||||
line4_barChart: false,
|
||||
line4_polyLineChart: false,
|
||||
line4_tableChart: false,
|
||||
line4_dataSource: {},
|
||||
|
||||
render2: false,
|
||||
render3: false,
|
||||
render4: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.lineRoad1Data, 'lineRoad1Data')
|
||||
this.line1_dataSource = this.lineRoad1Data;
|
||||
this.line2_dataSource = this.lineRoad2Data;
|
||||
this.line3_dataSource = this.lineRoad3Data;
|
||||
this.line4_dataSource = this.lineRoad4Data;
|
||||
},
|
||||
watch: {
|
||||
lineRoad1Data(newVal) {
|
||||
this.line1_dataSource = newVal;
|
||||
},
|
||||
lineRoad2Data(newVal) {
|
||||
this.line2_dataSource = newVal;
|
||||
},
|
||||
lineRoad3Data(newVal) {
|
||||
this.line3_dataSource = newVal;
|
||||
},
|
||||
lineRoad4Data(newVal) {
|
||||
this.line4_dataSource = newVal;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 温度1
|
||||
switch1Fn(item,index){
|
||||
this.line1_pickIndex = index;
|
||||
this.line1_barChart = false;
|
||||
this.line1_polyLineChart = false;
|
||||
this.line1_tableChart = false;
|
||||
},
|
||||
onRenderFinshBarLine1() {
|
||||
this.line1_barChart = true;
|
||||
this.render2 = true; //1温度渲染完开始渲染2温度，以此类推
|
||||
},
|
||||
onRenderCompleteLine1() {
|
||||
this.line1_polyLineChart = true;
|
||||
},
|
||||
onRenderFinshTableLine1() {
|
||||
this.line1_tableChart = true;
|
||||
},
|
||||
// 温度2
|
||||
switch2Fn(item,index){
|
||||
this.line2_pickIndex = index;
|
||||
this.line2_barChart = false;
|
||||
this.line2_polyLineChart = false;
|
||||
this.line2_tableChart = false;
|
||||
},
|
||||
onRenderFinshBarLine2() {
|
||||
this.line2_barChart = true;
|
||||
this.render3 = true;
|
||||
},
|
||||
onRenderCompleteLine2() {
|
||||
this.line2_polyLineChart = true;
|
||||
},
|
||||
onRenderFinshTableLine2() {
|
||||
this.line2_tableChart = true;
|
||||
},
|
||||
// 温度3
|
||||
switch3Fn(item,index){
|
||||
this.line3_pickIndex = index;
|
||||
this.line3_barChart = false;
|
||||
this.line3_polyLineChart = false;
|
||||
this.line3_tableChart = false;
|
||||
},
|
||||
onRenderFinshBarLine3() {
|
||||
this.line3_barChart = true;
|
||||
this.render4 = true;
|
||||
},
|
||||
onRenderCompleteLine3() {
|
||||
this.line3_polyLineChart = true;
|
||||
},
|
||||
onRenderFinshTableLine3() {
|
||||
this.line3_tableChart = true;
|
||||
},
|
||||
// // 温度4
|
||||
switch4Fn(item,index){
|
||||
this.line4_pickIndex = index;
|
||||
this.line4_barChart = false;
|
||||
this.line4_polyLineChart = false;
|
||||
this.line4_tableChart = false;
|
||||
},
|
||||
onRenderFinshBarLine4() {
|
||||
this.line4_barChart = true;
|
||||
},
|
||||
onRenderCompleteLine4() {
|
||||
this.line4_polyLineChart = true;
|
||||
},
|
||||
onRenderFinshTableLine4() {
|
||||
this.line4_tableChart = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../common/common.scss'
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue