feat:重庆市永川区产业园综合视觉管理平台视频对接项目 首页
This commit is contained in:
parent
e895ab12f8
commit
0d700e4180
BIN
god-ui/public/images/yongchuan.png
Normal file
BIN
god-ui/public/images/yongchuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
god-ui/src/views/cqycsjManage/home/assets/top1.png
Normal file
BIN
god-ui/src/views/cqycsjManage/home/assets/top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
god-ui/src/views/cqycsjManage/home/assets/top2.png
Normal file
BIN
god-ui/src/views/cqycsjManage/home/assets/top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
god-ui/src/views/cqycsjManage/home/assets/top3.png
Normal file
BIN
god-ui/src/views/cqycsjManage/home/assets/top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
god-ui/src/views/cqycsjManage/home/assets/top4.png
Normal file
BIN
god-ui/src/views/cqycsjManage/home/assets/top4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
434
god-ui/src/views/cqycsjManage/home/index.vue
Normal file
434
god-ui/src/views/cqycsjManage/home/index.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<!-- 顶部 -->
|
||||
<div class="top">
|
||||
<div class="top-warper">
|
||||
<div v-for="(item, index) in topList" :key="index" class="top-item">
|
||||
<div
|
||||
:class="['top-icon', 'top-icon-' + (index + 1).toString()]"
|
||||
></div>
|
||||
|
||||
<div>
|
||||
<div>{{ item.title }}</div>
|
||||
<div style="font-family: 'TITLEFONT'; margin-top: 10px">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--异常行为趋势 -->
|
||||
<div class="trend">
|
||||
<div class="left">
|
||||
<div class="box-title">异常行为趋势</div>
|
||||
<div class="left-item">
|
||||
<div id="chart1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="box-title">报警信息</div>
|
||||
<div class="right-item">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="行为类型"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="警告信息"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="time" label="警告时间" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 异常行为分布 -->
|
||||
<div class="distribution">
|
||||
<div class="left">
|
||||
<div class="box-title">异常行为分布</div>
|
||||
<div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="box-title">工作人员身份识别</div>
|
||||
<div>
|
||||
<div id="chart3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
generateBaseOptions,
|
||||
generatePieOptions,
|
||||
initChartStatic,
|
||||
} from "@/utils/bigscreenTool/index.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
topList: [
|
||||
{
|
||||
title: "协议型设备",
|
||||
value: "35台",
|
||||
},
|
||||
{
|
||||
title: "控件型设备",
|
||||
value: "42台",
|
||||
},
|
||||
{
|
||||
title: "集成型设备",
|
||||
value: "16台",
|
||||
},
|
||||
{
|
||||
title: "预警数量",
|
||||
value: "23次",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
type: "非法越界",
|
||||
title: "生产车间有人清醒进入",
|
||||
time: "2024/01/04 08:34:54",
|
||||
},
|
||||
{
|
||||
type: "拨打电话",
|
||||
title: "有人员在加工车间拨打电话",
|
||||
time: "2024/01/01 10:19:34",
|
||||
},
|
||||
{
|
||||
type: "抽烟",
|
||||
title: "生产车间有员工抽烟",
|
||||
time: "2023/12/31 09:34:54",
|
||||
},
|
||||
{
|
||||
type: "未佩戴头盔",
|
||||
title: "生产车间有员工未佩戴安全防护头盔",
|
||||
time: "2023/12/31 14:14:23",
|
||||
},
|
||||
{
|
||||
type: "抽烟",
|
||||
title: "包装车间有员工抽烟",
|
||||
time: "2023/12/30 14:34:54",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
this.initChart3();
|
||||
},
|
||||
methods: {
|
||||
initChart1() {
|
||||
let day = new Date().getDate();
|
||||
let month = new Date().getMonth() + 1;
|
||||
let xAxisData = [];
|
||||
for (let i = 0; i < 9; i++) {
|
||||
var a;
|
||||
var d;
|
||||
if (day - i < 1) {
|
||||
if (month <= 1) {
|
||||
d = 12;
|
||||
}
|
||||
let b = 31;
|
||||
a = b + (day - i);
|
||||
} else {
|
||||
a = day - i;
|
||||
d = month;
|
||||
}
|
||||
xAxisData.push(`${d}-${a}`);
|
||||
}
|
||||
initChartStatic(
|
||||
"chart1",
|
||||
generateBaseOptions({
|
||||
xAxis: {
|
||||
data: xAxisData.reverse(),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25252545",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
//网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: {
|
||||
//网格线样式
|
||||
color: "#0735a2", //网格线颜色
|
||||
width: 1, //网格线的加粗程度
|
||||
type: "dashed", //网格线类型
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
//网格区域
|
||||
show: true, //是否显示
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "销售统计",
|
||||
data: [9,22,20,24,19,23,24,17,25],
|
||||
type: "line",
|
||||
smooth: false,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
},
|
||||
initChart2() {
|
||||
initChartStatic(
|
||||
"chart2",
|
||||
generatePieOptions({
|
||||
legend: {
|
||||
// 图例配置
|
||||
show: true,
|
||||
top: "top",
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#252525",
|
||||
},
|
||||
},
|
||||
color: [
|
||||
"#61a4e7",
|
||||
"#7ece51",
|
||||
"#edca5f",
|
||||
"#e2925d",
|
||||
"#e06757",
|
||||
"pink",
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常行为分布",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
center: "center",
|
||||
data: [
|
||||
{
|
||||
name: "离岗",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
name: "睡岗",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: "不戴安全帽",
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
name: "非法越界",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: "拨打电话",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "抽烟",
|
||||
value: 8,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
formatter: "{b|{b}},{c|{c}} ",
|
||||
rich: {
|
||||
c: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
},
|
||||
initChart3() {
|
||||
let day = new Date().getDate();
|
||||
let month = new Date().getMonth() + 1;
|
||||
let xAxisData = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
var a;
|
||||
var d;
|
||||
if (day - i < 1) {
|
||||
if (month <= 1) {
|
||||
d = 12;
|
||||
}
|
||||
let b = 31;
|
||||
a = b + (day - i);
|
||||
} else {
|
||||
a = day - i;
|
||||
d = month;
|
||||
}
|
||||
xAxisData.push(`${d}-${a}`);
|
||||
}
|
||||
|
||||
initChartStatic(
|
||||
"chart3",
|
||||
generateBaseOptions({
|
||||
xAxis: {
|
||||
data: xAxisData.reverse(),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25252545",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
color: ["#61a4e7", "#7ece51"],
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25252545",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: {
|
||||
//网格线样式
|
||||
color: "#0735a2", //网格线颜色
|
||||
width: 1, //网格线的加粗程度
|
||||
type: "dashed", //网格线类型
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
//网格区域
|
||||
show: true, //是否显示
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "员工",
|
||||
data: [98, 96, 95, 96, 95, 98,99],
|
||||
type: "bar",
|
||||
smooth: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "未登记人员",
|
||||
data: [2, 4, 5, 4, 5, 2,6],
|
||||
type: "bar",
|
||||
smooth: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
],
|
||||
grid:{
|
||||
top:'5%'
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@font-face {
|
||||
font-family: "TITLEFONT";
|
||||
src: url(../../../assets/biaoti.ttf);
|
||||
}
|
||||
.box {
|
||||
background: #f1f1f1;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
}
|
||||
//顶部
|
||||
.top {
|
||||
width: 100%;
|
||||
.top-warper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
.top-item {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.top-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-title {
|
||||
font-family: "TITLEFONT";
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
// 异常行为趋势
|
||||
.trend {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
margin-top: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 25px;
|
||||
.left,
|
||||
.right {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.left-item {
|
||||
width: 100%;
|
||||
height: calc(350px - 2rem);
|
||||
#chart1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 异常行为分布
|
||||
.distribution {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 25px;
|
||||
.left,
|
||||
.right {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
#chart2,
|
||||
#chart3 {
|
||||
width: 100%;
|
||||
height: calc(350px - 2rem);
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 4 {
|
||||
.top-icon-#{$i} {
|
||||
background:url(./assets/top#{$i}.png) ;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -451,7 +451,7 @@ export default {
|
||||
],
|
||||
grid: {
|
||||
top: "10%",
|
||||
bottom: "30%",
|
||||
bottom: "10%",
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user