|
@@ -35,11 +35,11 @@
|
|
<div>
|
|
<div>
|
|
<span>处置率</span>
|
|
<span>处置率</span>
|
|
<div>
|
|
<div>
|
|
- <p v-loading="loading1">{{index1Data.checkRadio ? Number((index1Data.checkRadio)*100).toFixed(2) : '0'}}%</p>
|
|
|
|
|
|
+ <p>{{index1Data.checkRadio ? Number((index1Data.checkRadio)*100).toFixed(2) : '0'}}%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="contain2">
|
|
|
|
|
|
+ <div class="contain2" v-if="bt">
|
|
<div class="wrap">
|
|
<div class="wrap">
|
|
<index1 :resData="index1Data.checkRadio"
|
|
<index1 :resData="index1Data.checkRadio"
|
|
:dataMap="index1Data.checkRadio"
|
|
:dataMap="index1Data.checkRadio"
|
|
@@ -57,7 +57,7 @@
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
<div class="card_right">
|
|
<div class="card_right">
|
|
<el-card class="box-card card2" v-loading="loading2">
|
|
<el-card class="box-card card2" v-loading="loading2">
|
|
- <div class="contain">
|
|
|
|
|
|
+ <div class="contain" v-if="zxt">
|
|
<index2
|
|
<index2
|
|
:resData="index2Data"
|
|
:resData="index2Data"
|
|
style="width:100%;height:40vh;" alt="折线图" />
|
|
style="width:100%;height:40vh;" alt="折线图" />
|
|
@@ -84,12 +84,6 @@
|
|
/>
|
|
/>
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <!-- <el-form-item label="处理状态:" >
|
|
|
|
- <el-select v-model="queryParams.status" style="width: 160px" placeholder="请选择处理状态" clearable size="small">
|
|
|
|
- <el-option label="未处理" :value="0"/>
|
|
|
|
- <el-option label="已处理" :value="1"/>
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item> -->
|
|
|
|
<el-form-item label="时间:" label-width="50px">
|
|
<el-form-item label="时间:" label-width="50px">
|
|
<el-date-picker style="vertical-align: middle;width:340px"
|
|
<el-date-picker style="vertical-align: middle;width:340px"
|
|
v-model="dateRange"
|
|
v-model="dateRange"
|
|
@@ -234,6 +228,8 @@ export default {
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ bt:false,
|
|
|
|
+ zxt:false,
|
|
img:require('@/assets/images/2.png'),
|
|
img:require('@/assets/images/2.png'),
|
|
title:"水系统监控告警处理情况",
|
|
title:"水系统监控告警处理情况",
|
|
index1Data:{},//饼图
|
|
index1Data:{},//饼图
|
|
@@ -290,6 +286,7 @@ export default {
|
|
/* 饼图 */
|
|
/* 饼图 */
|
|
collectTbAlarm(this.queryParams).then(response =>{
|
|
collectTbAlarm(this.queryParams).then(response =>{
|
|
this.index1Data = response.data
|
|
this.index1Data = response.data
|
|
|
|
+ this.bt = true
|
|
this.loading1 = false
|
|
this.loading1 = false
|
|
})
|
|
})
|
|
/* 折线图 */
|
|
/* 折线图 */
|
|
@@ -310,6 +307,7 @@ export default {
|
|
checkCount[0].name = "处理次数"
|
|
checkCount[0].name = "处理次数"
|
|
this.index2Data.push(total[0],checkCount[0],lineData)
|
|
this.index2Data.push(total[0],checkCount[0],lineData)
|
|
this.index2Data.push({name:"水系统监控告警处理情况跟踪",color:"#00FFFF"})
|
|
this.index2Data.push({name:"水系统监控告警处理情况跟踪",color:"#00FFFF"})
|
|
|
|
+ this.zxt = true
|
|
this.loading2 = false
|
|
this.loading2 = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
@@ -403,4 +401,142 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+::-webkit-scrollbar-track {
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+::-webkit-scrollbar {
|
|
|
|
+ -webkit-appearance: none;
|
|
|
|
+ width: 4px;
|
|
|
|
+ height: 4px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ background: rgba(0, 0, 0, 0.25);
|
|
|
|
+ transition: color 0.2s ease;
|
|
|
|
+}
|
|
|
|
+.text {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+}
|
|
|
|
+.item {
|
|
|
|
+ margin-bottom: 18px;
|
|
|
|
+}
|
|
|
|
+.clearfix:before,
|
|
|
|
+.clearfix:after {
|
|
|
|
+ display: table;
|
|
|
|
+ content: "";
|
|
|
|
+}
|
|
|
|
+.clearfix:after {
|
|
|
|
+ clear: both;
|
|
|
|
+}
|
|
|
|
+.box-card {
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+}
|
|
|
|
+#main {
|
|
|
|
+ margin-top: -20px;
|
|
|
|
+ .box-card {
|
|
|
|
+ .h2 {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ display: block;
|
|
|
|
+ font-size: 1.2em;
|
|
|
|
+ background-image: -webkit-linear-gradient(bottom, #00adce, #000);
|
|
|
|
+ -webkit-background-clip: text;
|
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .card_left {
|
|
|
|
+ .card1 {
|
|
|
|
+ height: 43vh;
|
|
|
|
+ .title {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: block;
|
|
|
|
+ text-align: left !important;
|
|
|
|
+ .imgTitle {
|
|
|
|
+ width: 5%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+ p {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ margin-left: 2%;
|
|
|
|
+ font-size: 1.4vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .contain {
|
|
|
|
+ margin-top: 0vh;
|
|
|
|
+ width: 58%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ div {
|
|
|
|
+ height: 7vh;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 1vw;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ width: 4vw;
|
|
|
|
+ text-align: left;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+ div {
|
|
|
|
+ width: 212px;
|
|
|
|
+ height: 6vh;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ background: url("../../../../../assets/images/operation_item.png")
|
|
|
|
+ no-repeat right center;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ p {
|
|
|
|
+ font-size: 1.4vw;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ margin: 1vh 0 0 3vh;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .contain2 {
|
|
|
|
+ margin-top: -2.5rem;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ width: 42%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ p {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 1.4rem;
|
|
|
|
+ margin: -2vh 0 0 0%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .card_right {
|
|
|
|
+ .card2 {
|
|
|
|
+ height: 43vh;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .card_bottom {
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ margin-bottom: -10px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+::v-deep {
|
|
|
|
+ .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
|
+ /*width: 0;宽度为0隐藏*/
|
|
|
|
+ width: 4px;
|
|
|
|
+ }
|
|
|
|
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ background: rgba(40, 190, 252, 0.6); //滚动条颜色
|
|
|
|
+ }
|
|
|
|
+ .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ background: #eee; //滚动条背景色
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
|