172 lines
3.8 KiB
Vue
172 lines
3.8 KiB
Vue
<template>
|
|
<div class="main-content">
|
|
<div class="title-content">
|
|
<div class="box-between">
|
|
<div>监控点运行情况趋势图</div>
|
|
</div>
|
|
<div class="time-condition">
|
|
<el-radio-group v-model="timeRadio" size="small">
|
|
<el-radio-button label="1">近七日</el-radio-button>
|
|
<el-radio-button label="2">近一月</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="chart" ref="ChartFour"></div>
|
|
<!-- <div v-if="statsEnterpriseList.length == 0">
|
|
<div class="placeholderBox">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import echarts from "echarts4";
|
|
import {
|
|
countStatusTrendApi
|
|
} from "@/assets/js/api/equipmentCenter/cameraList";
|
|
export default {
|
|
data() {
|
|
return {
|
|
timeRadio: "1",
|
|
};
|
|
},
|
|
created() {
|
|
this.getCountStatusTrendFn();
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
getCountStatusTrendFn(){
|
|
let that = this;
|
|
countStatusTrendApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
type: this.timeRadio
|
|
}).then((res) => {
|
|
console.log("趋势图", res);
|
|
that.centerOne(res.result)
|
|
});
|
|
},
|
|
centerOne(arr) {
|
|
let xData = [];
|
|
let yData1 = [];
|
|
let yData2 = [];
|
|
if(arr){
|
|
arr.map(item => {
|
|
xData.push(item.date)
|
|
yData1.push(item.onlineRatio + "%")
|
|
yData2.push(item.normalRatio + "%")
|
|
})
|
|
}
|
|
let ageChart = echarts.init(this.$refs.ChartFour);
|
|
let option = {
|
|
color: ["#65B1E5","#4775FC"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
label: {
|
|
backgroundColor: "#6a7985",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["监控点在线率","图像正常率"],
|
|
right: 20,
|
|
top: 10
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "0%",
|
|
top: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: xData,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "监控点在线率",
|
|
type: "line",
|
|
stack: "Total",
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: yData1,
|
|
},
|
|
{
|
|
name: "图像正常率",
|
|
type: "line",
|
|
stack: "Total",
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
data: yData2,
|
|
}
|
|
],
|
|
};
|
|
ageChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
ageChart.resize();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
.title-content {
|
|
display: flex;
|
|
align-items: center;
|
|
.box-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-left: 16px;
|
|
margin-right: auto;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.box-between::before {
|
|
content: "";
|
|
width: 3px;
|
|
height: 25px;
|
|
background: #268dff;
|
|
position: absolute;
|
|
left: -8px;
|
|
}
|
|
.time-condition {
|
|
margin-right: 16px;
|
|
margin-top: 5px;
|
|
:deep() {
|
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
background-color: transparent;
|
|
border: 1px solid #f28586;
|
|
color: #f28586;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chart {
|
|
width: 100%;
|
|
height: 88%;
|
|
}
|
|
}
|
|
</style>
|