admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: BUG修改

Browse Source
This commit is contained in:
kun 2024-05-21 20:18:00 +08:00
parent 55ddff865b
commit 410664cf48
4 changed files with 90 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/js/api/equipmentCenter/cameraList.js
View File

@ -49,4 +49,8 @@ export const getAllNvrApi = data => get('/xmgl/videoNvr/list', data); //获取
export const addPluginApi = data => post('/xmgl/devMonitorPlugin/addDevMonitorPlugin', data); //新增监测插件
export const getPluginApi = data => get('/xmgl/devMonitorPlugin/selectPage', data); //分页查询监测插件
export const editPluginApi = data => post('/xmgl/devMonitorPlugin/updateDevMonitorPlugin', data); //编辑监测插件
export const delPluginApi = data => get('/xmgl/devMonitorPlugin/deleteById', data); //删除监测插件
export const delPluginApi = data => get('/xmgl/devMonitorPlugin/deleteById', data); //删除监测插件
// 监控数据分析
export const countStatusApi = data => post('xmgl/videoItem/countStatus', data);
export const countStatusTrendApi = data => post('xmgl/videoItem/countStatusTrend', data);

55
src/views/projectFront/videoDataAnalysis/chartComponents/ChartFour.vue
View File

@ -6,8 +6,8 @@
</div>
<div class="time-condition">
<el-radio-group v-model="timeRadio" size="small">
<el-radio-button label="3">近七日</el-radio-button>
<el-radio-button label="4">近一月</el-radio-button>
<el-radio-button label="1">近七日</el-radio-button>
<el-radio-button label="2">近一月</el-radio-button>
</el-radio-group>
</div>
</div>
@ -22,20 +22,45 @@
</template>
<script>
import echarts from "echarts4";
import {
countStatusTrendApi
} from "@/assets/js/api/equipmentCenter/cameraList";
export default {
data() {
return {
timeRadio: "3",
timeRadio: "1",
};
},
created() {},
created() {
this.getCountStatusTrendFn();
},
mounted() {
this.centerOne();
},
methods: {
centerOne() {
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: {
@ -46,7 +71,7 @@ export default {
},
},
legend: {
data: ["Email"],
data: ["监控点在线率","图像正常率"],
right: 20,
top: 10
},
@ -61,7 +86,7 @@ export default {
{
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
data: xData,
},
],
yAxis: [
@ -71,14 +96,24 @@ export default {
],
series: [
{
name: "Email",
name: "监控点在线率",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
data: yData1,
},
{
name: "图像正常率",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: yData2,
}
],
};

30
src/views/projectFront/videoDataAnalysis/chartComponents/ChartOne.vue
View File

@ -11,15 +11,31 @@
</template>
<script>
import echarts from "echarts4";
import {
countStatusApi
} from "@/assets/js/api/equipmentCenter/cameraList";
export default {
data() {
return {};
return {
countData: {}
};
},
created() {
this.getCountStatusFn();
},
created() {},
mounted() {
this.topChartOne();
},
methods: {
getCountStatusFn(){
let that = this;
countStatusApi({
projectSn: this.$store.state.projectSn,
}).then((res) => {
console.log("获取视频分组列表", res);
that.countData = res.result;
that.topChartOne();
});
},
// 顶部图1
topChartOne() {
let ageChart = echarts.init(this.$refs.ChartOne);
@ -30,7 +46,7 @@ export default {
show: true,
left: "32%",
top: "40%",
text: "100.00%",
text: this.countData.onlineRatio + "%",
textStyle: {
fontSize: 20,
color: "#000",
@ -107,9 +123,9 @@ export default {
show: false,
},
data: [
{ value: 1048, name: "在线" },
{ value: 735, name: "离线" },
{ value: 580, name: "未检测" },
{ value: this.countData.onlineNum || 0, name: "在线" },
{ value: this.countData.offlineNum || 0, name: "离线" },
{ value: this.countData.notDetectNum || 0, name: "未检测" },
],
},
],

20
src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue
View File

@ -3,7 +3,7 @@
<div class="top-content">
<div class="top-content-one">
<span>监控点总数</span>
<span>56</span>
<span>{{countData.total || 0}}</span>
</div>
<div class="top-content-two">
<ChartOne></ChartOne>
@ -129,6 +129,9 @@ import ChartTwo from "./chartComponents/ChartTwo";
import ChartThree from "./chartComponents/ChartThree";
import ChartFour from "./chartComponents/ChartFour";
import ChartFive from "./chartComponents/ChartFive";
import {
countStatusApi
} from "@/assets/js/api/equipmentCenter/cameraList";
export default {
data() {
return {
@ -141,6 +144,7 @@ export default {
pageSize: 10,
total: 0,
},
countData: {}
};
},
components: {
@ -150,9 +154,19 @@ export default {
ChartFour,
ChartFive,
},
created() {},
mounted() {},
created() {
this.getCountStatusFn();
},
methods: {
getCountStatusFn(){
let that = this;
countStatusApi({
projectSn: this.$store.state.projectSn,
}).then((res) => {
console.log("获取视频分组列表", res);
that.countData = res.result;
});
},
handleSizeChange(val) {
this.pageInfo.pageSize = val;
this.searchData();