feat:管仲远程视频监控管理项目 首页
This commit is contained in:
parent
a7ece0bbf7
commit
ab5b4fddad
@ -1,150 +1,388 @@
|
||||
<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 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"
|
||||
v-for="(item, index) in topLeftList"
|
||||
:key="index"
|
||||
:style="{ color: item.color }"
|
||||
>
|
||||
<div>{{ item.msg }}</div>
|
||||
<div>{{ item.number }}</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
|
||||
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"
|
||||
v-for="(item, index) in topRightList"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.msg }}</div>
|
||||
<div>{{ item.number }}</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>
|
||||
<script>
|
||||
import {
|
||||
initChartStatic,
|
||||
generateBaseOptions,
|
||||
generatePieOptions
|
||||
} from '@/utils/bigscreenTool/index.js'
|
||||
initChartStatic,
|
||||
generateBaseOptions,
|
||||
generatePieOptions,
|
||||
} from "@/utils/bigscreenTool/index.js";
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
this.initChart3();
|
||||
data() {
|
||||
const add0 = (val) => {
|
||||
const num = parseInt(val)
|
||||
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: {
|
||||
initChart1() {},
|
||||
initChart2() {},
|
||||
initChart3() {},
|
||||
}
|
||||
}
|
||||
initChart2() {
|
||||
|
||||
},
|
||||
initChart3() {
|
||||
initChartStatic(
|
||||
"chart3",
|
||||
generateBaseOptions({
|
||||
xAxis: {
|
||||
name:'地点',
|
||||
show:true,
|
||||
position:'bottom',
|
||||
data: ['工地大门','18号楼施工区','15号楼施工区','健身规划区','车库','水电井'],
|
||||
},
|
||||
yAxis:{
|
||||
type:'value'
|
||||
},
|
||||
color: ["#a27f53", "#1a3062", "#124a55"],
|
||||
series: [
|
||||
|
||||
],
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
font-family: 'ConstrctionTitle';
|
||||
src: url(../../../assets/biaoti.ttf);
|
||||
font-family: "ConstrctionTitle";
|
||||
src: url(../../../assets/biaoti.ttf);
|
||||
}
|
||||
.shadow-wrapper {
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.construction-wrapper {
|
||||
background-color: #f1f1f1;
|
||||
padding: 16px;
|
||||
.grid-basic-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: 0.4rem 0;
|
||||
}
|
||||
.grid-basic-top-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-columns: repeat(4, 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;
|
||||
}
|
||||
.grid-basic-top-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
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: 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 {
|
||||
min-height: 250px;
|
||||
#chart1,
|
||||
#chart2,
|
||||
#chart3 {
|
||||
min-height: 250px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user