168 lines
3.9 KiB
Vue
168 lines
3.9 KiB
Vue
<template>
|
|
<div class="big-today-ratio-wrap">
|
|
<nav-temp htmlType="t1" :title="title">
|
|
<div class="bd-conter" slot="mk-center">
|
|
<div class="echarts-list-wrap">
|
|
<div v-for="item in rchartsList" :key="item.valueKeys">
|
|
<div class="title">{{ item.title }}</div>
|
|
<echarts-gauge-wrap
|
|
:styles="item.styles"
|
|
:colorList="item.colorList"
|
|
:eId="item.valueKeys"
|
|
:option="tempResult[item.valueKeys]"
|
|
></echarts-gauge-wrap>
|
|
</div>
|
|
</div>
|
|
<div class="info-tb-block">
|
|
<div>
|
|
<div>{{ alarmTB }}%</div>
|
|
<div>同比</div>
|
|
</div>
|
|
<div>
|
|
<div>{{ warningTB }}%</div>
|
|
<div>同比</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav-temp>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import EchartsGaugeWrap from "./echartsGauge";
|
|
import NavTemp from "./navTemp";
|
|
export default {
|
|
name: "todayRatio",
|
|
components: {
|
|
EchartsGaugeWrap,
|
|
NavTemp,
|
|
},
|
|
props: ["result"],
|
|
data() {
|
|
return {
|
|
tempResult: {
|
|
q1: 0,
|
|
q2: 0,
|
|
q3: 0,
|
|
q4: 0,
|
|
},
|
|
alarmTB: 0,
|
|
warningTB: 0,
|
|
rchartsList: [
|
|
{
|
|
styles: "width: 100%; height: 100%;",
|
|
colorList: ["#27d0ec"],
|
|
valueKeys: "q1",
|
|
title: "今日报警",
|
|
},
|
|
{
|
|
styles: "width: 100%; height: 100%;",
|
|
colorList: ["#fdc46e"],
|
|
valueKeys: "q2",
|
|
title: "昨日报警 ",
|
|
},
|
|
{
|
|
styles: "width: 100%; height: 100%;",
|
|
colorList: ["#27d0ec"],
|
|
valueKeys: "q3",
|
|
title: "今日预警",
|
|
},
|
|
{
|
|
styles: "width: 100%; height: 100%;",
|
|
colorList: ["#fdc46e"],
|
|
valueKeys: "q4",
|
|
title: "昨日预警",
|
|
},
|
|
],
|
|
title: "最近2天警情同比",
|
|
};
|
|
},
|
|
watch: {
|
|
result: {
|
|
handler: function (val, oldVal) {
|
|
if (val) {
|
|
this.tempResult = {};
|
|
for (var i = 0; i < val.length; i++) {
|
|
if (val[i]["alarmDivide"] === "ALARM") {
|
|
this.tempResult["q1"] = val[i]["todayAlarm"];
|
|
this.tempResult["q2"] = val[i]["yesterdayAlarm"];
|
|
this.alarmTB = val[i]["dayOnDay"];
|
|
} else if (val[i]["alarmDivide"] === "WARNING") {
|
|
this.tempResult["q3"] = val[i]["todayAlarm"];
|
|
this.tempResult["q4"] = val[i]["yesterdayAlarm"];
|
|
this.warningTB = val[i]["dayOnDay"];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.big-today-ratio-wrap {
|
|
width: 100%;
|
|
height: 370px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.bd-conter {
|
|
width: 100%;
|
|
height: 310px;
|
|
background-size: contain;
|
|
padding-top: 10px;
|
|
padding: 5px;
|
|
display: flex;
|
|
padding: 0 20px;
|
|
.echarts-list-wrap {
|
|
width: 80%;
|
|
height: 200px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
> div {
|
|
width: 50%;
|
|
height: calc(100% / 2);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-family: "Source Han Sans CN";
|
|
font-weight: 400;
|
|
> .title {
|
|
position: relative;
|
|
top: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
.info-tb-block {
|
|
height: 100%;
|
|
display: flex;
|
|
width: 20%;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
cursor: default;
|
|
> div {
|
|
width: 100%;
|
|
// height: 50%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: inherit;
|
|
justify-content: center;
|
|
> div {
|
|
width: 100%;
|
|
height: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|