|
|
@@ -0,0 +1,818 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+
|
|
|
+ <view class="background">
|
|
|
+ <!-- 设备选择器 -->
|
|
|
+ <u-picker title="设备选择" v-model="equipmentShow"
|
|
|
+ mode="multiSelector" :default-selector='[0, 1]' :range="multiSelector"></u-picker>
|
|
|
+
|
|
|
+ <!-- 日期选择器 -->
|
|
|
+ <u-picker-select title="日期选择" v-model="tabsFrom.show2"
|
|
|
+ :defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
|
+ mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
|
+
|
|
|
+ <!-- <u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
|
|
|
+ <view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
|
|
|
+ <image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </u-navbar> -->
|
|
|
+ <view class="navbar-c">
|
|
|
+ <view class="back">
|
|
|
+ <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="title" @click="equipmentShow=true">
|
|
|
+ 荆鹏软件园01<u-icon name="arrow-down" color="#fff" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="right" @click="tabsFrom.show2=true">
|
|
|
+ <image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 日期 -->
|
|
|
+ <view class="date-box">
|
|
|
+ <view class="item item-today">
|
|
|
+ <view class="date">
|
|
|
+ 26
|
|
|
+ </view>
|
|
|
+ <view class="week ">
|
|
|
+ 今天
|
|
|
+ </view>
|
|
|
+ <view class="dot">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 27
|
|
|
+ </view>
|
|
|
+ <view class="week">
|
|
|
+ 周六
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 28
|
|
|
+ </view>
|
|
|
+ <view class="week">
|
|
|
+ 周日
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 29
|
|
|
+ </view>
|
|
|
+ <view class="week">
|
|
|
+ 周一
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ 30
|
|
|
+ </view>
|
|
|
+ <view class="week">
|
|
|
+ 周二
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 用电量 -->
|
|
|
+ <view class="electricity-consumption">
|
|
|
+ <view class="title">
|
|
|
+ 用电量统计 (度)
|
|
|
+ </view>
|
|
|
+ <view class="degree">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 百万
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 拾万
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 万
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 千
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 百
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 0
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 拾
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 7
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 1
|
|
|
+ </view>
|
|
|
+ <view class="item-number">
|
|
|
+ 7
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-text">
|
|
|
+ 0.1
|
|
|
+ </view>
|
|
|
+ <view class="item-number decimal">
|
|
|
+ 7
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="radio">
|
|
|
+ <u-radio-group v-model="value" @change="radioGroupChange">
|
|
|
+ <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
|
|
|
+ :disabled="item.disabled">
|
|
|
+ {{item.name}}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 各时段用电量 -->
|
|
|
+ <view class="electricity-chart">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 各时段用电量 (度)
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chart">
|
|
|
+ <image class="img" src="@/assets/img/chart@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 异常波动 -->
|
|
|
+ <view class="abnormal" >
|
|
|
+ <view class="headline">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 异常告警
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ 查看全部
|
|
|
+ <u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details">
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">
|
|
|
+ 温度异常告警
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 2024-01-25 15:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">
|
|
|
+ 三厢功率因数异常告警
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 2024-01-05 20:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 能源监测 -->
|
|
|
+ <view class="energy-inspection" >
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 能源监测
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="grid">
|
|
|
+ <u-grid :col="3" :border="false">
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon1">
|
|
|
+ <image class="img" src="@/assets/img/Image@1.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">三相电流</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon2">
|
|
|
+ <image class="img" src="@/assets/img/Image@2.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">三相电压</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon3">
|
|
|
+ <image class="img" src="@/assets/img/Image@3.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">三相温度</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon4">
|
|
|
+ <image class="img" src="@/assets/img/Image@4.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">三相有功功率</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon5">
|
|
|
+ <image class="img" src="@/assets/img/Image@5.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">三相功率因数</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon6">
|
|
|
+ <image class="img" src="@/assets/img/Image@5.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">平均功率因数</view>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 数据分析 -->
|
|
|
+ <view class="data-analysis" >
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 数据分析
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="grid">
|
|
|
+ <u-grid :col="3" :border="false">
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon7">
|
|
|
+ <image class="img" src="@/assets/img/Image@7.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">同比分析</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon8">
|
|
|
+ <image class="img" src="@/assets/img/Image@8.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">环比分析</view>
|
|
|
+ </u-grid-item>
|
|
|
+ <u-grid-item>
|
|
|
+ <view class="icon icon9">
|
|
|
+ <image class="img" src="@/assets/img/Image@9.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="grid-text">用电统计</view>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 创建工单 -->
|
|
|
+ <view class="create-order">
|
|
|
+ <view class="img-box">
|
|
|
+ <image class="img" src="@/assets/img/riFill-file-add-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 创建工单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ endYear:'',
|
|
|
+ equipmentShow:false,
|
|
|
+ multiSelector: [
|
|
|
+ ['荆鹏集团', '玉桥公园', '全季酒店'],
|
|
|
+ [ '荆鹏软件园01','青少年宫02','御河社区03','荆州院子04']
|
|
|
+ ],
|
|
|
+ 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:0,
|
|
|
+ name: '本月用电量',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name: '上月用电量',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ name: '本年用电量',
|
|
|
+ disabled: false
|
|
|
+ }, {
|
|
|
+ id:3,
|
|
|
+ name: '上年用电量',
|
|
|
+ disabled: false
|
|
|
+ }, {
|
|
|
+ id:4,
|
|
|
+ name: '总用电量',
|
|
|
+ disabled: false
|
|
|
+ }, {
|
|
|
+ id:5,
|
|
|
+ name: '指定月份',
|
|
|
+ disabled: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ value: '本月用电量',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.endYear=new Date().getFullYear()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selector2reset(e){
|
|
|
+ console.log(e)
|
|
|
+ this.tabsFrom.show2Text='全部时间'
|
|
|
+ this.tabsFrom.show2Index='';
|
|
|
+ },
|
|
|
+ // 选中某个单选框时，由radio时触发
|
|
|
+ radioChange(e) {
|
|
|
+ //console.log(e);
|
|
|
+ },
|
|
|
+ // 选中任一radio时，由radio-group触发
|
|
|
+ radioGroupChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ if(e==5){
|
|
|
+ this.tabsFrom.show2=true
|
|
|
+ this.params.day=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ padding-bottom: 184rpx;
|
|
|
+ }
|
|
|
+ .navbar-c{
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ .title{
|
|
|
+ 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-bottom: 100rpx;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.u-border-bottom:after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-nav-slot {
|
|
|
+ margin-right: 32rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .background::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 160%;
|
|
|
+ height: 80px;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ left: -30%;
|
|
|
+ border-radius: 0 0 50% 50%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // // 日期
|
|
|
+ .date-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+
|
|
|
+
|
|
|
+ .item {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.15);
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .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: 40rpx 32rpx 0rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: -88rpx 32rpx 0;
|
|
|
+ position: relative;
|
|
|
+ .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;
|
|
|
+
|
|
|
+ /deep/.u-radio__label {
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-radio {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ width: 200rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //各时段用电量
|
|
|
+ .electricity-chart {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 0rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ border: 6px solid rgba(182, 212, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 440rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 440rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 异常
|
|
|
+ .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(22, 119, 255, 1);
|
|
|
+ border: 6px solid rgba(182, 212, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: #838383;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .details {
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 能源监测
|
|
|
+ .energy-inspection,.data-analysis {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ .icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ border: 6px solid rgba(182, 212, 255, 1);
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建工单
|
|
|
+ .create-order{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
