748 lines
21 KiB
Vue
748 lines
21 KiB
Vue
<template>
|
|
<view class="project-detail">
|
|
<view class="project-detail-content">
|
|
<view class="project-detail-header-box">
|
|
<view class="project-detail-header" v-if="projectInfoData">
|
|
<view class="project-detail-header-info">
|
|
<view class="project-detail-header-info-company">{{projectInfoData && projectInfoData.projectName}}</view>
|
|
<view class="project-detail-header-info-address"><span class="diconfont dicon-icon_shijian"></span> 建设时间：{{projectInfoData && projectInfoData.createTime}}</view>
|
|
</view>
|
|
<view class="btn-box">
|
|
<span v-if="projectInfoData.projectRole == 'root'" class="diconfont dicon-icon_xiugai" @click="showEdit"></span>
|
|
<!-- <span class="diconfont dicon-icon_saoma" @click="scanCodeFn"></span> -->
|
|
</view>
|
|
</view>
|
|
<view class="equipment-status" @click="goEquipmentStatusFn">
|
|
<view class="equipment-status-info" v-if="projectOverviewData">
|
|
<view class="equipment-status-info-box">
|
|
<view class="equipment-status-info-box-value text-red pb10">{{projectOverviewData && projectOverviewData.deviceTotal}}</view>
|
|
<view class="equipment-status-info-box-lable">设备总数</view>
|
|
</view>
|
|
<view class="equipment-status-info-box">
|
|
<view class="equipment-status-info-box-value text-green pb10">{{projectOverviewData && projectOverviewData.onlineTotal}}</view>
|
|
<view class="equipment-status-info-box-lable">在线设备</view>
|
|
</view>
|
|
<view class="equipment-status-info-box">
|
|
<view class="equipment-status-info-box-value pb10">{{projectOverviewData && projectOverviewData.onlineRate}}%</view>
|
|
<view class="equipment-status-info-box-lable">在线率</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="manage-banner">
|
|
<view class="manage-banner-electric">
|
|
<!-- <u-image src="@/"></u-image> -->
|
|
<u-image width="100%" height="100%" @click="goElectricSafeFn" :src="cdnImgUrl + '/project/detail/btndq.png'"></u-image>
|
|
</view>
|
|
<view class="manage-banner-energy">
|
|
<u-image width="100%" height="100%" @click="goSmartEnergyFn" :src="cdnImgUrl + '/project/detail/btndy.png'"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="home-title">
|
|
<view class="home-title-txt">
|
|
报警预警分布
|
|
</view>
|
|
<view class="home-title-remark"></view>
|
|
</view>
|
|
|
|
<view class="home-status-box menu-box">
|
|
<view class="home-status-item menu-item">
|
|
<view class="home-status-item-name">
|
|
报警总数
|
|
</view>
|
|
<view class="home-status-item-value">
|
|
{{projectAlarmData.alarmTotal||0}}
|
|
</view>
|
|
<view class="home-menu-item-bg diconfont dicon-icon_jiance" :style="{backgroundImage:'linear-gradient(0deg, #45AAFF, #2568FF)'}"></view>
|
|
<view class="home-menu-item-bg-two diconfont dicon-icon_jiance" :style="{color:'rgba(69, 170, 255, 0.1)'}"></view>
|
|
</view>
|
|
<view class="home-status-item menu-item">
|
|
<view class="home-status-item-name">
|
|
已处理率
|
|
</view>
|
|
<view class="home-status-item-value">{{projectAlarmData.processed||0}}</view>
|
|
<view class="item-content-progress-box">
|
|
<qiun-data-charts
|
|
canvas2d="true"
|
|
style="width: 162rpx;height:162rpx;"
|
|
type="arcbar"
|
|
:opts="projectAlarmData.opts"
|
|
:chartData="projectAlarmData.chartData"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="home-status-item menu-item">
|
|
<view class="home-status-item-name">
|
|
维保记录
|
|
</view>
|
|
<view class="home-status-item-value">{{activeProject.tenantIndexVo.maintenanceRecordTotal||0}}</view>
|
|
<view class="home-menu-item-bg diconfont dicon-icon_weibaojilu" :style="{backgroundImage:'linear-gradient(0deg, #33F3FF, #00BCD2)'}"></view>
|
|
<view class="home-menu-item-bg-two diconfont dicon-icon_weibaojilu" :style="{color:'rgba(49, 234, 246, 0.1)'}"></view>
|
|
</view>
|
|
<view class="home-status-item menu-item">
|
|
<view class="home-status-item-name">
|
|
今日报警
|
|
</view>
|
|
<view class="home-status-item-value" :style="{color:activeProject.todayAlarmTotal?'#FB3534':'#000'}">
|
|
{{(activeProject && activeProject.todayAlarmTotal) || "0"}}</view>
|
|
<view class="home-menu-item-bg diconfont dicon-icon_jinribaojing" :style="{backgroundImage:'linear-gradient(0deg, #FFEF65, #FFBA00)'}"></view>
|
|
<view class="home-menu-item-bg-two diconfont dicon-icon_jinribaojing" :style="{color:'rgba(254, 185, 0, 0.1)'}"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="alarm-overview-info-box alarm-item">
|
|
<view class="pt10 pb10 pl20 pr20" v-if="warningAnalysisStatisticsData && alarmAnalysisStatisticsData">
|
|
<projectCmp :hide="editMenuShow" :warningAnalysisStatisticsData="warningAnalysisStatisticsData" :alarmAnalysisStatisticsData="alarmAnalysisStatisticsData"></projectCmp>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="alarm-overview-info">
|
|
<swiper style="height: 100%;" :indicator-dots="true">
|
|
<swiper-item>
|
|
<view class="alarm-overview-info-box">
|
|
<view class="alarm-overview-info-box-title">报警预警分布</view>
|
|
<view class="">
|
|
<view class="alrmAnalysis-content" v-if="projectWarningAnalysis && projectWarningAnalysis.alarmCategoriesList && projectWarningAnalysis.alarmCategoriesList.length>0">
|
|
<view class="alrmAnalysis-title">报警</view>
|
|
<view class="alrmAnalysis-info" >
|
|
<view class="alrm-row" v-for="(item,index) in projectWarningAnalysis.alarmCategoriesList" :key="index">
|
|
<view class="alrm-row-circle" :style="{backgroundColor:item.color}"></view>
|
|
<view class="alrm-row-text pl10">
|
|
<text class="pr10">{{item.typeName}}</text>
|
|
<text class="text--base--grey">|</text>
|
|
<text class="pl10">{{item.ratio}}%</text>
|
|
<text class="pl10" style="color: #999;">{{item.alarmTotal}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else style="margin-top: 80rpx;">
|
|
<u-empty text=" " mode="data" icon-size="350" :src="cdnImgUrl + '/project/detail/empty.png'"></u-empty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="alarm-overview-info-box">
|
|
<view class="alarm-overview-info-box-title">报警预警趋势</view>
|
|
<view class="" v-if="projectWarningAnalysis">
|
|
<alarmTrend :hide="editMenuShow" :trendData="projectWarningAnalysis.alarmChartDataVo"></alarmTrend>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="project-map-ctn" @click="readMapLocalFn">
|
|
<view class="project-map-title" v-if="projectInfoData">
|
|
<tuiIcon name="weizhi" color="#FF6600" size="50"></tuiIcon>
|
|
<text class="project-map-title-text">{{projectInfoData && projectInfoData.projectAddress}}</text>
|
|
</view>
|
|
<map v-if="mapLongitude" class="project-map" :latitude="mapLatitude" :longitude="mapLongitude" :markers="mapMarkers"></map>
|
|
</view>
|
|
</view>
|
|
<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
|
|
<u-modal v-model="editProjectModalShow" title="修改项目名称" :show-cancel-button="true"
|
|
@confirm="$throttle(editProjectNameFn, 500)">
|
|
<view class="slot-content">
|
|
<u-input v-model="editProjectName" :focus="true" border type="text" placeholder="请输入项目名称" ></u-input>
|
|
</view>
|
|
</u-modal>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import projectCmp from "./projectCmp.vue";
|
|
import alarmTrend from "./alarmTrend.vue"
|
|
var QQMapWX = require('@/utils/qqmap-wx-jssdk.min');
|
|
// 实例化API核心类
|
|
var qqmapsdk = new QQMapWX({
|
|
key: 'XQTBZ-HP5CG-FRFQN-QCFTJ-LTG76-LSF6G'
|
|
});
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectId: "",
|
|
projectInfoData:null, // 项目信息
|
|
projectOverviewData:null, // 项目概况
|
|
projectAlarmData:null, // 项目报警概况
|
|
projectWarningAnalysis:null, // 项目报警预警信息
|
|
alarmAnalysisStatisticsData:null,
|
|
warningAnalysisStatisticsData:null,
|
|
alarmColorList: ["#C93548", "#5E5490", "#52B249", "#F7A23E", "#EA9B87", "#A94791", "#F1DF31", "#DE5654", "#2DAEE5"],
|
|
mapLatitude:"",
|
|
mapLongitude:"",
|
|
mapMarkers: [],
|
|
editMenuList:[
|
|
{
|
|
text: '成员管理',
|
|
},
|
|
{
|
|
text: '修改项目名称',
|
|
},
|
|
{
|
|
text: '修改项目地址',
|
|
},
|
|
{
|
|
text: '项目空间管理',
|
|
},
|
|
{
|
|
text: '设备分组管理',
|
|
}
|
|
|
|
],
|
|
editMenuShow:false,
|
|
editProjectModalShow:'',
|
|
editProjectName:'',
|
|
opts: {
|
|
color: ["#2897ff"],
|
|
padding: undefined,
|
|
title: {
|
|
name: "80%",
|
|
fontSize: 12,
|
|
color: "#2897ff"
|
|
},
|
|
subtitle: {
|
|
name: "已处理率",
|
|
fontSize: 10,
|
|
color: "#666666"
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: "default",
|
|
width: 6,
|
|
backgroundColor: "#f3f4f5",
|
|
startAngle: 0.75,
|
|
endAngle: 0.25,
|
|
gap: 2,
|
|
linearType: "none"
|
|
}
|
|
}
|
|
},
|
|
// alarmCategoriesList: [{
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }, {
|
|
// alarmTotal: 2,
|
|
// ratio: "100.00",
|
|
// typeCode: "a00001",
|
|
// typeName: "短路报警"
|
|
// }]
|
|
cdnImgUrl: 'http://static.drgyen.com/app/hc-app-power/images'
|
|
};
|
|
},
|
|
components: {
|
|
projectCmp,
|
|
alarmTrend
|
|
},
|
|
onLoad(e) {
|
|
this.cdnImgUrl = this.$config.cdnImgUrl;
|
|
this.projectId = e.projectId;
|
|
|
|
this.getProjectInfoFn();
|
|
this.getWarningAnalysisFn();
|
|
this.getPowerIndexFn();
|
|
|
|
},
|
|
methods:{
|
|
// 修改项目名称
|
|
editProjectNameFn(){
|
|
let obj = {
|
|
...this.projectInfoData,
|
|
projectName:this.editProjectName
|
|
}
|
|
this.$put("/iot/project",obj).then((res)=>{
|
|
if(res.code == 200){
|
|
this.$u.toast(res.msg, 3000);
|
|
this.getProjectInfoFn();
|
|
}else{
|
|
this.$u.toast(res.msg, 3000);
|
|
}
|
|
})
|
|
},
|
|
showEdit(){
|
|
this.editMenuShow = true;
|
|
},
|
|
selectMenu(e){
|
|
console.log("点击菜单",this.editMenuList[e].text)
|
|
if(this.editMenuList[e].text == '成员管理'){
|
|
uni.navigateTo({
|
|
url:'./projectUser?projectId=' + this.projectId
|
|
})
|
|
}else if(this.editMenuList[e].text == '修改项目名称'){
|
|
this.editProjectName = this.projectInfoData.projectName;
|
|
this.editProjectModalShow = true;
|
|
}else if(this.editMenuList[e].text == '项目空间管理'){
|
|
uni.navigateTo({
|
|
url:'./space/index?projectId=' + this.projectId + '&projectRole=' + this.projectInfoData.projectRole + '&typeName=空间'
|
|
})
|
|
}else if(this.editMenuList[e].text == '设备分组管理'){
|
|
uni.navigateTo({
|
|
url:'./deviceGroup/index?projectId=' + this.projectId
|
|
})
|
|
}else if(this.editMenuList[e].text == '修改项目地址'){
|
|
uni.chooseLocation({
|
|
latitude:this.projectInfoData.projectLat,
|
|
longitude:this.projectInfoData.projectLng,
|
|
success: (res) => {
|
|
qqmapsdk.reverseGeocoder({
|
|
location:{
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: (res1) =>{
|
|
this.$put("/iot/project",{
|
|
...this.projectInfoData,
|
|
projectLat:res.latitude,
|
|
projectLng:res.longitude,
|
|
projectAddress:res.address+res.name,
|
|
regionalismCode:res1.result.ad_info.adcode
|
|
}).then(editres=>{
|
|
console.log("editres",editres)
|
|
if(editres.code == 200){
|
|
this.getProjectInfoFn();
|
|
}else{
|
|
this.$refs.uToast.show({
|
|
title: editres.msg,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}).catch(err=>{
|
|
this.$refs.uToast.show({
|
|
title: err.msg,
|
|
type: 'error',
|
|
})
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.log(res);
|
|
}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
},
|
|
goSmartEnergyFn(){
|
|
uni.navigateTo({
|
|
url:`./smartEnergy/index?projectId=${this.projectInfoData.projectId}`
|
|
})
|
|
},
|
|
goElectricSafeFn(){
|
|
uni.navigateTo({
|
|
url:`/pages/project/electricalSafeMange/index?projectId=${this.projectInfoData.projectId}`
|
|
})
|
|
},
|
|
goEquipmentStatusFn(){
|
|
uni.navigateTo({
|
|
url:`./equipmentStatus/status?projectId=${this.projectInfoData.projectId}`
|
|
})
|
|
},
|
|
readMapLocalFn(){
|
|
uni.openLocation({
|
|
longitude: this.projectInfoData.projectLng,
|
|
latitude: this.projectInfoData.projectLat ,
|
|
name: this.projectInfoData.projectName,
|
|
address:this.projectInfoData.address,
|
|
success:(suc)=>{
|
|
console.log(suc);
|
|
},
|
|
fail: (err) => {
|
|
console.log(err,'err');
|
|
}
|
|
})
|
|
},
|
|
getProjectInfoFn(){
|
|
// this.$get("/app/project/info",{projectId:this.projectId}).then((res)=>{
|
|
this.$get("/app/project/" + this.projectId).then((res)=>{
|
|
console.log(res,"Resss");
|
|
this.projectInfoData = res.data;
|
|
this.projectOverviewData = res.data.tenantIndexVo;
|
|
this.mapLatitude = this.projectInfoData.projectLat;
|
|
this.mapLongitude = this.projectInfoData.projectLng;
|
|
this.mapMarkers.push({
|
|
latitude: this.projectInfoData.projectLat,
|
|
longitude: this.projectInfoData.projectLng,
|
|
iconPath: 'http://static.drgyen.com/app/hc-app-power/images/project/location.png',
|
|
width:20,
|
|
height:22
|
|
})
|
|
})
|
|
},
|
|
// 警告分析接口
|
|
getWarningAnalysisFn(){
|
|
this.$get("/app/index/warning-analysis",{projectId:this.projectId}).then((res)=>{
|
|
this.projectWarningAnalysis = res.data;
|
|
this.alarmAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
|
|
return item.alarmDivide === "ALARM";
|
|
})
|
|
this.warningAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
|
|
return item.alarmDivide === "WARNING";
|
|
})
|
|
if(!this.projectWarningAnalysis.alarmCategoriesList){
|
|
this.projectWarningAnalysis.alarmCategoriesList = [];
|
|
}else{
|
|
this.projectWarningAnalysis.alarmCategoriesList = this.projectWarningAnalysis.alarmCategoriesList.map((item, index, arr) => {
|
|
item.color = this.alarmColorList[index];
|
|
if (index + 1 > this.alarmColorList.length) {
|
|
item.color = this.alarmColorList[index - this.alarmColorList.length];
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
|
|
})
|
|
},
|
|
// 首页数据接口
|
|
getPowerIndexFn(){
|
|
this.$get("/app/index",{projectId:this.projectId}).then((res)=>{
|
|
this.projectAlarmData = res.data;
|
|
let processedRateValue = res.data.processedRate/100;
|
|
let data = {
|
|
series: [
|
|
{
|
|
data: processedRateValue || 0
|
|
}
|
|
]
|
|
};
|
|
let opts = JSON.parse(JSON.stringify(this.opts));
|
|
this.opts.title.name = res.data.processedRate + '%'
|
|
this.projectAlarmData.chartData = JSON.parse(JSON.stringify(data));
|
|
this.projectAlarmData.opts = JSON.parse(JSON.stringify(this.opts));
|
|
})
|
|
},
|
|
// 扫码
|
|
scanCodeFn() {
|
|
uni.scanCode({
|
|
scanType: ['qrCode'],
|
|
success: (res) => {
|
|
// console.log('条码内容：' + res.result);
|
|
const val = res.result;
|
|
if(val) {
|
|
this.$get(`/app/device/key/${val}`).then(resp => {
|
|
console.log(resp)
|
|
if(resp.code == 200){
|
|
uni.navigateTo({
|
|
url: `/pages/home/wisdomElectricity/electricityDetail?deviceId=${resp.data.deviceId}`
|
|
})
|
|
} else {
|
|
this.$u.toast(resp.msg, 3000);
|
|
}
|
|
})
|
|
} else {
|
|
this.$u.toast('无效二维码', 3000);
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
if(err.errMsg == "scanCode:fail cancel") {
|
|
this.$u.toast('扫码取消', 3000);
|
|
} else {
|
|
this.$u.toast(err.errMsg, 3000);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.project-detail {
|
|
font-family: Source Han Sans CN;
|
|
position: relative;
|
|
width: 100%;
|
|
// background-color: #F8F8F8;
|
|
.project-detail-content {
|
|
padding: $paddingTB 45rpx;
|
|
}
|
|
.project-detail-header-box{
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
.project-detail-header {
|
|
padding: 20rpx;
|
|
padding-bottom: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
&-info {
|
|
&-company {
|
|
padding-bottom: 15rpx;
|
|
font-weight: 550;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
&-address {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #666666;
|
|
.diconfont{
|
|
font-size: 17rpx;
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
.btn-box{
|
|
display: flex;
|
|
align-items: center;
|
|
.diconfont{
|
|
font-size: 38rpx;
|
|
color: #000000;
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.equipment-status {
|
|
background-color: #fff;
|
|
border-radius: $uni-border-radius-lg;
|
|
// height: 150rpx;
|
|
padding: 20rpx;
|
|
&-info {
|
|
display: flex;
|
|
&-box {
|
|
flex: 1;
|
|
text-align: center;
|
|
.equipment-status-info-box-value{
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
}
|
|
.equipment-status-info-box-lable{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.manage-banner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 30rpx;
|
|
|
|
&-electric,
|
|
&-energy {
|
|
width: 320rpx;
|
|
height: 115rpx;
|
|
}
|
|
}
|
|
|
|
.home-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 15rpx;
|
|
|
|
.home-title-txt {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.home-title-remark {
|
|
margin-left: 20rpx;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
// 菜单
|
|
.menu-box{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.menu-item{
|
|
width: 320rpx;
|
|
height: 200rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx 20rpx 15rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
|
|
&:nth-child(2n-1) {
|
|
margin-right: 20rpx;
|
|
}
|
|
.home-status-item-name {
|
|
font-weight: 550;
|
|
font-size: 28rpx;
|
|
}
|
|
.home-status-item-value{
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
.home-menu-item-bg {
|
|
position: absolute;
|
|
right: 37rpx;
|
|
bottom: 26rpx;
|
|
font-size: 75rpx;
|
|
z-index: 99;
|
|
color: transparent;
|
|
display: inline-block;
|
|
-webkit-background-clip: text;
|
|
}
|
|
.home-menu-item-bg-two{
|
|
position: absolute;
|
|
right: 44rpx;
|
|
bottom: 26rpx;
|
|
font-size: 75rpx;
|
|
z-index: 98;
|
|
}
|
|
.item-content-progress-box{
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 0rpx;
|
|
width: 180rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
.border-box{
|
|
height:1px;
|
|
background: #E0E3E5;
|
|
}
|
|
}
|
|
|
|
.alarm-overview-info {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
// box-shadow: $box-shadow;
|
|
margin-top: 20rpx;
|
|
|
|
&-box {
|
|
&.alarm-item{
|
|
padding: 20rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
&-box-title {
|
|
padding: 20rpx 30rpx;
|
|
// border-bottom: 1px solid #eee;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.alarm-overview-info-box-content {
|
|
padding: $paddingTB $paddingLR;
|
|
height: 420rpx;
|
|
}
|
|
|
|
.alrmAnalysis-content {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 40rpx 0;
|
|
padding-bottom: 20rpx;
|
|
|
|
.alrmAnalysis-title {
|
|
width: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.alrmAnalysis-info {
|
|
width: calc(100% - 100rpx);
|
|
font-size: 22rpx;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 50%);
|
|
grid-auto-columns: repeat(2, 50%);
|
|
}
|
|
}
|
|
|
|
.alrm-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 20rpx;
|
|
|
|
&-circle {
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
border-radius: $uni-border-radius-circle;
|
|
/* background-color: #C93548; */
|
|
margin-top: 2rpx;
|
|
}
|
|
}
|
|
|
|
.project-map-ctn {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
.project-map-title{
|
|
width: 100%;
|
|
padding: $paddingTB;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 120rpx;
|
|
&-text{
|
|
padding-left: 20rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.project-map {
|
|
width: 100%;
|
|
height: calc(100% - 120rpx);
|
|
}
|
|
}
|
|
}
|
|
.slot-content{
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
.text-red{
|
|
color: #FE5277 !important;
|
|
}
|
|
.text-green{
|
|
color: #16D2AF !important;
|
|
}
|
|
</style> |