fix: 编写临边防护页面
This commit is contained in:
cjp
parent
1674d97e51
commit
6c62ea7cd7
BIN
src/assets/images/edgeProtection/realtimeIcon.png
Normal file
BIN
src/assets/images/edgeProtection/realtimeIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/images/edgeProtection/textBg.png
Normal file
BIN
src/assets/images/edgeProtection/textBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/edgeProtection/warn1.png
Normal file
BIN
src/assets/images/edgeProtection/warn1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/images/edgeProtection/warn2.png
Normal file
BIN
src/assets/images/edgeProtection/warn2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/images/edgeProtection/warn3.png
Normal file
BIN
src/assets/images/edgeProtection/warn3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/images/edgeProtection/warn4.png
Normal file
BIN
src/assets/images/edgeProtection/warn4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/images/lineSymbol2.png
Normal file
BIN
src/assets/images/lineSymbol2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@ -107,6 +107,16 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
path: "/standardCureRoom",
|
||||
name: "标养室监测",
|
||||
component: () => import("@/views/sevenLargeScreen/digitalConstruction/standardCureRoom/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/edgeProtection",
|
||||
name: "临边防护",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/edgeProtection/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/toxicGasMonitor",
|
||||
name: "有毒气体监测",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/index.vue")
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
<div class="tabList">
|
||||
<div>序号</div>
|
||||
<div>抓拍照片</div>
|
||||
<div>设备名称</div>
|
||||
<div style="margin-right: 1%">设备名称</div>
|
||||
<div>告警类型</div>
|
||||
<div>告警时间</div>
|
||||
<div style="margin-right: 1%">告警时间</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div class="list-img">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<img src="@/assets/images/vehicleManagement/car.png" alt="" />
|
||||
</div>
|
||||
<!-- <div>{{ item.dev }}</div> -->
|
||||
<div>{{ item.devName }}</div>
|
||||
<div style="padding-left: 1%">{{ item.warnType }}</div>
|
||||
<div>{{ item.warnType }}</div>
|
||||
<div>{{ item.warnTime }}</div>
|
||||
<div style="color: #65d7f9; cursor: pointer" @click="showDialog = !showDialog">查看详情</div>
|
||||
</div>
|
||||
@ -300,10 +300,9 @@ onMounted(async () => {});
|
||||
color: #ccc;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
line-height: 30px;
|
||||
justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
width: 10%;
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
@ -312,22 +311,22 @@ onMounted(async () => {});
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
height: 10%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
.list-img {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
width: 15%;
|
||||
height: 70%;
|
||||
box-sizing: border-box;
|
||||
img {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
width: 10%;
|
||||
width: 18%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div>{{ index + 1 }}</div>
|
||||
<!-- <div>{{ item.dev }}</div> -->
|
||||
<div>{{ item.devName }}</div>
|
||||
<div>{{ item.warnTime }}</div>
|
||||
<div style="margin-right: 0.5%">{{ item.warnTime }}</div>
|
||||
<div>{{ item.warnType }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
@ -126,99 +126,23 @@ onMounted(async () => {});
|
||||
left: 0%;
|
||||
background: rgba(7, 28, 49, 0.5);
|
||||
z-index: 20;
|
||||
.dialog-content {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 1%;
|
||||
left: 38%;
|
||||
top: 30%;
|
||||
width: 25%;
|
||||
height: 45%;
|
||||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 21;
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 3%;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
}
|
||||
.dialog-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
font-family: "OPPOSans-Bold";
|
||||
}
|
||||
.dialog-detail {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 5%;
|
||||
.small-pic {
|
||||
width: 18%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.detail-text {
|
||||
width: 80%;
|
||||
.text-box {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.type {
|
||||
width: 25%;
|
||||
margin-left: 3%;
|
||||
color: #a1accb;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
}
|
||||
.text {
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pic-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
font-family: "OPPOSans-Bold";
|
||||
margin-top: 5%;
|
||||
}
|
||||
.big-pic {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
margin-top: 5%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
// .title {
|
||||
// height: 10%;
|
||||
// line-height: 35px;
|
||||
// text-align: left;
|
||||
// font-size: calc(100vw * 18 / 1920);
|
||||
// color: #ffffff;
|
||||
// background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// i {
|
||||
// margin-left: 50px;
|
||||
// font-family: OPPOSansH;
|
||||
// }
|
||||
// }
|
||||
.left-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -239,7 +163,7 @@ onMounted(async () => {});
|
||||
line-height: 30px;
|
||||
div {
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
@ -262,7 +186,7 @@ onMounted(async () => {});
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
width: 24%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,6 +139,14 @@ let menuList = ref([
|
||||
{
|
||||
menuName: "安全管理",
|
||||
companyPath: "/securityManagement"
|
||||
},
|
||||
{
|
||||
menuName: "有毒气体监测",
|
||||
companyPath: "/toxicGasMonitor"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护",
|
||||
companyPath: "/edgeProtection"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<Card title="实时数据">
|
||||
<div class="bottom-box">
|
||||
<div class="list-content">
|
||||
<div class="tabList">
|
||||
<div>序号</div>
|
||||
<div style="width: 25%">上报时间</div>
|
||||
<div>设备名称</div>
|
||||
<div style="width: 15%">设备编号</div>
|
||||
<div>电量</div>
|
||||
<div>防翻越</div>
|
||||
<div>人员靠近</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div style="width: 25%">{{ item.reportTime }}</div>
|
||||
<div>{{ item.devName }}</div>
|
||||
<div style="width: 15%; margin-right: 0.5%">{{ item.devCode }}</div>
|
||||
<div>{{ item.quantityElectricity }}</div>
|
||||
<div :style="{ color: item.antiCrossType == 1 ? '#EC6266' : '#FFFFFF' }">
|
||||
{{ item.antiCrossType == 0 ? "正常" : "报警" }}
|
||||
</div>
|
||||
<div :style="{ color: item.personApproachType == 1 ? '#EC6266' : '#FFFFFF' }">
|
||||
{{ item.personApproachType == 0 ? "正常" : "报警" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let showDialog = ref(false as any);
|
||||
let rangeTime = ref("" as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "90%",
|
||||
antiCrossType: 0,
|
||||
personApproachType: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "80%",
|
||||
antiCrossType: 1,
|
||||
personApproachType: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "70%",
|
||||
antiCrossType: 1,
|
||||
personApproachType: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "98%",
|
||||
antiCrossType: 0,
|
||||
personApproachType: 1
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "80%",
|
||||
antiCrossType: 0,
|
||||
personApproachType: 1
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "75%",
|
||||
antiCrossType: 1,
|
||||
personApproachType: 0
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "91%",
|
||||
antiCrossType: 0,
|
||||
personApproachType: 1
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "60%",
|
||||
antiCrossType: 1,
|
||||
personApproachType: 0
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "40%",
|
||||
antiCrossType: 0,
|
||||
personApproachType: 1
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "87%",
|
||||
antiCrossType: 1,
|
||||
personApproachType: 0
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "90%",
|
||||
antiCrossType: 0,
|
||||
personApproachType: 1
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
reportTime: "2023-01-01 12:00:00",
|
||||
devName: "防护栏杆",
|
||||
devCode: "LB59010292",
|
||||
quantityElectricity: "58%",
|
||||
antiCrossType: 1,
|
||||
personApproachType: 0
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 选择框样式
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bottom-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.time-range {
|
||||
position: absolute;
|
||||
right: 1%;
|
||||
top: 5%;
|
||||
}
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.tabList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
line-height: 30px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 90%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 10%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<Card title="报警数据">
|
||||
<div class="bottom-box">
|
||||
<div class="time-range">
|
||||
<el-date-picker
|
||||
v-model="rangeTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div>安装位置</div>
|
||||
<div>设备名称</div>
|
||||
<div>编号</div>
|
||||
<div>监测对象</div>
|
||||
<div>报警类型</div>
|
||||
<div>报警时间</div>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.installPosition }}</div>
|
||||
<div>{{ item.devName }}</div>
|
||||
<div>{{ item.devCode }}</div>
|
||||
<div style="margin-right: 0.5%">{{ item.monitorObj }}</div>
|
||||
<div>{{ item.warnType }}</div>
|
||||
<div>{{ item.warnTime }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let showDialog = ref(false as any);
|
||||
let rangeTime = ref("" as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
installPosition: "深基坑周围",
|
||||
devName: "防护栏杆",
|
||||
devCode: "lbfh1234",
|
||||
monitorObj: "磁锁",
|
||||
warnType: "线锁报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 选择框样式
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
height: 1%;
|
||||
background: #0d2956;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bottom-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 4%;
|
||||
position: relative;
|
||||
.time-range {
|
||||
width: 16%;
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 3%;
|
||||
}
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
height: 89%;
|
||||
width: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
line-height: 30px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 87%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 8%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="distributionBox">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<TopCenter></TopCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<BottomLeft></BottomLeft>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopLeft from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/topLeft.vue";
|
||||
import TopCenter from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/topCenter.vue";
|
||||
import TopRight from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/topRight.vue";
|
||||
import BottomLeft from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomLeft.vue";
|
||||
import BottomRight from "@/views/sevenLargeScreen/safetyManagement/edgeProtection/bottomRight.vue";
|
||||
export default {
|
||||
components: { TopLeft, TopCenter, TopRight, BottomLeft, BottomRight }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distributionBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 33%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 33%;
|
||||
:deep(.h-card) {
|
||||
// .content {
|
||||
// margin-top: 1.5% !important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 33%;
|
||||
margin-right: 1%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 66%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<Card title="实时监测">
|
||||
<div class="edge-center-top">
|
||||
<div class="warn-box">
|
||||
<div class="box-content" v-for="(item, index) in list" :key="item.id">
|
||||
<div class="num" :style="{ color: item.color }">{{ item.num }}</div>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-center-icon">
|
||||
<img src="@/assets/images/edgeProtection/realtimeIcon.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
num: "1024",
|
||||
text: "今日报警",
|
||||
color: "#4AC0F3"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
num: "1024",
|
||||
text: "电量过低",
|
||||
color: "#82FBEA"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
num: "1024",
|
||||
text: "人员靠近",
|
||||
color: "#EEA959"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
num: "1024",
|
||||
text: "翻越报警",
|
||||
color: "#EC6266"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top-center-icon {
|
||||
width: 90%;
|
||||
height: 45%;
|
||||
margin: auto;
|
||||
margin-top: 12%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.edge-center-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.warn-box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 5%;
|
||||
.box-content {
|
||||
text-align: center;
|
||||
margin-top: 6%;
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-size: 26px;
|
||||
font-family: sadigitalNumber;
|
||||
color: #4ac0f3;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
margin-top: 15%;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<Card title="报警统计(次)">
|
||||
<div class="top-left">
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon" style="margin-top: 5%">
|
||||
<img src="@/assets/images/edgeProtection/warn1.png" alt="" />
|
||||
</div>
|
||||
<div class="warn-detail" style="margin-top: 5%">
|
||||
<div class="warn-text">报警总数</div>
|
||||
<div class="warn-num">75</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon" style="margin-top: 5%">
|
||||
<img src="@/assets/images/edgeProtection/warn2.png" alt="" />
|
||||
</div>
|
||||
<div class="warn-detail" style="margin-top: 5%">
|
||||
<div class="warn-text">电量过低</div>
|
||||
<div class="warn-num">75</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon">
|
||||
<img src="@/assets/images/edgeProtection/warn3.png" alt="" />
|
||||
</div>
|
||||
<div class="warn-detail">
|
||||
<div class="warn-text">人员靠近</div>
|
||||
<div class="warn-num">498</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon">
|
||||
<img src="@/assets/images/edgeProtection/warn4.png" alt="" />
|
||||
</div>
|
||||
<div class="warn-detail">
|
||||
<div class="warn-text">翻越报警</div>
|
||||
<div class="warn-num">468</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.warn-box {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
.warn-icon {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.warn-detail {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.warn-text {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
padding-top: 1%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: -25%;
|
||||
top: 12%;
|
||||
font-size: 16px;
|
||||
font-family: OPPOSans-Regular, OPPOSans;
|
||||
color: #ccc;
|
||||
background: url("@/assets/images/edgeProtection/textBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.warn-num {
|
||||
margin-top: 40%;
|
||||
font-size: 36px;
|
||||
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<Card title="近7日趋势(次)">
|
||||
<div class="top-right-box">
|
||||
<div class="history-content">
|
||||
<div id="edgeWeekTrend" ref="edgeWeekTrend" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"2023-08-24",
|
||||
"2023-08-25",
|
||||
"2023-08-26",
|
||||
"2023-08-27",
|
||||
"2023-08-28",
|
||||
"2023-08-29",
|
||||
"2023-08-30"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("单位:V" as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 65, 20, 25, 15, 25, 12] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
bottom: "8%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// name: unit.value,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
interval: 10,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
smooth: 0.8,
|
||||
symbolSize: 30,
|
||||
label: {
|
||||
show: false,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#4AC0F3",
|
||||
borderColor: "#4AC0F3",
|
||||
borderWidth: 5,
|
||||
shadowColor: "rgba(0, 0, 0, .6)",
|
||||
shadowBlur: 0,
|
||||
lineStyle: {
|
||||
width: 0.1,
|
||||
normal: {
|
||||
color: "#fff",
|
||||
shadowBlur: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(74, 192, 243,0.5)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(74, 192, 243, 0.1)"
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: "rgba(74, 192, 243, 1)",
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: yData.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
console.log("绘制前数据", yData.value);
|
||||
let edgeWeekTrend = echarts.init(document.getElementById("edgeWeekTrend"));
|
||||
edgeWeekTrend.setOption(option.value);
|
||||
}
|
||||
|
||||
//获取当前前七天的日期
|
||||
function generateWeek() {
|
||||
// 获取当前日期
|
||||
const today = new Date();
|
||||
// 存放日期
|
||||
let dateArr = [];
|
||||
// 返回最近七天的日期
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 每次循环，将日期递减一天
|
||||
const date = new Date(today);
|
||||
date.setDate(today.getDate() - i);
|
||||
|
||||
// 格式化日期为yyyy-mm-dd格式
|
||||
const dateString = date.toISOString().split("T")[0];
|
||||
dateArr.unshift(dateString);
|
||||
console.log(dateArr, "周日期");
|
||||
}
|
||||
twenty_four_time.value = dateArr;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
generateWeek();
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-right-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.history-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.rightHeader {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.Selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 6%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
background: #112d59;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user