0017
/
gy-app-shop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 删除未使用的组件和配置文件

This commit is contained in:
fhysy 2025-03-12 10:47:31 +08:00
parent 040ee7a5d8
commit 6f156df9a8
186 changed files with 8 additions and 42030 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@ -6,10 +6,8 @@
/* #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();

99
common/app-config.js
View File

@ -1,99 +0,0 @@
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:'',
}

57
common/script/allNavList.js
View File

@ -1,57 +0,0 @@
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;

164
common/script/homeNavList.js
View File

@ -1,164 +0,0 @@
// 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;

96
components/electricalSafe/bottomSelect.vue
View File

@ -1,96 +0,0 @@
<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>

97
components/electricalSafe/headerSelect.vue
View File

@ -1,97 +0,0 @@
<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>

207
components/electricalSafe/pickerGroup.vue
View File

@ -1,207 +0,0 @@
<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>

33
components/headerBg/headerBg.vue
View File

@ -1,33 +0,0 @@
<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>

108
components/historyCmp/table.vue
View File

@ -1,108 +0,0 @@
<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>

554
components/icon/icon.vue
View File

@ -1,554 +0,0 @@
<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>

200
components/ly-tree/components/ly-checkbox.vue
View File

@ -1,200 +0,0 @@
<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>

424
components/ly-tree/ly-tree-node.vue
View File

@ -1,424 +0,0 @@
<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>

605
components/ly-tree/ly-tree.vue
View File

@ -1,605 +0,0 @@
<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>

538
components/ly-tree/model/node.js
View File

@ -1,538 +0,0 @@
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);
}
}
}

419
components/ly-tree/model/tree-store.js
View File

@ -1,419 +0,0 @@
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);
}
}
};

115
components/ly-tree/tool/util.js
View File

@ -1,115 +0,0 @@
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 === '';
}

77
components/signal/signal.vue
View File

@ -1,77 +0,0 @@
<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>

151
components/tki-tree/style.css
View File

@ -1,151 +0,0 @@
.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;
}

302
components/tki-tree/tki-tree.vue
View File

@ -1,302 +0,0 @@
<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>

165
components/u-charts/component.vue
View File

@ -1,165 +0,0 @@
<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>

5662
components/u-charts/u-charts.js
View File

File diff suppressed because it is too large Load Diff

1
components/u-charts/u-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

121
components/uchartComponents/Arcbar.vue
View File

@ -1,121 +0,0 @@
<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>

143
components/uchartComponents/area-scroll.vue
View File

@ -1,143 +0,0 @@
<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>

177
components/uchartComponents/column-scroll.vue
View File

@ -1,177 +0,0 @@
<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>

175
components/uchartComponents/line-scroll.vue
View File

@ -1,175 +0,0 @@
<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>

123
components/uchartComponents/ring.vue
View File

@ -1,123 +0,0 @@
<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>

131
components/uchartComponents/rotate-scroll.vue
View File

@ -1,131 +0,0 @@
<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>

77
components/uni-ui/signal/signal.vue
View File

@ -1,77 +0,0 @@
<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>

96
components/uni-ui/uni-icons/icons.js
View File

@ -1,96 +0,0 @@
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'
}

57
components/uni-ui/uni-icons/uni-icons.vue
View File

File diff suppressed because one or more lines are too long

8
main.js
View File

@ -4,19 +4,15 @@ 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({
@ -26,16 +22,12 @@ const tui = {
})
}
}
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({

686
pages.json
View File

@ -17,13 +17,6 @@
"navigationBarBackgroundColor": "#1890ff"
}
},
{
"path": "pages/auth/login",
"style": {
"navigationBarTitleText": "登录",
"navigationBarBackgroundColor": "#1890ff"
}
},
{
"path": "pages/tabBar/new",
"style": {
@ -46,22 +39,6 @@
}
},
{
"path": "pages/tabBar/home",
"style": {
"navigationBarTitleText": "首页"
// "navigationStyle": "custom"
}
}, {
"path": "pages/tabBar/project",
"style": {
"navigationBarTitleText": "项目"
}
}, {
"path": "pages/tabBar/alarm",
"style": {
"navigationBarTitleText": "实时报警"
}
}, {
"path": "pages/tabBar/my",
"style": {
"navigationBarTitleText": "我的"
@ -71,556 +48,15 @@
],
"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": "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": "空间管理",
"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"
"path": "passwordModify",
"style": {
"navigationBarTitleText": "修改密码"
}
}
}, {
"path": "passwordModify",
"style": {
"navigationBarTitleText": "修改密码"
}
}]
]
},
{
"root": "pages/new/",
@ -650,13 +86,13 @@
"navigationBarTitleText": "素材上传",
"navigationBarBackgroundColor": "#fff"
}
},{
}, {
"path": "videoView",
"style": {
"navigationBarTitleText": "视频预览",
"navigationBarBackgroundColor": "#fff"
}
},{
}, {
"path": "AiDrama",
"style": {
"navigationBarTitleText": "AI 剧本助手",
@ -728,127 +164,21 @@
},
{
"path": "pages/product/detail",
"name": "商品详情" ,//模式名称
"name": "商品详情", //模式名称
"query": "id=1888110308906405890"
},
{
"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"
}
]
}

184
pages/auth/companyRegister.vue
View File

@ -1,184 +0,0 @@
<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>

666
pages/auth/defalut.vue
View File

@ -1,666 +0,0 @@
<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>

270
pages/auth/forgotPassword.vue
View File

@ -1,270 +0,0 @@
<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>

431
pages/auth/login.vue
View File

@ -1,431 +0,0 @@
<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>

73
pages/auth/registerGuide.vue
View File

@ -1,73 +0,0 @@
<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>

63
pages/auth/registerLoading.vue
View File

@ -1,63 +0,0 @@
<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>

234
pages/auth/userRegister.vue
View File

@ -1,234 +0,0 @@
<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>

393
pages/battery/battery-info.vue
View File

@ -1,393 +0,0 @@
<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>

170
pages/home/electricalFire/alarmCenter.vue
View File

@ -1,170 +0,0 @@
<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>

142
pages/home/electricalFire/alarmDetail.vue
View File

@ -1,142 +0,0 @@
<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>

48
pages/home/electricalFire/cameraDetail.vue
View File

@ -1,48 +0,0 @@
<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>

165
pages/home/electricalFire/device.vue
View File

@ -1,165 +0,0 @@
<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>

173
pages/home/electricalFire/index.vue
View File

@ -1,173 +0,0 @@
<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>

118
pages/home/electricalFire/placeDetail.vue
View File

@ -1,118 +0,0 @@
<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>

107
pages/home/electricalFire/placeManage.vue
View File

@ -1,107 +0,0 @@
<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>

91
pages/home/electricalFire/runingRecord.vue
View File

@ -1,91 +0,0 @@
<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>

220
pages/home/electricalFire/smokeDetail.vue
View File

@ -1,220 +0,0 @@
<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>

74
pages/home/more/moreNavBar.vue
View File

@ -1,74 +0,0 @@
<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>

172
pages/home/smoke/index.vue
View File

@ -1,172 +0,0 @@
<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>

170
pages/home/temperature/alarmCenter.vue
View File

@ -1,170 +0,0 @@
<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>

119
pages/home/temperature/device.vue
View File

@ -1,119 +0,0 @@
<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>

53
pages/home/temperature/deviceDetail.vue
View File

@ -1,53 +0,0 @@
<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>

146
pages/home/temperature/index.vue
View File

@ -1,146 +0,0 @@
<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>

118
pages/home/temperature/placeDetail.vue
View File

@ -1,118 +0,0 @@
<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>

107
pages/home/temperature/placeManage.vue
View File

@ -1,107 +0,0 @@
<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>

573
pages/home/warnAnalysis/index.vue
View File

@ -1,573 +0,0 @@
<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>

170
pages/home/waterLevel/alarmCenter.vue
View File

@ -1,170 +0,0 @@
<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>

119
pages/home/waterLevel/device.vue
View File

@ -1,119 +0,0 @@
<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>

53
pages/home/waterLevel/deviceDetail.vue
View File

@ -1,53 +0,0 @@
<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>

148
pages/home/waterLevel/index.vue
View File

@ -1,148 +0,0 @@
<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>

118
pages/home/waterLevel/placeDetail.vue
View File

@ -1,118 +0,0 @@
<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>

107
pages/home/waterLevel/placeManage.vue
View File

@ -1,107 +0,0 @@
<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>

458
pages/home/waterLevel/realTime.vue
View File

@ -1,458 +0,0 @@
<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>

433
pages/home/wisdomElectricity/alarmRecord.vue
View File

@ -1,433 +0,0 @@
<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>

732
pages/home/wisdomElectricity/electricityDetail.vue
View File

@ -1,732 +0,0 @@
<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>

657
pages/home/wisdomElectricity/energyAnalysis/index.vue
View File

@ -1,657 +0,0 @@
<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>

154
pages/home/wisdomElectricity/energyAnalysis/monthDetail.vue
View File

@ -1,154 +0,0 @@
<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>

645
pages/home/wisdomElectricity/historyCurve--.vue
View File

@ -1,645 +0,0 @@
<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>

48
pages/home/wisdomElectricity/historyCurve/common/common.scss
View File

@ -1,48 +0,0 @@
.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;
}
}
}
}

45
pages/home/wisdomElectricity/historyCurve/common/mixins.js
View File

@ -1,45 +0,0 @@
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;
}
}
}

37
pages/home/wisdomElectricity/historyCurve/components/electric.vue
View File

@ -1,37 +0,0 @@
<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>

37
pages/home/wisdomElectricity/historyCurve/components/leakage.vue
View File

@ -1,37 +0,0 @@
<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>

262
pages/home/wisdomElectricity/historyCurve/components/temperature.vue
View File

@ -1,262 +0,0 @@
<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>

38
pages/home/wisdomElectricity/historyCurve/components/voltage.vue
View File

@ -1,38 +0,0 @@
<!-- 电压 -->
<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="voltageColumn" @onRenderFinsh="onRenderFinshBar" :width="690" :chartData="dataSource" :reshowStatus="barChart" v-show="barChart"></columnScroll>
</template>
<template v-else-if="pickIndex == 1">
<lineScroll canvasId="voltageLine" @onRenderComplete="onRenderComplete" :width="690" :chartData="dataSource" :reshowStatus="polyLineChart" v-show="polyLineChart"></lineScroll>
</template>
<template v-else-if="pickIndex == 2">
<htable :prodDataList="dataSource" @onRenderFinsh="onRenderFinshTable" :reshowStatus="tableChart" v-show="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>

351
pages/home/wisdomElectricity/historyCurve/index.vue
View File

@ -1,351 +0,0 @@
<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>
<u-tabs
:list="list"
:current="current"
:is-scroll="false"
:font-size="28"
:active-color="'#1C9AFF'"
:bold="false"
item-width="25%"
@change="change"
>
</u-tabs>
<!-- 加载中 -->
<template v-if="loadStatus ==='loading'">
<view class="historyCurve-nodata">
<u-loading mode="flower" :size="60"></u-loading>
</view>
</template>
<!-- 已加载 -->
<template v-else-if="loadStatus == 'loaded'">
<!-- 电压 -->
<template v-if="current===0">
<voltage :chartData="uColumnData"></voltage>
</template>
<!-- 电流 -->
<template v-else-if="current===1">
<electric :chartData="iColumnData"></electric>
</template>
<!-- 漏电 -->
<template v-else-if="current===2">
<leakage :chartData="inColumnData"></leakage>
</template>
<!-- 温度-->
<!-- <template v-else-if="current===3">
<temperature :lineRoad1Data="lineRoad1ColumnData"></temperature>
</template> -->
<template v-else-if="current===3">
<temperature :lineRoad1Data="lineRoad1ColumnData" :lineRoad2Data="lineRoad2ColumnData" :lineRoad3Data="lineRoad3ColumnData" :lineRoad4Data="lineRoad4ColumnData"></temperature>
</template>
</template>
<!-- 无数据状态 -->
<template v-else-if="loadStatus == 'none'">
<view class="historyCurve-nodata">
<u-empty text="数据为空~" mode="list"></u-empty>
</view>
</template>
<!-- 加载错误 -->
<template v-else>
<view class="historyCurve-nodata">
<u-empty text="网络开小差啦~" mode="data"></u-empty>
</view>
</template>
<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>
import voltage from './components/voltage.vue'
import electric from './components/electric.vue'
import leakage from './components/leakage.vue'
import temperature from './components/temperature.vue'
let _self;
export default {
data() {
return {
deviceId:"",
prodKey:"",
deviceName:"",
appInfo:{},
beginDatePickerShow:false,
endDatePickerShow:false,
currentSelectorValue:{},
selectorData:[],
beginDate:"",
endDate:"",
params:{
year: true,
month: true,
day: true,
timestamp: true, // 1.3.7版本提供
},
list: [
{
name: '电压'
},{
name: '电流'
},{
name: '漏电'
},{
name: '温度'
}
],
current: 0,
// historyCurveData: {}, // 历史曲线数据
uColumnData: {},// 电压数据
inColumnData: {},// 漏电流数据
iColumnData: {}, // 电流数据
lineRoad1ColumnData: {}, // 线路1温度
lineRoad2ColumnData:{}, // 线路2温度
lineRoad3ColumnData: {}, // 线路3温度
lineRoad4ColumnData: {}, // 线路4温度
loadStatus: 'loading'
}
},
onLoad(e) {
_self = this;
// 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;
this.deviceName = e.deviceName;
},
onReady() {
this.getDeviceInfoListFn();
},
methods: {
change(index) {
this.current = index;
},
iniData() {
this.uColumnData = {};
this.inColumnData = {};
this.iColumnData = {};
this.lineRoad1ColumnData = {};
this.lineRoad2ColumnData = {};
this.lineRoad3ColumnData = {};
this.lineRoad4ColumnData = {};
},
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();
}else{
_self.loadStatus = 'none';
_self.currentSelectorValue = {deviceName:_self.deviceName};
}
}).catch(()=>{
_self.loadStatus = 'error';
this.selectorData = [];
})
},
// 获取数据
getServerData(){
// console.log(_self.currentSelectorValue, '_self.currentSelectorValue')
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));
let startTime = this.$utils.getYMDHMS(currentDayTimestamp);
let endTime = this.$utils.getYMDHMS(lastDayTimeStamp);
console.log(startTime, endTime)
this.$get('/iot/dev/data/mcb/top',{deviceId: _self.currentSelectorValue.deviceId, startDate: startTime, endDate: endTime})
.then(res => {
// console.log(res, '/mcb/top')
if(res.code !=200 || res.data == 0) {
console.log("11")
_self.leakageChartA = true; // 漏电渲染开关
_self.loadStatus = 'none';
_self.iniData();
// _self.$tui.toast("无数据",2000)
return;
}else if(res.data.length<=0){
console.log("22")
_self.leakageChartA = true; // 漏电渲染开关
_self.loadStatus = 'none';
return;
}
console.log("33")
let timeArrList = [],
uList = [],
iList = [],
inList = [],
lineRoadOneT1List = [],
lineRoadOneT2List = [],
lineRoadTwoT3List = [],
lineRoadTwoT4List = [],
lineRoadThreeT5List = [],
lineRoadThreeT6List = [],
lineRoadFourT7List = [],
lineRoadFourT8List = [];
res.data.forEach((item,index)=>{
// timeArrList.push(_self.$u.timeFormat(item.createTime, 'hh:MM:ss') || "-");
// 解决ios时间格式问题
if(isIos){
let createTime = item.createTime.replace(/-/g,'/');
timeArrList.push(_self.$u.timeFormat(new Date(createTime).getTime(), 'hh:MM:ss') || "-");
}else{
timeArrList.push(_self.$u.timeFormat(new Date(item.createTime).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);
})
// console.log(timeArrList, 'timeArrList')
_self.inColumnData = {
series:[{name:"漏电流(mA)",data:inList}],
categories:timeArrList
}
_self.uColumnData = {
series:[{name:"电压(V)",data:uList}],
categories:timeArrList
}
// console.log(_self.uColumnData, 'uColumnData')
_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; // 漏电渲染开关
_self.loadStatus = 'loaded';
}).catch((err) => {
console.log("finally",err)
_self.leakageChartA = true; // 漏电渲染开关
_self.loadStatus = 'loaded';
})
},
selectorOnConfirmFn(e){
this.currentSelectorValue = this.selectorData[e];
this.getServerData();
},
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();
}
},
components: {
voltage,
electric,
leakage,
temperature
}
}
</script>
<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;
}
}
&-nodata{
display: flex;
align-items: center;
justify-content: center;
height: 600rpx;
height: 550rpx;
}
}
</style>

267
pages/home/wisdomElectricity/index.vue
View File

@ -1,267 +0,0 @@
<style lang="scss" scoped>
.wisdomElectricity{
width: 100%;
height: 100%;
background-color: #F9F9F9;
:not(not) {
box-sizing: border-box;
}
&-dropdown{
// position: fixed;
// left: 0;
// top: 0;
background-color: #fff;
// width: 100%;
// z-index: 999;
}
// &-content{
// height: calc(100% - 184rpx);
// overflow: auto;
// }
&-device-list{
padding: 20rpx $paddingLR;
}
&-search{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx $paddingLR;
&-input{
// width: calc(100% - 180rpx);
width: 100%;
}
&-btn{
width: 140rpx;
}
}
.wisdomElectricity-device-box{
box-shadow: $box-shadow;
background-color: #fff;
display: flex;
width: 100%;
// height: 220rpx;
border-radius: $uni-border-radius-lg;
position: relative;
margin-bottom: 20rpx;
.device-state{
position: absolute;
right: 1rpx;
top: 10rpx;
}
.device-img{
width: 220rpx;
padding: 30rpx;
}
.device-info{
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: center;
padding: 60rpx 0;
padding-left: 0;
width: calc(100% - 220rpx);
&-title{
width: 100%;
// padding-top: 62rpx;
padding-bottom: 10rpx;
font-size: 36rpx;
font-weight: bold;
}
&-number{
width: 100%;
color: #999;
}
}
}
}
</style>
<template>
<view class="wisdomElectricity">
<!-- <u-navbar back-text="返回" title="全部" background="#1c9aff">
<view class="navbar-right" slot="right">
<view class="message-box right-item">
<u-icon name="chat" size="38"></u-icon>
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
</view>
<view class="dot-box right-item">
<u-icon name="calendar-fill" size="38"></u-icon>
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
</view>
</view>
</u-navbar> -->
<view class="wisdomElectricity-dropdown" :style="{height:dropdownIsOpen?'100%':''}">
<u-dropdown :border-bottom="true" @open="onOpenFn" @close="onCloseFn">
<u-dropdown-item height="520rpx" v-model="projectIdVal" title="请选择项目" :options="pickProjectOptions" @change="pickProjectOnChangeFn"></u-dropdown-item>
<u-dropdown-item v-model="screeningValue" title="筛选" :options="screeningOptions" @change="screeningOnChangeFn"></u-dropdown-item>
</u-dropdown>
<view class="wisdomElectricity-search">
<u-search class="wisdomElectricity-search-input" placeholder="输入设备号搜索" @change="searchOnchangeFn" shape="square" :show-action="false" v-model="searchValue"></u-search>
<!-- <u-button class="wisdomElectricity-search-btn" type="primary" size="mini" @click="goLineRoadListFn">线路列表</u-button> -->
</view>
</view>
<!-- <view class="wisdomElectricity-content"> -->
<view class="wisdomElectricity-device-list">
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
<view class="wisdomElectricity-device-box" v-for="(item,index) in deviceList" :key="index" @click="goElectricityDetailFn(item)">
<view class="device-img" v-if="item.deviceImage">
<u-image width="100%" height="100%" :src="$tools.getIotFileUrl(item.deviceImage)"></u-image>
</view>
<view class="device-img" v-else>
<u-image width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/switch.png"></u-image>
</view>
<view class="device-info">
<view class="device-info-title">{{item.deviceName}}</view>
<view class="device-info-number ellipsis">{{item.deviceKey}}</view>
</view>
<u-tag :text="item.deviceState=='OFFLINE'?'离线':item.deviceState=='ONLINE'?'在线':'脱线'" mode="dark" class="device-state"
:type="item.deviceState=='OFFLINE'?'warning':item.deviceState=='ONLINE'?'success':'info'" shape="circleLeft" />
</view>
</mescroll-body>
</view>
<!-- </view> -->
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default{
data(){
return {
dropdownIsOpen:false,
searchValue:"",
projectIdVal: "",
screeningValue: "",
pickProjectOptions: [],
screeningOptions: [{
label: '全部',
value: "",
},{
label: '未激活',
value: "UNACTIVE",
},{
label: '在线',
value: "ONLINE",
},{
label: '离线',
value: "OFFLINE",
}
],
deviceList:[],
// deviceList:[{
// deviceImage:"https://fanyiapp.cdn.bcebos.com/ugc/image/zhike_message.jpg",
// deviceName:"设备1",
// deviceId:"HCWL11111111111",
// deviceState:"在线",
// projectId:"123"
// },{
// deviceImage:"https://fanyiapp.cdn.bcebos.com/ugc/image/zhike_message.jpg",
// deviceName:"设备2",
// deviceId:"HCWL6666666666",
// deviceState:2,
// projectId:"321"
// }],
}
},
mixins:[MescrollMixin],
onLoad(e) {
this.getProjectListFn();
if(e.deviceState){
this.screeningValue = e.deviceState;
this.mescroll.resetUpScroll();
}
},
methods:{
searchOnchangeFn(){
this.mescroll.resetUpScroll();
},
getProjectListFn(){
this.$get('/app/project/list',).then((res)=>{
console.log(res,"Resssss");
if (res.data && res.data.length>0) {
this.pickProjectOptions = res.data.map((item)=>{
return {
label:item.projectName,
value:item.projectId
}
})
this.pickProjectOptions.unshift({
label:"全部",
value:""
})
}
})
},
/*上拉加载的回调*/
upCallback(page) {
// this.mescroll.endErr();
// return;
// console.log(page,"page");
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
let obj = {
pageSize:pageSize,
pageNum:pageNum,
projectId:this.projectIdVal,
deviceState:this.screeningValue,
deviceName:this.searchValue,
deviceTypes:"GATEWAY_CONTROLLER"
}
this.$get("/app/device/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.deviceList = []; //如果是第一页需手动置空列表
this.deviceList = this.deviceList.concat(curPageData); //追加新数据
this.mescroll.endBySize(curPageLen, res.total); // 推荐
// this.mescroll.endByPage(curPageLen, res.data.total)
// this.mescroll.endSuccess(curPageData.length);
} else{
this.deviceList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
// this.mescroll.endUpScroll(true);
}
}).catch(()=>{
//联网失败, 结束加载
this.mescroll.endErr();
this.mescroll.showEmpty();
}).finally(()=>{
this.dropdownIsOpen = false;
})
},
// 跳转设备详情
goElectricityDetailFn(item){
uni.navigateTo({
url:`./electricityDetail?deviceId=${item.deviceId}`
})
},
onOpenFn(e){
this.dropdownIsOpen = true;
},
onCloseFn(){
this.dropdownIsOpen = false;
},
pickProjectOnChangeFn(e){
this.dropdownIsOpen = true;
this.mescroll.resetUpScroll()
},
screeningOnChangeFn(e){
this.dropdownIsOpen = true;
this.mescroll.resetUpScroll()
},
// 跳转线路列表
goLineRoadListFn(){
uni.navigateTo({
url:"./lineRoadList"
})
}
}
}
</script>

275
pages/home/wisdomElectricity/lineRoadList.vue
View File

@ -1,275 +0,0 @@
<style lang='scss' scoped>
.lineRoadList{
width: 100%;
/* height: 100%; */
background-color: #F9F9F9;
:not(not) {
box-sizing: border-box;
}
&-header{
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #eee;
background-color: #fff;
padding-left: 40rpx;
padding-right: 20rpx;
&-allpick{
margin-left: 20rpx;
display: flex;
align-items: center;
}
}
&-info-list{
background-color: #F9F9F9;
padding: $paddingTB $paddingLR;
}
&-info-box{
width: 100%;
border-radius: $uni-border-radius-lg;
background-color: #fff;
box-shadow: $box-shadow;
margin-bottom: 20rpx;
&:last-child{
margin-bottom: 0;
}
&-msg{
padding: 20rpx;
/* border-bottom: 2px dotted #A1A1A1; */
border-bottom: 1px dashed #A1A1A1;
position: relative;
}
.box-checkbox{
position: absolute;
right: -16rpx;
top: 14rpx;
z-index: 10;
}
.box-detail-btn{
position: absolute;
right: 20rpx;
bottom: 20rpx;
}
.box-left-line{
width: 20rpx;
height: 100%;
background: #93CDFC;
}
&-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;
}
.msg-row-text{
color: #000;
}
}
&-bottom{
display: flex;
justify-content: space-between;
padding: 20rpx;
}
}
.lineRode-info{
padding: 70rpx 30rpx 40rpx 30rpx;
&-row{
padding-bottom: 20rpx;
&:last-child{
padding-bottom: 0;
}
}
}
&-bottom{
width: 100%;
height: 100rpx;
background: #1C9AFF;
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 60rpx;
}
}
</style>
<style>
.u-checkbox__label{
margin-right: 0;
}
</style>
<template>
<view class="lineRoadList">
<u-sticky>
<view class="lineRoadList-header" :style="{height:dropdownIsOpen?'100%':''}">
<u-dropdown @open="onOpenFn" @close="onCloseFn">
<u-dropdown-item v-model="value1" title="筛选" :options="options1"></u-dropdown-item>
</u-dropdown>
<u-search placeholder="输入设备号搜索" v-model="searchValue" :show-action="false" @search="search"></u-search>
<view class="lineRoadList-header-allpick">
<text class="pr20">全选</text>
<u-checkbox v-model="allChecked" @change="onAllCheckChangeFn"></u-checkbox>
</view>
</view>
</u-sticky>
<view class="lineRoadList-info-list">
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
<view class="lineRoadList-info-box" v-for="(item,index) in lineRoadList" :key="index" >
<view class="lineRoadList-info-box-msg">
<view class="box-detail-btn" @click="openReadInfoFn(item)">
查看详情
</view>
<u-checkbox class="box-checkbox" v-model="item.checkedFlag" @change="boxCheckChangeFn"></u-checkbox>
<view class="box-left-line"></view>
<view class="lineRoadList-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">项目：{{item.name}}</text>
</view>
<view class="lineRoadList-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">地点：{{item.address}}</text>
</view>
<view class="lineRoadList-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">线路：总线已通</text>
</view>
</view>
<view class="lineRoadList-info-box-bottom">
<text>时间：2020年12月2日14:01:21</text>
<text>设备状态：在线</text>
</view>
</view>
</mescroll-body>
</view>
<view class="lineRoadList-bottom">
<u-button size="medium" shape="circle" @click="batchClosingFn">批量合闸</u-button>
<u-button size="medium" shape="circle" @click="batchOpeningFn">批量分闸</u-button>
</view>
<u-popup v-model="infoShowFlag" mode="center" :closeable="true" border-radius="16">
<view class="lineRode-info">
<view class="lineRode-info-row">项目：上海德润谷云物联科技有限公司集团公司</view>
<view class="lineRode-info-row">地点：A区 18栋 高新产业园</view>
<view class="lineRode-info-row">设备号：HCWL-1250213001</view>
<view class="lineRode-info-row">设备状态：在线</view>
<view class="lineRode-info-row">线路：总路</view>
<view class="lineRode-info-row">线路状态：已通</view>
<view class="lineRode-info-row">分/合闸时间：2020-11-17 16:38:30</view>
</view>
</u-popup>
<u-modal v-model="batchModelShow" title="温馨提示" :show-cancel-button="true" :content="batchModelContent"></u-modal>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
currentBtnFlagStr:"",
batchModelContent:"",
batchModelShow:false,
searchValue:"",
allChecked:false,
value1:1,
infoShowFlag:false,
lineRoadList:[{
checkedFlag:false,
name:'上海德润谷云物联科技有限公司',
address:"A区18栋高新产业园",
totalLineFlag:true
},{
checkedFlag:false,
name:'上海德润谷云物联科技有限公司',
address:"A区18栋高新产业园",
totalLineFlag:true
}],
options1: [{
label: '全部',
value: 1,
},
{
label: '合闸',
value: 2,
},
{
label: '分闸',
value: 3,
}
],
dropdownIsOpen:false,
}
},
mixins:[MescrollMixin],
onLoad() {},
methods: {
btnActionFn(){
this.batchModelContent = this.currentBtnFlagStr==="open"?"您确定批量分闸吗":"您确定批量合闸吗";
this.batchModelShow = true;
let arr = this.lineRoadList.filter((item)=>{
return !!item.checkedFlag;
})
console.log(arr,"arr");
},
batchClosingFn(){
this.currentBtnFlagStr = "close";
this.btnActionFn();
},
batchOpeningFn(){
this.currentBtnFlagStr = "open";
this.btnActionFn();
},
checkStopFn(){
console.log("???");
},
onAllCheckChangeFn(e){
console.log(e);
this.lineRoadList.forEach((item)=>{
item.checkedFlag = e.value;
})
},
boxCheckChangeFn(e){
// setTimeout(()=>{
// let pickArr = this.lineRoadList.filter((item)=>{
// return !!item.checkedFlag;
// })
// if(pickArr.length == this.lineRoadList.length){
// this.allChecked = true;
// }
// },200)
},
openReadInfoFn(obj){
this.infoShowFlag = true;
},
//
onOpenFn(e){
console.log(e,"e");
this.dropdownIsOpen = true;
},
onCloseFn(e){
console.log(e,"e1111");
this.dropdownIsOpen = false;
}
}
}
</script>

211
pages/home/wisdomElectricity/realTime/alarmConfig.vue
View File

@ -1,211 +0,0 @@
<template>
<view class="alarmConfig-box">
<u-tabs class="tab-box" :list="groupList" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
<mescroll-body ref="mescrollRef" top="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
<u-collapse ref="collapseRef" style="padding-bottom: 100rpx;">
<u-collapse-item :title="item.funcName" ref="collapseItem" v-for="(item, index) in list" :key="item.funcKey" @change="handleOpenChange(item, index)">
<template v-slot:title >
<text style="padding-left: 10rpx;">{{item.funcName}}</text>
<text :style="{color:item.isAck?'green':'red'}">（{{item.isAck?'已同步设备':'未同步设备'}}）</text>
</template>
<u-form ref="uForm" label-width="200" label-align="left">
<u-form-item :label="val.name" v-for="val in item.confJsonObj" :key="val.key">
<u-switch v-if="getAttrType(val) === 'switch'" :disabled="item.disabled" v-model="val.value"></u-switch>
<uni-data-select
v-else-if="getAttrType(val) === 'select'"
v-model="val.value"
placement="top"
:disabled="item.disabled"
:localdata="getSelectList(val)"
></uni-data-select>
<u-input v-else :disabled="item.disabled" v-model="val.value" />
</u-form-item>
</u-form>
<view class="btn-list">
<u-button v-if="item.disabled" @click="toggleState(index)">修改</u-button>
<u-button v-else type="primary" @click="sendAttr(item,index)">下发</u-button>
</view>
</u-collapse-item>
</u-collapse>
</mescroll-body>
<u-toast ref="uToast" />
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
tabCurrent: 0,
deviceKey:'',
groupList:[],
list:[],
}
},
mixins:[MescrollMixin],
onLoad(option) {
console.log("获取到参数",option)
this.deviceKey = option.deviceKey;
},
methods: {
handleOpenChange(item, index) {
setTimeout(() => {
this.$refs.collapseRef.childrens[index].init();
}, 20);
},
tabChange(e){
console.log("tab",e)
this.tabCurrent = e;
this.list = this.groupList[e].list;
setTimeout(() => {
this.$refs.collapseRef.init();
}, 20);
},
getSelectList(data){
console.log("data",data);
let list = [];
list = data.options.map(item=>{
return {
text: item.label,
value: item.value
}
})
return list;
},
//切换状态
toggleState(i){
this.$nextTick(()=>{
this.list[i].disabled = !this.list[i].disabled;
})
},
sendAttr(data,i){
console.log("下发值为",data)
uni.showModal({
title: '提示',
content:'确认要下发配置吗？',
confirmText:'确认',
cancelText:'取消',
success: (res) => {
if (res.confirm) {
let confJsonObj = data.confJsonObj.map(item=>{
if(item.key.endsWith('_state')){
return {
...item,
value:item.value?1:0
}
}else{
return item;
}
})
let parmas = {
...data,
confJsonObj
}
this.$put("/iot/func",parmas).then((res)=>{
console.log("res",res)
if(res.code == 200){
this.$refs.uToast.show({
title: res.msg,
type: 'success',
})
this.list[i].disabled = !this.list[i].disabled;
}else{
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}
}).catch((err)=>{
console.log("err",err)
this.$refs.uToast.show({
title: err.msg,
type: 'error',
})
})
}else if (res.cancel) {
}
}
});
},
upCallback(page) {
this.$get("/iot/func/" + this.deviceKey,{}).then((res)=>{
console.log("res",res)
let groupList = [];
if(res?.data.length>0){
res.data.forEach((item,index)=>{
let flag = true;
groupList.forEach((val,i)=>{
if(val.funcType === item.funcType){
groupList[i].list.push({
...item,
disabled: true,
});
flag = false;
}
})
if(flag && item.funcType!= 'c'){
groupList.push({
funcType: item.funcType,
name: item.funcTypeName,
list: [{
...item,
disabled: true,
}]
})
}
});
this.groupList = groupList;
this.list = groupList[this.tabCurrent].list;
this.$nextTick(()=>{
this.$refs.collapseRef.init();
})
this.mescroll.endByPage(1, 1);
this.mescroll.endErr();
}else{
this.groupList = [];
this.list = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
}
}).catch((err)=>{
console.log("err",err)
//联网失败, 结束加载
this.mescroll.endErr();
})
},
//判断告警数据类型
getAttrType(obj){
if(obj.key.endsWith('_state')){
return 'switch';
}else if(obj.key.endsWith('_select')){
return 'select';
}else{
return 'input';
}
},
}
}
</script>
<style lang="scss" scoped>
.tab-box{
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 10;
}
::v-deep .u-collapse-head{
border-bottom: 1px solid #f5f5f5;
}
::v-deep .u-collapse-body{
// height: auto !important;
padding: 0 20rpx;
}
</style>

129
pages/home/wisdomElectricity/realTime/deviceDataKey.js
View File

@ -1,129 +0,0 @@
const keyArr = [
{key:"i",name:"总电流",unit:"A"},
{key:"u",name:"总电压",unit:"V"},
{key:"in", name:"漏电流",unit:"mA"},
{key:"ps", name:"功率",unit:"KW"},
{key:"pw", name:"电能",unit:"kWh"},
{key:"switch", name:"开关状态",unit:"",type:"enum",enumData:{
"0":"关",
"1":"开",
"2": "异常"
}},
{key:"t1", name:"in1温度",unit:"°C"},
{key:"t2", name:"out1温度",unit:"°C"},
{key:"t3", name:"in2温度",unit:"°C"},
{key:"t4", name:"out2温度",unit:"°C"},
{key:"t5", name:"in3温度",unit:"°C"},
{key:"t6", name:"out3温度",unit:"°C"},
{key:"t7", name:"in4温度",unit:"°C"},
{key:"t8", name:"out4温度",unit:"°C"},
{key:"q", name:"无功功率",unit:"kvar"},
{key:"s", name:"视在功率",unit:"kVA"},
{key:"pf", name:"功率因数",unit:""},
{key:"eq", name:"无功电能",unit:"kvarh"},
{key:"freq", name:"电网频率",unit:"Hz"},
]
// const obj = {
// i:{name:"总电流",unit:"A"},
// u:{name:"总电压",unit:"V"},
// in:{name:"漏电流",unit:"mA"},
// ps:{name:"总有功功率",unit:"W"},
// pw:{name:"总有功电能",unit:"kWh"},
// switch:{name:"开关状态",unit:"",type:"enum",enumData:{
// "1":"开",
// "0":"关"
// }},
// t1:{name:"进线口1温度",unit:"°C"},
// t2:{name:"出线口1温度",unit:"°C"},
// t3:{name:"进线口2温度",unit:"°C"},
// t4:{name:"出线口2温度",unit:"°C"},
// t5:{name:"进线口3温度",unit:"°C"},
// t6:{name:"出线口3温度",unit:"°C"},
// t7:{name:"进线口4温度",unit:"°C"},
// t8:{name:"出线口4温度",unit:"°C"}
// // 4p空开 _____start
// // cin:"C相漏电流",
// // bin:"B相漏电流",
// // ain:"A相漏电流",
// tout4:{name:"出线口4温度",unit:"°C"},
// tout3:{name:"出线口3温度",unit:"°C"},
// tout2:{name:"出线口2温度",unit:"°C"},
// tout1:{name:"出线口1温度",unit:"°C"},
// tin4:{name:"进线口4温度",unit:"°C"},
// tin3:{name:"进线口3温度",unit:"°C"},
// tin2:{name:"进线口2温度",unit:"°C"},
// tin1:{name:"进线口1温度",unit:"°C"},
// // alarm:"报警类型",
// "switch":{name:"开关状态",unit:""},
// qwabc:{name:"总无功电能",unit:"kWh"},
// // qwc:"C相无功电能",
// // qwb:"B相无功电能",
// // qwa:"A相无功电能",
// // pwc:"C相有功电能",
// // pwb:"B相有功电能",
// // pwa:"A相有功电能",
// // fabc:"频率",
// // pfc:"C相功率因数",
// // pfb:"B相功率因数",
// // pfa:"A相功率因数",
// // pfabc:"总功率因数",
// // qsc:"C相无功功率",
// // qsb:"B相无功功率",
// // qsa:"A相无功功率",
// // qsabc:"总无功功率",
// // psc:"C相有功功率",
// // psb:"B相有功功率",
// // psa:"A相有功功率",
// psabc:{name:"总有功功率",unit:"W"},
// ic:{name:"C相电流",unit:"A"},
// ib:{name:"B相电流",unit:"A"},
// ia:{name:"A相电流",unit:"A"},
// uc:{name:"C相电压",unit:"V"},
// ub:{name:"B相电压",unit:"V"},
// ua:{name:"A相电压",unit:"V"},
// // qwabcf:"总反相无功电能",
// // qwabcz:"总正向无功电能",
// // pwabcf:"总反相有功电能",
// // pwabcz:"总正向有功电能",
// // qwcf:"C相反向无功电能",
// // qwcz:"C相正向无功电能",
// // qwbz:"B相正向无功电能",
// // qwbf:"B相反向无功电能",
// // qwaf:"A相反向无功电能",
// // qwaz:"A相正向无功电能",
// // pwcf:"C相反向有功电能",
// // pwcz:"C相正向有功电能",
// // pwbz:"B相正向有功电能",
// // pwbf:"B相反向有功电能",
// // pwaz:"A相正向有功电能",
// // pwaf:"A相反向有功电能",
// // izero:"零序电流",
// // uca:"CA线电压",
// // ubc:"BC线电压",
// // uab:"AB线电压",
// pwabc:{name:"总有功电能",unit:"kWh"},
// // 4p空开 _____end
// // 1p空开 _____start
// // qwf:"单相反向无功电能",
// // qwz:"单相正向无功电能",
// // pwf:"单相反向有功电能",
// // pwz:"单相正向有功电能",
// // qw:"单相无功电能",
// pw:{name:"单相有功电能",unit:"kWh"},
// // f:"单相频率",
// // pf:"单相功率因数",
// // qs:"单相无功功率",
// ps:{name:"单相有功功率",unit:"W"},
// i:{name:"单相电流",unit:"A"},
// u:{name:"单相电压",unit:"V"}
// // 1p空开 _____end
// }
export default keyArr;

1045
pages/home/wisdomElectricity/realTime/index.vue
View File

File diff suppressed because it is too large Load Diff

12
pages/home/wisdomElectricity/realTime/parameterField.js
View File

@ -1,12 +0,0 @@
const obj ={
deviceName:"设备别名",
lineRoad:"线路别名",
rename:"重命名",
wiringSetup:"接线设置",
powerLimit:"功率限额",
voltageLimit:"电压限额",
currentLimit:"电流限额",
leakageCurrentLimit:"漏电流限额",
temperatureLimit:"温度限额"
}
export default obj;

455
pages/home/wisdomElectricity/realTime/parameterSetup.vue
View File

@ -1,455 +0,0 @@
<template>
<view class="parameterSetup">
<view class="device-info">
<view class="title-box">
基本信息
</view>
<view class="parameterSetup-content" v-if="deviceDataInfo">
<view class="parameterSetup-row" v-for="(value,key,index) in deviceTopData" @click="onClickRowFn(key,value)" :key="key">
<view class="parameterSetup-row-name">{{parameterField[key]}}</view>
<view class="parameterSetup-row-value">
<text class="pr10" :style="{color:key=='deviceName'?'#999':'#000'}">{{value}}</text>
<u-icon name="arrow-right" color="#bfbfbf"></u-icon>
</view>
</view>
<view class="parameterSetup-row" v-for="(item,i) in deviceBottomData" :key="i">
<view class="parameterSetup-row-name">{{item.paramName}}</view>
<view class="parameterSetup-row-value">
<text class="pr10" style="color: #999;">{{item.paramVal||'-'}}</text>
<!-- <u-icon name="arrow-right" color="#bfbfbf"></u-icon> -->
</view>
</view>
</view>
</view>
<view class="device-alarm-box" v-if="deviceDataInfo.deviceType == 'MINIATURE_BREAKER'">
<view class="title-box">
告警配置
</view>
<u-tabs class="tab-box" :list="groupList" bar-width="375" bg-color="#f5f5f5" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
<view class="alarm-loading-box" v-if="alarmLoading">
<u-loading mode="circle" size="30" :show="alarmLoading"></u-loading>
<text>刷新中</text>
</view>
<u-collapse ref="collapseRef" style="padding-bottom: 100rpx;">
<u-collapse-item :title="item.funcName" ref="collapseItem" v-for="(item, index) in list" :key="item.funcKey" @change="handleOpenChange(item, index)">
<template v-slot:title >
<text style="padding-left: 10rpx;">{{item.funcName}}</text>
<text :style="{color:item.isAck?'green':'red'}">（{{item.isAck?'已同步设备':'未同步设备'}}）</text>
</template>
<u-form ref="uForm" label-width="200" label-align="left">
<u-form-item :label="val.name" v-for="val in item.confJsonObj" :key="val.key">
<u-switch v-if="getAttrType(val) === 'switch'" :disabled="item.disabled" v-model="val.value"></u-switch>
<uni-data-select
v-else-if="getAttrType(val) === 'select'"
v-model="val.value"
placement="top"
:disabled="item.disabled"
:localdata="getSelectList(val)"
></uni-data-select>
<u-input v-else :disabled="item.disabled" v-model="val.value" />
</u-form-item>
</u-form>
<view >
<u-button v-if="item.disabled" @click="toggleState(index)">修改</u-button>
<u-button v-else type="primary" @click="sendAttr(item,index)">下发</u-button>
</view>
</u-collapse-item>
</u-collapse>
<u-empty v-if="!list" text="告警列表为空" mode="list"></u-empty>
<view class="btn-list" @click="getAlarmList">
<view class="btn-box">
刷新告警配置
</view>
</view>
</view>
<!-- <view class="parameterSetup-content">
<view class="parameterSetup-row" v-if="deviceDataInfo.deviceType == 'MINIATURE_BREAKER'" @click="goAlarmConfig">
<view class="parameterSetup-row-name">告警配置</view>
<view class="parameterSetup-row-value">
<text class="pr10">去配置</text>
<u-icon name="arrow-right" color="#bfbfbf"></u-icon>
</view>
</view>
</view> -->
<!-- 接线设置 -->
<!-- <u-picker mode="selector" v-model="wiringSetupFlag" title="请选择要接入的线路" :range="wiringSetupSelector" :default-selector="[0]"></u-picker> -->
<!-- 线路 -->
<!-- <u-picker mode="selector" v-model="lineRoadFlag" :range="lineRoadSelector" :default-selector="[0]"></u-picker> -->
<!-- 设备别名 -->
<!-- <u-popup v-model="deviceNameFlag" mode="center" :closeable="true">
<view class="popup-setup">
<view class="popup-setup-title">修改设备别名</view>
<u-input v-model="deviceNameValue" type="text" :border="true" />
<view class="popup-setup-btn">
<u-button type="error" size="medium" @click="deviceNameFlag = false">取消</u-button>
<u-button type="success" size="medium">保存</u-button>
</view>
</view>
</u-popup> -->
<!-- 重命名 -->
<u-popup v-model="topEditFlag" mode="center" :closeable="true">
<view class="popup-setup">
<view class="popup-setup-title">{{currentTopPickRow==="lineRoad"?"线路别名":"重命名"}}</view>
<u-input type="text" :border="true" v-model="topEditDataInputValue"/>
<view class="popup-setup-btn">
<u-button type="error" size="medium" @click="topEditFlag = false;topEditDataInputValue = '';">取消</u-button>
<u-button type="success" size="medium" @click="onSaveTopEditFn">保存</u-button>
</view>
</view>
</u-popup>
<!-- 修改弹出框 -->
<u-popup v-model="editDataFlag" mode="center" :closeable="true">
<view class="popup-setup">
<view class="popup-setup-title">{{bottomCurrentPickObj.paramName}}</view>
<u-input type="text" :border="true" v-model="bottomEditDataInputValue" />
<view class="popup-setup-btn">
<u-button type="error" size="medium" @click="editDataFlag = false;bottomEditDataInputValue='';">取消</u-button>
<u-button type="success" size="medium" @click="bottomSaveEditFn">保存</u-button>
</view>
</view>
</u-popup>
<u-toast ref="uToast" />
</view>
</template>
<script>
import parameterField from "@/pages/home/wisdomElectricity/realTime/parameterField.js"
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default{
data(){
return {
tabCurrent: 0,
deviceKey:'',
groupList:[],
list:[],
topEditFlag:false,
editDataFlag:false,
bottomEditDataInputValue:"", // 底部参数修改的值
bottomCurrentPickObj:null, // 当前选择的底部参数
deviceNameValue:"",
parameterField:parameterField,
deviceTopData:{
},
deviceDataObj:null,
deviceDataInfo:null,
deviceBottomData:null,
currentBottomPickData:null,
currentTopPickRow:"",
topEditDataInputValue:"",
alarmLoading:false
}
},
mixins:[MescrollMixin],
onLoad(e) {
console.log(e,"eesss");
this.deviceId = e.deviceId;
this.deviceKey = e.deviceKey;
this.getDeviceInfoDataFn();
this.getAlarmList();
},
methods:{
goAlarmConfig(){
uni.navigateTo({
url:'./alarmConfig?deviceKey=' + this.deviceDataInfo.deviceKey
})
},
getDeviceInfoDataFn(){
// this.$get("/app/device/info",{deviceId:this.deviceId}).then((res)=>{
this.$get("/app/device/" + this.deviceId).then((res)=>{
if(res.code !=200) return;
this.deviceDataInfo = res.data;
if(this.deviceDataInfo.paramList){
if(res.data.deviceType == 'MINIATURE_BREAKER'){
this.deviceBottomData = this.deviceDataInfo.paramList.filter((item) => {
return item.paramKey != 'leakage_current' && item.paramKey != 'temperature';
})
}else{
this.deviceBottomData = this.deviceDataInfo.paramList;
}
}
this.deviceTopData = {
deviceName:this.deviceDataInfo.parentName,
lineRoad:this.deviceDataInfo.deviceName,
// rename:this.deviceDataInfo.deviceName
};
})
},
bottomSaveEditFn(){
this.$put("/app/device/edit-param",{
paramId: this.bottomCurrentPickObj.paramId,
paramVal: this.bottomEditDataInputValue
}).then((res)=>{
if(res.code === 200){
this.$tui.toast(res.msg,3000);
this.getDeviceInfoDataFn();
}
}).finally(()=>{
this.editDataFlag = false;
this.bottomEditDataInputValue='';
})
},
onClickBottomRowFn(item){
console.log(item,"item");
this.editDataFlag = true;
this.bottomCurrentPickObj = item;
},
onClickRowFn(key,value){
console.log(key,"ee",value);
if(key == "deviceName") return;
this.currentTopPickRow = key;
this.topEditDataInputValue=value;
this.topEditFlag = true;
},
onSaveTopEditFn(){
this.$put("/app/device/edit-image",{
deviceId: this.deviceDataInfo.deviceId,
deviceName: this.topEditDataInputValue
}).then((res)=>{
if(res.code === 200){
this.$tui.toast(res.msg,3000);
this.getDeviceInfoDataFn();
}
}).finally(()=>{
this.topEditFlag = false;
this.topEditDataInputValue='';
})
},
handleOpenChange(item, index) {
setTimeout(() => {
this.$refs.collapseRef.childrens[index].init();
}, 20);
},
tabChange(e){
console.log("tab",e)
this.tabCurrent = e;
this.list = this.groupList[e].list || [];
setTimeout(() => {
this.$refs.collapseRef.init();
}, 20);
},
getSelectList(data){
console.log("data",data);
let list = [];
list = data.options.map(item=>{
return {
text: item.label,
value: item.value
}
})
return list;
},
//切换状态
toggleState(i){
this.$nextTick(()=>{
this.list[i].disabled = !this.list[i].disabled;
})
},
sendAttr(data,i){
console.log("下发值为",data)
uni.showModal({
title: '提示',
content:'确认要下发配置吗？',
confirmText:'确认',
cancelText:'取消',
success: (res) => {
if (res.confirm) {
let confJsonObj = data.confJsonObj.map(item=>{
if(item.key.endsWith('_state')){
return {
...item,
value:item.value?1:0
}
}else{
return item;
}
})
let parmas = {
...data,
confJsonObj
}
this.$put("/iot/func",parmas).then((res)=>{
console.log("res",res)
if(res.code == 200){
this.$refs.uToast.show({
title: res.msg,
type: 'success',
})
this.list[i].disabled = !this.list[i].disabled;
}else{
this.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}
}).catch((err)=>{
console.log("err",err)
this.$refs.uToast.show({
title: err.msg,
type: 'error',
})
})
}else if (res.cancel) {
}
}
});
},
getAlarmList() {
this.alarmLoading = true;
this.$get("/iot/func/" + this.deviceKey,{}).then((res)=>{
console.log("res",res)
let groupList = [];
if(res?.data.length>0){
res.data.forEach((item,index)=>{
let flag = true;
groupList.forEach((val,i)=>{
if(val.funcType === item.funcType){
groupList[i].list.push({
...item,
disabled: true,
});
flag = false;
}
})
if(flag && item.funcType!= 'c'){
groupList.push({
funcType: item.funcType,
name: item.funcTypeName,
list: [{
...item,
disabled: true,
}]
})
}
});
this.groupList = groupList;
this.list = groupList[this.tabCurrent].list;
this.$nextTick(()=>{
this.$refs.collapseRef.init();
})
}else{
this.groupList = [];
this.list = [];
}
this.alarmLoading = false;
}).catch((err)=>{
console.log("err",err)
this.alarmLoading = false;
})
},
//判断告警数据类型
getAttrType(obj){
if(obj.key.endsWith('_state')){
return 'switch';
}else if(obj.key.endsWith('_select')){
return 'select';
}else{
return 'input';
}
},
}
}
</script>
<style lang="scss" scoped>
.parameterSetup{
width: 100%;
padding-bottom: 150rpx;
&-content{
padding: $paddingTB $paddingLR;
}
&-row{
display: flex;
justify-content: space-between;
padding: 20rpx 16rpx;
border-bottom: 1px solid #ddd;
&-value{
font-weight: bold;
}
}
.popup-setup{
width: 600rpx;
padding: 50rpx 30rpx;
&-title{
font-weight: bold;
font-size: 28rpx;
padding-bottom: 20rpx;
}
&-btn{
display: flex;
padding-top: 30rpx;
justify-content: space-around;
}
&-voltageLimit{
&-up,&-down{
display: flex;
align-items: center;
justify-content: center;
}
}
}
.title-box{
padding: 16rpx 20rpx;
font-weight: bold;
font-size: 32rpx;
position: relative;
// margin: 6rpx 0;
&:before{
content: '';
width: 6rpx;
height: 50rpx;
position: absolute;
top: 12rpx;
left: 8rpx;
background: #0066cc;
border-radius: 2rpx;
}
}
}
.alarm-loading-box{
display: flex;
justify-content: center;
align-items: center;
padding: 10rpx 0;
>text{
margin-left: 10rpx;
font-size: 30rpx;
}
}
::v-deep .u-collapse-head{
border-bottom: 1px solid #f5f5f5;
}
::v-deep .u-collapse-body{
// height: auto !important;
padding: 0 20rpx;
}
.btn-list{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 140rpx;
padding: 20rpx 20rpx;
background: #fff;
z-index: 99;
border-top: 1px solid #f5f5f5;
.btn-box{
background: #0066cc;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 36rpx;
height: 100rpx;
border-radius: 50rpx;
}
}
</style>

390
pages/home/wisdomElectricity/switchWarn.vue
View File

@ -1,390 +0,0 @@
<style lang="scss" scoped>
.switchWarn{
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;
right: 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: 12rpx;
height: 180rpx;
background: #93CDFC;
position: absolute;
left: 40rpx;
top: 20rpx;
z-index: 1;
}
&-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;
}
}
&-bottom{
display: flex;
justify-content: space-between;
padding: 20rpx;
}
}
.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;
&-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="switchWarn">
<view class="switchWarn-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="switchWarn-info-list" :class="{'scrollbtm': checkboxShowFlag}">
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
<checkbox-group @change="checkboxChange">
<view class="switchWarn-info-box" v-for="(item,index) in lineRoadList" :key="index">
<view class="switchWarn-info-box-msg">
<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></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-left-line"></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="switchWarn-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">项目：{{item.projectName}}</text>
</view>
<view class="switchWarn-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">地点：{{item.projectAddress}}</text>
</view>
<view class="switchWarn-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">线路：{{item.deviceName}}</text>
</view>
</view>
<view class="switchWarn-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-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">联系电话：15860886888</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>
<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>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
alarmShowFlag:false,
checkboxShowFlag:false,
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: {
/*上拉加载的回调*/
upCallback(page) {
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
let obj = {
pageSize:pageSize,
pageNum:pageNum,
deviceId:this.deviceId,
beginTime:this.beginDate,
endTime:this.endDate,
typeCodes:"A001,A003,A002,A004,A005,A006,A007,A008,A009,E000,E001,E002,E003,E004,E005",
}
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;
}
},
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>

19
pages/home/wisdomElectricity/timerSetting/edit.vue
View File

@ -1,19 +0,0 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
</style>

64
pages/home/wisdomElectricity/timerSetting/index.vue
View File

@ -1,64 +0,0 @@
<template>
<view class="timer-box">
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
deviceId:"1345220615100102"
};
},
mixins:[MescrollMixin],
onLoad() {
console.log("deviceId=6fd75a4262ca4d26a5ff7db064c0f460")
},
methods:{
/*上拉加载的回调*/
upCallback(page) {
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
let obj = {
pageSize:pageSize,
pageNum:pageNum,
// deviceId:this.deviceId,
// beginTime:this.beginDate,
// endTime:this.endDate
}
this.$get("/iot/timer/"+this.deviceId,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();
})
},
}
}
</script>
<style lang="scss" scoped>
</style>

165
pages/home/wisdomElectricity/wbjl/addRecord.vue
View File

@ -1,165 +0,0 @@
<style lang='scss' scoped>
.addRecord{
width: 100%;
padding: $paddingTB $paddingLR;
:not(not) {
box-sizing: border-box;
}
}
</style>
<template>
<view class="addRecord">
<u-form :model="form" label-width="150">
<!-- <u-form-item label="所属项目" prop="name">
<u-input v-model="form.projectName" />
</u-form-item> -->
<u-form-item label="设备号" prop="intro">
<u-input v-model="form.deviceId" />
</u-form-item>
<u-form-item label="设备名称" prop="intro">
<u-input v-model="form.deviceName" />
</u-form-item>
<u-form-item label="维保时间" prop="intro" :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="calendar">
<u-input :disabled="true" v-model="form.createTime" @click="openTimePickerFn" right-icon="" />
<u-picker mode="time" :params="params" v-model="timePickerShow" @confirm="timeOnConfirmFn"></u-picker>
</u-form-item>
<u-form-item label="维保内容" prop="intro">
<u-input v-model="form.maintenanceContext" type="textarea" :auto-height="true"/>
</u-form-item>
<u-form-item label="处理人" prop="handlerId">
<u-input :disabled="true" v-model="form.handlerName" @click="show" />
<u-picker v-model="showHandler" mode="selector" :range="handlerList" range-key="nickName" @confirm="setHandler"></u-picker>
</u-form-item>
<!-- <u-form-item label="故障内容" prop="intro">
<u-input v-model="form.faultType" type="textarea" :auto-height="true"/>
</u-form-item>
<u-form-item label="处理结果" prop="intro">
<u-input v-model="form.dealResult" type="textarea" :auto-height="true"/>
</u-form-item>
<u-form-item label="意见建议" prop="intro">
<u-input v-model="form.advice" type="textarea" :auto-height="true"/>
</u-form-item> -->
<u-form-item label="现场图片" prop="photo">
<!-- <u-upload width="160"></u-upload> -->
<u-upload
width="160"
ref="uUpload"
max-count="1"
:action="action"
:header="uploadHeader"
:size-type="['compressed']"
:max-size="1024*1024"
@on-success="onUploadSuccessFn"
></u-upload>
</u-form-item>
<!-- <u-form-item label="维保后图片" prop="photo">
<u-upload width="160"></u-upload>
</u-form-item> -->
<u-button type="primary" @click="add">提交</u-button>
</u-form>
</view>
</template>
<script>
export default {
data() {
return {
params:{
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: true, // 1.3.7版本提供
},
timePickerShow:false,
form:{
projectName:"", // 所属项目
deviceId:"", // 设备号
deviceName: "",
createTime:"", // 维保时间
maintenanceContext:"", // 维保内容
faultType:"", // 故障内容
dealResult:"", // 处理结果
advice:"", // 意见建议
scenePictures:"", // 维保前图片 现场图片
// maintenanceAfterImg:"" // 维保后图片
},
action: '', // 文件上传地址
uploadHeader: {},
editImgDataStr:"",
uploadCode: -1,
handlerList: [],
showHandler: false,
}
},
onLoad(e) {
this.action = this.$config.baseUrl + "/common/upload";
const userToken = uni.getStorageSync('userToken');
this.uploadHeader = {
"Authorization" :userToken,
"Content-Type":"multipart/form-data"
}
this.form.createTime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss');
console.log(e,"eeeeeeeeeeeee");
let deviceInfo = JSON.parse(e.deviceInfo);
Object.assign(this.form, deviceInfo);
this.getHandlerList()
},
methods: {
timeOnConfirmFn(e){
console.log(e,"e")
this.form.createTime = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM:ss')
},
openTimePickerFn(){
this.timePickerShow = true;
},
add() {
let userType = uni.getStorageSync("userType");
let url = "/app/maintenance";
this.$post(url, this.form).then((res) => {
if (res.code === 200) {
this.$u.toast('添加成功', 3000);
setTimeout(() => {
uni.navigateBack();
}, 500);
}
}).catch((err) => {
console.log(err)
})
},
onUploadSuccessFn(data, index, lists, name){
console.log(lists,"成功");
this.uploadCode = lists[0].response.code;
this.form.scenePictures = lists[0].response.fileName;
},
show() {
this.showHandler = true;
},
setHandler(e) {
let index = e[0];
let obj = this.handlerList[index];
this.form.handlerId = obj.userId;
this.form.handlerName = obj.nickName;
},
getHandlerList() {
this.$get('/app/maintenance/maintenance-user').then((res) => {
if (res.code === 200) {
this.handlerList = [];
for (let item of res.data) {
let { userId, nickName } = item;
this.handlerList.push({
userId,
nickName
})
}
}
}).catch((err) => {
console.log(err)
})
}
}
}
</script>

153
pages/home/wisdomElectricity/wbjl/maintenanceDetail.vue
View File

@ -1,153 +0,0 @@
<style lang='scss' scoped>
.addRecord{
width: 100%;
padding: $paddingTB $paddingLR;
:not(not) {
box-sizing: border-box;
}
}
</style>
<template>
<view class="addRecord">
<u-form :model="form" label-width="150">
<!-- <u-form-item label="所属项目" prop="name">
<u-input v-model="form.projectName" :disabled="true" />
</u-form-item> -->
<u-form-item label="设备号" prop="intro">
<u-input v-model="form.deviceKey" :disabled="true" />
</u-form-item>
<u-form-item label="维保时间" prop="intro" :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="calendar">
<u-input :disabled="true" v-model="form.createTime" right-icon="" />
<!-- <u-picker mode="time" :params="params" v-model="timePickerShow" @confirm="timeOnConfirmFn"></u-picker> -->
</u-form-item>
<u-form-item label="维保内容" prop="intro">
<u-input v-model="form.maintenanceContext" :disabled="true" type="textarea" :auto-height="true"/>
</u-form-item>
<!-- <u-form-item label="故障内容" prop="intro">
<u-input v-model="form.faultContent" :disabled="true" type="textarea" :auto-height="true"/>
</u-form-item> -->
<u-form-item label="处理结果" prop="intro">
<u-input v-model="form.auditResult" :disabled="true" type="textarea" :auto-height="true"/>
</u-form-item>
<u-form-item label="意见建议" prop="intro">
<u-input v-model="form.auditOpinion" :disabled="true" type="textarea" :auto-height="true"/>
</u-form-item>
<u-form-item label="维保前图片" prop="photo">
<!-- <u-upload width="160"></u-upload> -->
<u-image
width="100"
height="100"
:src="(form.maintenanceBeforeImg && form.maintenanceBeforeImg !== '') ?
$tools.getIotFileUrl(form.maintenanceBeforeImg) :
'h ttp://static.drgyen.com/app/hc-app-power/images/car.png'"
></u-image>
</u-form-item>
<u-form-item label="维保后图片" prop="photo">
<!-- <u-upload width="160"></u-upload> -->
<u-image width="100" height="100" src="http://static.drgyen.com/app/hc-app-power/images/car.png"></u-image>
</u-form-item>
<!-- <u-button type="primary">提交</u-button> -->
</u-form>
</view>
</template>
<script>
export default {
data() {
return {
params:{
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: true, // 1.3.7版本提供
},
timePickerShow:false,
form:{
projectName:"", // 所属项目
deviceId:"", // 设备号
createTime:"", // 维保时间
maintenanceContext:"", // 维保内容
// faultContent:"", // 故障内容
auditResult:"", // 处理结果
auditOpinion:"", // 意见建议
maintenanceBeforeImg:"", // 维保前图片
maintenanceAfterImg:"" // 维保后图片
}
}
},
onLoad(e) {
// this.form = {
// projectName:"项目1", // 所属项目
// deviceNumber:"dev123", // 设备号
// maintenanceTime:"2021年1月7日09:54:16", // 维保时间
// maintenanceContent:"维保内容", // 维保内容
// faultContent:"故障内容", // 故障内容
// dealResult:"处理结果", // 处理结果
// suggestion:"意见建议", // 意见建议
// maintenanceBeforeImg:"", // 维保前图片
// maintenanceAfterImg:"" // 维保后图片
// }
// this.form.maintenanceTime = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
// console.log(e,"eeeeeeeeeeeee");
let id = decodeURIComponent(e.id);
this.loadDetail(id);
},
methods: {
loadDetail(id) {
let userType = uni.getStorageSync("userType");
// let url = userType === "企业用户" ? "/app/maintenance/info?maintenanceId=" : "/iot/maintenance";
let url = "/app/maintenance/" + id;
this.$get(url)
.then(res => {
console.log(res, 'loadDetail');
let data = res.data;
let preImg = data.scenePictures.split(',')[0];
let nextImg = data.scenePictures.split(',')[1];
if(res.code == 200) {
this.form = {
projectName: data.projectName, // 所属项目
deviceId: data.deviceId, // 设备号
deviceKey: data.deviceKey, // 设备号
createTime: data.createTime, // 维保时间
maintenanceContext: data.maintenanceContext, // 维保内容
// faultContent:"", // 故障内容
// auditResult: userType === "企业用户" ? data?.auditNodes[0].auditResult : data?.maintenanceNodeList[0].auditResult, // 处理结果
// auditOpinion: userType === "企业用户" ? data?.auditNodes[0].auditOpinion : data?.maintenanceNodeList[0].auditOpinion, // 意见建议
auditResult: (data.maintenanceNodeList && data.maintenanceNodeList.length > 0) ? data.maintenanceNodeList[0].auditResult : '', // 处理结果
auditOpinion: (data.maintenanceNodeList && data.maintenanceNodeList.length > 0) ? data.maintenanceNodeList[0].auditOpinion : '', // 意见建议
maintenanceBeforeImg: preImg, // 维保前图片
maintenanceAfterImg: nextImg // 维保后图片
};
}
})
},
dealResultFn(val) {
if(val == '0'){
return '上报人创建工单';
} else if (val == '1') {
return '驳回上报人工单';
} else if (val == '2') {
return '处理人确认工单';
} else if (val == '3') {
return '处理人完成工单';
} else if (val == '4') {
return '驳回处理人工单';
} else if (val == '5') {
return '领导审批通过流程结束';
} else {
return '处理结果异常';
}
}
// timeOnConfirmFn(e){
// console.log(e,"e")
// this.form.maintenanceTime = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM:ss')
// },
// openTimePickerFn(){
// this.timePickerShow = true;
// }
}
}
</script>

276
pages/home/wisdomElectricity/wbjl/maintenanceRecord.vue
View File

@ -1,276 +0,0 @@
<style lang="scss" scoped>
.maintenanceRecord{
width: 100%;
:not(not) {
box-sizing: border-box;
}
.maintenanceRecord-header{
display: flex;
background: #fff;
border-bottom: 1px solid #dcdcdc;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 750rpx;
height: 88rpx;
&-picker{
display: flex;
justify-content: center;
align-items: center;
border-left: 1px solid #dcdcdc;
}
/deep/ .u-dropdown__content{
overflow: visible;
}
}
.maintenanceRecord-record-list{
padding: $paddingTB $paddingLR;
}
.maintenanceRecord-record-box{
border-radius: $uni-border-radius-lg;
background-color: #fff;
box-shadow: $box-shadow;
padding: 30rpx;
.header{
display: flex;
justify-content: space-between;
align-items: center;
&-name{
display: flex;
align-items: center;
}
&-name-icon{
padding: 10rpx;
background-color: $main-color;
border-radius: $uni-border-radius-circle;
}
&-name-text{
font-size: 40rpx;
color: $main-color;
padding-left: 30rpx;
}
}
}
.bottom-btn{
background: #fff;
position: fixed;
bottom: 0;
left: 0;
padding: $paddingTB $paddingLR;
width: 100%;
height: 132rpx;
box-sizing: border-box;
}
.dropdown-bl {
border-left: 1px solid #dcdcdc;
}
.orange-color {
color: orange;
}
.blue-color {
color: #0099ff;
}
}
</style>
<template>
<view class="maintenanceRecord">
<mescroll-body top="88" ref="mescrollRef" bottom="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
<view class="maintenanceRecord-header">
<u-dropdown class="flex1">
<u-dropdown-item v-model="value1" :title="value1==1?'日':'月'" :options="options1"></u-dropdown-item>
</u-dropdown>
<picker class="maintenanceRecord-header-picker flex1" mode="date" :value="dateVal" :fields="value1==1?'day':'month'" @change="bindDateChange">
<!-- <view class="maintenanceRecord-header-picker-text"> -->
<text class="pr10">{{dateVal}}</text>
<u-icon name="arrow-down" color="#c0c4cc"></u-icon>
<!-- </view> -->
</picker>
<u-dropdown class="flex1 dropdown-bl">
<u-dropdown-item v-model="status" :title="statusName" :options="statusList" @change="changeStatus"></u-dropdown-item>
</u-dropdown>
</view>
<view class="maintenanceRecord-record-list">
<view class="maintenanceRecord-record-box mt20" v-for="(item,index) in maintenanceList" :key="index" @click="goDetailFn(item)">
<view class="header pb20">
<view class="header-name">
<tuiIcon class="header-name-icon" color="#fff" name="wode1" size="42"></tuiIcon>
<text class="header-name-text">{{item.handlerName || '' }}</text>
</view>
<view class="header-phonenumber">{{item.phoneNumber || '' }}</view>
</view>
<view class="pb10">
<text class="text--base--grey">维保日期：</text>
<text>{{item.createTime || ''}}</text>
</view>
<view class="pb10">
<text class="text--base--grey">维保内容：</text>
<text>{{item.maintenanceContext || ''}}</text>
</view>
<view class="pb10">
<text class="text--base--grey">维保状态：</text>
<text
:class="{
'blue-color': item.maintenanceStatus=='0',
'orange-color': (item.maintenanceStatus!='5' && item.maintenanceStatus!='0')
}"
>{{item.maintenanceStatus | hanlderStatus}}</text>
</view>
</view>
</view>
<!-- <view class="bottom-btn">
<u-button type="primary" @click="goAddRecordFn">添加维保信息</u-button>
</view> -->
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
dateVal:"",
value1: 2,
options1: [{
label: '日',
value: 1,
},
{
label: '月',
value: 2,
}
],
maintenanceList:[],
deviceInfo: {},
status: '',
statusName: '维保状态',
statusList: [
{
value: '',
label: '全部',
},
{
value: '-1',
label: '已生成',
},
{
value: '0',
label: '已创建',
},
{
value: '1,2,3,4',
label: '处理中',
},
{
value: '5',
label: '处理完成',
},
]
};
},
mixins:[MescrollMixin],
onLoad(param) {
console.log(param)
this.deviceInfo = param
this.dateVal = this.$u.timeFormat(new Date().getTime(), this.value1==1?'yyyy-mm-dd':'yyyy-mm')
},
onShow() {
this.mescroll.resetUpScroll()
},
methods:{
goDetailFn(item){
let id = encodeURIComponent(item.maintenanceId);
uni.navigateTo({
url:`./maintenanceDetail?id=${id}`
})
},
/*上拉加载的回调*/
upCallback(page) {
console.log(page,"page");
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
let obj = {
pageSize: pageSize,
pageNum: pageNum,
createDate: this.dateVal,
maintenanceStatus: this.status,
// projectId:this.projectIdVal,
// deviceState:this.screeningValue,
// deviceName:this.searchValue
}
let userType = uni.getStorageSync("userType");
let url = userType === "企业用户" ? "/app/maintenance/table" : "/iot/maintenance/list"; ;
this.$get(url, 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.maintenanceList = []; //如果是第一页需手动置空列表
this.maintenanceList = this.maintenanceList.concat(curPageData); //追加新数据
this.mescroll.endBySize(curPageLen, res.total); // 推荐
// this.mescroll.endByPage(curPageLen, res.data.total)
// this.mescroll.endSuccess(curPageData.length);
} else{
this.maintenanceList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
// this.mescroll.endUpScroll(true);
}
}).catch(()=>{
//联网失败, 结束加载
this.mescroll.endErr();
this.mescroll.showEmpty();
})
},
goAddRecordFn(){
let str = JSON.stringify(this.deviceInfo)
uni.navigateTo({
url: `./addRecord?deviceInfo=${str}`
})
},
bindDateChange(e){
console.log(e,"e");
this.dateVal = e.detail.value;
this.mescroll.resetUpScroll()
},
changeStatus(val) {
let res = this.statusList.find(item => item.value === val);
if (res) {
this.statusName = res.label;
} else {
this.statusName = '全部';
}
this.mescroll.resetUpScroll()
},
},
filters: {
hanlderStatus(val) {
if(val == '-1'){
return '已生成';
}else if(val == '0'){
return '已创建';
}
// else if (val == '1') {
// return '驳回上报人工单';
// } else if (val == '2') {
// return '处理人确认工单';
// } else if (val == '3') {
// return '处理人完成工单';
// } else if (val == '4') {
// return '驳回处理人工单';
// }
else if (val == '5') {
return '流程结束';
} else {
return '处理中';
}
}
}
}
</script>

78
pages/index/enter.vue
View File

@ -1,78 +0,0 @@
<style lang='scss' scoped>
.enter-ctn{
position: absolute;
left: 0;
top: 0;
/* bottom: 0;
right: 0; */
width: 100%;
height: 100%;
}
</style>
<template>
<view class="enter-ctn">
<!-- <u-image mode="scaleToFill" width="100%" height="100%" src="@/static/images/registerGuide-bg.jpg"></u-image>-->
</view>
</template>
<script>
export default {
data() {
return {}
},
onLoad(option) {
console.log("当前获取参数",option)
this.isHaveTokenFn()
},
methods: {
isHaveTokenFn:async function(){
let userToken = await uni.getStorageSync('userToken');
let userType = await uni.getStorageSync('userType');
console.log(userType,"userType");
if (!!userToken) {
// if(userType=="普通用户"){
// uni.reLaunch({
// url:"../oneselfUser/index"
// })
// } else{
uni.switchTab({
url:"../tabBar/home"
})
// }
}else{
// if(userType=="普通用户"){
// uni.reLaunch({
// url:"../oneselfUser/index"
// })
// } else
if(userType=="企业用户"){
uni.switchTab({
url:"../tabBar/home"
})
}else{
// uni.reLaunch({
// url:"../auth/registerGuide"
// })
uni.navigateTo({
url:"../auth/login?userType=company"
})
}
// uni.reLaunch({
// url:"./guidePage"
// })
// // #ifdef MP-WEIXIN
// uni.reLaunch({
// url:"../auth/userLogin"
// })
// // #endif
// // #ifndef MP-WEIXIN
// uni.reLaunch({
// url:"../auth/login"
// })
// // #endif
}
},
}
}
</script>

69
pages/index/guidePage.vue
View File

@ -1,69 +0,0 @@
<style lang="scss">
.guidePage{
// text-align: center;
width: 100%;
height: 100%;
&-info{
color: #fff;
text-align: center;
padding-top: 720rpx;
}
&-title{
font-size: 64rpx;
font-family: Source Han Sans CN;
font-weight: 800;
letter-spacing: 20rpx;
padding-bottom: 30rpx;
}
}
.guidePage-button{
padding: 0 100rpx;
margin-top: 30rpx;
}
.guidePage-img-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<template>
<view class="guidePage">
<!-- <image class="guidePage-img-bg" src="../../static/images/enter.png" mode=""></image>-->
<view class="guidePage-info">
<view class="guidePage-title">德润物联</view>
<view class="guidePage-name">综合能源管理</view>
</view>
<view class="guidePage-button">
<u-button type="default" @click="goLoginFn" shape="circle">去登录</u-button>
<!-- <u-button type="default" @click="goLoginFn('user')" shape="circle">普通登录</u-button> -->
<!-- <view class="pt30"></view> -->
<!-- <u-button type="success" @click="goLoginFn('company')" shape="circle">企业登录</u-button> -->
</view>
</view>
</template>
<script>
export default{
data(){
return {
}
},
onReady() {
},
methods:{
goLoginFn(userType){
uni.navigateTo({
// url:`../auth/login?userType=${userType}`
url:`../auth/login`
})
}
}
}
</script>

11
pages/my/helpCenter.vue
View File

@ -1,11 +0,0 @@
<template>
<view class="helpCenter-box">
<web-view src="http://192.168.1.100:4999/web/#/603182988/129112196"></web-view>
</view>
</template>
<script>
</script>
<style>
</style>

445
pages/oneselfUser/alarm.vue
View File

@ -1,445 +0,0 @@
<style lang="scss" scoped>
.realTime{
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;
padding: 0 $paddingLR;
&-screening{
width: 140rpx;
text-align: center;
}
&-input{
width: calc(100% - 140rpx);
}
.slot-content{
background-color: #FFFFFF;padding: 0 30rpx 20rpx;
&-btn{margin-top: 20rpx;}
}
}
&-info-list{
background-color: #F9F9F9;
padding: $paddingTB $paddingLR;
}
&-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;
right: -16rpx;
top: 14rpx;
}
.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;
}
}
&-bottom{
display: flex;
justify-content: space-between;
padding: 20rpx;
}
}
&-info-box-msg-row-ctn{
position: relative;
}
&-info-box-msg-content{
display: flex;
.realTime-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-around;
.bottom-btn{
width: 50%;
}
}
.alarmInfo-content{
padding: 70rpx $paddingLR;
padding-bottom: 40rpx;
&-row{
padding-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-bottom-btn{
padding: 0 30rpx;
padding-top: 20rpx;
}
}
}
</style>
<template>
<view class="realTime">
<view class="realTime-header" :style="{height:isShowDropdown?'100%':''}">
<u-dropdown ref="uDropdown" @open="isShowDropdown = true" @close="isShowDropdown = false" >
<u-dropdown-item title="筛选" v-model="value1">
<view class="slot-content">
<u-cell-group>
<u-cell-item :arrow="false" title="包含预警">
<u-switch v-model="switchYj"></u-switch>
</u-cell-item>
<u-cell-item :arrow="false" title="只显示未处理">
<u-switch v-model="switchWcl"></u-switch>
</u-cell-item>
</u-cell-group>
<view class="slot-content-btn">
<u-button type="primary" @click="filterCommit">确定</u-button>
</view>
</view>
</u-dropdown-item>
<!-- <u-dropdown-item title="状态" v-model="value2" :options="options2"> -->
<!-- <view class="slot-content">
<u-cell-group>
<u-cell-item :arrow="false" title="夕阳无限好">
<u-switch v-model="yj"></u-switch>
</u-cell-item>
<u-cell-item :arrow="false" title="只显示离线报警"></u-cell-item>
</u-cell-group>
</view> -->
<!-- </u-dropdown-item> -->
</u-dropdown>
<u-search :show-action="false" class="realTime-header-input" height="60" placeholder="请输入设备名称" v-model="searchVal" @search="searchFn" @change="changeFn"></u-search>
<!-- <u-input class="realTime-header-input" :border="true" /> -->
</view>
<!-- <u-popup v-model="showFlag" mode="top">
<view>出淤泥而不染，濯清涟而不妖</view>
</u-popup> -->
<view class="realTime-info-list">
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback" >
<view class="realTime-info-box" v-for="(item,index) in lineRoadList" :key="index">
<view class="realTime-info-box-msg">
<!-- <u-checkbox class="box-checkbox" v-if="checkboxShowFlag" v-model="item.checkedFlag"></u-checkbox> -->
<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="realTime-info-box-msg-content">
<view class="realTime-info-box-msg-warning">{{item.alarmDivide | alarmType}}</view>
<view class="realTime-info-box-msg-row-ctn">
<view class="box-left-line"></view>
<view class="realTime-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">项目：{{item.projectName}}</text>
</view>
<view class="realTime-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">地点：{{item.projectAddress}}</text>
</view>
<view class="realTime-info-box-msg-row">
<view class="msg-row-icon">
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
</view>
<text class="msg-row-text pl20">线路：{{item.deviceName}}</text>
</view>
</view>
</view>
</view>
<view class="realTime-info-box-bottom">
<text>时间：{{item.alarmTime}}</text>
<text>报警类型：{{item.typeName}}</text>
</view>
</view>
</mescroll-body>
</view>
<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" @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 {
alarmShowFlag:false,
checkboxShowFlag:false,
value1:"",
value2:1,
options2:[{
label:"全部",
value:1,
},{
label:"已处理",
value:2,
},{
label:"未处理",
value:3,
}],
switchYj:false,
switchWcl: false,
isShowDropdown:false,
showFlag:false,
searchVal:"",
params:{
year: true,
month: true,
day: true,
timestamp: true, // 1.3.7版本提供
},
beginDatePickerShow:false,
endDatePickerShow:false,
beginDate:"",
endDate:"",
lineRoadList:[],
currentPickInfoData: {},
where: {
alarmDivide: 'ALARM'
}
}
},
mixins:[MescrollMixin],
created() {
this.beginDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
this.endDate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
},
methods: {
upCallback(page) {
const _this = this;
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
this.where['pageNum'] = pageNum;
this.where['pageSize'] = pageSize;
this.$get('/iot/record/list', this.where).then(res => {
if(res.code === 200){
console.log('报警信息列表res: ', res)
if(res.rows && res.rows.length > 0){
let curPageData = res.rows;
let curPageLen = curPageData.length;
let totalSize = res.total;
_this.$nextTick(()=>{
// 隐藏下拉刷新和上拉加载的状态;
_this.mescroll.endBySize(curPageLen, totalSize);
})
if(pageNum == 1) this.lineRoadList = []; //如果是第一页需手动置空列表
_this.lineRoadList = this.lineRoadList.concat(curPageData); //追加新数据
_this.mescroll.endBySize(curPageLen, totalSize); // 推荐
} else {
_this.lineRoadList = [];
_this.mescroll.endErr();
_this.mescroll.showEmpty();
}
}
})
},
switchYjFn(flag) {
if(flag){
this.switchBj = false;
}
},
switchBjFn(flag) {
if(flag){
this.switchYj = false;
}
},
filterCommit() {
if(this.switchYj && !this.switchWcl) { //包含预警
this.where = {};
} else if (!this.switchYj && this.switchWcl) { //只显示未处理
this.where = {
alarmDivide: 'ALARM',
processStatus: 'UNPROCESS'
};
} else if (this.switchYj && this.switchWcl) {
this.where = {
processStatus: 'UNPROCESS'
};
} else {
this.where = {
alarmDivide: 'ALARM'
}
}
this.mescroll.resetUpScroll();
this.$refs.uDropdown.close();
},
searchFn(value) {
this.where = {
deviceName: value
}
this.mescroll.resetUpScroll();
},
changeFn(value) {
if(value == '') {
this.where = {
alarmDivide: 'ALARM'
}
this.mescroll.resetUpScroll();
}
},
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(item.processStatus == 'UNPROCESS'){
this.alarmShowFlag = true;
this.currentPickInfoData = item;
}
},
headerBtnHandleFn(){
if (this.checkboxShowFlag) {
let falseChecked = this.lineRoadList.filter((o)=>{
return o.checkedFlag == false;
})
console.log(falseChecked,"falseChecked");
if(falseChecked.length === 0){
this.lineRoadList.forEach((item)=>{
item.checkedFlag = false;
})
} else{
this.lineRoadList.forEach((item)=>{
item.checkedFlag = true;
})
}
} else{
this.checkboxShowFlag = true
}
},
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')
},
endDateConfirmFn(e){
console.log(e,"e")
this.endDate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
},
projectHandleNowFn(data) {
this.$post('/app/alarm/batch-update', {recordIds: [data.recordId]}).then(res => {
if(res.code == 200) {
this.$tui.toast('处理成功', 3000, true);
this.updateState(data.recordId);
this.alarmShowFlag = false;
}
})
},
updateState(id) {
this.lineRoadList.forEach(item => {
if(item.recordId == id) {
item.processStatus = 'PROCESSED';
}
})
}
},
filters: {
alarmType(val) {
if(val == 'ALARM'){
return '报警';
} else if (val == 'WARNING') {
return '预警';
} else {
return '异常';
}
}
}
}
</script>

440
pages/oneselfUser/home.vue
View File

@ -1,440 +0,0 @@
<style lang="scss" scoped>
.home-ctn{
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;
}
}
}
.home-statistical{
border-radius: 16rpx;
width: 100%;
background-color: #fff;
margin-top: 30rpx;
box-shadow: $box-shadow;
padding: 20rpx 0rpx;
display: flex;
justify-content: center;
&-box{
width: 24%;
text-align: center;
&-title{
padding-bottom: 10rpx;
}
&-line{
height: 40rpx;
width: 2rpx;
background-color: #ddd;
margin-top: 20rpx;
}
&-value{
color: #1492FF;
font-size: 36rpx;
}
}
}
.home-new-alrm{
margin-top: 20rpx;
}
.home-progress-bar{
// margin-top: 40rpx;
width: 100%;
&-box{
display: flex;
width: 100%;
margin-top: 20rpx;
&-title{
width: 120rpx;
}
&-progress{
width: calc(100% - 120rpx) ;
}
}
}
.canvas-processed{
width: 100%;
height: 260rpx;
margin: 10rpx 0;
}
}
.pwd-style {
width: 100%;
padding: 20upx 30upx;
}
</style>
<template>
<view class="">
<headerBg></headerBg>
<view class="home-ctn">
<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> -->
<!-- #ifdef MP-WEIXIN -->
<view class="home-nav-box-icon" :style="{background:item.background,boxShadow:item.boxShadow}">
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="home-nav-box-icon" :style="{backgroundColor:item.background}">
<!-- #endif -->
<!-- <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 class="home-statistical" v-if="pageIndexData">
<view class="home-statistical-box">
<view class="home-statistical-box-title">项目总数</view>
<view class="home-statistical-box-value">{{(pageIndexData && pageIndexData.projectTotal) || "-" }}</view>
</view>
<view class="home-statistical-box-line"></view>
<view class="home-statistical-box">
<view class="home-statistical-box-title">设备总数</view>
<view class="home-statistical-box-value" style="color: #8CDEAF;">{{(pageIndexData && pageIndexData.deviceTotal + '') || "-"}}</view>
</view>
<view class="home-statistical-box-line"></view>
<view class="home-statistical-box">
<view class="home-statistical-box-title">在线设备</view>
<view class="home-statistical-box-value" style="color: #8CDEAF;">{{(pageIndexData && pageIndexData.onlineTotal + '') || "-"}}</view>
</view>
<view class="home-statistical-box-line"></view>
<view class="home-statistical-box">
<view class="home-statistical-box-title">今日报警数</view>
<view class="home-statistical-box-value" style="color: #FF7976;">{{(pageIndexData && pageIndexData.todayAlarmTotal + '') || "-"}}</view>
</view>
</view>
<view class="home-new-alrm">
<!-- <u-tag size="mini" class="mr20" style="width:140rpx;" text="最新报警" type="error" mode="plain" /> -->
<u-notice-bar mode="horizontal" type="error" :list="alrmNotice" :is-circular="playState" :play-state="playState?'play':'paused'"></u-notice-bar>
<!-- <text>A公司 福州鼓楼区洪山镇 照明于2020-11-17 8:46:55 发生异常分闸，请及时处理</text> -->
</view>
<image v-if="canvasImg" :src="canvasImg" class="canvas-processed"></image>
<canvas v-else canvas-id="dealWithChartsId" class="canvas-processed" id="canvasArcbarID"></canvas>
<view class="home-progress-bar" >
<view class="home-progress-bar-box">
<view class="home-progress-bar-box-title ">报警总数</view>
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#F88F30" :striped="true" :striped-active="true" :textValue="pageIndexData.alarmTotal || '0'" :percent="lineProgressData.alarmTotalPercent || '0'"></u-line-progress>
</view>
<view class="home-progress-bar-box">
<view class="home-progress-bar-box-title ">已修理</view>
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#2979ff" :striped="true" :striped-active="true" :textValue="pageIndexData.processed" :percent="lineProgressData.processedPercent"></u-line-progress>
</view>
<view class="home-progress-bar-box">
<view class="home-progress-bar-box-title ">未处理</view>
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#D41E00" :striped="true" :striped-active="true" :textValue="pageIndexData.unProcessed" :percent="lineProgressData.unProcessedPercent"></u-line-progress>
</view>
<view class="home-progress-bar-box" v-for="(item,index) in pageIndexData.alarmModelList" :key="index">
<view class="home-progress-bar-box-title ">{{item.modelName || "-"}}</view>
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#2979ff" :striped="true" :striped-active="true" :textValue="item.modelTotal" :percent="(item.modelTotal / (pageIndexData.unProcessed + pageIndexData.processed))*100"></u-line-progress>
</view>
<!-- <view class="home-progress-bar-box">
<view class="home-progress-bar-box-title ">电气火灾</view>
<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#2979ff" :striped="true" :striped-active="true" :percent="60"></u-line-progress>
</view>
<view class="home-progress-bar-box">
<view class="home-progress-bar-box-title ">水位水压</view>
<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#D41E00" :striped="true" :striped-active="true" :percent="89"></u-line-progress>
</view>
<view class="home-progress-bar-box">
<view class="home-progress-bar-box-title ">烟雾</view>
<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#D41E00" :striped="true" :striped-active="true" :percent="180"></u-line-progress>
</view> -->
</view>
</view>
<u-modal v-model="show" show-cancel-button @confirm="addDevice">
<view class="slot-content pwd-style">
<u-input v-model="password" type="password" placeholder="请输入设备密码" />
</view>
</u-modal>
</view>
</template>
<script>
import uCharts from '@/components/u-charts/u-charts.js';
import headerBg from "@/components/headerBg/headerBg.vue";
var _self;
var canvaColumn = null;
var canvaLineA = null;
var canvaArcbar1 = null;
export default {
data() {
return {
alrmNotice: [],
cWidth:'',
cHeight:'',
pixelRatio:1,
pageIndexData:null, // 首页数据
arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
navListArr:[],
playState:false, // 滚动状态
lineProgressData:null,
tabbar:[
{
"pagePath": "/pages/tabBar/home",
"text": "首页",
"iconPath": "/static/images/toolbar/home.png",
"selectedIconPath": "/static/images/toolbar/act-home.png"
},{
"pagePath": "/pages/tabBar/project",
"text": "项目",
"iconPath": "/static/images/toolbar/project.png",
"selectedIconPath": "/static/images/toolbar/act-project.png"
},{
"pagePath": "/pages/tabBar/alarm",
"text": "报警",
"iconPath": "/static/images/toolbar/alarm.png",
"selectedIconPath": "/static/images/toolbar/act-alarm.png"
},{
"pagePath": "/pages/tabBar/my",
"text": "我的",
"iconPath": "/static/images/toolbar/my.png",
"selectedIconPath": "/static/images/toolbar/act-my.png"
}],
show: false,
password: '',
deviceKey: '',
canvasImg: null
}
},
components:{
headerBg
},
onPullDownRefresh(e){
this.getPowerIndexDataFn();
},
created() {
_self = this;
this.navListArr = [
{
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:"saoma",
url:"none",
method: "scanCode",
// #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);"
}
];
console.log('this.navListArr: ', this.navListArr)
// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
this.cWidth=uni.upx2px(750);
this.cHeight=uni.upx2px(260);
this.arcbarWidth=uni.upx2px(20);
this.getPowerIndexDataFn();
},
methods: {
// 获取首页数据
getPowerIndexDataFn(){
/****** 模拟数据 ***********/
// this.pageIndexData = {
// projectTotal:10,
// deviceTotal:20,
// onlineDeviceTotal:30,
// todayAlarmTotal:40,
// alarmTotal:100
// }
// this.alrmNotice = ["福建福州中德润德润物联中空开于2021年2月1日14:13:30发生报警"];
// this.playState = true;
// this.drawChartsFn(parseFloat(30) / 100);
// this.lineProgressData = {
// alarmTotalPercent:100,
// processedPercent:(70 / 100) * 100,
// unProcessedPercent:(30 / 100) * 100,
// }
// return;
/****** 模拟数据---end ***********/
this.$get('/app/index').then((res)=>{
console.log(res,"rdddd");
if(res.code != 200) return;
this.pageIndexData = res.data;
let {tenantAlarmRecordVo,processedRate,alarmTotal,processed,unProcessed} = this.pageIndexData;
// 最新报警
if(!!tenantAlarmRecordVo){
let {projectName,spaceName,projectAddress,deviceName,alarmTime,typeName} = tenantAlarmRecordVo;
let alarmStr = `${projectAddress || "-"} ${(projectName + spaceName) || "-"}中${deviceName || "-"} 于${alarmTime || "-"}发生${typeName || "-"}`
this.alrmNotice.push(alarmStr);
this.playState = true;
} else{
this.alrmNotice.push("暂无警报");
}
// 处理率
this.drawChartsFn(parseFloat(processedRate) / 100);
// 百分比数据
this.lineProgressData = {
alarmTotalPercent:alarmTotal!=0?100:0,
processedPercent:(processed / alarmTotal) * 100,
unProcessedPercent:(unProcessed / alarmTotal) * 100,
// zhyd:(zhyd / alarmTotal) * 100,
// dqhz:(dqhz / alarmTotal) * 100,
// swsy:(processed / alarmTotal) * 100,
// yw:(yw / alarmTotal) * 100
};
}).catch((err)=>{
console.log(err,"errr");
}).finally(()=>{
uni.stopPullDownRefresh();
})
},
drawChartsFn(value){
console.log(value,"value");
let obj = {
color: "#1890ff",
data: value,
index: 0,
legendShape: "circle",
name: "已处理率",
pointShape: "circle",
show: true,
type: "arcbar"
}
let Arcbar3 = {
series:[obj]
}
// 找到id为dealWithChartsId的块
_self.showArcbar("dealWithChartsId", Arcbar3);
},
goFuctionUrlFn(item){
if (item.url !== 'none') {
uni.navigateTo({
url:item.url
})
} else {
uni[item.method]({
success(res) {
if (res.errMsg === 'scanCode:ok') {
_self.show = true;
_self.deviceKey = res.result;
}
}
})
}
},
addDevice () {
let data = {
deviceKey: this.deviceKey,
devicePassword: this.password
};
this.$post('/app/device/binding-device', data).then((res) => {
console.log(res)
if (res.code === 200) {
this.$u.toast('添加成功', 3000);
} else {
this.$u.toast(res.msg, 3000);
}
}).catch((err) => {
console.log(err);
})
},
toJSON () {},
// 展示图标的函数 接收参数，一个块的id,一个数据
showArcbar(canvasId, chartData) {
canvaLineA = 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
},
subtitle: {
name: chartData.series[0].name,
color: '#666666',
fontSize: 15*_self.pixelRatio
},
extra: {
arcbar:{
type:'circle',//整圆类型进度条图
width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
startAngle:0.5//整圆类型只需配置起始角度即可
}
},
background:'#FFFFFF',
pixelRatio:_self.pixelRatio,
series: chartData.series,
animation: true,
width: _self.cWidth*_self.pixelRatio,
height: _self.cHeight*_self.pixelRatio,
dataLabel: true,
});
canvaLineA.addEventListener('renderComplete', () => {//监控图表渲染完成
setTimeout(() => {
uni.canvasToTempFilePath({
width: 345,
height: 130,
x: 0,
y: 0,
canvasId: 'dealWithChartsId',
success: function(res) {
// 在H5平台下，tempFilePath 为 base64
console.log(res.tempFilePath)
_self.canvasImg = res.tempFilePath;
},
fail: function(err) {
console.log(err)
}
}, _self);
}, 100);
});
},
// 点击图表显示的内容
touchLineA(e) {
// 使用声明的变量canvaLineA
canvaArcbar1.showToolTip(e, {
format: function(item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
}
}
}
</script>

27
pages/oneselfUser/home.vueBF
View File

@ -1,27 +0,0 @@
<style lang='scss' scoped></style>
<template>
<view class="">
首页
<view class="">
企业用户
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onLoad() {
},
onReady() {
// setTimeout(()=>{
// console.log("企业用户");
// uni.setStorageSync('userType', '企业用户');
// },2000)
},
methods: {}
}
</script>

80
pages/oneselfUser/index.vue
View File

@ -1,80 +0,0 @@
<style lang='scss' scoped></style>
<template>
<view class="">
<view class="u-page">
<!-- 所有内容的容器 -->
<block v-if="current==0">
<home></home>
</block>
<block v-else-if="current==1">
<wisdomElectricity></wisdomElectricity>
</block>
<block v-else-if="current==2">
<alarm></alarm>
</block>
<block v-else-if="current==3">
<myCenter></myCenter>
</block>
</view>
<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
<!-- #ifdef APP-PLUS -->
<u-tabbar v-model="current" :list="list" active-color="#1c9aff"></u-tabbar>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<u-tabbar v-model="current" :list="list" active-color="#1c9aff"></u-tabbar>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<u-tabbar v-model="current" :list="list" active-color="#1c9aff"></u-tabbar>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<u-tabbar v-model="current" :list="list" active-color="#1c9aff"></u-tabbar>
<!-- #endif -->
</view>
</template>
<script>
import myCenter from "./myCenter.vue";
import home from "./home.vue";
import alarm from "./alarm.vue";
import wisdomElectricity from "./wisdomElectricity.vue"
export default {
data() {
return {
list: [{
iconPath: "/static/images/toolbar/home.png",
selectedIconPath: "/static/images/toolbar/act-home.png",
text: '首页',
customIcon: false,
},
{
iconPath: "/static/images/toolbar/project.png",
selectedIconPath: "/static/images/toolbar/act-project.png",
text: '设备',
customIcon: false,
},
{
iconPath: "/static/images/toolbar/alarm.png",
selectedIconPath: "/static/images/toolbar/act-alarm.png",
text: '报警',
customIcon: false,
},
{
iconPath: "/static/images/toolbar/my.png",
selectedIconPath: "/static/images/toolbar/act-my.png",
text: '我的',
customIcon: false,
},
],
current: 0
}
},
components:{
myCenter,
home,
alarm,
wisdomElectricity
},
watch: {},
onLoad() {},
methods: {}
}
</script>

203
pages/oneselfUser/myCenter.vue
View File

@ -1,203 +0,0 @@
<style lang="scss" scoped>
.my-ctn{
width: 100%;
height: 100%;
padding: $paddingTB $paddingLR;
:not(not) {
box-sizing: border-box;
}
.header{
width: 100%;
height: 260rpx;
border-radius: 16rpx;
box-shadow: $box-shadow;
background-color: #fff;
margin-top: 20rpx;
position: relative;
&-userinfo{
text-align: center;
padding-top: 110rpx;
&-name{
font-size: 28rpx;
font-size: $uni-font-size-lg;
color: #000000;
padding-top: 10rpx;
}
&-company{
font-size: $uni-font-size-sm;
color: #aaa;
padding-top: 10rpx;
}
}
&-userinfo-avatar{
padding: 15rpx;
background-color: #fff;
width: 130rpx;
height: 130rpx;
border-radius: 50%;
margin: 0 auto;
position: absolute;
left: 50%;
top: -20rpx;
transform: translateX(-50%);
}
}
.function{
box-shadow: $box-shadow;
border-radius: $uni-border-radius-lg;
margin-top: 50rpx;
padding: 20rpx;
&-top{
display: flex;
border-top: 1px solid #ddd;
&:first-child{
border-top: none
}
&-box{
flex: 1;
text-align: center;
padding: 40rpx 0;
&:first-child{
border-right: 1px solid #ddd;
}
}
}
}
}
</style>
<template>
<view class="my-ctn">
<headerBg></headerBg>
<view class="header">
<view class="header-userinfo" v-if="userInfo">
<view class="header-userinfo-avatar">
<template v-if="userInfo.avatar.length > 0">
<u-image width="100rpx" height="100rpx" :src="getUrl(userInfo.avatar)" shape="circle"></u-image>
</template>
<template v-else>
<u-image width="100rpx" height="100rpx" src="/static/images/my/headImg.png" shape="circle"></u-image>
</template>
</view>
<view class="header-userinfo-name">{{userInfo && userInfo.nickName || userInfo.userName}}</view>
<view class="header-userinfo-company">{{tenantInfo && tenantInfo.tenantName || ""}}</view>
</view>
</view>
<view class="function">
<view class="function-top">
<view class="function-top-box" @click="goRouterFn('../tabBar/my/newAlarmRemind')">
<view class="function-top-box-icon pb10">
<tui-icon name="baojingjilu" size="80" ></tui-icon>
</view>
<view class="function-top-box-text">新报警提醒</view>
</view>
<view class="function-top-box" @click="goRouterFn('../tabBar/my/maintenanceRecord')">
<view class="function-top-box-icon pb10">
<tui-icon name="weibaojilu" size="80"></tui-icon>
</view>
<view class="function-top-box-text">维保记录</view>
</view>
</view>
<view class="function-top">
<view class="function-top-box" @click="goRouterFn('../tabBar/my/projectServe')">
<view class="function-top-box-icon pb10">
<tui-icon name="muluxiangmu" size="80"></tui-icon>
</view>
<view class="function-top-box-text">工程服务</view>
</view>
<view class="function-top-box" @click="goRouterFn('../tabBar/my/onlineServe')">
<view class="function-top-box-icon pb10">
<tui-icon name="zixun" size="80" ></tui-icon>
</view>
<view class="function-top-box-text">在线服务</view>
</view>
</view>
<view class="function-top">
<view class="function-top-box" @click="goRouterFn('../tabBar/my/help')">
<view class="function-top-box-icon pb10">
<tui-icon name="bangzhu" size="80"></tui-icon>
</view>
<view class="function-top-box-text">帮助</view>
</view>
<view class="function-top-box" @click="goRouterFn('../tabBar/my/setup')">
<view class="function-top-box-icon pb10">
<tui-icon name="shezhi" size="80"></tui-icon>
</view>
<view class="function-top-box-text">设置</view>
</view>
</view>
</view>
</view>
</template>
<script>
import headerBg from "@/components/headerBg/headerBg.vue"
export default {
data() {
return {
avatar: 'https://cdn.uviewui.com/uview/example/fade.jpg',
userInfo: null,
tenantInfo:null,
tabbar:[
{
"pagePath": "/pages/tabBar/home",
"text": "首页",
"iconPath": "/static/images/toolbar/home.png",
"selectedIconPath": "/static/images/toolbar/act-home.png"
},{
"pagePath": "/pages/tabBar/project",
"text": "项目",
"iconPath": "/static/images/toolbar/project.png",
"selectedIconPath": "/static/images/toolbar/act-project.png"
},{
"pagePath": "/pages/tabBar/alarm",
"text": "报警",
"iconPath": "/static/images/toolbar/alarm.png",
"selectedIconPath": "/static/images/toolbar/act-alarm.png"
},{
"pagePath": "/pages/tabBar/my",
"text": "我的",
"iconPath": "/static/images/toolbar/my.png",
"selectedIconPath": "/static/images/toolbar/act-my.png"
}]
}
},
components:{headerBg},
created() {
this.getUserInfoFn();
},
methods: {
getUserInfoFn(){
// let userToken = uni.getStorageSync("userToken");
let userType = uni.getStorageSync("userType");
// let getUserInfoUrl = userType === "企业用户"?"/system/personal/profile":"/system/user/profile";
let getUserInfoUrl = "/system/user/profile";
this.$get(getUserInfoUrl).then((res)=>{
console.log(res,"res");
if(!res.data) return;
this.userInfo = res.data;
this.tenantInfo = res.data.tenant;
uni.setStorageSync("tenantInfo",res.data.tenant)
uni.setStorageSync("userInfo",this.userInfo)
})
},
goRouterFn(url){
console.log(url,"url");
uni.navigateTo({
url:url
})
},
getUrl(url) {
if(url.indexOf('http') > 0){
return url;
}else {
return this.$config.baseUrl + url;
}
}
}
}
</script>

150
pages/oneselfUser/relationDevice/index.vue
View File

@ -1,150 +0,0 @@
<style lang="scss" scoped>
.entrySn-ctn{
width: 100%;
height: 100%;
// background-color: $bgColor;
:not(not) {
box-sizing: border-box;
}
}
.prompt{
padding: $paddingTB 0;
text-align: center;
// margin-top: 40rpx;
&-title{
font-size: 40rpx;
font-weight: 550;
padding-bottom: 30rpx;
}
&-text{
color: #ccc;
}
}
.write-code-ctn{
border:1px solid #aaa;
width: 600rpx;
height: 80rpx;
margin: 20rpx auto;
display: flex;
align-items: center;
justify-content: center;
.write-code{
display: flex;
justify-content: center;
&-input{
// margin-top: 6rpx;
width: 500rpx;
}
}
}
.phone{
padding-top: 16rpx;
color: #ccc;
font-size: 24rpx;
text-align: center;
}
.bottom-btn{
position: absolute;
bottom: 30rpx;
width: 100%;
display: flex;
justify-content: center;
button{
width: 80%;
border-radius: 20rpx;
}
}
</style>
<template>
<view class="entrySn-ctn">
<!-- <view class="header">
<view class="header-state">
<view class="header-state-shape">
</view>
</view>
</view> -->
<view class="prompt">
<view class="prompt-title">关联设备SN码</view>
<view class="prompt-text">请扫码录入/手动输入设备SN码</view>
</view>
<view class="write-code-ctn" :style="{borderColor:inputState?'#4A74C5':'#aaa'}">
<view class="write-code">
<input class="write-code-input" @focus="inputState=true" @blur="inputState=false" v-model="inputVal" placeholder="输入设备SN码" />
<!-- <tui-icon name="scan" :size="22" @tap="scanCodeFn"></tui-icon> -->
<u-icon name="scan" @tap="scanCodeFn" color="#808080" :size="40"></u-icon>
</view>
</view>
<view class="bottom-btn" >
<button type="primary" @tap="bindBatteryFn">确认绑定</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userNo:"",
// inputVal:"QD00A12005B001C00004",
inputVal:"",
inputState:false,
type:""
};
},
onLoad(e) {
this.userNo = e.userNo;
this.type = e.type;
if(!!e.userBatterySn) this.inputVal = e.userBatterySn;
},
onReady() {},
methods: {
// 绑定/解绑电池
bindBatteryFn(){
let obj = {
batterySn:this.inputVal,
loginName:this.userNo
};
if (this.type ==="bind") {
this.$api.toolMange.bindBattery(obj).then((res)=>{
if (res.code===0) {
this.tui.toast(res.msg,3000,'success');
setTimeout(()=>{
uni.switchTab({
url:"../../../view/my"
})
},1500)
} else{
this.tui.toast(res.msg,3000);
}
})
} else if(this.type ==="unbind"){
this.$api.toolMange.unbindBattery(obj).then((res)=>{
if (res.code===0) {
this.tui.toast(res.msg,3000,'success');
setTimeout(()=>{
uni.switchTab({
url:"../../../view/my"
})
},1500)
} else{
this.tui.toast(res.msg,3000);
}
})
}
},
scanCodeFn(){
let _this = this;
// 调起条码扫描
uni.scanCode({
scanType: ['barCode','qrCode'],
success: function (res) {
_this.inputVal = res.result;
}
});
}
},
computed: {},
components: {}
};
</script>

Some files were not shown because too many files have changed in this diff Show More