|
|
@@ -0,0 +1,1431 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view
|
|
|
+ :class="{
|
|
|
+ backgroundref:ref
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- 日期选择器 -->
|
|
|
+ <u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
|
+ mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @cancel="selector2cancel"
|
|
|
+ @reset="selector2reset">
|
|
|
+ </u-picker-select>
|
|
|
+
|
|
|
+ <!-- <view class="navbar-c">
|
|
|
+ <view class="back" @click="backDataMonitoringList">
|
|
|
+ <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ {{tabsFrom.title}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <u-navbar :title="tabsFrom.title" title-color="#101010">
|
|
|
+ </u-navbar>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 设备选择器 -->
|
|
|
+ <u-select title="设备选择" v-model="tabsFrom.show1" :list="tabsFrom.selector1"
|
|
|
+ @confirm="selector1confirm" cancel-text="重置" @cancel="selector1cancel">
|
|
|
+ </u-select>
|
|
|
+
|
|
|
+ <!-- 用电量 -->
|
|
|
+ <view class="electricity-consumption" v-if="false">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 统计 -->
|
|
|
+ <view class="statistics-content">
|
|
|
+ <view class="statistics-item"
|
|
|
+ @click="gotoUrl('/pages/equipmentDataMonitoring/electricityConsumptionDetail?id='
|
|
|
+ +FormData.meterId+'&name='+tabsFrom.title+'&type='+FormData.type)">
|
|
|
+ <view class="item-title">
|
|
|
+ <image class="img" src="@/assets/img/meterStatistics@3x.png"></image>电量统计(度)
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text>{{electricity}}</text> <u-icon name="arrow-right" 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="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="electricity-chart" >
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 用水量 (立方米)
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="more" @click="tabsFrom.show2=true,params.day=true">
|
|
|
+ {{queryDay}}<u-icon name="arrow-down" color="#bbbbbb"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content"
|
|
|
+ style="display: flex;justify-content: center;margin: 40px 0;"
|
|
|
+ v-if="hourMap==null">
|
|
|
+
|
|
|
+ <div class="uni-toast" style="display: flex;font-size: 60rpx; color: rgb(192, 196, 204);" >
|
|
|
+ <i class="uni-icon_toast uni-loading"
|
|
|
+ style="
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+
|
|
|
+ "
|
|
|
+ ></i><p class="uni-toast__content"> </p>加载中...</div>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="chart">
|
|
|
+ <view id="barEcharts" style="min-height:440rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="total" v-if="false" >
|
|
|
+ <view class="total-item">
|
|
|
+ 电量合计：{{sumQuantity}}度
|
|
|
+ </view>
|
|
|
+ <view class="total-item">
|
|
|
+ 电费合计：{{sumFee}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 异常告警 -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ parseUnixTime,
|
|
|
+ beforeTimeStamp,
|
|
|
+ getWeek
|
|
|
+ } from '@/apis/utils'
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import * as API_water from '@/apis/pagejs/water.js'
|
|
|
+
|
|
|
+ import * as API from '@/apis/pagejs/index.js'
|
|
|
+ import * as API_energyManage from '@/apis/pagejs/energyManage.js'
|
|
|
+
|
|
|
+ import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
|
|
|
+ // import * as WxJsApi from '@/apis/utils/wxJsApi.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ meterDetail: {}, //设备信息
|
|
|
+ electricity: 0, //电量统计
|
|
|
+ fee: 0, //电费统计
|
|
|
+ abnormalRecordsList: [], //异常list
|
|
|
+ companyId: '', //企业id
|
|
|
+ meterId: '', //设备id
|
|
|
+ titleName: '',
|
|
|
+ clickType: -1,
|
|
|
+ sumQuantity: 0,
|
|
|
+ sumFee: 0,
|
|
|
+ equipmentInfosShow: false,
|
|
|
+ kWhList: [],
|
|
|
+ queryDay: '',
|
|
|
+ showTop: [0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
+ FormData: {
|
|
|
+ queryDate: '',
|
|
|
+ meterId: '',
|
|
|
+ type: 0
|
|
|
+ },
|
|
|
+ codes:"",
|
|
|
+ FormData2: {
|
|
|
+ queryDate: '',
|
|
|
+ meterId: ''
|
|
|
+ },
|
|
|
+ myChart: null,
|
|
|
+ endYear: '',
|
|
|
+ equipmentShow: false,
|
|
|
+ multiSelector: [],
|
|
|
+ equipmentList: [],
|
|
|
+ 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
|
|
|
+ }],
|
|
|
+ value: '4',
|
|
|
+ intervalId: null, // 用于存储间隔ID
|
|
|
+ intervalReady: true, // 用于存储间隔ID
|
|
|
+ ref:false,
|
|
|
+ dtuInfo:{},
|
|
|
+ hourMap:null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+
|
|
|
+ this.init(op)
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // WxJsApi.getWxConfig(['getLocation', 'openLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
+ // // //(res)
|
|
|
+ // }).catch(error => {
|
|
|
+ // //(res)
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clearTimer(); // 组件销毁前清除定时器
|
|
|
+ this.intervalReady = false;
|
|
|
+ //console.log("组件销毁前清除定时器")
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(op){
|
|
|
+
|
|
|
+ if (op.id) {
|
|
|
+
|
|
|
+ this.ref=op.ref;
|
|
|
+ this.FormData.meterId = op.id;
|
|
|
+ this.FormData2.meterId = op.id;
|
|
|
+ this.tabsFrom.title = this.replaceLastTwoWords(op.name);
|
|
|
+ this.meterId = op.id;
|
|
|
+ this.titleName = this.replaceLastTwoWords(op.name);
|
|
|
+ this.companyId = op.companyId;
|
|
|
+
|
|
|
+ }
|
|
|
+ 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.getElectricityStatistics();
|
|
|
+ this.getTimeSlotStatistics();
|
|
|
+ //this.getCompanyInfoList();
|
|
|
+ //this.getAbnormalAlarmRecord();
|
|
|
+ //this.getMeterDetails(this.meterId);
|
|
|
+ },
|
|
|
+
|
|
|
+ switchBtnApiMethod(node,key){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API_energyManage.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?'开启':'关闭'}"${this.replaceLastTwoWords(node.name)}`,
|
|
|
+ title: "提示",
|
|
|
+ success:res=> {
|
|
|
+ if(res.confirm){
|
|
|
+ this.switchBtnApiMethod(node,key);
|
|
|
+ }else{
|
|
|
+ node.switchStatus=!key
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(node,key)
|
|
|
+ },
|
|
|
+ toMeterLocation() {
|
|
|
+ // WxJsApi.openLocation({
|
|
|
+ // latitude: parseFloat(this.meterDetail.latitude), //目的地latitude
|
|
|
+ // longitude: parseFloat(this.meterDetail.longitude), //目的地longitude
|
|
|
+ // name: this.meterDetail.name,
|
|
|
+ // address: this.meterDetail.installationAddress,
|
|
|
+ // scale: 15, //地图缩放大小，可根据情况具体调整
|
|
|
+ // success(res) {
|
|
|
+ // uni.hideLoading()
|
|
|
+ // },
|
|
|
+ // complete() {
|
|
|
+ // // uni.hideLoading()
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ getMeterDetails(meterId) {
|
|
|
+ return
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API_electricityMeter.meterDetails({
|
|
|
+ meterId: meterId
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.meterDetail = res.data.meter;
|
|
|
+ this.dtuInfo = res.data.dtuInfo;
|
|
|
+ this.meterDetail.name=this.replaceLastTwoWords(this.meterDetail.name)
|
|
|
+ this.codes =this.carhelp.getPersonInfo().codes;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clearTimer() {
|
|
|
+ if (this.intervalId) {
|
|
|
+ clearInterval(this.intervalId); // 清除定时器
|
|
|
+ this.intervalId = null; // 重置定时器ID
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startInterval() {
|
|
|
+ return
|
|
|
+ this.clearTimer(); // 组件销毁前清除定时器
|
|
|
+ this.intervalId = setInterval(() => {
|
|
|
+ // 每隔5秒运行的代码
|
|
|
+ // console.log('这段代码每隔5秒运行一次');
|
|
|
+ this.getElectricityStatistics(true)
|
|
|
+ this.getTimeSlotStatistics(true)
|
|
|
+ }, 60000);
|
|
|
+ },
|
|
|
+ gotoInfo(path, type, name) {
|
|
|
+ if (!this.FormData.meterId) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "未查询到电表",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/equipmentDataMonitoring/" + path + "?id=" + this.FormData.meterId + "&type=" + type +
|
|
|
+ "&typeName=" + name+"&title="+this.tabsFrom.title
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 异常告警记录
|
|
|
+ getAbnormalAlarmRecord() {
|
|
|
+ var queryDate = parseUnixTime(new Date(), '{y}-{m}');
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.alarmRecord({
|
|
|
+ queryDate: queryDate,
|
|
|
+ configId: '',
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 2,
|
|
|
+ companyId: this.companyId,
|
|
|
+ meterId: this.meterId
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.abnormalRecordsList = res.data.data;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ titleCk() {
|
|
|
+ if(this.tabsFrom.selector1.length){
|
|
|
+ this.tabsFrom.show1 = true
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ selector1confirm(e) {
|
|
|
+ console.log(e)
|
|
|
+ // var index = e[2];
|
|
|
+ // this.tabsFrom.show1Index = index;
|
|
|
+ if (e[2].value != null) {
|
|
|
+ this.tabsFrom.show1Text = e[2].label;
|
|
|
+ this.tabsFrom.title = e[2].label;
|
|
|
+
|
|
|
+ this.FormData.meterId = e[2].value;
|
|
|
+ this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
+ this.FormData2.meterId = e[2].value;
|
|
|
+ this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
+ //this.meterId =e[2].value;
|
|
|
+ this.FormData.type = 4;
|
|
|
+ this.value = '4';
|
|
|
+
|
|
|
+ this.getTimeSlotStatistics();
|
|
|
+ this.getElectricityStatistics();
|
|
|
+ this.getMeterDetails(e[2].value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selector1cancel() {
|
|
|
+ this.tabsFrom.show1Text = this.titleName;
|
|
|
+ this.tabsFrom.title = this.titleName;
|
|
|
+
|
|
|
+ this.FormData.meterId = this.meterId;
|
|
|
+ this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
+ this.FormData2.meterId = this.meterId;
|
|
|
+ this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
+
|
|
|
+ this.FormData.type = 4;
|
|
|
+ this.value = '4';
|
|
|
+
|
|
|
+ this.getTimeSlotStatistics();
|
|
|
+ this.getElectricityStatistics();
|
|
|
+ this.getMeterDetails(this.meterId);
|
|
|
+ },
|
|
|
+ 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 = "10";
|
|
|
+ this.list[5].name = queryTime;
|
|
|
+
|
|
|
+ this.getElectricityStatistics();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCompanyInfoList() {
|
|
|
+
|
|
|
+ },
|
|
|
+ getTimeSlotStatistics(interval) {
|
|
|
+ if (!interval) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
|
|
|
+ API_water.timeSlotStatistics(this.FormData2).then((response) => {
|
|
|
+ if (!interval) {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ this.hourMap = response.data.hourMap;
|
|
|
+ // this.sumQuantity = response.data.kwhMap.kwh;
|
|
|
+ // this.sumFee = response.data.kwhMap.fee;
|
|
|
+
|
|
|
+ this.getBarCharts(this.hourMap, interval);
|
|
|
+
|
|
|
+ if (!interval) {
|
|
|
+ this.startInterval(); // 组件挂载后开始间隔
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getElectricityStatistics(interval) {
|
|
|
+ return
|
|
|
+ if (!interval) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var obj = {
|
|
|
+ ...this.FormData
|
|
|
+ }
|
|
|
+
|
|
|
+ if (obj.type != 10) {
|
|
|
+ this.list[5].name = '指定月份';
|
|
|
+ }
|
|
|
+
|
|
|
+ // if(obj.type==10){
|
|
|
+ // obj.queryDate+="-01"
|
|
|
+ // }
|
|
|
+ API_water.electricityStatistics(obj).then((response) => {
|
|
|
+ if (!interval) {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
|
|
|
+ var electricity = response.data.kwhMap.kwh + "";
|
|
|
+ this.electricity = response.data.kwhMap.kwh;
|
|
|
+ this.fee = response.data.kwhMap.fee;
|
|
|
+
|
|
|
+ if (electricity) {
|
|
|
+ var sz = electricity.split(".")
|
|
|
+ var str1 = sz[0];
|
|
|
+ var str2 = [];
|
|
|
+ if (sz.length > 1) {
|
|
|
+ str2 = sz[1];
|
|
|
+ this.showTop[7] = str2[0];
|
|
|
+ }
|
|
|
+ var j = 0;
|
|
|
+ for (var i in str1) {
|
|
|
+ if (i != undefined) {
|
|
|
+ this.showTop[6 - str1.length + j + 1] = str1[i]
|
|
|
+ }
|
|
|
+ j++;
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!interval) {
|
|
|
+ this.startInterval(); // 组件挂载后开始间隔
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getBarCharts(list, interval) {
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
|
|
|
+ // width: uni.upx2px(700),
|
|
|
+ height: uni.upx2px(480)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!interval) {
|
|
|
+ this.myChart.clear();
|
|
|
+ }
|
|
|
+
|
|
|
+ var data1 = [];
|
|
|
+ var data2 = [];
|
|
|
+ // var sumQuantity=0
|
|
|
+ for (var i in list) {
|
|
|
+ data1.push(i)
|
|
|
+ data2.push(list[i].consumption)
|
|
|
+ // sumQuantity+=list[i]
|
|
|
+
|
|
|
+ }
|
|
|
+ var axisLabel = {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data1.length < 4) {
|
|
|
+ axisLabel = {
|
|
|
+
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.sumQuantity = sumQuantity.toFixed(2);
|
|
|
+ var headitemby = "";
|
|
|
+ var showkey = "";
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: (value) => {
|
|
|
+
|
|
|
+ var name = value[0].name;
|
|
|
+ var obj=list[name]
|
|
|
+ var text= `<p>${name}</p>`
|
|
|
+
|
|
|
+
|
|
|
+ if (obj.consumption != undefined) {
|
|
|
+ text += `<p>用水量：${obj.consumption}</p>`
|
|
|
+ text += `<p>单位：立方米</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);
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selector2cancel() {
|
|
|
+ if(this.clickType != -1) {
|
|
|
+
|
|
|
+ }
|
|
|
+ this.value = this.clickType;
|
|
|
+ },
|
|
|
+ selector2reset(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.tabsFrom.show2Text = '全部时间'
|
|
|
+ this.tabsFrom.show2Index = '';
|
|
|
+
|
|
|
+ if (e.day) {
|
|
|
+ this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
+ this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
|
|
|
+ this.getTimeSlotStatistics();
|
|
|
+ } else {
|
|
|
+ this.clickType="4"
|
|
|
+ this.FormData.type = this.clickType;
|
|
|
+ this.value = this.clickType;
|
|
|
+
|
|
|
+ this.getElectricityStatistics();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中某个单选框时，由radio时触发
|
|
|
+ radioChange(e) {
|
|
|
+ console.log(`选择前的值: ${this.value}`);
|
|
|
+
|
|
|
+ },
|
|
|
+ // 选中任一radio时，由radio-group触发
|
|
|
+ radioGroupChange(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.clickType = this.FormData.type;
|
|
|
+
|
|
|
+ this.FormData.type = e;
|
|
|
+ if (e == 10) {
|
|
|
+ this.tabsFrom.show2 = true;
|
|
|
+ this.params.day = false;
|
|
|
+ } else {
|
|
|
+ this.list[5].name = '指定月份'
|
|
|
+ this.getElectricityStatistics();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backDataMonitoringList() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.u-select__header__title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-c {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .back {
|
|
|
+ z-index: 999;
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-d {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ top: -240rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .back {
|
|
|
+ z-index: 999;
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // /deep/.uicon-nav-back {
|
|
|
+ // color: #fff !important;
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ .background {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ padding-top: 88rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ //padding-bottom: 100rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ /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;
|
|
|
+ bottom:-39rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx; /* 弧形的高度 */
|
|
|
+ background-color: rgba(22, 119, 255, 1); /* 弧形的颜色 */
|
|
|
+ border-radius: 50%; /* 创建圆形 */
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-top-right-radius: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .backgroundref{
|
|
|
+ height: 220rpx;
|
|
|
+ background-color: #f2f4f6;
|
|
|
+
|
|
|
+ }
|
|
|
+ .backgroundref::after {
|
|
|
+ background-color: #f2f4f6;
|
|
|
+ }
|
|
|
+ // // 日期
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size: 40rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: rgba(255, 150, 0, 1);
|
|
|
+ border-radius: 999px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -5rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用电量
|
|
|
+ .electricity-consumption {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 32rpx 32rpx 0rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: -188rpx 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 {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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; ;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 远程控制电源开关
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //各时段用电量
|
|
|
+ .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(182, 212, 255, 1);
|
|
|
+ border: 6px solid rgba(22, 119, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ margin-left: auto;
|
|
|
+ border: 1px solid rgba(187,187,187,1);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 440rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(182, 212, 255, 1);
|
|
|
+ border: 6px solid rgba(22, 119, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 异常告警
|
|
|
+ .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;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(182, 212, 255, 1);
|
|
|
+ border: 6px solid rgba(22, 119, 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;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .more{
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 能源监测
|
|
|
+ .energy-inspection,
|
|
|
+ .data-analysis {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(182, 212, 255, 1);
|
|
|
+ border: 6px solid rgba(22, 119, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon9 {
|
|
|
+ background-color: rgba(42, 186, 72, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-text {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 设备信息弹窗
|
|
|
+ .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: 20rpx 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 创建工单
|
|
|
+ .create-order {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: linear-gradient(180.29deg, rgba(255, 124, 112, 1) 0.9%, rgba(255, 79, 63, 1) 100.4%);
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ right: 32rpx;
|
|
|
+ bottom: 64rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin