|
|
@@ -1,1457 +1,1480 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <!-- 导航栏 -->
|
|
|
- <view class="navbar">
|
|
|
- <view class="title">
|
|
|
- 能源中心
|
|
|
- </view>
|
|
|
- <view class="icon" @click="toDataMonitoringList" v-if="codes.indexOf('detector') != -1">
|
|
|
- <image class="img" src="@/assets/img/riLine-equalizer-line.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 标签 -->
|
|
|
- <view class="tabs-box">
|
|
|
- <view class="tabs" :style="{width: companyList.length>4 ? '' : '100%'}">
|
|
|
- <u-tabs :list="merchantList1" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF" bg-color="#1677FF"
|
|
|
- :current="current" @change="change"></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="more" @click="popShow=true" v-if="companyList.length > 4">
|
|
|
- <u-icon name="arrow-down" color="#fff" size="40"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 标签弹出层 -->
|
|
|
- <u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
|
|
|
- <view class="popup-tabs">
|
|
|
- <view class="tabs">
|
|
|
- <u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="tabs-options">
|
|
|
- <view class="item" v-for="(item, index) in merchantList2" :key="index" @click="merchantChange(item,index)">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <view class="main">
|
|
|
- <!-- 统计1 -->
|
|
|
- <view class="statistics-1">
|
|
|
- <view class="item" @click="toDataMonitoringList">
|
|
|
- <view class="item-top">
|
|
|
- <view class="img-box">
|
|
|
- <u-circle-progress active-color="#2979ff" :percent="alarmsPercent" width="88">
|
|
|
- </u-circle-progress>
|
|
|
- </view>
|
|
|
- <view class="number">
|
|
|
- <view class="normal">
|
|
|
- 正常：{{alarmsForm.okNum}}台
|
|
|
- </view>
|
|
|
- <view class="abnormal">
|
|
|
- 异常：{{alarmsForm.errorNum}}台
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 累计 -->
|
|
|
- <view class="total">
|
|
|
- 本月累计报警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item" @click="toWorkOrderManagement()">
|
|
|
- <view class="item-top">
|
|
|
- <view class="img-box">
|
|
|
- <u-circle-progress active-color="#2979ff" :percent="0" width="88">
|
|
|
- </u-circle-progress>
|
|
|
- </view>
|
|
|
- <view class="number">
|
|
|
- <view class="normal">
|
|
|
- 未处理：0
|
|
|
- </view>
|
|
|
- <view class="abnormal">
|
|
|
- 已处理：0
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 累计 -->
|
|
|
- <view class="total">
|
|
|
- 本月累计工单 <text class="total-number">0</text> 条
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 用电量 -->
|
|
|
- <view class="statistics-e statistics" v-if="codes.indexOf('reading') != -1 && kWhList.length != 0">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 用电量 (度)
|
|
|
- </view>
|
|
|
- <view class="change" @click="getPowerConsumption(1)">
|
|
|
- <image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
|
|
|
- <text>换一批</text>
|
|
|
- </view>
|
|
|
- <view class="check-all" @click="toEquipmentElectricity">
|
|
|
- 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="electricity">
|
|
|
- <view class="item" v-for="(item, index) in kWhList" :key="index" @click="toElectronicMonitoring(item)">
|
|
|
-
|
|
|
- <view class="equipment">
|
|
|
- <view class="equipment1 equipment-text-overflow">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
- <view class="equipment2 equipment-text-overflow">
|
|
|
- <view class="companyName">
|
|
|
- {{item.installationAddressSimple}}
|
|
|
- </view>
|
|
|
- <!-- 离线 -->
|
|
|
- <view class="state" v-if="!item.online">
|
|
|
- <text class="off-line"></text>离线
|
|
|
- </view>
|
|
|
- <!-- 在线 -->
|
|
|
- <view class="state state2" v-else>
|
|
|
- <text class="on-line"></text>在线
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="electricity">
|
|
|
- <view class="electricity-item">
|
|
|
- <view class="number">
|
|
|
- {{item.thisDayKwh}}
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- 今日
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="electricity-item">
|
|
|
- <view class="number">
|
|
|
- {{item.thisMonthKwh}}
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- 本月
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="electricity-item">
|
|
|
- <view class="number">
|
|
|
- {{item.lastMonthKwh}}
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- 上月
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 统计2 异常告警记录 -->
|
|
|
- <view class="statistics-2 statistics" v-if="abnormalRecordsList.length != 0">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 异常告警记录
|
|
|
- </view>
|
|
|
- <view class="check-all" @click="gotoUrl('/pages/abnormal/abnormalAlarmRecord?id='+companyId)">
|
|
|
- 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 异常 -->
|
|
|
- <view class="abnormal-item" v-for="(item, index) in abnormalRecordsList" :key="index"
|
|
|
- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)">
|
|
|
- <view class="item-title">
|
|
|
- <!-- <image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image> -->
|
|
|
- <view class="name">
|
|
|
- {{item.configName}}
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- {{item.createTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- <view class="value1">
|
|
|
- {{item.meterName}}
|
|
|
- </view>
|
|
|
- <view class="value2">
|
|
|
- {{item.installationAddressSimple}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 统计3 设备数据监测-->
|
|
|
- <view class="statistics-3 statistics" v-if="codes.indexOf('detector')!=-1 && deviceList.length!=0">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 设备数据监测
|
|
|
- </view>
|
|
|
- <view class="change" @click="getEquipmentDataMonitoring(1)">
|
|
|
- <image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
|
|
|
- <text>换一批</text>
|
|
|
- </view>
|
|
|
- <view class="check-all" @click="toDataMonitoringList">
|
|
|
- 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="monitoring-item" v-for="(item, index) in deviceList" :key="index"
|
|
|
- @click="toElectronicMonitoring(item)">
|
|
|
- <view class="item-title">
|
|
|
- <view class="text1">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="state">
|
|
|
- <view class="state1">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/antFill-alert.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- {{item.temperatureStatus=='1' ? '正常' : '异常'}}
|
|
|
- </view>
|
|
|
- <view class="state2">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/smoke.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- {{item.smokeStatus=='1' ? '正常' : '异常'}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="company-name">
|
|
|
- {{item.installationAddressSimple}}
|
|
|
- <!-- 离线 -->
|
|
|
- <view class="state" v-if="!item.online">
|
|
|
- <text class="off-line"></text>离线
|
|
|
- </view>
|
|
|
- <!-- 在线 -->
|
|
|
- <view class="state state2" v-else>
|
|
|
- <text class="on-line"></text>在线
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 监控信息 -->
|
|
|
- <view class="infos">
|
|
|
- <view class="infos-item">
|
|
|
- <view class="icon">
|
|
|
- 当前电流：
|
|
|
- <!-- <img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" /> -->
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- {{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="infos-item">
|
|
|
- <view class="icon">
|
|
|
- 当前电压：
|
|
|
- <!-- <img src="../../assets/img/voltage.svg" alt="" /> -->
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- {{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="infos-item">
|
|
|
- <view class="icon">
|
|
|
- 当前温度：
|
|
|
- <!-- <img src="../../assets/img/iconPark-thermometer.svg" alt="" /> -->
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- {{item.remoteMonitorRecord.temperatureTop}}℃
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="infos-item">
|
|
|
- <view class="icon">
|
|
|
- 当前功率：
|
|
|
- <!-- <img src="../../assets/img/power.svg" alt="" /> -->
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- {{(item.remoteMonitorRecord.totalPower).toFixed(2)}}kW
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="infos-item">
|
|
|
- <view class="icon">
|
|
|
- 当前功率因数：
|
|
|
- <!-- <img src="../../assets/img/powerFactor.svg" alt="" /> -->
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- {{item.remoteMonitorRecord.dcfTop.toFixed(2)}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="infos-item">
|
|
|
- <view class="icon">
|
|
|
- 平均功率因数：
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- {{item.remoteMonitorRecord.averPowerFactor.toFixed(2)}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!--设备状态-->
|
|
|
- <view class="statistics-4 statistics">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 设备状态
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="chat">
|
|
|
- <view id="pieEcharts" style="min-height:620rpx;">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 故障类型 -->
|
|
|
- <view class="statistics-5 statistics" v-if="false">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 故障类型
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="chat">
|
|
|
- <view id="barEcharts" style="min-height:410rpx;">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 工单处理 -->
|
|
|
- <view class="statistics-6 statistics" v-if="false">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 工单处理
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="chat">
|
|
|
- <view id="lineEcharts" style="min-height:410rpx;">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 异常设备排名 -->
|
|
|
- <view class="statistics statistics-ranking" v-if="false">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 异常设备排名
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 合计 -->
|
|
|
- <view class="total">
|
|
|
- 本年度共有<text> 42</text>次设备异常告警
|
|
|
- </view>
|
|
|
- <view class="ranking-main">
|
|
|
- <view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
|
|
|
- <view class="ranking">
|
|
|
- 1
|
|
|
- </view>
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- <view class="name1">
|
|
|
- 荆鹏软件园01
|
|
|
- </view>
|
|
|
- <view class="name2">
|
|
|
- 荆鹏集团
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="time">
|
|
|
- 5次
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 查看全部排名 -->
|
|
|
- <view class="check-all" @click="gotoUrl('/pages/abnormal/abnormalDeviceRanking')">
|
|
|
- 查看全部排名 <u-icon name="arrow-down" size="24" color="rgba(119,119,119,1)"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <energyCenterTabbar :current="0"></energyCenterTabbar>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import * as API from '@/apis/pagejs/index.js'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- energyCenterTabbar
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- abnormalRecordsList: [], // 异常告警记录
|
|
|
- queryDate: '',
|
|
|
- alarmsPercent: 0,
|
|
|
- alarmsForm: {
|
|
|
- okNum: 0,
|
|
|
- errorNum: 0,
|
|
|
- errorMonthNum: 0
|
|
|
- }, // 累计报警
|
|
|
- companyId: '', // 商户ID
|
|
|
- pageIndexe: 1, // 设备数据检测
|
|
|
- totalPagee: 1,
|
|
|
- deviceList: [],
|
|
|
- pageIndexp: 1, // 用电量
|
|
|
- totalPagep: 1,
|
|
|
- kWhList: [],
|
|
|
- codes: '', // 判断：reading用电量 detector设备数据检测
|
|
|
- merchantList1: [], // 商户
|
|
|
- merchantList2: [],
|
|
|
- companyList: [],
|
|
|
- popShow: false,
|
|
|
- current: 0,
|
|
|
- myLineChart: null, // 图表
|
|
|
- myBarChart: null,
|
|
|
- myPieChart: null,
|
|
|
- intervalId: null, // 用于存储间隔ID
|
|
|
- intervalReady: true, // 用于存储间隔ID
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- var date = new Date();
|
|
|
- var year = date.getFullYear();
|
|
|
- var month = date.getMonth()+1 >= 10 ? date.getMonth()+1 : '0'+(date.getMonth()+1);
|
|
|
- this.queryDate = year + '-' + month;
|
|
|
-
|
|
|
- this.getPowerConsumption(0);
|
|
|
- this.getEquipmentDataMonitoring(0);
|
|
|
- this.getCompanyInfoList();
|
|
|
- this.getAccumulatedAlarms();
|
|
|
- this.getAbnormalAlarmRecord();
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.getfindByOpenId();
|
|
|
- this.getHomePageDeviceStatus();
|
|
|
- // this.getBarCharts();
|
|
|
- // this.getLineCharts();
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.clearTimer(); // 组件销毁前清除定时器
|
|
|
- this.intervalReady=false;
|
|
|
- console.log( "组件销毁前清除定时器")
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clearTimer() {
|
|
|
- if (this.intervalId) {
|
|
|
- clearInterval(this.intervalId); // 清除定时器
|
|
|
- this.intervalId = null; // 重置定时器ID
|
|
|
- }
|
|
|
- },
|
|
|
- startInterval() {
|
|
|
- this.clearTimer(); // 组件销毁前清除定时器
|
|
|
- this.intervalId = setInterval(() => {
|
|
|
- // 每隔5秒运行的代码
|
|
|
- // console.log('这段代码每隔5秒运行一次');
|
|
|
- this.getPowerConsumption(0,true)
|
|
|
- }, 60000);
|
|
|
- },
|
|
|
- merchantChange(item, index) {
|
|
|
- var m = item;
|
|
|
- var n = this.merchantList1[this.current];
|
|
|
- this.merchantList1[this.current] = m;
|
|
|
- this.merchantList2[index] = n;
|
|
|
-
|
|
|
- this.companyId = item.id;
|
|
|
- this.getPowerConsumption(0);
|
|
|
- this.getEquipmentDataMonitoring(0);
|
|
|
- this.getAccumulatedAlarms();
|
|
|
- this.getHomePageDeviceStatus();
|
|
|
- this.getAbnormalAlarmRecord();
|
|
|
-
|
|
|
- this.popShow = false;
|
|
|
- },
|
|
|
- // 单位
|
|
|
- getCompanyInfoList() {
|
|
|
- this.merchantList1 = [];
|
|
|
- this.merchantList2 = [];
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.deviceCompanyList().then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.companyList = response.data.companyInfoList;
|
|
|
- var list = response.data.companyInfoList;
|
|
|
-
|
|
|
- // for (var i = 0; i < list.length; i++) {
|
|
|
- // list[i].name = list[i].fullName;
|
|
|
- // }
|
|
|
- if (list.length > 3) {
|
|
|
- this.merchantList1.push(list.slice(0, 3));
|
|
|
- this.merchantList2.push(list.slice(3));
|
|
|
- } else {
|
|
|
- this.merchantList1 = list;
|
|
|
- }
|
|
|
- if(list.length > 1) {
|
|
|
- this.merchantList1.unshift({
|
|
|
- id: '',
|
|
|
- name: '全部'
|
|
|
- });
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 商户ID
|
|
|
- getfindByOpenId() {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.findByOpenId({
|
|
|
- openId: this.carhelp.getOpenId()
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.codes = response.data.regUser.codes;
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 设备数据监测
|
|
|
- getEquipmentDataMonitoring(pl) {
|
|
|
- this.pageIndexe = this.pageIndexe + pl;
|
|
|
- if (this.pageIndexe > this.totalPagee) {
|
|
|
- this.pageIndexe = 1;
|
|
|
- }
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.homePageDeviceData({
|
|
|
- pageIndex: this.pageIndexe,
|
|
|
- pageSize: 5,
|
|
|
- companyId: this.companyId
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.deviceList = response.data.data;
|
|
|
- this.totalPagee = response.data.totalPage;
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 异常告警记录
|
|
|
- getAbnormalAlarmRecord() {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.alarmRecord({
|
|
|
- queryDate: this.queryDate,
|
|
|
- configId: '',
|
|
|
- pageIndex: 1,
|
|
|
- pageSize: 3,
|
|
|
- companyId: this.companyId
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.abnormalRecordsList = response.data.data;
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 用电量
|
|
|
- getPowerConsumption(pl,interval) {
|
|
|
- this.pageIndexp = this.pageIndexp + pl;
|
|
|
- if (this.pageIndexp > this.totalPagep) {
|
|
|
- this.pageIndexp = 1;
|
|
|
- }
|
|
|
-
|
|
|
- if (!interval) {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- }
|
|
|
- API.homePageKwh({
|
|
|
- pageIndex: this.pageIndexp,
|
|
|
- pageSize: 5,
|
|
|
- companyId: this.companyId
|
|
|
- }).then((response) => {
|
|
|
- if (!interval) {
|
|
|
- uni.hideLoading();
|
|
|
- }
|
|
|
- this.kWhList = response.data.data;
|
|
|
- this.totalPagep = response.data.totalPage;
|
|
|
-
|
|
|
- if(!interval){
|
|
|
- this.startInterval(); // 组件挂载后开始间隔
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 累计工单
|
|
|
- getAccumulatedWorkOrders() {
|
|
|
-
|
|
|
- },
|
|
|
- // 累计报警
|
|
|
- getAccumulatedAlarms() {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.deviceStatus({
|
|
|
- companyId: this.companyId
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.alarmsForm = response.data;
|
|
|
- if(this.alarmsForm.okNum != 0) {
|
|
|
- this.alarmsPercent = this.alarmsForm.okNum / (this.alarmsForm.okNum + this.alarmsForm.errorNum) * 100;
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 工单处理
|
|
|
- getLineCharts() {
|
|
|
- if (!this.myLineChart) {
|
|
|
- this.myLineChart = echarts.init(document.getElementById('lineEcharts'));
|
|
|
- }
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['新增工单', '处理工单', '剩余工单']
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['1日', '2日', '3日', '4日', '5日', '6日']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '新增工单',
|
|
|
- type: 'line',
|
|
|
- data: [2, 1, 0, 1, 3, 0],
|
|
|
- itemStyle: {
|
|
|
- color: '#FF3D00'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '处理工单',
|
|
|
- type: 'line',
|
|
|
- data: [3, 1, 1, 0, 2, 1],
|
|
|
- itemStyle: {
|
|
|
- color: '#FF7B00'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '剩余工单',
|
|
|
- type: 'line',
|
|
|
- data: [5, 2, 1, 1, 5, 1],
|
|
|
- itemStyle: {
|
|
|
- color: '#58A55C'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- this.myLineChart.setOption(option);
|
|
|
- },
|
|
|
- // 故障类型
|
|
|
- getBarCharts() {
|
|
|
- if (!this.myBarChart) {
|
|
|
- this.myBarChart = echarts.init(document.getElementById('barEcharts'));
|
|
|
- }
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {},
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- data: ['一月', '二月', '三月']
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
- type: 'value'
|
|
|
- }],
|
|
|
- barGap: '0',
|
|
|
- series: [{
|
|
|
- name: '温度异常',
|
|
|
- type: 'bar',
|
|
|
- data: [100, 140, 230],
|
|
|
- itemStyle: {
|
|
|
- color: '#FF3D00'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '电压异常',
|
|
|
- type: 'bar',
|
|
|
- data: [150, 100, 200],
|
|
|
- itemStyle: {
|
|
|
- color: '#FF7B00'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '功率因素异常',
|
|
|
- type: 'bar',
|
|
|
- data: [50, 80, 100],
|
|
|
- itemStyle: {
|
|
|
- color: '#FFAE00'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- this.myBarChart.setOption(option);
|
|
|
- },
|
|
|
- // 设备状态
|
|
|
- getHomePageDeviceStatus() {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.homePageDeviceStatus({
|
|
|
- companyId: this.companyId
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- var list = response.data;
|
|
|
- this.getPieCharts(list);
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getPieCharts(list) {
|
|
|
- if (!this.myPieChart) {
|
|
|
- this.myPieChart = echarts.init(document.getElementById('pieEcharts'), null, {
|
|
|
- width: uni.upx2px(700),
|
|
|
- height: uni.upx2px(620)
|
|
|
- });
|
|
|
- }
|
|
|
- this.myPieChart.clear();
|
|
|
-
|
|
|
- var data = [{
|
|
|
- value: 1,
|
|
|
- name: '温度异常',
|
|
|
- itemStyle: {
|
|
|
- color: '#FF4F3F'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '烟感异常',
|
|
|
- itemStyle: {
|
|
|
- color: '#FF7B00'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '正常运行',
|
|
|
- itemStyle: {
|
|
|
- color: '#1677FF'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '设备异常',
|
|
|
- itemStyle: {
|
|
|
- color: '#F2BD42'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- name: '设备离线',
|
|
|
- itemStyle: {
|
|
|
- color: '#C2C2C2'
|
|
|
- }
|
|
|
- },
|
|
|
- ];
|
|
|
- var data2 = [];
|
|
|
- if (list) {
|
|
|
- data[0].value = list.errorTemperatureNum; //温度异常
|
|
|
- data[1].value = list.errorSmokeNum; //烟感异常
|
|
|
- data[2].value = list.okNum; //正常运行
|
|
|
- data[3].value = list.errorDeviceNum; //设备异常
|
|
|
- data[4].value = list.errorOnlineNum; //设备离线
|
|
|
-
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- if(data[i].value != 0) {
|
|
|
- data2.push(data[i]);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- top: '6%',
|
|
|
- left: '3%',
|
|
|
- right: '8%',
|
|
|
- bottom: '8%',
|
|
|
- radius: ['45%', '60%'],
|
|
|
- label: {
|
|
|
- formatter: '{name|{b}}\n{value|{c}}',
|
|
|
- fontSize: 12,
|
|
|
- position: 'outer',
|
|
|
- bleedMargin: 5,
|
|
|
- rich: {
|
|
|
- name: {
|
|
|
- align: 'left'
|
|
|
- },
|
|
|
- value: {
|
|
|
- align: 'left'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: data2
|
|
|
- }]
|
|
|
- };
|
|
|
-
|
|
|
- this.myPieChart.setOption(option);
|
|
|
- },
|
|
|
- change(index) {
|
|
|
- this.current = index;
|
|
|
- this.companyId = this.merchantList1[index].id;
|
|
|
- this.getPowerConsumption(0);
|
|
|
- this.getEquipmentDataMonitoring(0);
|
|
|
- this.getAccumulatedAlarms();
|
|
|
- this.getHomePageDeviceStatus();
|
|
|
- this.getAbnormalAlarmRecord();
|
|
|
- },
|
|
|
- toDataMonitoringList() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
|
|
|
- })
|
|
|
- },
|
|
|
- toWorkOrderManagement() {
|
|
|
- return
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/workOrderManagement/workOrderManagement'
|
|
|
- })
|
|
|
- },
|
|
|
- toEquipmentElectricity() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/equipmentDataMonitoring/equipmentElectricity'
|
|
|
- })
|
|
|
- },
|
|
|
- toElectronicMonitoring(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
|
|
|
- + '&companyId=' + item.companyId
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- padding-bottom: 200rpx;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-drawer-content {
|
|
|
- margin-top: 88rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-tabs {
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding-top: 32rpx;
|
|
|
- padding-right: 32rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
- .tabs {
|
|
|
- width: 88%;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/.u-tab-item {
|
|
|
- width: 25% !important;
|
|
|
- flex: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- .tabs-options {
|
|
|
- display: flex;
|
|
|
- padding: 24rpx 32rpx 0;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 25%;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 导航栏
|
|
|
- .navbar {
|
|
|
- background-color: rgba(22, 119, 255, 1);
|
|
|
- color: #fff;
|
|
|
- line-height: 88rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 32rpx;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 999999;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 标签
|
|
|
- .tabs-box {
|
|
|
- padding: 32rpx 0;
|
|
|
- margin-top: 88rpx;
|
|
|
- padding-right: 32rpx;
|
|
|
- background-color: rgba(22, 119, 255, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .tabs {
|
|
|
- width: 88%;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
- border-radius: 16px 16px 0px 0px;
|
|
|
- background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
|
|
|
- margin-top: -24rpx;
|
|
|
- padding: 32rpx;
|
|
|
-
|
|
|
- .statistics {
|
|
|
- border-radius: 8px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
- margin-top: 24rpx;
|
|
|
- padding: 40rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- vertical-align: middle;
|
|
|
- border-radius: 999px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .change {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .change-img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
-
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .text {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .change {
|
|
|
- margin-left: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #838383;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .check-all {
|
|
|
- margin-left: auto;
|
|
|
- color: rgba(131, 131, 131, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 用电量
|
|
|
- .statistics-e {
|
|
|
- .electricity {
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .item {
|
|
|
- padding: 16rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
-
|
|
|
- .equipment {
|
|
|
- width: 45%;
|
|
|
-
|
|
|
- // .equipment-text-overflow {
|
|
|
- // display: -webkit-box;
|
|
|
- // -webkit-box-orient: vertical;
|
|
|
- // -webkit-line-clamp: 1;
|
|
|
- // overflow: hidden;
|
|
|
- // }
|
|
|
- .equipment1 {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .equipment2 {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .companyName {
|
|
|
- width: 60%;
|
|
|
- // white-space: nowrap;
|
|
|
- //overflow: hidden;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .state {
|
|
|
- margin-left: 12rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(255, 123, 0, 1);
|
|
|
-
|
|
|
- text {
|
|
|
- margin-right: 8rpx;
|
|
|
- display: inline-block;
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 999px;
|
|
|
- }
|
|
|
-
|
|
|
- .off-line {
|
|
|
-
|
|
|
- background-color: rgba(255, 123, 0, 1);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .on-line {
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .state2 {
|
|
|
- color: rgba(0, 185, 98, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .electricity {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- margin-left: 32rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .electricity-item {
|
|
|
- width: 33.3%;
|
|
|
-
|
|
|
- .number {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .date {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 统计1
|
|
|
- .statistics-1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 330rpx;
|
|
|
- padding: 24rpx;
|
|
|
- box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
- border-radius: 8px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
-
|
|
|
- .item-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
- .normal {
|
|
|
- margin-bottom: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .total {
|
|
|
- margin-top: 28rpx;
|
|
|
- text-align: center;
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .total-number {
|
|
|
- color: #EE3138;
|
|
|
- margin: 0 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 统计2异常报警记录
|
|
|
- .statistics-2 {
|
|
|
-
|
|
|
- .abnormal-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 16rpx;
|
|
|
- border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
-
|
|
|
- .item-title {
|
|
|
-
|
|
|
-
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .date {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-value {
|
|
|
- text-align: right;
|
|
|
-
|
|
|
- .value1 {
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .value2 {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 统计3设备实时监控
|
|
|
- .statistics-3 {
|
|
|
- .monitoring-item {
|
|
|
- padding: 16rpx 0;
|
|
|
- border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
-
|
|
|
- .item-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text1 {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .company-name{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- font-size: 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .state {
|
|
|
- margin-left: 12rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(255, 123, 0, 1);
|
|
|
-
|
|
|
- text {
|
|
|
- margin-right: 8rpx;
|
|
|
- display: inline-block;
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 999px;
|
|
|
- }
|
|
|
-
|
|
|
- .off-line {
|
|
|
-
|
|
|
- background-color: rgba(255, 123, 0, 1);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .on-line {
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .state2 {
|
|
|
- color: rgba(0, 185, 98, 1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .state {
|
|
|
- margin-left: auto;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .state1,
|
|
|
- .state2 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 监控信息
|
|
|
- .infos {
|
|
|
- margin-top: 8rpx;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .infos-item {
|
|
|
- width: 38%;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-size: 22rpx;
|
|
|
- // margin-right: 16rpx;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- .icon{
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 设备状态
|
|
|
- .statistics-4 {
|
|
|
- .chat-img {
|
|
|
- width: 100%;
|
|
|
- height: 620rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 故障类型
|
|
|
- .statistics-5,
|
|
|
- .statistics-6 {
|
|
|
- .chat-img {
|
|
|
- width: 100%;
|
|
|
- height: 410rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 异常设备排名
|
|
|
- .statistics-ranking {
|
|
|
- .total {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
-
|
|
|
- text {
|
|
|
- color: #1677FF;
|
|
|
- padding: 0 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ranking-main {
|
|
|
- margin-top: 48rpx;
|
|
|
- border-radius: 16px;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
-
|
|
|
- .ranking {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(219, 234, 255, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-left: 24rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- margin-left: 16rpx;
|
|
|
-
|
|
|
- .name1 {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .name2 {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- margin-left: auto;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // 查看全部排名
|
|
|
- .check-all {
|
|
|
- text-align: center;
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-drawer {
|
|
|
- z-index: 999 !important;
|
|
|
- }
|
|
|
-
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <view class="navbar">
|
|
|
+ <view class="title">
|
|
|
+ 能源中心
|
|
|
+ </view>
|
|
|
+ <view class="icon" @click="toDataMonitoringList" v-if="codes.indexOf('detector') != -1">
|
|
|
+ <image class="img" src="@/assets/img/riLine-equalizer-line.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="tabs-box">
|
|
|
+ <view class="tabs" :style="{width: companyList.length>4 ? '' : '100%'}">
|
|
|
+ <u-tabs :list="merchantList1" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF" bg-color="#1677FF"
|
|
|
+ :current="current" @change="change"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="more" @click="popShow=true" v-if="companyList.length > 4">
|
|
|
+ <u-icon name="arrow-down" color="#fff" size="40"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 标签弹出层 -->
|
|
|
+ <u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
|
|
|
+ <view class="popup-tabs">
|
|
|
+ <view class="tabs">
|
|
|
+ <u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabs-options">
|
|
|
+ <view class="item" v-for="(item, index) in merchantList2" :key="index" @click="merchantChange(item,index)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <!-- 统计1 -->
|
|
|
+ <view class="statistics-1">
|
|
|
+ <view class="item" @click="toDataMonitoringList">
|
|
|
+ <view class="item-top">
|
|
|
+ <view class="img-box">
|
|
|
+ <u-circle-progress active-color="#2979ff" :percent="alarmsPercent" width="88">
|
|
|
+ </u-circle-progress>
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ <view class="normal">
|
|
|
+ 正常：{{alarmsForm.okNum}}台
|
|
|
+ </view>
|
|
|
+ <view class="abnormal">
|
|
|
+ 异常：{{alarmsForm.errorNum}}台
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 累计 -->
|
|
|
+ <view class="total">
|
|
|
+ 本月累计报警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item" @click="toWorkOrderManagement()">
|
|
|
+ <view class="item-top">
|
|
|
+ <view class="img-box">
|
|
|
+ <u-circle-progress active-color="#2979ff" :percent="0" width="88">
|
|
|
+ </u-circle-progress>
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ <view class="normal">
|
|
|
+ 未处理：0
|
|
|
+ </view>
|
|
|
+ <view class="abnormal">
|
|
|
+ 已处理：0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 累计 -->
|
|
|
+ <view class="total">
|
|
|
+ 本月累计工单 <text class="total-number">0</text> 条
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 用电量 -->
|
|
|
+ <view class="statistics-e statistics" v-if="codes.indexOf('reading') != -1 && kWhList.length != 0">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 用电量 (度)
|
|
|
+ </view>
|
|
|
+ <view class="change" @click="getPowerConsumption(1)">
|
|
|
+ <image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
|
|
|
+ <text>换一批</text>
|
|
|
+ </view>
|
|
|
+ <view class="check-all" @click="toEquipmentElectricity">
|
|
|
+ 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="electricity">
|
|
|
+ <view class="item" v-for="(item, index) in kWhList" :key="index" @click="toElectronicMonitoring(item)">
|
|
|
+
|
|
|
+ <view class="equipment">
|
|
|
+ <view class="equipment1 equipment-text-overflow">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="equipment2 equipment-text-overflow">
|
|
|
+ <view class="companyName">
|
|
|
+ {{item.installationAddressSimple}}
|
|
|
+ </view>
|
|
|
+ <!-- 离线 -->
|
|
|
+ <view class="state" v-if="!item.online">
|
|
|
+ <text class="off-line"></text>离线
|
|
|
+ </view>
|
|
|
+ <!-- 在线 -->
|
|
|
+ <view class="state state2" v-else>
|
|
|
+ <text class="on-line"></text>在线
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="electricity">
|
|
|
+ <view class="electricity-item">
|
|
|
+ <view class="number">
|
|
|
+ {{item.thisDayKwh}}
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ 今日
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="electricity-item">
|
|
|
+ <view class="number">
|
|
|
+ {{item.thisMonthKwh}}
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ 本月
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="electricity-item">
|
|
|
+ <view class="number">
|
|
|
+ {{item.lastMonthKwh}}
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ 上月
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 箭头 -->
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 统计2 异常告警记录 -->
|
|
|
+ <view class="statistics-2 statistics" v-if="abnormalRecordsList.length != 0">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 异常告警记录
|
|
|
+ </view>
|
|
|
+ <view class="check-all" @click="gotoUrl('/pages/abnormal/abnormalAlarmRecord?id='+companyId)">
|
|
|
+ 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 异常 -->
|
|
|
+ <view class="abnormal-item" v-for="(item, index) in abnormalRecordsList" :key="index"
|
|
|
+ @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)">
|
|
|
+ <view class="item-title">
|
|
|
+ <!-- <image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image> -->
|
|
|
+ <view class="name">
|
|
|
+ {{item.configName}}
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ {{item.createTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ <view class="value-content">
|
|
|
+ <view class="value1">
|
|
|
+ {{item.meterName}}
|
|
|
+ </view>
|
|
|
+ <view class="value2">
|
|
|
+ {{item.installationAddressSimple}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 箭头 -->
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 统计3 设备数据监测-->
|
|
|
+ <view class="statistics-3 statistics" v-if="codes.indexOf('detector')!=-1 && deviceList.length!=0">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 设备数据监测
|
|
|
+ </view>
|
|
|
+ <view class="change" @click="getEquipmentDataMonitoring(1)">
|
|
|
+ <image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
|
|
|
+ <text>换一批</text>
|
|
|
+ </view>
|
|
|
+ <view class="check-all" @click="toDataMonitoringList">
|
|
|
+ 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="monitoring-item" v-for="(item, index) in deviceList" :key="index"
|
|
|
+ @click="toElectronicMonitoring(item)">
|
|
|
+ <view class="item-title">
|
|
|
+ <view class="text1">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="state">
|
|
|
+ <view class="state1">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/antFill-alert.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ {{item.temperatureStatus=='1' ? '正常' : '异常'}}
|
|
|
+ </view>
|
|
|
+ <view class="state2">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/smoke.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ {{item.smokeStatus=='1' ? '正常' : '异常'}}
|
|
|
+ </view>
|
|
|
+ <!-- 箭头 -->
<view class="more">
<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="company-name">
|
|
|
+ {{item.installationAddressSimple}}
|
|
|
+ <!-- 离线 -->
|
|
|
+ <view class="state" v-if="!item.online">
|
|
|
+ <text class="off-line"></text>离线
|
|
|
+ </view>
|
|
|
+ <!-- 在线 -->
|
|
|
+ <view class="state state2" v-else>
|
|
|
+ <text class="on-line"></text>在线
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 监控信息 -->
|
|
|
+ <view class="infos">
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="icon">
|
|
|
+ 当前电流：
|
|
|
+ <!-- <img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="icon">
|
|
|
+ 当前电压：
|
|
|
+ <!-- <img src="../../assets/img/voltage.svg" alt="" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="icon">
|
|
|
+ 当前温度：
|
|
|
+ <!-- <img src="../../assets/img/iconPark-thermometer.svg" alt="" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.remoteMonitorRecord.temperatureTop}}℃
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="icon">
|
|
|
+ 当前功率：
|
|
|
+ <!-- <img src="../../assets/img/power.svg" alt="" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{(item.remoteMonitorRecord.totalPower).toFixed(2)}}kW
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="icon">
|
|
|
+ 当前功率因数：
|
|
|
+ <!-- <img src="../../assets/img/powerFactor.svg" alt="" /> -->
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.remoteMonitorRecord.dcfTop.toFixed(2)}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="icon">
|
|
|
+ 平均功率因数：
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.remoteMonitorRecord.averPowerFactor.toFixed(2)}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!--设备状态-->
|
|
|
+ <view class="statistics-4 statistics">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 设备状态
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <view id="pieEcharts" style="min-height:620rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 故障类型 -->
|
|
|
+ <view class="statistics-5 statistics" v-if="false">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 故障类型
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <view id="barEcharts" style="min-height:410rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 工单处理 -->
|
|
|
+ <view class="statistics-6 statistics" v-if="false">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 工单处理
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <view id="lineEcharts" style="min-height:410rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 异常设备排名 -->
|
|
|
+ <view class="statistics statistics-ranking" v-if="false">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 异常设备排名
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 合计 -->
|
|
|
+ <view class="total">
|
|
|
+ 本年度共有<text> 42</text>次设备异常告警
|
|
|
+ </view>
|
|
|
+ <view class="ranking-main">
|
|
|
+ <view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
|
|
|
+ <view class="ranking">
|
|
|
+ 1
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ <view class="name1">
|
|
|
+ 荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 荆鹏集团
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 5次
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 查看全部排名 -->
|
|
|
+ <view class="check-all" @click="gotoUrl('/pages/abnormal/abnormalDeviceRanking')">
|
|
|
+ 查看全部排名 <u-icon name="arrow-down" size="24" color="rgba(119,119,119,1)"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <energyCenterTabbar :current="0"></energyCenterTabbar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import * as API from '@/apis/pagejs/index.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ energyCenterTabbar
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ abnormalRecordsList: [], // 异常告警记录
|
|
|
+ queryDate: '',
|
|
|
+ alarmsPercent: 0,
|
|
|
+ alarmsForm: {
|
|
|
+ okNum: 0,
|
|
|
+ errorNum: 0,
|
|
|
+ errorMonthNum: 0
|
|
|
+ }, // 累计报警
|
|
|
+ companyId: '', // 商户ID
|
|
|
+ pageIndexe: 1, // 设备数据检测
|
|
|
+ totalPagee: 1,
|
|
|
+ deviceList: [],
|
|
|
+ pageIndexp: 1, // 用电量
|
|
|
+ totalPagep: 1,
|
|
|
+ kWhList: [],
|
|
|
+ codes: '', // 判断：reading用电量 detector设备数据检测
|
|
|
+ merchantList1: [], // 商户
|
|
|
+ merchantList2: [],
|
|
|
+ companyList: [],
|
|
|
+ popShow: false,
|
|
|
+ current: 0,
|
|
|
+ myLineChart: null, // 图表
|
|
|
+ myBarChart: null,
|
|
|
+ myPieChart: null,
|
|
|
+ intervalId: null, // 用于存储间隔ID
|
|
|
+ intervalReady: true, // 用于存储间隔ID
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ var date = new Date();
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = date.getMonth()+1 >= 10 ? date.getMonth()+1 : '0'+(date.getMonth()+1);
|
|
|
+ this.queryDate = year + '-' + month;
|
|
|
+
|
|
|
+ this.getPowerConsumption(0);
|
|
|
+ this.getEquipmentDataMonitoring(0);
|
|
|
+ this.getCompanyInfoList();
|
|
|
+ this.getAccumulatedAlarms();
|
|
|
+ this.getAbnormalAlarmRecord();
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.getfindByOpenId();
|
|
|
+ this.getHomePageDeviceStatus();
|
|
|
+ // this.getBarCharts();
|
|
|
+ // this.getLineCharts();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clearTimer(); // 组件销毁前清除定时器
|
|
|
+ this.intervalReady=false;
|
|
|
+ console.log( "组件销毁前清除定时器")
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clearTimer() {
|
|
|
+ if (this.intervalId) {
|
|
|
+ clearInterval(this.intervalId); // 清除定时器
|
|
|
+ this.intervalId = null; // 重置定时器ID
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startInterval() {
|
|
|
+ this.clearTimer(); // 组件销毁前清除定时器
|
|
|
+ this.intervalId = setInterval(() => {
|
|
|
+ // 每隔5秒运行的代码
|
|
|
+ // console.log('这段代码每隔5秒运行一次');
|
|
|
+ this.getPowerConsumption(0,true)
|
|
|
+ }, 60000);
|
|
|
+ },
|
|
|
+ merchantChange(item, index) {
|
|
|
+ var m = item;
|
|
|
+ var n = this.merchantList1[this.current];
|
|
|
+ this.merchantList1[this.current] = m;
|
|
|
+ this.merchantList2[index] = n;
|
|
|
+
|
|
|
+ this.companyId = item.id;
|
|
|
+ this.getPowerConsumption(0);
|
|
|
+ this.getEquipmentDataMonitoring(0);
|
|
|
+ this.getAccumulatedAlarms();
|
|
|
+ this.getHomePageDeviceStatus();
|
|
|
+ this.getAbnormalAlarmRecord();
|
|
|
+
|
|
|
+ this.popShow = false;
|
|
|
+ },
|
|
|
+ // 单位
|
|
|
+ getCompanyInfoList() {
|
|
|
+ this.merchantList1 = [];
|
|
|
+ this.merchantList2 = [];
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.deviceCompanyList().then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.companyList = response.data.companyInfoList;
|
|
|
+ var list = response.data.companyInfoList;
|
|
|
+
|
|
|
+ // for (var i = 0; i < list.length; i++) {
|
|
|
+ // list[i].name = list[i].fullName;
|
|
|
+ // }
|
|
|
+ if (list.length > 3) {
|
|
|
+ this.merchantList1.push(list.slice(0, 3));
|
|
|
+ this.merchantList2.push(list.slice(3));
|
|
|
+ } else {
|
|
|
+ this.merchantList1 = list;
|
|
|
+ }
|
|
|
+ if(list.length > 1) {
|
|
|
+ this.merchantList1.unshift({
|
|
|
+ id: '',
|
|
|
+ name: '全部'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 商户ID
|
|
|
+ getfindByOpenId() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.findByOpenId({
|
|
|
+ openId: this.carhelp.getOpenId()
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.codes = response.data.regUser.codes;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 设备数据监测
|
|
|
+ getEquipmentDataMonitoring(pl) {
|
|
|
+ this.pageIndexe = this.pageIndexe + pl;
|
|
|
+ if (this.pageIndexe > this.totalPagee) {
|
|
|
+ this.pageIndexe = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.homePageDeviceData({
|
|
|
+ pageIndex: this.pageIndexe,
|
|
|
+ pageSize: 5,
|
|
|
+ companyId: this.companyId
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.deviceList = response.data.data;
|
|
|
+ this.totalPagee = response.data.totalPage;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 异常告警记录
|
|
|
+ getAbnormalAlarmRecord() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.alarmRecord({
|
|
|
+ queryDate: this.queryDate,
|
|
|
+ configId: '',
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ companyId: this.companyId
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.abnormalRecordsList = response.data.data;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 用电量
|
|
|
+ getPowerConsumption(pl,interval) {
|
|
|
+ this.pageIndexp = this.pageIndexp + pl;
|
|
|
+ if (this.pageIndexp > this.totalPagep) {
|
|
|
+ this.pageIndexp = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!interval) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ API.homePageKwh({
|
|
|
+ pageIndex: this.pageIndexp,
|
|
|
+ pageSize: 5,
|
|
|
+ companyId: this.companyId
|
|
|
+ }).then((response) => {
|
|
|
+ if (!interval) {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ this.kWhList = response.data.data;
|
|
|
+ this.totalPagep = response.data.totalPage;
|
|
|
+
|
|
|
+ if(!interval){
|
|
|
+ this.startInterval(); // 组件挂载后开始间隔
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 累计工单
|
|
|
+ getAccumulatedWorkOrders() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 累计报警
|
|
|
+ getAccumulatedAlarms() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.deviceStatus({
|
|
|
+ companyId: this.companyId
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.alarmsForm = response.data;
|
|
|
+ if(this.alarmsForm.okNum != 0) {
|
|
|
+ this.alarmsPercent = this.alarmsForm.okNum / (this.alarmsForm.okNum + this.alarmsForm.errorNum) * 100;
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 工单处理
|
|
|
+ getLineCharts() {
|
|
|
+ if (!this.myLineChart) {
|
|
|
+ this.myLineChart = echarts.init(document.getElementById('lineEcharts'));
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['新增工单', '处理工单', '剩余工单']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1日', '2日', '3日', '4日', '5日', '6日']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '新增工单',
|
|
|
+ type: 'line',
|
|
|
+ data: [2, 1, 0, 1, 3, 0],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF3D00'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '处理工单',
|
|
|
+ type: 'line',
|
|
|
+ data: [3, 1, 1, 0, 2, 1],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF7B00'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '剩余工单',
|
|
|
+ type: 'line',
|
|
|
+ data: [5, 2, 1, 1, 5, 1],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#58A55C'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myLineChart.setOption(option);
|
|
|
+ },
|
|
|
+ // 故障类型
|
|
|
+ getBarCharts() {
|
|
|
+ if (!this.myBarChart) {
|
|
|
+ this.myBarChart = echarts.init(document.getElementById('barEcharts'));
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ data: ['一月', '二月', '三月']
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value'
|
|
|
+ }],
|
|
|
+ barGap: '0',
|
|
|
+ series: [{
|
|
|
+ name: '温度异常',
|
|
|
+ type: 'bar',
|
|
|
+ data: [100, 140, 230],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF3D00'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '电压异常',
|
|
|
+ type: 'bar',
|
|
|
+ data: [150, 100, 200],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF7B00'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '功率因素异常',
|
|
|
+ type: 'bar',
|
|
|
+ data: [50, 80, 100],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FFAE00'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myBarChart.setOption(option);
|
|
|
+ },
|
|
|
+ // 设备状态
|
|
|
+ getHomePageDeviceStatus() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.homePageDeviceStatus({
|
|
|
+ companyId: this.companyId
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ var list = response.data;
|
|
|
+ this.getPieCharts(list);
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPieCharts(list) {
|
|
|
+ if (!this.myPieChart) {
|
|
|
+ this.myPieChart = echarts.init(document.getElementById('pieEcharts'), null, {
|
|
|
+ width: uni.upx2px(700),
|
|
|
+ height: uni.upx2px(620)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.myPieChart.clear();
|
|
|
+
|
|
|
+ var data = [{
|
|
|
+ value: 1,
|
|
|
+ name: '温度异常',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF4F3F'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '烟感异常',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF7B00'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '正常运行',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#1677FF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '设备异常',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#F2BD42'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '设备离线',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#C2C2C2'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ var data2 = [];
|
|
|
+ if (list) {
|
|
|
+ data[0].value = list.errorTemperatureNum; //温度异常
|
|
|
+ data[1].value = list.errorSmokeNum; //烟感异常
|
|
|
+ data[2].value = list.okNum; //正常运行
|
|
|
+ data[3].value = list.errorDeviceNum; //设备异常
|
|
|
+ data[4].value = list.errorOnlineNum; //设备离线
|
|
|
+
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ if(data[i].value != 0) {
|
|
|
+ data2.push(data[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ top: '6%',
|
|
|
+ left: '3%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '8%',
|
|
|
+ radius: ['45%', '60%'],
|
|
|
+ label: {
|
|
|
+ formatter: '{name|{b}}\n{value|{c}}',
|
|
|
+ fontSize: 12,
|
|
|
+ position: 'outer',
|
|
|
+ bleedMargin: 5,
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ align: 'left'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data2
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myPieChart.setOption(option);
|
|
|
+ },
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ this.companyId = this.merchantList1[index].id;
|
|
|
+ this.getPowerConsumption(0);
|
|
|
+ this.getEquipmentDataMonitoring(0);
|
|
|
+ this.getAccumulatedAlarms();
|
|
|
+ this.getHomePageDeviceStatus();
|
|
|
+ this.getAbnormalAlarmRecord();
|
|
|
+ },
|
|
|
+ toDataMonitoringList() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toWorkOrderManagement() {
|
|
|
+ return
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/workOrderManagement/workOrderManagement'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toEquipmentElectricity() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/equipmentDataMonitoring/equipmentElectricity'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toElectronicMonitoring(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
|
|
|
+ + '&companyId=' + item.companyId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ padding-bottom: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-drawer-content {
|
|
|
+ margin-top: 88rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-tabs {
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 32rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ width: 88%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.u-tab-item {
|
|
|
+ width: 25% !important;
|
|
|
+ flex: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-options {
|
|
|
+ display: flex;
|
|
|
+ padding: 24rpx 32rpx 0;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 25%;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导航栏
|
|
|
+ .navbar {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: #fff;
|
|
|
+ line-height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999999;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 标签
|
|
|
+ .tabs-box {
|
|
|
+ padding: 32rpx 0;
|
|
|
+ margin-top: 88rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ width: 88%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
|
|
|
+ margin-top: -24rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .statistics {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 999px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .change-img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #838383;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-all {
|
|
|
+ margin-left: auto;
|
|
|
+ color: rgba(131, 131, 131, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用电量
|
|
|
+ .statistics-e {
|
|
|
+ .electricity {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 16rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .equipment {
|
|
|
+ width: 45%;
|
|
|
+
|
|
|
+ // .equipment-text-overflow {
|
|
|
+ // display: -webkit-box;
|
|
|
+ // -webkit-box-orient: vertical;
|
|
|
+ // -webkit-line-clamp: 1;
|
|
|
+ // overflow: hidden;
|
|
|
+ // }
|
|
|
+ .equipment1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .companyName {
|
|
|
+ width: 60%;
|
|
|
+ // white-space: nowrap;
|
|
|
+ //overflow: hidden;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state {
|
|
|
+ margin-left: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(255, 123, 0, 1);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ display: inline-block;
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .off-line {
|
|
|
+
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .on-line {
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .state2 {
|
|
|
+ color: rgba(0, 185, 98, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .electricity {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .electricity-item {
|
|
|
+ width: 33.3%;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 统计1
|
|
|
+ .statistics-1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 330rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .normal {
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-number {
|
|
|
+ color: #EE3138;
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 统计2异常报警记录
|
|
|
+ .statistics-2 {
|
|
|
+
|
|
|
+ .abnormal-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+
|
|
|
+
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .more{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 统计3设备实时监控
|
|
|
+ .statistics-3 {
|
|
|
+ .monitoring-item {
|
|
|
+ padding: 16rpx 0;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-name{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .state {
|
|
|
+ margin-left: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(255, 123, 0, 1);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ display: inline-block;
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .off-line {
|
|
|
+
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .on-line {
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .state2 {
|
|
|
+ color: rgba(0, 185, 98, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .state {
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .state1,
|
|
|
+ .state2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监控信息
|
|
|
+ .infos {
|
|
|
+ margin-top: 8rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .infos-item {
|
|
|
+ width: 38%;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ // margin-right: 16rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ .icon{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设备状态
|
|
|
+ .statistics-4 {
|
|
|
+ .chat-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 620rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 故障类型
|
|
|
+ .statistics-5,
|
|
|
+ .statistics-6 {
|
|
|
+ .chat-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 410rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 异常设备排名
|
|
|
+ .statistics-ranking {
|
|
|
+ .total {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #1677FF;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ranking-main {
|
|
|
+ margin-top: 48rpx;
|
|
|
+ border-radius: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ .ranking {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(219, 234, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 24rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .name1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ margin-left: auto;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查看全部排名
|
|
|
+ .check-all {
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-drawer {
|
|
|
+ z-index: 999 !important;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
