|
|
|
@@ -1,97 +1,139 @@ |
|
|
|
<template> |
|
|
|
<div class="main-pc-index" style="position: relative"> |
|
|
|
<div class="main-left"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>任务管理</span> |
|
|
|
</div> |
|
|
|
<div class="main-left-box"> |
|
|
|
<div> |
|
|
|
<img src="../../assets/img/rw.png" /> |
|
|
|
<div> |
|
|
|
<div class="box-card"> |
|
|
|
<div class="clearfix"> |
|
|
|
<div> |
|
|
|
<div>任务总数</div> |
|
|
|
<div>{{taskInfo.totalNum}}</div> |
|
|
|
<img src="@/assets/img/main/tip-1.png"/> |
|
|
|
<div>任务管理</div> |
|
|
|
</div> |
|
|
|
<div></div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div>已完成</div> |
|
|
|
<div>{{taskInfo.funishedNum}}</div> |
|
|
|
</div> |
|
|
|
<div class="main-left-box"> |
|
|
|
<div> |
|
|
|
<div>执行中</div> |
|
|
|
<div>{{taskInfo.executionNum}}</div> |
|
|
|
<img src="../../assets/img/main/top-1.png"> |
|
|
|
<div> |
|
|
|
<div>任务总数</div> |
|
|
|
<div>{{taskInfo.totalNum}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div>待执行</div> |
|
|
|
<div>{{taskInfo.executionWaitNum}}</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div></div> |
|
|
|
<div>执行中</div> |
|
|
|
</div> |
|
|
|
<div>{{taskInfo.executionNum}}</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div style=" background: #FF5003"></div> |
|
|
|
<div>待执行</div> |
|
|
|
</div> |
|
|
|
<div>{{taskInfo.executionWaitNum}}</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div style=" background: #D8D8D8"></div> |
|
|
|
<div>已完成</div> |
|
|
|
</div> |
|
|
|
<div>{{taskInfo.funishedNum}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card style="margin-top: 10px" class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>问题管理</span> |
|
|
|
</div> |
|
|
|
<div class="main-left-box"> |
|
|
|
<div> |
|
|
|
<img src="../../assets/img/wt.png" /> |
|
|
|
<div class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<div> |
|
|
|
<div>问题总数</div> |
|
|
|
<div>{{questionInfo.totalNum}}</div> |
|
|
|
<img src="@/assets/img/main/tip-2.png"/> |
|
|
|
<div>问题管理</div> |
|
|
|
</div> |
|
|
|
<div></div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="main-left-box"> |
|
|
|
<div> |
|
|
|
<div>已处理完</div> |
|
|
|
<div>{{questionInfo.funishedNum}}</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div>处理中</div> |
|
|
|
<div>{{questionInfo.processNum}}</div> |
|
|
|
<img src="../../assets/img/main/top-2.png"/> |
|
|
|
<div> |
|
|
|
<div>问题总数</div> |
|
|
|
<div>{{questionInfo.totalNum}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div>待处理</div> |
|
|
|
<div>{{questionInfo.waitNum}}</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div></div> |
|
|
|
<div>处理中</div> |
|
|
|
</div> |
|
|
|
<div>{{questionInfo.processNum}}</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div style=" background: #FF5003"></div> |
|
|
|
<div>待处理</div> |
|
|
|
</div> |
|
|
|
<div>{{questionInfo.waitNum}}</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div style=" background: #D8D8D8"></div> |
|
|
|
<div>已完成</div> |
|
|
|
</div> |
|
|
|
<div>{{questionInfo.funishedNum}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<div style="margin-top: 10px;display: flex"> |
|
|
|
<el-card style="flex: 1" class="box-card"> |
|
|
|
</div> |
|
|
|
<div style="margin-top: 30px"> |
|
|
|
<div style="padding-bottom: 20px" class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>数据统计</span> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/main/tip-3.png"/> |
|
|
|
<div>巡检类型问题统计</div> |
|
|
|
</div> |
|
|
|
<div></div> |
|
|
|
</div> |
|
|
|
<div :key="index" v-for="(item,index) in inspectQuestionCategoryList" class="left-bottom"> |
|
|
|
<div :title="item.questionContent">{{item.questionContent}}</div> |
|
|
|
<div :title="item.questionContent"> |
|
|
|
<div>{{item.questionContent}}</div> |
|
|
|
<div>{{item.questionNum}}</div> |
|
|
|
</div> |
|
|
|
<el-progress |
|
|
|
:show-text="false" |
|
|
|
:stroke-width="20" |
|
|
|
color="#17B4AC" |
|
|
|
:stroke-width="12" |
|
|
|
:color="index==0?'#025EFE':(index==1?'#22CEA9':(index==2?'#FF4E7A':(index==3?'#6958E3':(index==4?'#FCD876':'#17B4AC'))))" |
|
|
|
:percentage="getQuestionPer(item)" |
|
|
|
></el-progress> |
|
|
|
<div>{{item.questionNum}}</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card style="flex:1;margin-left: 20px" class="box-card"> |
|
|
|
</div> |
|
|
|
<div class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>水质分类统计</span> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/main/tip-4.png"/> |
|
|
|
<div>河道水质问题分类统计</div> |
|
|
|
</div> |
|
|
|
<div></div> |
|
|
|
</div> |
|
|
|
<mainCake |
|
|
|
v-if="waterAlarmCategoryList.length>0" |
|
|
|
:dataList="waterAlarmCategoryList" |
|
|
|
id="mainPre" |
|
|
|
:width="360" |
|
|
|
:height="200" |
|
|
|
:height="300" |
|
|
|
></mainCake> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main-right"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div style="padding-bottom: 30px" class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>报警信息</span> |
|
|
|
<el-button v-if="roles.some(item=>item.type==2&&item.name=='/waterAlarm')" @click="waterAlarmOpen" style="float: right; padding: 3px 0" type="text">更多</el-button> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/main/tip-5.png"/> |
|
|
|
<div>报警信息</div> |
|
|
|
</div> |
|
|
|
<el-button v-if="roles.some(item=>item.type==2&&item.name=='/waterAlarm')" @click="waterAlarmOpen" |
|
|
|
style="float: right; padding: 3px 0" type="text">... |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div class="right-waterAlarm"> |
|
|
|
<div |
|
|
|
@@ -99,22 +141,25 @@ |
|
|
|
:key="index" |
|
|
|
v-for="(item,index) in waterAlarmList" |
|
|
|
> |
|
|
|
<div> |
|
|
|
<img |
|
|
|
:src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))" |
|
|
|
/> |
|
|
|
<div>{{item.alarmInfo}}</div> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
:src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))" |
|
|
|
/> |
|
|
|
<div :title="item.alarmInfo">{{item.alarmInfo}}</div> |
|
|
|
<div> |
|
|
|
<span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card style="margin-top: 10px" class="box-card"> |
|
|
|
</div> |
|
|
|
<div style="margin-top: 30px;padding-bottom: 30px" class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>预警信息</span> |
|
|
|
<el-button v-if="roles.some(item=>item.type==2&&item.name=='/warn')" @click="waterWarnOpen" style="float: right; padding: 3px 0" type="text">更多</el-button> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/main/tip-6.png"/> |
|
|
|
<div>预警信息</div> |
|
|
|
</div> |
|
|
|
<el-button v-if="roles.some(item=>item.type==2&&item.name=='/warn')" @click="waterWarnOpen" |
|
|
|
style="float: right; padding: 3px 0" type="text">... |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div class="right-waterWarn"> |
|
|
|
<div :key="index" v-for="(item,index) in waterWarnList"> |
|
|
|
@@ -126,17 +171,23 @@ |
|
|
|
<div>{{item.warnContent}}</div> |
|
|
|
<div |
|
|
|
:class="item.warnLevel==5?'red-div':(item.warnLevel==4?'orange-div':'yellow-div')" |
|
|
|
>{{item.warnLevel}}级</div> |
|
|
|
>{{item.warnLevel | filterlevel}}级 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card style="margin-top: 10px" class="box-card"> |
|
|
|
</div> |
|
|
|
<div style="margin-top: 30px;padding-bottom: 25px" class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>通知公告</span> |
|
|
|
<el-button v-if="roles.some(item=>item.type==2&&item.name=='/notice')" @click="noticeOpen" style="float: right; padding: 3px 0" type="text">更多</el-button> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/main/tip-7.png"/> |
|
|
|
<div>通知公告</div> |
|
|
|
</div> |
|
|
|
<el-button v-if="roles.some(item=>item.type==2&&item.name=='/notice')" @click="noticeOpen" |
|
|
|
style="float: right; padding: 3px 0" type="text">... |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<el-tabs v-model="noticeType" @tab-click="noticeTypeClick"> |
|
|
|
<el-tabs style="padding: 0 30px" v-model="noticeType" @tab-click="noticeTypeClick"> |
|
|
|
<el-tab-pane label="水务新闻" :name="1"> |
|
|
|
<div v-if="noticeType==1" class="notice-list"> |
|
|
|
<div |
|
|
|
@@ -164,7 +215,7 @@ |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<waterAlarmInfo |
|
|
|
:id="waterAlarmId" |
|
|
|
@@ -182,362 +233,425 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import mainApi from "@/api/main/index"; |
|
|
|
import mainCake from "./mainCake"; |
|
|
|
import waterAlarmInfo from "../water/waterAlarm/infoForm"; |
|
|
|
import noticeDetial from "@/components/noticeDetail"; |
|
|
|
import {mapGetters} from "vuex"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "main-pc-index", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
noticeVisible: false, |
|
|
|
noticeId: "", |
|
|
|
waterAlarmVisible: false, |
|
|
|
waterAlarmId: "", |
|
|
|
height: document.body.clientHeight - 125, |
|
|
|
taskInfo: {}, |
|
|
|
questionInfo: {}, |
|
|
|
waterAlarmCategoryList: [], |
|
|
|
waterAlarmList: [], |
|
|
|
waterWarnList: [], |
|
|
|
noticeType: 1, |
|
|
|
noticeList: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
console.log(this.roles) |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getDetail(); |
|
|
|
this.getNoticeMainList(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(["roles"]) |
|
|
|
}, |
|
|
|
components: { mainCake, waterAlarmInfo, noticeDetial }, |
|
|
|
methods: { |
|
|
|
noticeClick(id) { |
|
|
|
this.noticeId = id; |
|
|
|
this.noticeVisible = true; |
|
|
|
import mainApi from "@/api/main/index"; |
|
|
|
import mainCake from "./mainCake"; |
|
|
|
import waterAlarmInfo from "../water/waterAlarm/infoForm"; |
|
|
|
import noticeDetial from "@/components/noticeDetail"; |
|
|
|
import {mapGetters} from "vuex"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "main-pc-index", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
noticeVisible: false, |
|
|
|
noticeId: "", |
|
|
|
waterAlarmVisible: false, |
|
|
|
waterAlarmId: "", |
|
|
|
height: document.body.clientHeight - 125, |
|
|
|
taskInfo: {}, |
|
|
|
questionInfo: {}, |
|
|
|
waterAlarmCategoryList: [], |
|
|
|
waterAlarmList: [], |
|
|
|
waterWarnList: [], |
|
|
|
noticeType: 1, |
|
|
|
noticeList: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
noticeTypeClick() { |
|
|
|
this.noticeList = []; |
|
|
|
this.getNoticeMainList(); |
|
|
|
created() { |
|
|
|
console.log(this.roles) |
|
|
|
}, |
|
|
|
noticeOpen() { |
|
|
|
this.$router.push({ path: "/work/notice" }); |
|
|
|
}, |
|
|
|
waterWarnOpen() { |
|
|
|
this.$router.push({ path: "/water/warn" }); |
|
|
|
}, |
|
|
|
waterAlarmOpen() { |
|
|
|
this.$router.push({ path: "/water/waterAlarm" }); |
|
|
|
}, |
|
|
|
waterAlarmClick(id) { |
|
|
|
this.waterAlarmId = id; |
|
|
|
this.waterAlarmVisible = true; |
|
|
|
mounted() { |
|
|
|
this.getDetail(); |
|
|
|
this.getNoticeMainList(); |
|
|
|
}, |
|
|
|
getQuestionPer(item) { |
|
|
|
let total = 0; |
|
|
|
this.inspectQuestionCategoryList.map(item => { |
|
|
|
total += item.questionNum; |
|
|
|
}); |
|
|
|
return (item.questionNum / total) * 100; |
|
|
|
computed: { |
|
|
|
...mapGetters(["roles"]) |
|
|
|
}, |
|
|
|
getNoticeMainList() { |
|
|
|
mainApi |
|
|
|
.getNoticeMainList(this.noticeType) |
|
|
|
.then(res => { |
|
|
|
this.noticeList = res.data ? res.data : []; |
|
|
|
}) |
|
|
|
.catch(e => { |
|
|
|
this.noticeList = []; |
|
|
|
}); |
|
|
|
}, |
|
|
|
getDetail() { |
|
|
|
mainApi |
|
|
|
.getMainDetail() |
|
|
|
.then(res => { |
|
|
|
const { |
|
|
|
waterWarnList, |
|
|
|
taskInfo, |
|
|
|
questionInfo, |
|
|
|
inspectQuestionCategoryList, |
|
|
|
waterAlarmCategoryList, |
|
|
|
waterAlarmList |
|
|
|
} = res.data; |
|
|
|
this.taskInfo = taskInfo ? taskInfo : {}; |
|
|
|
this.questionInfo = questionInfo ? questionInfo : {}; |
|
|
|
this.inspectQuestionCategoryList = inspectQuestionCategoryList |
|
|
|
? inspectQuestionCategoryList |
|
|
|
: []; |
|
|
|
this.waterAlarmCategoryList = waterAlarmCategoryList |
|
|
|
? waterAlarmCategoryList |
|
|
|
: []; |
|
|
|
this.waterAlarmList = waterAlarmList ? waterAlarmList : []; |
|
|
|
this.waterWarnList = waterWarnList ? waterWarnList : []; |
|
|
|
}) |
|
|
|
.catch(e => { |
|
|
|
this.taskInfo = {}; |
|
|
|
this.questionInfo = {}; |
|
|
|
this.inspectQuestionCategoryList = []; |
|
|
|
this.waterAlarmCategoryList = []; |
|
|
|
this.waterAlarmList = []; |
|
|
|
this.waterWarnList = []; |
|
|
|
components: {mainCake, waterAlarmInfo, noticeDetial}, |
|
|
|
methods: { |
|
|
|
noticeClick(id) { |
|
|
|
this.noticeId = id; |
|
|
|
this.noticeVisible = true; |
|
|
|
}, |
|
|
|
noticeTypeClick() { |
|
|
|
this.noticeList = []; |
|
|
|
this.getNoticeMainList(); |
|
|
|
}, |
|
|
|
noticeOpen() { |
|
|
|
this.$router.push({path: "/work/notice"}); |
|
|
|
}, |
|
|
|
waterWarnOpen() { |
|
|
|
this.$router.push({path: "/water/warn"}); |
|
|
|
}, |
|
|
|
waterAlarmOpen() { |
|
|
|
this.$router.push({path: "/water/waterAlarm"}); |
|
|
|
}, |
|
|
|
waterAlarmClick(id) { |
|
|
|
this.waterAlarmId = id; |
|
|
|
this.waterAlarmVisible = true; |
|
|
|
}, |
|
|
|
getQuestionPer(item) { |
|
|
|
let total = 0; |
|
|
|
this.inspectQuestionCategoryList.map(item => { |
|
|
|
total += item.questionNum; |
|
|
|
}); |
|
|
|
return (item.questionNum / total) * 100; |
|
|
|
}, |
|
|
|
getNoticeMainList() { |
|
|
|
mainApi |
|
|
|
.getNoticeMainList(this.noticeType) |
|
|
|
.then(res => { |
|
|
|
this.noticeList = res.data ? res.data : []; |
|
|
|
}) |
|
|
|
.catch(e => { |
|
|
|
this.noticeList = []; |
|
|
|
}); |
|
|
|
}, |
|
|
|
getDetail() { |
|
|
|
mainApi |
|
|
|
.getMainDetail() |
|
|
|
.then(res => { |
|
|
|
const { |
|
|
|
waterWarnList, |
|
|
|
taskInfo, |
|
|
|
questionInfo, |
|
|
|
inspectQuestionCategoryList, |
|
|
|
waterAlarmCategoryList, |
|
|
|
waterAlarmList |
|
|
|
} = res.data; |
|
|
|
this.taskInfo = taskInfo ? taskInfo : {}; |
|
|
|
this.questionInfo = questionInfo ? questionInfo : {}; |
|
|
|
this.inspectQuestionCategoryList = inspectQuestionCategoryList |
|
|
|
? inspectQuestionCategoryList |
|
|
|
: []; |
|
|
|
this.waterAlarmCategoryList = waterAlarmCategoryList |
|
|
|
? waterAlarmCategoryList |
|
|
|
: []; |
|
|
|
this.waterAlarmList = waterAlarmList ? waterAlarmList : []; |
|
|
|
this.waterWarnList = waterWarnList ? waterWarnList : []; |
|
|
|
}) |
|
|
|
.catch(e => { |
|
|
|
this.taskInfo = {}; |
|
|
|
this.questionInfo = {}; |
|
|
|
this.inspectQuestionCategoryList = []; |
|
|
|
this.waterAlarmCategoryList = []; |
|
|
|
this.waterAlarmList = []; |
|
|
|
this.waterWarnList = []; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
.main-pc-index { |
|
|
|
width: 100%; |
|
|
|
padding: 10px; |
|
|
|
background-color: #ffffff; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.main-left { |
|
|
|
width: 64%; |
|
|
|
margin-right: 1%; |
|
|
|
|
|
|
|
.main-left-box { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
.main-pc-index { |
|
|
|
width: 100%; |
|
|
|
padding: 10px; |
|
|
|
background-color: #ffffff; |
|
|
|
min-height: 100%; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.box-card { |
|
|
|
background: #FFFFFF; |
|
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10); |
|
|
|
border-radius: 15px 15px 15px 15px; |
|
|
|
|
|
|
|
.clearfix { |
|
|
|
padding: 17px 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
color: #999999; |
|
|
|
width: 190px; |
|
|
|
border-right: 1px #eeeeee solid; |
|
|
|
|
|
|
|
> img { |
|
|
|
width: 60px; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
> div { |
|
|
|
margin-left: 15px; |
|
|
|
> div:first-child { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
font-size: 24px; |
|
|
|
color: #333333; |
|
|
|
img { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 0 30px; |
|
|
|
|
|
|
|
> div { |
|
|
|
color: #999999; |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
font-size: 24px; |
|
|
|
> div { |
|
|
|
margin-left: 20px; |
|
|
|
font-family: PingFangSC-Medium; |
|
|
|
font-size: 20px; |
|
|
|
color: #333333; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.left-bottom { |
|
|
|
margin-top: 15px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.main-left { |
|
|
|
width: 69%; |
|
|
|
margin-right: 1%; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
width: 100px; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 14px; |
|
|
|
color: #333333; |
|
|
|
text-align: right; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
> div:nth-child(2) { |
|
|
|
flex: 1; |
|
|
|
> div:first-child, > div:nth-child(2) { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
.el-progress-bar { |
|
|
|
padding-right: 0rem; |
|
|
|
width: 100%; |
|
|
|
margin-right: -0rem; |
|
|
|
} |
|
|
|
|
|
|
|
.el-progress-bar__outer { |
|
|
|
background: #0b2221; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
width: 60px; |
|
|
|
margin-left: 30px; |
|
|
|
text-align: left; |
|
|
|
font-family: PingFangSC-Medium; |
|
|
|
font-size: 14px !important; |
|
|
|
color: #17b4ac; |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.main-right { |
|
|
|
width: 35%; |
|
|
|
|
|
|
|
.el-card__header { |
|
|
|
.el-button--text { |
|
|
|
color: #ffffff !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.notice-list { |
|
|
|
.notice-child { |
|
|
|
width: 100%; |
|
|
|
margin-top: 10px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 14px; |
|
|
|
color: #333333; |
|
|
|
cursor: pointer; |
|
|
|
> div:first-child { |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
> div:last-child { |
|
|
|
color: #666666; |
|
|
|
flex: none; |
|
|
|
width: 150px; |
|
|
|
text-align: right; |
|
|
|
|
|
|
|
> div { |
|
|
|
width: 49%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right-waterAlarm { |
|
|
|
> div { |
|
|
|
cursor: pointer; |
|
|
|
margin-top: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.main-left-box { |
|
|
|
> div:first-child { |
|
|
|
height: 225px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
> img { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
margin-right: 10px; |
|
|
|
width: 162px; |
|
|
|
height: 165px; |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
> div { |
|
|
|
margin-left: 50px; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 20px; |
|
|
|
color: #333333; |
|
|
|
line-height: 28px; |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
margin-top: 4.8px; |
|
|
|
font-family: PingFangSC-Medium; |
|
|
|
font-size: 46px; |
|
|
|
color: #333333; |
|
|
|
line-height: 65px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 15px 50px; |
|
|
|
|
|
|
|
> div { |
|
|
|
color: #333333; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 16px; |
|
|
|
color: #333333; |
|
|
|
line-height: 16px; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
width: 13px; |
|
|
|
height: 13px; |
|
|
|
background: #005DFE; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
margin-top: 14px; |
|
|
|
font-family: PingFangSC-Medium; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 28px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
flex: none; |
|
|
|
.left-bottom { |
|
|
|
margin-top: 20px; |
|
|
|
padding: 0 30px; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 16px; |
|
|
|
text-align: right; |
|
|
|
width: 100px; |
|
|
|
color: #333333; |
|
|
|
line-height: 16px; |
|
|
|
line-height: 22px; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
margin-top: 0px; |
|
|
|
> div:nth-child(2) { |
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
.el-progress-bar { |
|
|
|
padding-right: 0rem; |
|
|
|
width: 100%; |
|
|
|
margin-right: -0rem; |
|
|
|
} |
|
|
|
|
|
|
|
.el-progress-bar__outer { |
|
|
|
background: #eeeeee; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right-waterWarn { |
|
|
|
> div { |
|
|
|
margin-top: 10px; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 14px; |
|
|
|
.main-right { |
|
|
|
width: 30%; |
|
|
|
|
|
|
|
.el-button--text { |
|
|
|
font-weight: bold; |
|
|
|
color: #333333; |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
.notice-list { |
|
|
|
.notice-child { |
|
|
|
width: 100%; |
|
|
|
margin-top: 20px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 16px; |
|
|
|
color: #666666; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 14px; |
|
|
|
color: #333333; |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
line-height: 14px; |
|
|
|
color: #999999; |
|
|
|
flex: none; |
|
|
|
width: 150px; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
.right-waterAlarm { |
|
|
|
padding: 0 30px; |
|
|
|
|
|
|
|
> div { |
|
|
|
cursor: pointer; |
|
|
|
margin-top: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 5px; |
|
|
|
color: #666666; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
line-height: 14px; |
|
|
|
> img { |
|
|
|
position: absolute; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
color: #ffffff; |
|
|
|
border-radius: 10px; |
|
|
|
height: 14px; |
|
|
|
width: 37px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
> div:nth-child(2) { |
|
|
|
padding-left: 18px; |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 16px; |
|
|
|
color: #666666; |
|
|
|
line-height: 22px; |
|
|
|
} |
|
|
|
|
|
|
|
.red-div { |
|
|
|
background: #ff0000; |
|
|
|
> div:last-child { |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 14px; |
|
|
|
color: #999999; |
|
|
|
line-height: 20px; |
|
|
|
margin-left: 15px; |
|
|
|
width: 85px; |
|
|
|
flex: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
margin-top: 0px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.orange-div { |
|
|
|
background: #f5a623; |
|
|
|
.right-waterWarn { |
|
|
|
padding: 0 30px; |
|
|
|
> div { |
|
|
|
margin-top: 10px; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 14px; |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 14px; |
|
|
|
font-weight: 600; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
color: #999999; |
|
|
|
line-height: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.yellow-div { |
|
|
|
background: #f5d823; |
|
|
|
> div:last-child { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
color: #666666; |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
line-height: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
> div:last-child { |
|
|
|
color: #ffffff; |
|
|
|
border-radius: 10px; |
|
|
|
height: 14px; |
|
|
|
width: 37px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.red-div { |
|
|
|
background: #ff0000; |
|
|
|
} |
|
|
|
|
|
|
|
.orange-div { |
|
|
|
background: #f5a623; |
|
|
|
} |
|
|
|
|
|
|
|
.yellow-div { |
|
|
|
background: #f5d823; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
> div:first-child { |
|
|
|
margin-top: 0px; |
|
|
|
> div:first-child { |
|
|
|
margin-top: 0px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
huxinglu
4 jaren geleden
