Tony/god-ytr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:管仲远程视频监控管理项目 首页

Browse Source
This commit is contained in:
xuyoubin 2023-12-13 13:51:13 +08:00
parent a7ece0bbf7
commit ab5b4fddad
1 changed files with 359 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

480
god-ui/src/views/constructionSiteData/analysis/index.vue
View File

@ -1,150 +1,388 @@
<template> <template>
<div class="construction-wrapper app-container"> <div class="construction-wrapper app-container">
<div class="grid-basic-wrapper"> <div class="grid-basic-wrapper">
<div class="grid-basic-top-wrapper shadow-wrapper" style="grid-column: span 4;"> <div
<div class="grid-basic-top-title">视频设备统计</div> class="grid-basic-top-wrapper shadow-wrapper"
<div class="grid-basic-top-container"> style="grid-column: span 4"
<div class="grid-basic-top-item"></div> >
<div class="grid-basic-top-item"></div> <div class="grid-basic-top-title">视频设备统计</div>
<div class="grid-basic-top-item"></div> <div class="grid-basic-top-container">
<div class="grid-basic-top-item"></div> <div
</div> class="grid-basic-top-item"
</div> v-for="(item, index) in topLeftList"
<div class="grid-basic-top-wrapper shadow-wrapper" style="grid-column: span 3;"> :key="index"
<div class="grid-basic-top-title">警报统计</div> :style="{ color: item.color }"
<div >
class="grid-basic-top-container" <div>{{ item.msg }}</div>
style="grid-template-columns: 1fr 1fr 1fr;" <div>{{ item.number }}</div>
> </div>
<div class="grid-basic-top-item"></div>
<div class="grid-basic-top-item"></div>
<div class="grid-basic-top-item"></div>
</div>
</div>
</div> </div>
<div class="grid-basic-wrapper" style="margin-top: 16px;grid-template-columns: 1fr;"> </div>
<div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 1;"> <div
<div class="grid-basic-main-title">项目功能分布</div> class="grid-basic-top-wrapper shadow-wrapper"
<div class="grid-basic-main-container project-func-wrapper"> style="grid-column: span 3"
<div class="project-func-item"> >
<span>视频监控接入:</span> <div class="grid-basic-top-title">警报统计</div>
<span>10台设备</span> <div
</div> class="grid-basic-top-container"
<div class="project-func-item"></div> style="grid-template-columns: 1fr 1fr 1fr"
<div class="project-func-item"></div> >
<div class="project-func-item"></div> <div
</div> class="grid-basic-top-item"
</div> v-for="(item, index) in topRightList"
</div> :key="index"
<div class="grid-basic-wrapper" style="margin-top: 16px;"> >
<div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 3;"> <div>{{ item.msg }}</div>
<div class="grid-basic-main-title">警报比例分析</div> <div>{{ item.number }}</div>
<div class="grid-basic-main-container" id="chart1"></div> </div>
</div>
<div class="grid-basic-main-wrapper shadow-wrapper">
<div class="grid-basic-main-title">警报详情</div>
<div class="grid-basic-main-container"></div>
</div>
</div>
<div class="grid-basic-wrapper" style="margin-top: 16px;grid-template-columns: 1fr 1fr;">
<div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 1;">
<div class="grid-basic-main-title">警报趋势分析</div>
<div class="grid-basic-main-container" id="chart2"></div>
</div>
<div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 1;">
<div class="grid-basic-main-title">区域警报统计</div>
<div class="grid-basic-main-container" id="chart3"></div>
</div>
</div> </div>
</div>
</div> </div>
<div
class="grid-basic-wrapper"
style="margin-top: 16px; grid-template-columns: 1fr"
>
<div
class="grid-basic-main-wrapper shadow-wrapper"
style="grid-column: span 1"
>
<div class="grid-basic-main-title">项目功能分布</div>
<div class="grid-basic-main-container project-func-wrapper">
<div
class="project-func-item"
v-for="(item, index) in ProjectFunctionsList"
:key="index"
>
<span>{{ item.name }}:</span>
<span>{{ item.value }}</span>
</div>
<div class="project-func-item-last">
<span>数据可视化</span>
</div>
</div>
</div>
</div>
<div class="grid-basic-wrapper" style="margin-top: 16px">
<div
class="grid-basic-main-wrapper shadow-wrapper"
style="grid-column: span 3"
>
<div class="grid-basic-main-title">警报比例分析</div>
<div class="grid-basic-main-container" id="chart1"></div>
</div>
<div class="grid-basic-main-wrapper shadow-wrapper">
<div class="grid-basic-main-title">警报详情</div>
<div class="grid-basic-main-container">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="time" label="时间" width="180">
</el-table-column>
<el-table-column prop="event" label="事件">
</el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
</el-table>
</div>
</div>
</div>
<div
class="grid-basic-wrapper"
style="margin-top: 16px; grid-template-columns: 1fr 1fr"
>
<div
class="grid-basic-main-wrapper shadow-wrapper"
style="grid-column: span 1"
>
<div class="grid-basic-main-title">警报趋势分析</div>
<div class="grid-basic-main-container" id="chart2"></div>
</div>
<div
class="grid-basic-main-wrapper shadow-wrapper"
style="grid-column: span 1"
>
<div class="grid-basic-main-title">区域警报统计</div>
<div class="grid-basic-main-container" id="chart3"></div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { import {
initChartStatic, initChartStatic,
generateBaseOptions, generateBaseOptions,
generatePieOptions generatePieOptions,
} from '@/utils/bigscreenTool/index.js' } from "@/utils/bigscreenTool/index.js";
export default { export default {
mounted() { data() {
this.initChart1(); const add0 = (val) => {
this.initChart2(); const num = parseInt(val)
this.initChart3(); return num > 9 ? val : ('0' + num)
}
const formatter = (offset = 0, date = new Date()) => {
const d = new Date(date.getTime() - offset);
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(
d.getDate()
)} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`;
};
return {
topLeftList: [
{
msg: "已接入",
number: 10,
color: "blue",
},
{
msg: "在线",
number: 2,
color: "#7ece51",
},
{
msg: "离线",
number: 8,
color: "#ccc",
},
{
msg: "维护",
number: 1,
color: "#edca5f",
},
],
topRightList: [
{
msg: "累计",
number: 27,
},
{
msg: "已处理",
number: 26,
},
{
msg: "未处理",
number: 1,
},
],
ProjectFunctionsList: [
{
name: "视频监控接入",
value: "10台设备",
},
{
name: "算法识别报警",
value: "27条",
},
{
name: "周遭监控监管",
value: "6项",
},
],
tableData: [
{
event:'监测非法人员闯入重点区域',
status:'请进行处理',
time: formatter(15452131),
},
{
event:'监测人员未穿戴反光衣',
status:'请进行处理',
time: formatter(35452131),
},
{
event:'监测人员未戴安全帽',
status:'请进行处理',
time: formatter(45452131),
},
{
event:'监测周遭遭到入侵',
status:'请进行处理',
time: formatter(55452131),
},
{
event:'监测人员聚众',
status:'请进行处理',
time: formatter(65452131),
},
],
};
},
mounted() {
this.initChart1();
this.initChart2();
this.initChart3();
},
methods: {
initChart1() {
initChartStatic(
"chart1",
generatePieOptions({
legend: {
// 图例配置
orient: "vertical",
left: "right",
top: "center",
itemWidth:10,
itemHeight:10,
textStyle: {
color: "#252525A4",
},
},
color: ["#edca5f", "#e2925d", "#e06757", "#61a4e7", "#7ece51"],
series: [
{
name: "数据详情",
type: "pie",
radius: "60%",
center: ["34%", "50%"],
data: [
{
name: "重要区域工作人员检测",
value: 20,
},
{
name: "安全帽佩戴检测",
value: 30,
},
{
name: "周遭入侵检测",
value: 10,
},
{
name: "反光衣穿戴检测",
value: 50,
},
{
name: "裸土覆盖检测",
value: 20,
},
{
name: "人员聚众检测",
value: 5,
},
{
name: "高支模监测",
value: 20,
},
],
label: {
formatter: "{c|{c}} , {per|{d}%}",
rich: {
c: {
color: "#252525A4",
fontSize: 12,
lineHeight: 33,
},
per: {
color: "#252525A4",
fontSize: 12,
lineHeight: 33,
},
},
},
},
],
})
);
}, },
methods: { initChart2() {
initChart1() {},
initChart2() {}, },
initChart3() {}, initChart3() {
} initChartStatic(
} "chart3",
generateBaseOptions({
xAxis: {
name:'地点',
show:true,
position:'bottom',
data: ['工地大门','18号楼施工区','15号楼施工区','健身规划区','车库','水电井'],
},
yAxis:{
type:'value'
},
color: ["#a27f53", "#1a3062", "#124a55"],
series: [
],
})
);
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@font-face { @font-face {
font-family: 'ConstrctionTitle'; font-family: "ConstrctionTitle";
src: url(../../../assets/biaoti.ttf); src: url(../../../assets/biaoti.ttf);
} }
.shadow-wrapper { .shadow-wrapper {
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414; box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
border-radius: 6px; border-radius: 6px;
} }
.construction-wrapper { .construction-wrapper {
background-color: #f1f1f1; background-color: #f1f1f1;
padding: 16px; padding: 16px;
.grid-basic-wrapper { .grid-basic-wrapper {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 14px;
.grid-basic-top-wrapper {
grid-column: span 4;
padding: 12px 16px;
background-color: white;
.grid-basic-top-title {
font-family: "ConstrctionTitle";
color: #252525a2;
padding: 0.4rem 0;
}
.grid-basic-top-container {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 14px; gap: 14px;
.grid-basic-top-wrapper { .grid-basic-top-item {
grid-column: span 4; display: flex;
padding: 12px 16px; justify-content: space-around;
background-color: white; align-items: center;
.grid-basic-top-title {
font-family: 'ConstrctionTitle';
color: #252525a2;
padding: .4rem 0;
}
.grid-basic-top-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
.grid-basic-top-item {
border: 1px solid red;
}
}
}
.grid-basic-main-wrapper {
grid-column: span 4;
padding: 12px 16px;
background-color: white;
.grid-basic-main-title {
font-family: 'ConstrctionTitle';
color: #252525a2;
padding: .4rem 0;
}
.grid-basic-main-container {
border: 1px solid red;
}
} }
}
} }
.grid-basic-main-wrapper {
grid-column: span 4;
padding: 12px 16px;
background-color: white;
.grid-basic-main-title {
font-family: "ConstrctionTitle";
color: #252525a2;
padding: 0.4rem 0;
}
.grid-basic-main-container {
border: 1px solid red;
}
}
}
} }
/**项目功能分布 */ /**项目功能分布 */
.project-func-wrapper { .project-func-wrapper {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 12px; gap: 12px;
.project-func-item { .project-func-item {
border-radius: 6px; border-radius: 6px;
border: 1px solid #25252525; border: 1px solid #25252525;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: .6rem 1.4rem; padding: 0.6rem 1.4rem;
} }
.project-func-item-last {
border-radius: 6px;
border: 1px solid #25252525;
text-align: center;
padding: 0.6rem 1.4rem;
}
} }
#chart1, #chart2, #chart3 { #chart1,
min-height: 250px; #chart2,
#chart3 {
min-height: 250px;
} }
</style> </style>