|
|
@@ -16,7 +16,7 @@ |
|
|
|
</div> |
|
|
|
<div class="home-bg-content-item-content"> |
|
|
|
<div class="home-bg-content-item-title">摄像头数量</div> |
|
|
|
<div class="home-bg-content-item-value">3</div> |
|
|
|
<div class="home-bg-content-item-value">{{ basicInfo.cameraCount }}</div> |
|
|
|
</div> |
|
|
|
</div></el-col |
|
|
|
> |
|
|
@@ -27,7 +27,7 @@ |
|
|
|
</div> |
|
|
|
<div class="home-bg-content-item-content"> |
|
|
|
<div class="home-bg-content-item-title">预警信息总量</div> |
|
|
|
<div class="home-bg-content-item-value">1972</div> |
|
|
|
<div class="home-bg-content-item-value">{{ basicInfo.warnCount }}</div> |
|
|
|
</div> |
|
|
|
</div></el-col |
|
|
|
> |
|
|
@@ -38,7 +38,7 @@ |
|
|
|
</div> |
|
|
|
<div class="home-bg-content-item-content"> |
|
|
|
<div class="home-bg-content-item-title">处理意见提交</div> |
|
|
|
<div class="home-bg-content-item-value">40</div> |
|
|
|
<div class="home-bg-content-item-value">{{ basicInfo.handCount }}</div> |
|
|
|
</div> |
|
|
|
</div></el-col |
|
|
|
> |
|
|
@@ -49,7 +49,7 @@ |
|
|
|
</div> |
|
|
|
<div class="home-bg-content-item-content"> |
|
|
|
<div class="home-bg-content-item-title">参与安防教师</div> |
|
|
|
<div class="home-bg-content-item-value">22</div> |
|
|
|
<div class="home-bg-content-item-value">{{ basicInfo.teacherCount }}</div> |
|
|
|
</div> |
|
|
|
</div></el-col |
|
|
|
> |
|
|
@@ -86,7 +86,7 @@ |
|
|
|
<div>高危预警信息统计</div> |
|
|
|
</div> |
|
|
|
<div class="home-bg-content handleBox"> |
|
|
|
<ProTable ref="proTable" title="视频列表" :toolButton="false" :pagination="false" :columns="columns" :data="tableData"> </ProTable> |
|
|
|
<ProTable ref="proTable" :toolButton="false" :pagination="false" :columns="columns" :data="highTabledata"> </ProTable> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
@@ -108,7 +108,7 @@ |
|
|
|
<script setup lang="ts" name="home"> |
|
|
|
import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue"; |
|
|
|
import { ElMessage } from "element-plus"; |
|
|
|
import { monitorLIVEApi } from "@/api"; |
|
|
|
import { warnZJRQApi } from "@/api"; |
|
|
|
import { ZJRQ } from "@/api/interface"; |
|
|
|
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; |
|
|
|
import { useDictStore } from "@/stores/modules"; |
|
|
@@ -121,9 +121,30 @@ const chart2 = ref(null); |
|
|
|
const chart3 = ref(null); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getBasic(); |
|
|
|
getHighWarin(); |
|
|
|
getDataChart(); |
|
|
|
getWeekData(); |
|
|
|
}); |
|
|
|
let basicInfo = reactive({ |
|
|
|
cameraCount: 0, |
|
|
|
handCount: 0, |
|
|
|
teacherCount: 0, |
|
|
|
warnCount: 0 |
|
|
|
}); |
|
|
|
|
|
|
|
// 获取基础数据 |
|
|
|
function getBasic() { |
|
|
|
warnZJRQApi.basicInfo().then((res: any) => { |
|
|
|
if (res.code == 200) { |
|
|
|
basicInfo.cameraCount = res.data.cameraCount; |
|
|
|
basicInfo.handCount = res.data.handCount; |
|
|
|
basicInfo.teacherCount = res.data.teacherCount; |
|
|
|
basicInfo.warnCount = res.data.warnCount; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function getDataChart() { |
|
|
|
setTimeout(async () => { |
|
|
|
await statistionApi.warnstatistion({}).then(res => { |
|
|
@@ -158,6 +179,7 @@ function getDataChart() { |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function getCharts1(data: any) { |
|
|
|
const chart = echarts.init(chart1.value); |
|
|
|
const option = { |
|
|
@@ -170,7 +192,7 @@ function getCharts1(data: any) { |
|
|
|
// }, |
|
|
|
legend: { |
|
|
|
orient: "vertical", |
|
|
|
left: "right", |
|
|
|
right: "0%", |
|
|
|
top: "middle" |
|
|
|
}, |
|
|
|
series: [ |
|
|
@@ -220,7 +242,7 @@ function getCharts2(data: any) { |
|
|
|
// }, |
|
|
|
legend: { |
|
|
|
orient: "vertical", |
|
|
|
left: "right", |
|
|
|
right: "0%", |
|
|
|
top: "middle" |
|
|
|
}, |
|
|
|
series: [ |
|
|
@@ -325,61 +347,37 @@ const dictStore = useDictStore(); |
|
|
|
// 表格配置项 |
|
|
|
const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ |
|
|
|
{ |
|
|
|
prop: "type", |
|
|
|
prop: "name", |
|
|
|
label: "数据类型" |
|
|
|
// render: () => { |
|
|
|
// return "楼道"; |
|
|
|
// } |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "warntotal", |
|
|
|
label: "预警总量" |
|
|
|
prop: "day", |
|
|
|
label: "今日预警" |
|
|
|
// render: () => { |
|
|
|
// return "楼道"; |
|
|
|
// } |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "lowrisk", |
|
|
|
label: "低危信息 " |
|
|
|
prop: "week", |
|
|
|
label: "七日预警 " |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "highrisk", |
|
|
|
label: "高危信息" |
|
|
|
prop: "count", |
|
|
|
label: "预警总量" |
|
|
|
} |
|
|
|
]; |
|
|
|
const tableData = ref([ |
|
|
|
{ |
|
|
|
type: "今日", |
|
|
|
warntotal: "20", |
|
|
|
lowrisk: "10", |
|
|
|
highrisk: "10" |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "本周", |
|
|
|
warntotal: "50", |
|
|
|
lowrisk: "20", |
|
|
|
highrisk: "30" |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "本月", |
|
|
|
warntotal: "198", |
|
|
|
lowrisk: "176", |
|
|
|
highrisk: "22" |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "上月", |
|
|
|
warntotal: "10", |
|
|
|
lowrisk: "5", |
|
|
|
highrisk: "5" |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
type: "环比", |
|
|
|
warntotal: "-9.07%", |
|
|
|
lowrisk: "0%", |
|
|
|
highrisk: "0%" |
|
|
|
} |
|
|
|
]); |
|
|
|
let highTabledata = ref([]); |
|
|
|
// 获取高危预警数据 |
|
|
|
function getHighWarin() { |
|
|
|
warnZJRQApi.highWarn().then((res: any) => { |
|
|
|
if (res.code == 200) { |
|
|
|
highTabledata.value = res.data; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
const tableLoading = ref(false); |
|
|
|
</script> |
|
|
|
|
|
|
|