chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
7bfef7997f
smartmeter-app/pages/shebei/sbdetail.vue

611 lines
14 KiB
Vue
Raw Normal View History

111
2024-03-13 10:54:22 +08:00
<template>
<view class="page">
<u-navbar :title="tittxt" :border-bottom="false" :background="bgc" title-color='#2E4975'
title-size='36' height='36' id="navbar">
</u-navbar>
<view class="zhuhu" >
<view class="card1">
<view class="top">
<view class="left">
设备
</view>
<view class="right">
<image class="img1" src="@/static/off.png" mode="" style="margin-right: 30rpx;"></image>
<image class="img1" src="@/static/share.png" mode="" @click="toewm()"></image>
</view>
</view>
<view class="mid">
<view class="mid_left">
<image src="../../static/db.png" mode=""></image>
</view>
<view class="mid_right">
<view class="mid_top">
{{ deviceInfo.deviceName }}号
</view>
<view class="mid_bot">
<view class="txt" v-if="deviceInfo">电表号：{{ deviceInfo.deviceId }}</view>
<div class="tip" v-if="deviceInfo.onlineStatus==1">在线</div>
<div class="tip" v-if="deviceInfo.onlineStatus==0">离线</div>
</view>
</view>
</view>
<view class="bot">
<view class="bot_left">
<view class="echarts">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
<l-echart ref="chart" @finished="initChart"></l-echart>
</view>
</view>
<view class="bot_right">
<view class="cont">
<view class="tit">
11
2024-03-25 19:46:07 +08:00
{{deviceInfo.totalElectriQuantity}}KWH
111
2024-03-13 10:54:22 +08:00
</view>
<view class="txt">
11
2024-03-25 19:46:07 +08:00
总用电量
111
2024-03-13 10:54:22 +08:00
</view>
</view>
<view class="cont" style="margin-left: 60rpx;">
<view class="tit">
11
2024-03-25 19:46:07 +08:00
{{deviceInfo.price}}元/度
111
2024-03-13 10:54:22 +08:00
</view>
<view class="txt">
电价
</view>
</view>
</view>
</view>
</view>
<view class="card2">
<view class="tit">实时</view>
<view class="cont_box">
<view class="cont">
<view class="top">{{deviceInfo.realTimePower}}KW</view>
<view class="bot">实时功率</view>
</view>
<view class="cont" style="width: 70rpx;">
<view class="top">{{deviceInfo.electricity}}A</view>
<view class="bot">电流</view>
</view>
<view class="cont">
<view class="top">{{deviceInfo.voltage}}V</view>
<view class="bot">电压</view>
</view>
</view>
</view>
<view class="card3">
<view class="tit">其他</view>
<view class="cont_box">
11
2024-03-25 19:46:07 +08:00
<view class="cont" style="width: 56rpx;" @click="topage(0)">
111
2024-03-13 10:54:22 +08:00
<view class="top">
<image src="@/static/cb.png" mode="" style="width: 58rpx;height: 56rpx;" ></image>
</view>
<view class="bot">抄表</view>
</view>
11
2024-03-25 19:46:07 +08:00
<view class="cont" style="width: 58rpx;" @click="topage(1)">
111
2024-03-13 10:54:22 +08:00
<view class="top">
<image src="@/static/gl.png" mode="" style="width: 58rpx;height: 58rpx;"></image>
</view>
<view class="bot">归零</view>
</view>
11
2024-03-25 19:46:07 +08:00
<view class="cont" style="width: 58rpx;" @click="topage(2)">
111
2024-03-13 10:54:22 +08:00
<view class="top">
<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
</view>
<view class="bot">异常</view>
</view>
<view class="cont" @click="toydfx()">
<view class="top">
<image src="@/static/fx.png" mode=""></image>
</view>
<view class="bot">用电分析</view>
</view>
</view>
<view class="cont_box" style="padding-left: 30rpx;">
11
2024-03-25 19:46:07 +08:00
<view class="cont" style="width: 115rpx;margin-right: 50rpx;" @click="topage(3)">
111
2024-03-13 10:54:22 +08:00
<view class="top">
<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
</view>
<view class="bot">房租提醒</view>
</view>
11
2024-03-25 19:46:07 +08:00
<view class="cont" style="width: 56rpx;" @click="topage(4)">
111
2024-03-13 10:54:22 +08:00
<view class="top">
<image src="@/static/sz.png" mode=""></image>
</view>
<view class="bot">设置</view>
</view>
</view>
</view>
<!-- <view class="button">电费充值</view> -->
<!-- <view class="zhanwei" style="width: 100%;height: 300rpx;">
</view> -->
</view>
</view>
</template>
<script>
import * as echarts from 'echarts'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
data() {
return {
bgc: {
backgroundColor: "#F7FAFE",
},
deviceInfo:{},
loadings:false,
info:'',
tittxt:"设备列表",
titlist: [
"全部",
"电表",
"水表",
],
curtitidx:0,
}
},
onLoad(option) {
let id = option.id
this.getDevice(id)
},
methods: {
async initChart() {
let value = 100;
let value2 = this.deviceInfo.surplusElectriQuantity
const option = {
// backgroundColor:"#061740",
title: {
show: false,
text: `历史请求满意度`, // 图表标题
x: 'center',
y: '20',
textStyle: {
color: '#333', //'#fff',
fontSize: 20,
},
},
series: [{
type: 'pie', // 饼图类型
radius: ['98%', '70%'], // 饼图半径，第一个值是内半径，第二个值是外半径
silent: true,
clockwise: true,
startAngle: 90, // 起始角度
z: 0,
zlevel: 0,
data: [{
value: value,
name: '占比', // 数据项名称
itemStyle: {
normal: {
color: '#8883F0', // 数据项颜色
},
},
label: {
normal: {
position: 'center',
formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
rich: {
a: {
fontSize: 15,
fontWeight: '700',
color: '#333',
},
b: {
fontSize: 11,
color: '#888',
},
},
},
},
},
{
value: 100 - value,
name: '',
label: {
normal: {
show: false,
},
},
itemStyle: {
normal: {
color: '#173164',
},
},
},
],
},
{
type: 'gauge', // 仪表盘类型
radius: '130%', // 仪表盘半径，占图表容器的百分比
center: ['50%', '50%'], // 仪表盘中心位置
startAngle: 359,
endAngle: 359.9,
splitNumber: 2, // 刻度分割段数
hoverAnimation: true,
axisTick: {
show: true, // 是否显示刻度线
length: 10, // 刻度线长度
lineStyle: {
color: 'auto',
width: 1,
},
},
splitLine: {
length: 0, // 刻度线分隔线长度
lineStyle: {
width: 1,
color: '#061740',
},
},
axisLabel: {
show: false, // 是否显示刻度标签
},
pointer: {
show: false, // 是否显示指针
},
axisLine: {
lineStyle: {
opacity: 0,
},
},
detail: {
show: false, // 是否显示仪表盘详情
},
data: [{
value: 0,
name: '',
}, ],
},
],
};
// console.log( this.$refs.chartRef,'1111');
const chart = await this.$refs.chart.init(echarts);
11
2024-03-25 19:46:07 +08:00
console.log(option,11);
111
2024-03-13 10:54:22 +08:00
chart.setOption(option)
// chart.resize({
// width: uni.upx2px(210), // Convert 210rpx to pixels
// height: uni.upx2px(190.14) // Convert 190.14rpx to pixels
// });
return chart
},
// 获取设备详情
getDevice(id){
this.$u.get("/app/device/"+id).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.deviceInfo=res.data
11
2024-03-25 19:46:07 +08:00
console.log(this.deviceInfo,'resres');
111
2024-03-13 10:54:22 +08:00
this.loadings=true
11
2024-03-25 19:46:07 +08:00
this.initChart()
111
2024-03-13 10:54:22 +08:00
}
});
},
swiperchange(e){
this.curtitidx=e.detail.current
console.log(e,'aaaa');
},
changeidx(index){
this.curtitidx=index
},
toewm(){
uni.navigateTo({
url:"/pages/shebei/ewm"
})
},
toydfx(){
uni.navigateTo({
url:"/pages/shebei/eletj"
})
},
tofztx(){
uni.navigateTo({
url:"/pages/userpage/fztx"
})
},
11
2024-03-25 19:46:07 +08:00
// 其他部分 点击进行跳转
topage(num){
if(num == 0){
uni.navigateTo({ //抄表
url:'/pages/userpage/cbRecord'
})
}else if(num == 1){ //归零
uni.navigateTo({
url:'/pages/userpage/glRecord'
})
}else if(num == 2){ //异常
}else if(num == 3){
uni.navigateTo({ //房租提醒
url:'/pages/userpage/fztx'
})
}else if(num == 4){ //设置
uni.navigateTo({
url:'/pages/userpage/userSet'
})
}
}
111
2024-03-13 10:54:22 +08:00
}
}
</script>
<style lang="scss">
page {
background-color: #F7FAFE;
}
.page {
.zhuhu {
margin-top: 20rpx;
padding: 0 40rpx;
.card1 {
padding: 34rpx 0 0 40rpx;
width: 670rpx;
height: 583rpx;
background: #FFFFFF;
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx 28rpx 28rpx 28rpx;
.top {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.left {
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.right {
margin-right: 56rpx;
.img1 {
width: 76rpx;
height: 76rpx;
}
}
}
.mid {
margin-top: 54rpx;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
.mid_left {
image {
width: 37rpx;
height: 98rpx;
}
}
.mid_right {
margin-left: 40rpx;
display: flex;
flex-wrap: wrap;
.mid_top {
width: 100%;
font-size: 42rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.mid_bot {
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt {
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.tip {
display: flex;
align-items: center;
justify-content: center;
margin-left: 19rpx;
width: 38rpx;
height: 23rpx;
background: rgba(204, 204, 204, 0);
opacity: 1;
border: 2rpx solid #8883F0;
border-radius: 40rpx;
font-size: 14rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
}
}
}
.bot {
margin-top: 83rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.bot_left {
width: 210rpx;
height: 190.14rpx;
11
2024-03-25 19:46:07 +08:00
margin-right: 34rpx;
111
2024-03-13 10:54:22 +08:00
.echarts {
width: 210rpx;
height: 190.14rpx;
}
}
.bot_right {
// margin-top: 50rpx;
display: flex;
flex-wrap: nowrap;
.cont {
.tit {
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 600;
color: #262B37;
line-height: 49rpx;
}
.txt {
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
}
.card2 {
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
height: 254rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx;
.tit {
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
.cont {
width: 110rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
11
2024-03-25 19:46:07 +08:00
text-align: center;
111
2024-03-13 10:54:22 +08:00
.top {
11
2024-03-25 19:46:07 +08:00
width: 110rpx;
111
2024-03-13 10:54:22 +08:00
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.bot {
margin-top: 20rpx;
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
.card3 {
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
// height: 318rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx;
padding-bottom: 20rpx;
.tit {
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box {
padding-left: 60rpx;
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
// justify-content: space-around;
.cont:last-child{
margin-right: 0rpx;
}
.cont {
width: 112rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-right: 80rpx;
.top {
image {
width: 56rpx;
height: 56rpx;
}
}
.bot {
margin-top: 15rpx;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #808080;
}
}
}
}
.button {
margin-left: 76rpx;
margin-top: 178rpx;
display: flex;
justify-content: center;
align-items: center;
width: 520rpx;
height: 104rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 52rpx 52rpx 52rpx 52rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
</style>
Reference in New Issue Copy Permalink