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

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

Browse Source
This commit is contained in:
Tony 2023-12-13 10:15:48 +08:00
parent 73dfb1c063
commit ad0e0800e9
1 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
god-ui/src/views/constructionSiteData/analysis/index.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div class="construction-wrapper app-container">
<div class="grid-basic-wrapper">
<div class="grid-basic-top-wrapper shadow-wrapper" style="grid-column: span 4;">
<div class="grid-basic-top-title">视频设备统计</div>
<div class="grid-basic-top-container">
<div class="grid-basic-top-item"></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 class="grid-basic-top-wrapper shadow-wrapper" style="grid-column: span 3;">
<div class="grid-basic-top-title">警报统计</div>
<div
class="grid-basic-top-container"
style="grid-template-columns: 1fr 1fr 1fr;"
>
<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 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">
<span>视频监控接入:</span>
<span>10台设备</span>
</div>
<div class="project-func-item"></div>
<div class="project-func-item"></div>
<div class="project-func-item"></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"></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>
<script>
import {
initChartStatic,
generateBaseOptions,
generatePieOptions
} from '@/utils/bigscreenTool/index.js'
export default {
mounted() {
this.initChart1();
this.initChart2();
this.initChart3();
},
methods: {
initChart1() {},
initChart2() {},
initChart3() {},
}
}
</script>
<style scoped lang="scss">
@font-face {
font-family: 'ConstrctionTitle';
src: url(../../../assets/biaoti.ttf);
}
.shadow-wrapper {
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
border-radius: 6px;
}
.construction-wrapper {
background-color: #f1f1f1;
padding: 16px;
.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: .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;
}
}
}
}
/**项目功能分布 */
.project-func-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
.project-func-item {
border-radius: 6px;
border: 1px solid #25252525;
display: flex;
justify-content: space-between;
align-items: center;
padding: .6rem 1.4rem;
}
}
#chart1, #chart2, #chart3 {
min-height: 250px;
}
</style>