<script setup>
|
import { adminDetailApi,getRunStateApi,getTotalRevenueApi,getWaterConsumptionApi,changePasswordApi} from '../../api/index.js'
|
import { onMounted,ref } from 'vue'
|
import { onShow } from '@dcloudio/uni-app'
|
const echarts = require('../../static/echarts.min.js')
|
//获取维修人员信息
|
const maintainDetail = ref({})
|
let maintainId = JSON.parse(uni.getStorageSync('maintainId'))
|
async function getMaintainDetail(){
|
await adminDetailApi(maintainId).then((res) =>{
|
if(res.code == 200){
|
maintainDetail.value = res.data
|
}
|
})
|
}
|
//功能列表
|
function navTo(itemUrl){
|
uni.navigateTo({
|
url:itemUrl
|
})
|
}
|
|
//图表相关-----------------------------------------------------------------------------------------------------------
|
const facilityEcharts = ref()
|
const revenueEcharts = ref()
|
const flowEcharts = ref()
|
|
/**
|
* 设备在线状态
|
*/
|
//获取数据
|
let facilityStatusList = []
|
async function getFacilityStatus(){
|
facilityStatusList = []
|
await getRunStateApi().then((res) =>{
|
if(res.code == 200){
|
facilityStatusList.push(
|
{value :res.data.onLineCount,name: '正常运行',itemStyle:{color:'#02a7c0'} },
|
{value :res.data.offLineCount,name: '离线',itemStyle:{color:'#8fd8e3'} },
|
{value :res.data.malfunctionCount,name: '故障',itemStyle:{color:'#f76b8a'} },
|
)
|
}
|
})
|
}
|
|
//设备配置项
|
function setFacilityOption(){
|
|
let facilityOption = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: 'middle',
|
right: '15%',
|
orient:'vertical',
|
// height:'70%',
|
itemGap:30,
|
itemWidth:40,
|
itemHeight:8,
|
textStyle:{
|
color:'#6d757c',
|
fontSize:14,
|
padding:[0,0,0,7]
|
}
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['30%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius:3,
|
},
|
label: {
|
show: true,
|
formatter:'{b}:{c}'
|
},
|
data: facilityStatusList,
|
//位置
|
right:'40%'
|
}
|
],
|
};
|
facilityEcharts.value.init(echarts,chart =>{
|
chart.setOption(facilityOption)
|
})
|
}
|
/**
|
* 营收总览
|
*/
|
let revenueList = []
|
async function getRevenue(){
|
await getTotalRevenueApi().then((res) =>{
|
|
revenueList = []
|
if(res.code == 200){
|
let list1 = []
|
let list2 = []
|
let preData = []
|
|
res.data.payment.forEach((item,index) =>{
|
list1.push(item.month)
|
})
|
|
res.data.recharge.forEach((item,index) =>{
|
list2.push(item.month)
|
})
|
// 合并月份
|
const Array1 = list1.concat(list1);
|
// 月份去重
|
const Array2 = [...new Set(Array1)];
|
// 月份升序
|
const Array3 = Array2.sort((a, b) => a - b);
|
|
Array3.forEach((item) =>{
|
preData.push(
|
{month:item}
|
)
|
})
|
//合并数组
|
preData.forEach((item) =>{
|
res.data.payment.forEach((item1) =>{
|
if(item.month == item1.month){
|
item.payCount = item1.count
|
}
|
})
|
|
res.data.recharge.forEach((item2) =>{
|
if(item.month == item2.month){
|
item.regCount = item2.count
|
}
|
})
|
})
|
revenueList = preData
|
// console.log(123131,revenueList)
|
}
|
})
|
}
|
|
function setRevenueOption(){
|
let revenueOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
right: '1%',
|
textStyle:{
|
color:'#6d757c'
|
}
|
},
|
grid: {
|
width:'90%',
|
height:'88%',
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
axisLabel:{
|
show:true,
|
color:'#6d757c'
|
},
|
splitLine:{
|
lineStyle:{
|
color:'rgba(254,239,242,0.5)'
|
}
|
}
|
},
|
yAxis: {
|
type: 'category',
|
// name:'月',
|
axisLabel:{
|
show:true,
|
color:'#6d757c'
|
},
|
axisTick:{
|
show:false
|
},
|
axisLine:{
|
lineStyle:{
|
color:'#8fd8e3'
|
}
|
}
|
},
|
dataset:{
|
dimensions:['month','payCount','regCount'],
|
source:revenueList
|
},
|
series: [
|
{
|
name: '充值',
|
type: 'bar',
|
itemStyle:{
|
color:'#02a7c0'
|
},
|
label: {
|
show: true,
|
formatter:'{@[1]}元',
|
position: 'right',
|
color:'#6d757c'
|
},
|
},
|
{
|
name: '消费',
|
type: 'bar',
|
itemStyle:{
|
color:'#88cdcd'
|
},
|
label: {
|
show: true,
|
formatter:'{@[2]}元',
|
position: 'right',
|
color:'#6d757c'
|
},
|
}
|
]
|
};
|
revenueEcharts.value.init(echarts,chart =>{
|
chart.setOption(revenueOption)
|
})
|
}
|
/**
|
* 用水量统计
|
*/
|
//获取数据
|
let flowList
|
async function getFlowList(){
|
await getWaterConsumptionApi().then((res) =>{
|
if(res.code == 200){
|
flowList = res.data
|
// flowList.push({month: 1, count: "27.50000"})
|
// flowList.push({month: 2, count: "12.50000"})
|
// flowList.push({month: 3, count: "45.50000"})
|
// flowList.push({month: 4, count: "27.50000"})
|
}
|
})
|
}
|
function setFlowOption(){
|
let flowOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'line' ,
|
lineStyle:{
|
color:'#f3eadc',
|
},
|
snap:true,
|
},
|
},
|
grid:{
|
width:'80%',
|
left:'8%',
|
bottom: '12%'
|
},
|
xAxis: {
|
name:'月份',
|
type: 'category',
|
axisTick:{
|
show:false,
|
},
|
axisLabel:{
|
show:false,
|
},
|
axisLine:{
|
show:true,
|
lineStyle:{
|
color:'#8fd8e3',
|
width:1,
|
},
|
},
|
},
|
yAxis: {
|
name:'用水量（L）',
|
type: 'value',
|
boundaryGap:false,
|
axisLine:{
|
show:true,
|
lineStyle:{
|
color:'#8fd8e3',
|
width:1,
|
},
|
},
|
axisLabel:{
|
show:true,
|
color:'#6d757c'
|
},
|
splitLine:{
|
show:false,
|
}
|
},
|
dataset:{
|
dimensions:['month','count'],
|
source:flowList
|
},
|
series: [
|
{
|
type: 'line',
|
symbol: 'none',
|
name:'用水量',
|
itemStyle: {
|
color: '#66bfbf',
|
},
|
lineStyle:{
|
color: '#FFFFFF',
|
width:1,
|
},
|
|
labelLine:{
|
show:false,
|
},
|
smooth:true,
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(
|
0, 0, 0, 1,
|
[
|
{offset: 0, color:'#02a7c0'},
|
{offset: 1, color:'#FFFFFF'}
|
]
|
)
|
}
|
},
|
],
|
grid:{
|
width:'90%',
|
height:'80%',
|
bottom:'5%',
|
left:'10%'
|
}
|
}
|
flowEcharts.value.init(echarts,chart =>{
|
chart.setOption(flowOption)
|
})
|
}
|
//修改密码
|
const popup = ref()
|
const rules = ref({
|
newPassword: {
|
rules:[{required: true, errorMessage:'请输入', trigger: "blur"}],
|
},
|
oldPassword: {
|
rules:[{required: true, errorMessage:'请输入', trigger: "blur"}],
|
},
|
})
|
const pwdFormRef =ref()
|
const pwdForm = ref({
|
oldPassword:'',
|
newPassword:'',
|
})
|
function editPwd(){
|
popup.value.open()
|
}
|
function concel(){
|
pwdForm.value = {}
|
pwdFormRef.value.clearValidate()
|
popup.value.close()
|
}
|
async function confirmEdit(){
|
pwdFormRef.value.validate().then(async(validate)=>{
|
let res = await changePasswordApi(pwdForm.value)
|
if(res.code === 200){
|
uni.showToast({
|
title:'修改成功'
|
})
|
concel()
|
}else{
|
uni.showToast({
|
title:'修改失败'
|
})
|
concel()
|
}
|
}).catch((err)=>{})
|
}
|
//退登
|
function loginOut(){
|
wx.showModal({
|
title: '提示',
|
content: '您确定要退出登录吗',
|
success: function (res) {
|
if (res.confirm) {//点击确定
|
console.log('用户点击确定')
|
uni.setStorageSync('token', '');//将token置空
|
uni.setStorageSync('maintainId', '');//将管理员ID置空
|
uni.redirectTo({
|
url: '/pages/login/index',//跳去登录页
|
})
|
} else {//这里是点击了取消以后
|
console.log('用户点击取消')
|
}
|
}
|
})
|
}
|
|
onShow(async() =>{
|
await getMaintainDetail()
|
})
|
onMounted(async() =>{
|
await getFacilityStatus()
|
setFacilityOption()
|
await getRevenue()
|
setRevenueOption()
|
await getFlowList()
|
setFlowOption()
|
console.log('list',facilityStatusList)
|
|
|
})
|
</script>
|
<template>
|
<view class="container">
|
<view class="header">
|
<view class="info-box">
|
<view class="info-left">
|
<image class="img" src="../../static/images/maintain/maintenance-head.svg"></image>
|
<view class="info">
|
<text>账户名：{{maintainDetail.nickName}}</text>
|
<text>电话：{{maintainDetail.contact}}</text>
|
</view>
|
</view>
|
<view class="edit">
|
<view class="edit-text1" @click="editPwd">修改密码</view>
|
<view class="edit-text2" @click="loginOut">退出登录</view>
|
</view>
|
</view>
|
</view>
|
<view class="content">
|
<view class="function-box">
|
<view @click="navTo('/pagesAdmin/adminPlatform/facility')" class="item" style="border-right: 1rpx solid #c8c8c8;border-bottom: 1rpx solid #c8c8c8;">
|
<view class="item-img-box icon1">
|
<image class="item-img" src="../../static/images/maintain/fun-icon1.svg"></image>
|
</view>
|
<text>设备管理</text>
|
</view>
|
<view @click="navTo('/pagesAdmin/adminPlatform/inspect')" class="item" style="border-bottom: 1rpx solid #c8c8c8;">
|
<view class="item-img-box icon2" >
|
<image class="item-img" src="../../static/images/maintain/fun-icon2.svg"></image>
|
</view>
|
<text>巡检管理</text>
|
</view>
|
<view @click="navTo('/pagesAdmin/adminPlatform/maintain')" class="item" style="border-right: 1rpx solid #c8c8c8;">
|
<view class="item-img-box icon3">
|
<image class="item-img" src="../../static/images/maintain/fun-icon3.svg"></image>
|
</view>
|
<text>维护管理</text>
|
</view>
|
<view @click="navTo('/pagesAdmin/adminPlatform/breakdown')" class="item" >
|
<view class="item-img-box icon4">
|
<image class="item-img" src="../../static/images/maintain/fun-icon4.svg"></image>
|
</view>
|
<text>故障上报</text>
|
</view>
|
</view>
|
</view>
|
<view class="chart-content">
|
<view class="chart-title"><text>统计数据</text></view>
|
|
<view class="charts1-box">
|
<view class="charts-box-title">设备运行状态</view>
|
<view class="charts1">
|
<l-echart ref="facilityEcharts"></l-echart>
|
</view>
|
</view>
|
<view class="charts2-box">
|
<view class="charts-box-title">营收总览(年)</view>
|
<view class="charts2">
|
<l-echart ref="revenueEcharts"></l-echart>
|
</view>
|
</view>
|
<view class="charts3-box">
|
<view class="charts-box-title">用水量统计</view>
|
<view class="charts3">
|
<l-echart ref="flowEcharts"></l-echart>
|
</view>
|
</view>
|
</view>
|
<uni-popup ref="popup" :is-mask-click ='false' type="center" border-radius="20px">
|
<view class="dialog-box">
|
<view>
|
<uni-forms ref="pwdFormRef" :model="pwdForm" :rules="rules">
|
<uni-forms-item label="旧密码:" name='oldPassword'>
|
<uni-easyinput class="input" v-model="pwdForm.oldPassword" placeholder="请输入旧密码">></uni-easyinput>
|
</uni-forms-item>
|
<uni-forms-item label="新密码:" name="newPassword">
|
<uni-easyinput class="input" v-model="pwdForm.newPassword" placeholder="请输入新密码">></uni-easyinput>
|
</uni-forms-item>
|
</uni-forms>
|
</view>
|
<view class="button-box">
|
<button class="btn1" @click="concel">取消</button>
|
<button class="btn2" @click="confirmEdit">确认</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
// height:100vh;
|
background: linear-gradient(to bottom,rgba(94,161,250,1) 0%,#D2F2FE 30%,#D2F2FE 100%);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding-bottom:100rpx;
|
box-sizing: border-box;
|
.header{
|
width:88%;
|
height:200rpx;
|
border:1px solid #D2F2FE;
|
margin-top: 200rpx;
|
// border-radius: 20rpx;
|
background:rgba(255, 255, 255,0.8);
|
.info-box{
|
width:100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.info-left{
|
display: flex;
|
align-items: flex-end;
|
.img{
|
width: 100rpx;
|
height:100rpx;
|
}
|
.info{
|
display: flex;
|
flex-direction: column;
|
margin-left:20rpx;
|
color: #3b3d3e;
|
}
|
}
|
.edit{
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
flex-direction: column;
|
height:150rpx;
|
.edit-text1{
|
text-align: center;
|
line-height:50rpx;
|
width:150rpx;
|
height: 50rpx;
|
background: #D2F2FE;
|
border: 1rpx solid #99ddfc;
|
color: #595c5e;
|
}
|
.edit-text2{
|
font-size:26rpx;
|
margin-top:20rpx;
|
color: #447cbc;
|
}
|
}
|
}
|
}
|
.content{
|
width:90%;
|
height:500rpx;
|
background:rgba(255, 255, 255,0.8);
|
margin-top: 30rpx;
|
padding:30rpx;
|
box-sizing: border-box;
|
.function-box{
|
width:100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
.item{
|
width:50%;
|
height:50%;
|
display:flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding:10rpx 80rpx;
|
box-sizing: border-box;
|
.item-img-box{
|
width:130rpx;
|
height:130rpx;
|
border-radius:50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.item-img{
|
width:72rpx;
|
height:72rpx;
|
}
|
}
|
.icon1{
|
background: #3f72af;
|
}
|
|
.icon2{
|
background: #fab57a;
|
}
|
|
.icon3{
|
background: #f57170;
|
}
|
|
.icon4{
|
background:#61c0bf;
|
}
|
}
|
}
|
|
}
|
.chart-content{
|
width:90%;
|
margin-top: 30rpx;
|
border-radius: 20rpx;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
overflow: scroll;
|
.chart-title{
|
color: #ffffff;
|
letter-spacing:2rpx;
|
background: linear-gradient(to right,#D2F2FE 0%,rgba(94,161,250,0.5) 15%,rgba(89, 153, 236, 0.8) 50%,rgba(94,161,250,0.5) 85%,#D2F2FE);
|
width:260rpx;
|
height:55rpx;
|
line-height:50rpx;
|
text-align: center;
|
}
|
//图表标题文字样式
|
.charts-box-title{
|
color: #3d7a79;
|
font-size: 30rpx;
|
font-weight:600;
|
}
|
.charts1-box{
|
width:100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 20rpx 0;
|
background: #fff;
|
margin:30rpx 0;
|
.charts1{
|
width:100%;
|
height:300rpx;
|
}
|
}
|
.charts2-box{
|
width:100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 20rpx 0;
|
background: #fff;
|
margin:30rpx 0;
|
.charts2{
|
width:100%;
|
height:600rpx;
|
}
|
}
|
.charts3-box{
|
width:100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 20rpx 0;
|
background: #fff;
|
margin:30rpx 0;
|
.charts3{
|
width:100%;
|
height:400rpx;
|
}
|
}
|
}
|
.dialog-box{
|
width:600rpx;
|
height:500rpx;
|
background: #fafbfc;
|
padding:40rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content:center;
|
flex-direction: column;
|
border-radius:20rpx;
|
.input{
|
align-items: center;
|
}
|
.button-box{
|
width:100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.btn1{
|
line-height:60rpx;
|
width:180rpx;
|
height:60rpx;
|
background: #fcfcfc;
|
color: #505354;
|
}
|
.btn2{
|
line-height:60rpx;
|
width:180rpx;
|
height:60rpx;
|
background: #b7cafc;
|
color: #484b4c;
|
}
|
}
|
}
|
}
|
</style>
|
