|
|
@@ -0,0 +1,1547 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+
|
|
|
+ <view class="background" :class="{
|
|
|
+ 'background-padding-bottom':!showtab
|
|
|
+ }">
|
|
|
+ <u-picker v-model="tabsFrom.show1"
|
|
|
+ :defaultSelector="[tabsFrom.show1Index]"
|
|
|
+ mode="selector" :range="tabsFrom.selector1" range-key="label" @confirm="selector1confirm" ></u-picker>
|
|
|
+
|
|
|
+ <u-picker-select title="日期选择" v-model="tabsFrom.show2"
|
|
|
+ :defaultTime="tabsFrom.show2Index" :endYear="endYear" @cancel="selector2cancel"
|
|
|
+ mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
|
+
|
|
|
+ <u-navbar :background="background"
|
|
|
+ @titleCk="titleCk" :title-icon="componentsMeterList.length>1?'arrow-down':''"
|
|
|
+ back-icon-color="#fff" :title="title" title-color="#fff">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
|
|
|
+ <image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
|
+ </view> -->
|
|
|
+ </u-navbar>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 用电量 -->
|
|
|
+ <view class="electricity-consumption">
|
|
|
+ <!-- 统计 -->
|
|
|
+ <view class="statistics-content">
|
|
|
+ <view class="statistics-item"
|
|
|
+ >
|
|
|
+ <!-- @click="gotoUrl('/pages/mine/electricityConsumptionDetail?id='
|
|
|
+ +FormData.meterId+'&type='+FormData.type)" -->
|
|
|
+ <view class="item-title">
|
|
|
+ <image class="img" src="@/assets/img/meterStatistics@3x.png"></image>统计用水量 (m³)
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text>{{electricityNum}}</text>
|
|
|
+ <u-icon name="arrow-right" v-if="0"
|
|
|
+ color="#cccccc" size="24" ></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistics-item" >
|
|
|
+ <view class="item-title item-title2">
|
|
|
+ <image class="img" src="@/assets/img/electricityStatistics@3x.png"></image>水费统计(元)
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{fee}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="degree">
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 拾万
|
|
|
+ </view>
|
|
|
+ <view class="item-number" v-text="showTop[0]" >
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 万
|
|
|
+ </view>
|
|
|
+ <view class="item-number" v-text="showTop[1]">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 仟
|
|
|
+ </view>
|
|
|
+ <view class="item-number" v-text="showTop[2]">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 佰
|
|
|
+ </view>
|
|
|
+ <view class="item-number" v-text="showTop[3]">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 拾
|
|
|
+ </view>
|
|
|
+ <view class="item-number" v-text="showTop[4]">
|
|
|
+ 7
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 1
|
|
|
+ </view>
|
|
|
+ <view class="item-number" v-text="showTop[5]">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 0.1
|
|
|
+ </view>
|
|
|
+ <view class="item-number decimal" v-text="showTop[6]">
|
|
|
+ 7
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 0.01
|
|
|
+ </view>
|
|
|
+ <view class="item-number decimal" v-text="showTop[7]">
|
|
|
+ 7
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="radio">
|
|
|
+ <u-radio-group v-model="value" @change="radioGroupChange">
|
|
|
+ <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
|
|
|
+ :disabled="item.disabled">
|
|
|
+ {{item.name}}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 远程控制源开关 -->
|
|
|
+ <view class="control"
|
|
|
+
|
|
|
+ v-if="meterDetail.type!=6&&meterDetail.allowSwitch">
|
|
|
+ <!-- @click="gotoUrl('/pages/remoteControl/switchDetail?id='+meterDetail.id)" -->
|
|
|
+ <view class="text" >
|
|
|
+ 智能监控开关
|
|
|
+ <u-icon name="arrow-right" v-if="false"
|
|
|
+ color="#cccccc" size="24" ></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="icon" style=" display: flex;" >
|
|
|
+
|
|
|
+ <span>关</span>
|
|
|
+ <u-switch size="32" @change="switchBtnApi(meterDetail,$event)"
|
|
|
+ v-model="meterDetail.switchStatus" inactive-color="#ff9900" ></u-switch >
|
|
|
+ <span >开</span>
|
|
|
+ <!-- <img src="@/assets/img/control.png"
|
|
|
+ @tap.stop="switchBtnApi(meterDetail,0)"
|
|
|
+ v-if="meterDetail.switchStatus"
|
|
|
+ alt="" />
|
|
|
+ <img @tap.stop="switchBtnApi(meterDetail,1)"
|
|
|
+ v-else
|
|
|
+ src="@/assets/img/switchClose.png" alt="" /> -->
|
|
|
+ </view>
|
|
|
+ <!-- <view class="icon" v-i>
|
|
|
+ <img src="@/assets/img/control.png"
|
|
|
+ @tap.stop="switchBtnApi(meterDetail,0)"
|
|
|
+ v-if="meterDetail.switchStatus"
|
|
|
+ alt="" />
|
|
|
+ <img @tap.stop="switchBtnApi(meterDetail,1)"
|
|
|
+ v-else
|
|
|
+ src="@/assets/img/switchClose.png" alt="" />
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <!-- 各时段用量 -->
|
|
|
+ <view class="electricity-chart">
|
|
|
+ <view class="title">
|
|
|
+
|
|
|
+ <view class="text">
|
|
|
+ <view class="icon-title">
|
|
|
+
|
|
|
+ </view> 各时段用水量 (m³)
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view @click="tabsFrom.show2=true,params.day=true" class="queryDayClass" >
|
|
|
+ {{queryDay}}<u-icon name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chart">
|
|
|
+ <view id="pieEchartsWater" >
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ style="background: white; display: flex;justify-content: space-between;padding: 0 12px;" >
|
|
|
+ <view>水量合计：{{sumQuantity}} m³</view>
|
|
|
+ <view>水费合计：{{(sumQuantity*meterDetail.price).toFixed(2)}}元</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 设备信息 -->
|
|
|
+ <view class="equipment-information">
|
|
|
+ <view class="title">
|
|
|
+
|
|
|
+ <view class="icon-title">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 设备信息
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="more" @click="equipmentInfosShow=true">
|
|
|
+ 查看全部<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="infos">
|
|
|
+ <view class="item" style="width: 30%;">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备类型
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.deviceTypeN}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="border">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item" style="width: 30%;">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备编号
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.deviceNo}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="border">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item" style="width: 30%;">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备地址
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.installationAddressSimple}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 设备信息弹窗 -->
|
|
|
+
|
|
|
+ <view class="equipment-popup">
|
|
|
+ <u-popup v-model="equipmentInfosShow" mode="bottom" border-radius="12">
|
|
|
+ <view class="content">
|
|
|
+ <view class="headline">
|
|
|
+ 设备信息
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备名称
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备类型
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.deviceTypeN}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备编号
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.deviceNo}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 产权单位
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.companyFullName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 设备地址
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ <span>{{meterDetail.installationAddress}}</span>
|
|
|
+ <image class="img" v-if="false" src="@/assets/img/riFill-navigation-fill 1.svg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 地址简称
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ <span>{{meterDetail.installationAddressSimple}}</span>
|
|
|
+ <image class="img" v-if="false" src="@/assets/img/riFill-navigation-fill 1.svg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 使用单位
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.customer}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 启用时间
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{meterDetail.enablingTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <button class="get" @click="equipmentInfosShow=false">知道了</button>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ parseUnixTime,
|
|
|
+ beforeTimeStamp,
|
|
|
+ getWeek,newDate
|
|
|
+ } from '@/apis/utils'
|
|
|
+
|
|
|
+ import * as echarts from "echarts";
|
|
|
+ import * as API from '@/apis/pagejs/water.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryDay:'',
|
|
|
+ title:"查询中",
|
|
|
+ myChart:null,
|
|
|
+ showTop: [0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
+ fee:0,
|
|
|
+ topDate:[],
|
|
|
+
|
|
|
+ waterMeterList:[],
|
|
|
+
|
|
|
+ FormData:{
|
|
|
+
|
|
|
+ },
|
|
|
+ FormData2:{
|
|
|
+
|
|
|
+ },
|
|
|
+ endYear:'',
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: true,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ },
|
|
|
+ tabsFrom: {
|
|
|
+ show1: false,
|
|
|
+ show1Index:0,
|
|
|
+ show2Index:'',
|
|
|
+ show2: false,
|
|
|
+ show1Text: "全部类型",
|
|
|
+ show2Text: "全部时间",
|
|
|
+ selector1:[
|
|
|
+ {
|
|
|
+ label: '全部类型',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '线上充值',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '线下充值',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ background: {
|
|
|
+ backgroundColor: '#1677FF',
|
|
|
+ },
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name: '本月',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ name: '今日',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ name: '上月',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ name: '本年',
|
|
|
+ disabled: false
|
|
|
+ }, {
|
|
|
+ id:0,
|
|
|
+ name: '合计',
|
|
|
+ disabled: false
|
|
|
+ }, {
|
|
|
+ id:10,
|
|
|
+ name: '指定月份',
|
|
|
+ disabled: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ sumQuantity:0,
|
|
|
+ sumFee:0,
|
|
|
+
|
|
|
+ // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
|
|
+ value: '4',
|
|
|
+ oldvalue: '4',
|
|
|
+ intervalId: null, // 用于存储间隔ID
|
|
|
+ intervalReady: true, // 用于存储间隔ID
|
|
|
+ electricityNum: 0, //电量统计
|
|
|
+ electricity:{
|
|
|
+
|
|
|
+ },
|
|
|
+ meterDetail:{
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ waterId:"",
|
|
|
+ equipmentInfosShow:false,
|
|
|
+ componentsMeterList:[],
|
|
|
+ listTab:[
|
|
|
+ {
|
|
|
+ name: '电表'
|
|
|
+ }, {
|
|
|
+ name: '水表'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ current:1
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ showtab:false,
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ this.init(op)
|
|
|
+
|
|
|
+ // for(var i =4;i>=0;i--){
|
|
|
+ // var time=new Date(beforeTimeStamp(i,new Date()));
|
|
|
+ // this.topDate.push({
|
|
|
+ // num:time.getDate(),
|
|
|
+ // week:i==0?'今日':getWeek(time),
|
|
|
+ // today:i,
|
|
|
+ // queryDate:parseUnixTime(time, '{y}-{m}-{d}')
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
+ // console.log( this.topDate)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clearTimer(); // 组件销毁前清除定时器
|
|
|
+ this.intervalReady=false;
|
|
|
+ console.log( "组件销毁前清除定时器")
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ initSet(id,list){
|
|
|
+ this.waterId=id
|
|
|
+ this.componentsMeterList=list;
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ this.current=1
|
|
|
+ this.endYear=new Date().getFullYear()
|
|
|
+ this.FormData.queryDate=parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+ this.FormData2.queryDate=parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ this.FormData.type=4
|
|
|
+ this.getcomponentsMeterList();
|
|
|
+ },
|
|
|
+ clearTimer() {
|
|
|
+ if (this.intervalId) {
|
|
|
+ clearInterval(this.intervalId); // 清除定时器
|
|
|
+ this.intervalId = null; // 重置定时器ID
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startInterval(){
|
|
|
+ this.clearTimer(); // 组件销毁前清除定时器
|
|
|
+ this.intervalId = setInterval(() => {
|
|
|
+ // 每隔5秒运行的代码
|
|
|
+ console.log('这段代码每隔5秒运行一次');
|
|
|
+ this.getTimeSlotStatistics(true)
|
|
|
+ this.getElectricityStatistics(true)
|
|
|
+ }, 60*1000);
|
|
|
+ },
|
|
|
+ titleCk(){
|
|
|
+ if(this.componentsMeterList.length>1){
|
|
|
+ this.tabsFrom.show1=true
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ selector1confirm(e){
|
|
|
+
|
|
|
+ var index=e[0]
|
|
|
+ this.tabsFrom.show1Index=index
|
|
|
+ this.tabsFrom.show1Text=this.tabsFrom.selector1[index].label
|
|
|
+ this.title=this.tabsFrom.selector1[index].label
|
|
|
+
|
|
|
+ this.FormData.meterId=this.tabsFrom.selector1[index].value
|
|
|
+ this.FormData.queryDate=parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+ this.FormData2.meterId=this.tabsFrom.selector1[index].value
|
|
|
+ this.FormData2.queryDate=parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ this.FormData.type=4
|
|
|
+ this.value="4"
|
|
|
+ this.electricity=this.componentsMeterList[index]
|
|
|
+
|
|
|
+ this.getMeterDetails()
|
|
|
+ this.getTimeSlotStatistics()
|
|
|
+ this.getElectricityStatistics()
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ callback(){
|
|
|
+ if(this.componentsMeterList.length==0&&this.waterMeterList.length==0){
|
|
|
+ uni.showModal({
|
|
|
+ title:"提示",
|
|
|
+ content:"未绑定设备,请联系管理员！",
|
|
|
+ showCancel:false,
|
|
|
+ success() {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ queryDate(queryTime,day){
|
|
|
+
|
|
|
+ if(day){
|
|
|
+ this.FormData2.queryDate=queryTime;
|
|
|
+ //this.FormData2.type =day?"9":"10"
|
|
|
+ //this.value="-1"
|
|
|
+
|
|
|
+ this.getTimeSlotStatistics()
|
|
|
+
|
|
|
+ }else{
|
|
|
+
|
|
|
+ this.FormData.queryDate=queryTime+"-01";
|
|
|
+ this.FormData.type ="10"
|
|
|
+ //this.value="-1"
|
|
|
+ this.list[5].name = queryTime;
|
|
|
+
|
|
|
+ this.getElectricityStatistics()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ getElectricityStatistics(interval){
|
|
|
+ // if(!this.intervalReady){
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ if(!interval){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ var obj={
|
|
|
+ ...this.FormData
|
|
|
+ }
|
|
|
+ if(obj.type!=10){
|
|
|
+ this.list[5].name = '指定月份';
|
|
|
+ }
|
|
|
+
|
|
|
+ API.waterQuantityStatistics(obj).then((response) => {
|
|
|
+ if(!interval){
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
|
|
|
+ var electricity = response.data.waterConsumption.consumption+"";
|
|
|
+ //electricity="12345.12"
|
|
|
+ this.electricityNum = response.data.waterConsumption.consumption;
|
|
|
+ this.fee = response.data.waterConsumption.fee;
|
|
|
+
|
|
|
+ if (electricity) {
|
|
|
+ var sz = electricity.split(".")
|
|
|
+ var str1 = sz[0];
|
|
|
+ var str2 = [];
|
|
|
+ if (sz.length > 1) {
|
|
|
+ str2 = sz[1];
|
|
|
+ try{
|
|
|
+ this.showTop[6] = str2[0];
|
|
|
+ this.showTop[7] = str2[1];
|
|
|
+ console.log(str2[1])
|
|
|
+ if(this.showTop[7]==undefined){
|
|
|
+ this.showTop[7]=0
|
|
|
+ }
|
|
|
+ if(this.showTop[6]==undefined){
|
|
|
+ this.showTop[6]=0
|
|
|
+ }
|
|
|
+ }catch(e){
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ var j = 0;
|
|
|
+ for (var i in str1) {
|
|
|
+ if (i != undefined) {
|
|
|
+ this.showTop[5 - str1.length + j + 1] = str1[i]
|
|
|
+ }
|
|
|
+ j++;
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ //this.componentsMeterList=response.data.meterList
|
|
|
+ if(!interval){
|
|
|
+ this.startInterval(); // 组件挂载后开始间隔
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getMeterDetails(){
|
|
|
+
|
|
|
+ API.meterDetails({
|
|
|
+ meterId:this.FormData.meterId
|
|
|
+ }).then((response) => {
|
|
|
+ this.meterDetail=response.data.meter;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTimeSlotStatistics(interval){
|
|
|
+
|
|
|
+ if(!interval){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.queryDay=parseUnixTime(newDate(this.FormData2.queryDate), '{y}年{m}月{d}日');
|
|
|
+
|
|
|
+ API.timePeriodStatistics(this.FormData2).then((response) => {
|
|
|
+
|
|
|
+ if(!interval){
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.hourMap=response.data.timeConsumptionList
|
|
|
+ this.sumQuantity=0
|
|
|
+ var sum=0
|
|
|
+ for(var i in this.hourMap){
|
|
|
+ var item= this.hourMap[i]
|
|
|
+ sum+=item.consumption
|
|
|
+ }
|
|
|
+ this.sumQuantity= sum.toFixed(2);
|
|
|
+
|
|
|
+ // this.sumQuantity=response.data.waterConsumption.consumption
|
|
|
+ // this.sumFee=response.data.waterConsumption.fee
|
|
|
+
|
|
|
+
|
|
|
+ this.getPle(this.hourMap,interval)
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPle(list,interval){
|
|
|
+
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('pieEchartsWater'),null,{
|
|
|
+ width:uni.upx2px(700),height:uni.upx2px(480)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(!interval){
|
|
|
+ this.myChart.clear();
|
|
|
+ }
|
|
|
+
|
|
|
+ var data1=[];
|
|
|
+ var data2=[];
|
|
|
+
|
|
|
+ for(var i in list){
|
|
|
+ data1.push(i)
|
|
|
+ data2.push(list[i].consumption)
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ var axisLabel={
|
|
|
+ rotate:40,
|
|
|
+ interval:0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(data1.length<4){
|
|
|
+
|
|
|
+ axisLabel={
|
|
|
+
|
|
|
+ interval:0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var headitemby=""
|
|
|
+ var showkey = "";
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: (value) => {
|
|
|
+
|
|
|
+ var name = value[0].name;
|
|
|
+ var obj=list[name]
|
|
|
+ var text= `<p>${name}</p>`
|
|
|
+
|
|
|
+ if(this.meterDetail.price){
|
|
|
+ text += `<p>水价：`+this.meterDetail.price+`元/吨</p>`
|
|
|
+ }
|
|
|
+ if (obj.consumption != undefined) {
|
|
|
+ text += `<p>用水量：${obj.consumption} m³</p>`
|
|
|
+ //text += `<p>平均水量：${obj.consumptionAverage} m³</p>`
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (obj.amount != undefined) {
|
|
|
+ text += ` <p>水费：${obj.amount}元</p>`
|
|
|
+ }
|
|
|
+ return text
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 5,
|
|
|
+ right: 10,
|
|
|
+ bottom: 20,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+
|
|
|
+ axisLabel: axisLabel,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '用水量',
|
|
|
+ data: data2,
|
|
|
+ type: 'bar',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: '#5C7BD9'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ console.log(option)
|
|
|
+ this.myChart.setOption(option);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ switchBtnApiMethod(node,key){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.remoteSwitch({
|
|
|
+ meterId:node.id,
|
|
|
+ enabled:key
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ node.switchStatus=key
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ switchBtnApi(node,key){
|
|
|
+ uni.showModal({
|
|
|
+ confirmColor:`${key?'#3CC51F':'red'}`,
|
|
|
+ confirmText:`${key?'开启':'关闭'}`,
|
|
|
+ content: `确认是否要"${key?'开启':'关闭'}"${node.name}`,
|
|
|
+ title: "提示",
|
|
|
+ success:res=> {
|
|
|
+ if(res.confirm){
|
|
|
+ this.switchBtnApiMethod(node,key);
|
|
|
+ }else{
|
|
|
+ node.switchStatus=!key
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(node,key)
|
|
|
+ },
|
|
|
+ getWaterMeterList(){
|
|
|
+ API_water.waterMeterList().then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.waterMeterList=response.data.meterList
|
|
|
+ this.callback()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getcomponentsMeterList(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ console.log(this.componentsMeterList.length)
|
|
|
+ //API.componentsMeterList().then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ //this.componentsMeterList=response.data.meterList
|
|
|
+ if(this.componentsMeterList.length){
|
|
|
+ var index=0;
|
|
|
+
|
|
|
+ for(var i in this.componentsMeterList){
|
|
|
+ var obj=this.componentsMeterList[i]
|
|
|
+ if(obj.id==this.waterId){
|
|
|
+ index=i
|
|
|
+ this.tabsFrom.show1Index=i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.electricity=this.componentsMeterList[index];
|
|
|
+
|
|
|
+ this.FormData.meterId=this.componentsMeterList[index].id
|
|
|
+ this.FormData2.meterId=this.componentsMeterList[index].id
|
|
|
+
|
|
|
+ this.title=this.componentsMeterList[index].name
|
|
|
+ // {
|
|
|
+ // label: '全部类型',
|
|
|
+ // value: '',
|
|
|
+ // }
|
|
|
+ this.tabsFrom.selector1=[]
|
|
|
+ this.tabsFrom.selector1=this.componentsMeterList.map(item=>{
|
|
|
+ return {
|
|
|
+ label:item.name,
|
|
|
+ value:item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getMeterDetails();
|
|
|
+ this.getTimeSlotStatistics()
|
|
|
+ this.getElectricityStatistics()
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //this.getWaterMeterList()
|
|
|
+
|
|
|
+ // }).catch(error => {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: error,
|
|
|
+ // icon: "none"
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ selector2confirm(e){
|
|
|
+ this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
|
|
|
+
|
|
|
+ this.tabsFrom.show2Index=e.year+"-"+e.month
|
|
|
+ if(e.day){
|
|
|
+ this.tabsFrom.show2Text+=e.day+"日"
|
|
|
+ this.tabsFrom.show2Index+='-'+e.day
|
|
|
+
|
|
|
+ this.queryDate(this.tabsFrom.show2Index,true)
|
|
|
+ }else{
|
|
|
+ this.queryDate(this.tabsFrom.show2Index,false)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ selector2reset(e){
|
|
|
+ console.log(e)
|
|
|
+ this.tabsFrom.show2Text='全部时间'
|
|
|
+ this.tabsFrom.show2Index='';
|
|
|
+
|
|
|
+ if(this.params.day){
|
|
|
+ this.FormData2.queryDate=parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+ this.getTimeSlotStatistics()
|
|
|
+ }else{
|
|
|
+ this.oldvalue="4";
|
|
|
+ this.selector2cancel()
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 选中某个单选框时，由radio时触发
|
|
|
+ radioChange(e) {
|
|
|
+ //console.log(e);
|
|
|
+ },
|
|
|
+ // 选中任一radio时，由radio-group触发
|
|
|
+ selector2cancel(){
|
|
|
+
|
|
|
+ this.value=this.oldvalue;
|
|
|
+ // this.FormData.type=this.value
|
|
|
+ // this.getElectricityStatistics()
|
|
|
+ },
|
|
|
+ radioGroupChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.oldvalue= this.FormData.type;
|
|
|
+
|
|
|
+ this.FormData.type=e
|
|
|
+ if(e==10){
|
|
|
+ this.tabsFrom.show2=true
|
|
|
+ this.params.day=false
|
|
|
+ }else{
|
|
|
+ this.getElectricityStatistics()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ }
|
|
|
+ .background-padding-bottom {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ }
|
|
|
+ .background {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.u-border-bottom:after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-nav-slot {
|
|
|
+ margin-right: 32rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .background::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 160%;
|
|
|
+ height: 80px;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ left: -30%;
|
|
|
+ border-radius: 0 0 50% 50%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // // 日期
|
|
|
+ .date-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+
|
|
|
+
|
|
|
+ .item {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.15);
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .date {
|
|
|
+ font-size: 40rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .dot{
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: rgba(255,150,0,1);
|
|
|
+ border-radius: 999px;
|
|
|
+
|
|
|
+ bottom: -5rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-today {
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ position: relative;
|
|
|
+ .date {
|
|
|
+ color: rgba(22, 119, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .week {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 用电量
|
|
|
+ .electricity-consumption {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 40rpx 32rpx 0rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: -48rpx 32rpx 0;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid rgba(255,255,255,1);
|
|
|
+ background: linear-gradient(180deg, rgba(187,216,255,1) 0%,rgba(255,255,255,1) 63%);
|
|
|
+
|
|
|
+ // 统计
|
|
|
+ .statistics-content{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+
|
|
|
+ .statistics-item{
|
|
|
+ width: 300rpx;
|
|
|
+ padding: 24rpx 0 24rpx 24rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(22,119,255,0.3);
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .item-title{
|
|
|
+ color: rgba(22,119,255,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ .img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-title2{
|
|
|
+ color: rgba(129,97,255,1);
|
|
|
+ }
|
|
|
+ .item-value{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+ text{
|
|
|
+ display: inline-block;
|
|
|
+ width: 80%;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .titleUnit{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .titleElectricity{
|
|
|
+ color:#333333 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .spanradius{
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #FF7B00 ;
|
|
|
+ color: #FF7B00 ;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ border-radius: 50%; /* 将正方形变成圆形 */
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .normal{
|
|
|
+ background-color: #00B962 ;
|
|
|
+ color: #00B962 ;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .degree{
|
|
|
+ display: flex;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ .item{
|
|
|
+ margin-right: 6rpx;
|
|
|
+ text-align: center;
|
|
|
+ .item-text{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ }
|
|
|
+ .item-number{
|
|
|
+ margin-top: 24rpx;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background-color: rgba(16,16,16,1);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 72rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .decimal{
|
|
|
+ background-color: #900005;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // .tab {
|
|
|
+ // width: 240rpx;
|
|
|
+ // height: 0;
|
|
|
+ // border-width: 0px 48rpx 72rpx 0px;
|
|
|
+ // border-radius: 8px 8px 0 0;
|
|
|
+ // border-style: none solid solid none;
|
|
|
+ // border-color: transparent transparent #fff;
|
|
|
+ // position: absolute;
|
|
|
+ // top: -72rpx;
|
|
|
+ // left: 0rpx;
|
|
|
+ // right: 0rpx;
|
|
|
+ // color: #101010;
|
|
|
+ // color: rgba(16, 16, 16, 1);
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 72rpx;
|
|
|
+ // z-index: 999;
|
|
|
+ // text-indent: 16rpx;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .tab2 {
|
|
|
+ // width: 240rpx;
|
|
|
+ // height: 0;
|
|
|
+ // border-width: 0px 48rpx 72rpx 0px;
|
|
|
+ // border-radius: 8px 8px 0 0;
|
|
|
+ // border-style: none solid solid none;
|
|
|
+ // border-color: transparent transparent #D4DBE4;
|
|
|
+ // position: absolute;
|
|
|
+ // top: -72rpx;
|
|
|
+ // left: 210rpx;
|
|
|
+ // right: 0rpx;
|
|
|
+ // color: #777777;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 72rpx;
|
|
|
+ // text-indent: 16rpx;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .radio {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ /deep/.u-radio {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ min-width: 25% !important;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ /deep/.u-radio__label{
|
|
|
+ margin-left: 24rpx;
|
|
|
+ font-size: 28rpx; ;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //各时段用电量
|
|
|
+ .electricity-chart {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 0rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ border: 6px solid rgba(182, 212, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ .queryDayClass{
|
|
|
+ border: 1px solid #999;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart {
|
|
|
+ width: 100%;
|
|
|
+ //height: 440rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 440rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 设备信息弹窗
|
|
|
+ .equipment-popup {
|
|
|
+
|
|
|
+ .content {
|
|
|
+
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ .item:last-of-type {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ line-height: 48rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: #666666;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ margin-left: 96rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .get {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 异常
|
|
|
+ .abnormal {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ border: 6px solid rgba(182, 212, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: #838383;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .details {
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 能源监测
|
|
|
+ .energy-inspection,.data-analysis {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid {
|
|
|
+ .icon {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: rgba(35, 186, 178, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon2{
|
|
|
+ background-color: rgba(42,186,72,1);
|
|
|
+ }
|
|
|
+ .icon3{
|
|
|
+ background-color: rgba(78,96,246,1);
|
|
|
+ }
|
|
|
+ .icon4{
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ }
|
|
|
+ .icon5{
|
|
|
+ background-color: rgba(35,186,178,1);
|
|
|
+ }
|
|
|
+ .icon6{
|
|
|
+ background-color: rgba(42,186,72,1);
|
|
|
+ }
|
|
|
+ .icon7{
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ }
|
|
|
+ .icon8{
|
|
|
+ background-color: rgba(35,186,178,1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-text {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-title{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(182, 212, 255, 1);
|
|
|
+ border: 6px solid rgba(22, 119, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+ .equipment-information {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 0rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: #838383;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 440rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 440rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ padding: 0 32rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .border {
|
|
|
+ margin: auto 0;
|
|
|
+ height: 70rpx;
|
|
|
+ width: 2rpx;
|
|
|
+ background-color: rgba(204, 204, 204, 1);
|
|
|
+ ;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 远程控制电源开关
|
|
|
+ .control{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ .text{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ img{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin