admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'shenzhen-dev' of http://139.9.66.234:18023/yjlHub/zhgdlarge into bjxz-rain

Browse Source
This commit is contained in:
X_Rian 2024-06-15 10:08:56 +08:00
commit 74c403ecee
9 changed files with 224 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue
View File

@ -17,28 +17,20 @@
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<div class="listItem"> <el-scrollbar style="height:100%">
<div class="itemInfo1"> <div class="listItem" v-for="(item,i) in 10 " :key="i">
<div style="width:50px;text-align:center">1</div> <div class="itemInfo1">
<div>钢筋工-张三</div> <div style="width:50px;text-align:center">1</div>
<div>钢筋工-张三</div>
</div>
<div class="itemInfo2">20/40</div>
</div> </div>
<div class="itemInfo2">20/40</div> </el-scrollbar>
</div>
<div class="listItem">
<div class="itemInfo1">
<div style="width:50px;text-align:center">2</div>
<div>钢筋工-张三</div>
</div>
<div class="itemInfo2">20/40</div>
</div>
<div class="listItem">
<div class="itemInfo1">
<div style="width:50px;text-align:center">3</div>
<div>钢筋工-张三</div>
</div>
<div class="itemInfo2">20/40</div>
</div>
</div> </div>
<!-- <div class="not-data">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div> -->
</div> </div>
</Card> </Card>
</div> </div>
@ -113,7 +105,7 @@ import { GlobalStore } from "@/stores";
// justify-content: space-around; // justify-content: space-around;
.listItem{ .listItem{
width: 100%; width: 100%;
height: 27.6%; height: 52px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: rgba($color: #062d5a, $alpha: 0.7); background-color: rgba($color: #062d5a, $alpha: 0.7);
font-size: 18px; font-size: 18px;
@ -144,16 +136,16 @@ import { GlobalStore } from "@/stores";
height: 80%; height: 80%;
margin-top: 4%; margin-top: 4%;
} }
.notoDta { .not-data {
bottom: 10%; top: 50%;
width: 20%; width: 30%;
left: 35%; left: 35%;
text-align: center;
position: absolute; position: absolute;
text-align: center;
img { img {
width: 40%; width: 50%;
} }
div { p {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }

38
src/views/agjtLiveScreen/liveScreen/centerBottomRight.vue
View File

@ -2,16 +2,25 @@
<div class="centerBottomRight"> <div class="centerBottomRight">
<Card title="质量待办"> <Card title="质量待办">
<div class="mainContainer"> <div class="mainContainer">
<div class="itemBox" v-for="(item,i) in 3" :key="i"> <el-scrollbar style="height:102.5%">
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div> <div class="itemBox" v-for="(item,i) in 10" :key="i">
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div> <div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div>
<div class="itemLine3"> <div class="itemLine2">
<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div> <div style="width:28%">整改结果：<span style="color:#19bfef">已逾期</span></div>
<div class="line3Inner2">检查人：<span style="">张三</span></div> <div style="width:50%">责任单位：<span style="color:#19bfef">辽宁五瞏</span></div>
<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div> </div>
<div class="itemLine3">
<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
<div class="line3Inner2">检查人：<span style="">张三</span></div>
<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
</div>
</div> </div>
</div> </el-scrollbar>
</div> </div>
<!-- <div class="not-data">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div> -->
</Card> </Card>
</div> </div>
</template> </template>
@ -50,6 +59,7 @@ import { GlobalStore } from "@/stores";
.itemLine2{ .itemLine2{
font-size: 11px; font-size: 11px;
line-height: 20px; line-height: 20px;
display: flex;
} }
.itemLine3{ .itemLine3{
font-size: 11px; font-size: 11px;
@ -64,16 +74,16 @@ import { GlobalStore } from "@/stores";
height: 80%; height: 80%;
margin-top: 4%; margin-top: 4%;
} }
.notoDta { .not-data {
bottom: 10%; top: 40%;
width: 20%; width: 30%;
left: 35%; left: 35%;
text-align: center;
position: absolute; position: absolute;
text-align: center;
img { img {
width: 40%; width: 50%;
} }
div { p {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }

2
src/views/agjtLiveScreen/liveScreen/centerTop.vue
View File

@ -250,7 +250,7 @@ defineExpose({
}); });
onMounted(async () => { onMounted(async () => {
if (COMPANY !== "agjt") showVideo.value = 2; if (COMPANY !== "agjt") showVideo.value = 2;
await getVideoList(); // await getVideoList();
getQueryBySnData(); getQueryBySnData();
if (COMPANY != "agjt") { if (COMPANY != "agjt") {
showVideo.value = 2; showVideo.value = 2;

4
src/views/agjtLiveScreen/liveScreen/index.vue
View File

@ -85,8 +85,8 @@ window.onbeforeunload = (e) => {
destroyInterval(); destroyInterval();
} }
onMounted( async () => { onMounted( async () => {
getPersonDetail(); // getPersonDetail();
getProjectInfo(); // getProjectInfo();
startInterval(); startInterval();
}); });
</script> </script>

85
src/views/agjtLiveScreen/liveScreen/leftBottom.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<div class="leftBottom"> <div class="leftBottom">
<Card title="特殊作业情况"> <Card title="特殊作业情况">
<div class="not-data" v-show="tempList.length == 0 && tempList2.length == 0 && tempList3.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
<div class="mainContainer"> <div class="mainContainer">
<div id="pieEchart" style="width:100%;height:100%"></div> <div id="pieEchart" style="width:100%;height:100%"></div>
</div> </div>
</Card> </Card>
</div> </div>
</template> </template>
@ -14,18 +19,22 @@ import { ref, onMounted, watch } from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
let tempList = ref([ let tempList = ref([
{name:'高处作业',value:12,doing:10,per:'12.5'},{name:'断路作业',value:12,doing:10,per:'12.5'},{name:'吊装安全',value:12,doing:10,per:'12.5'},{name:'受限空间',value:12,doing:10,per:'12.5'}, // {name:'高处作业',value:12,doing:10,per:'12.5'},{name:'断路作业',value:12,doing:10,per:'12.5'},{name:'吊装安全',value:12,doing:10,per:'12.5'},{name:'受限空间',value:12,doing:10,per:'12.5'},
{name:'动火作业',value:12,doing:10,per:'12.5'},{name:'盲板抽堵',value:12,doing:10,per:'12.5'},{name:'动土作业',value:12,doing:10,per:'12.5'},{name:'临时用电',value:12,doing:10,per:'12.5'}, // {name:'动火作业',value:12,doing:10,per:'12.5'},{name:'盲板抽堵',value:12,doing:10,per:'12.5'},{name:'动土作业',value:12,doing:10,per:'12.5'},{name:'临时用电',value:12,doing:10,per:'12.5'},
] as any) ] as any)
let tempList2 = ref([ let tempList2 = ref([
{ value: 123, name: '高处作业' }, // { value: 123, name: '高处作业' },
{ value: 123, name: '断路作业' }, // { value: 123, name: '断路作业' },
{ value: 123, name: '吊装安全' }, // { value: 123, name: '吊装安全' },
{ value: 123, name: '受限空间' }, // { value: 123, name: '受限空间' },
{ value: 123, name: '动火作业' }, // { value: 123, name: '动火作业' },
{ value: 123, name: '盲板抽堵' }, // { value: 123, name: '盲板抽堵' },
{ value: 123, name: '动土作业' }, // { value: 123, name: '动土作业' },
{ value: 123, name: '临时用电' } // { value: 123, name: '临时用电' }
] as any)
let tempList3 = ref([
// { value: 96, name: '进行中' },
// { value: 80, name: '已完成' },
] as any) ] as any)
function drawPie(){ function drawPie(){
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
@ -68,10 +77,7 @@ function drawPie(){
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data: tempList3.value
{ value: 96, name: '进行中' },
{ value: 80, name: '已完成' },
]
}, },
{ {
name: 'Access From', name: 'Access From',
@ -140,9 +146,42 @@ function drawPie(){
option && myChart.setOption(option); option && myChart.setOption(option);
} }
watch(tempList2, (newV,oldV) => {
onMounted( async () => { if(newV.length !== 0){
// drawPie()
}
})
watch(tempList, (newV,oldV) => {
if(newV.length !== 0){
// drawPie()
}
})
function getData(){
// setTimeout(() => {
tempList.value = [
{name:'高处作业',value:12,doing:10,per:'12.5'},{name:'断路作业',value:12,doing:10,per:'12.5'},{name:'吊装安全',value:12,doing:10,per:'12.5'},{name:'受限空间',value:12,doing:10,per:'12.5'},
{name:'动火作业',value:12,doing:10,per:'12.5'},{name:'盲板抽堵',value:12,doing:10,per:'12.5'},{name:'动土作业',value:12,doing:10,per:'12.5'},{name:'临时用电',value:12,doing:10,per:'12.5'},
]
tempList2.value = [
{ value: 123, name: '高处作业' },
{ value: 123, name: '断路作业' },
{ value: 123, name: '吊装安全' },
{ value: 123, name: '受限空间' },
{ value: 123, name: '动火作业' },
{ value: 123, name: '盲板抽堵' },
{ value: 123, name: '动土作业' },
{ value: 123, name: '临时用电' }
]
tempList3.value = [
{ value: 96, name: '进行中' },
{ value: 80, name: '已完成' },
]
// },1000)
drawPie() drawPie()
}
onMounted( async () => {
getData()
}); });
</script> </script>
@ -162,4 +201,18 @@ onMounted( async () => {
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;
} }
.not-data {
top: 40%;
width: 30%;
left: 35%;
position: absolute;
text-align: center;
img {
width: 50%;
}
p {
color: #fff;
font-size: 14px;
}
}
</style> </style>

18
src/views/agjtLiveScreen/liveScreen/leftCenter.vue
View File

@ -8,6 +8,10 @@
<div>报警事件：2024-03-01 12:00:00</div> <div>报警事件：2024-03-01 12:00:00</div>
</div> </div>
</div> </div>
<!-- <div class="not-data">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div> -->
</Card> </Card>
</div> </div>
</template> </template>
@ -55,4 +59,18 @@ onMounted( async () => {
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;
} }
.not-data {
top: 40%;
width: 30%;
left: 35%;
position: absolute;
text-align: center;
img {
width: 50%;
}
p {
color: #fff;
font-size: 14px;
}
}
</style> </style>

2
src/views/agjtLiveScreen/liveScreen/leftTop.vue
View File

@ -82,7 +82,7 @@ defineExpose({
projectTypeEnum projectTypeEnum
}) })
onMounted( async () => { onMounted( async () => {
await projectTypeEnum(); // await projectTypeEnum();
}) })
watch( watch(
() => props.projectData, () => props.projectData,

28
src/views/agjtLiveScreen/liveScreen/rightBottom.vue
View File

@ -2,16 +2,25 @@
<div class="rightBottom"> <div class="rightBottom">
<Card title="安全待办"> <Card title="安全待办">
<div class="mainContainer"> <div class="mainContainer">
<div class="itemBox" v-for="(item,i) in 7" :key="i"> <el-scrollbar style="height:102.5%">
<div class="itemBox" v-for="(item,i) in 10" :key="i">
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div> <div class="itemLine1">外墙、顶板、地板出现贯通性裂缝</div>
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></div> <div class="itemLine2">
<div style="width:32%">整改结果：<span style="color:#19bfef">已逾期</span></div>
<div style="width:50%">责任单位：<span style="color:#19bfef">辽宁五瞏</span></div>
</div>
<div class="itemLine3"> <div class="itemLine3">
<div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div> <div class="line3Inner1">整改人：<span style="color:#19bfef">李四</span></div>
<div class="line3Inner2">检查人：<span style="">张三</span></div> <div class="line3Inner2">检查人：<span style="">张三</span></div>
<div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div> <div class="line3Inner3">检查时间：<span style="">2024-03-01 12:00:00</span></div>
</div> </div>
</div> </div>
</el-scrollbar>
</div> </div>
<!-- <div class="not-data">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div> -->
</Card> </Card>
</div> </div>
</template> </template>
@ -54,6 +63,7 @@ onMounted( async () => {
.itemLine2{ .itemLine2{
font-size: 11px; font-size: 11px;
line-height: 20px; line-height: 20px;
display: flex;
} }
.itemLine3{ .itemLine3{
font-size: 11px; font-size: 11px;
@ -68,4 +78,18 @@ onMounted( async () => {
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;
} }
.not-data {
top: 38%;
width: 30%;
left: 35%;
position: absolute;
text-align: center;
img {
width: 50%;
}
p {
color: #fff;
font-size: 14px;
}
}
</style> </style>

88
src/views/agjtLiveScreen/liveScreen/rightTop.vue
View File

@ -2,21 +2,33 @@
<div class="rightTop"> <div class="rightTop">
<Card title="应急记录"> <Card title="应急记录">
<div class="mainContainer"> <div class="mainContainer">
<div class="itemBox" v-for="(item,i) in 3" :key="i"> <el-scrollbar style="height:102.5%">
<div class="itemLeft"> <div class="itemBox" v-for="(item,i) in 10" :key="i">
<div style="font-size:24px;transform:translateY(-3px)">⚠</div> <div class="itemLeft">
<div style="margin-left:8px">事项</div> <div style="font-size:24px;transform:translateY(-3px)">⚠</div>
</div> <div style="margin-left:8px">事项</div>
<div class="itemRight"> </div>
<div class="rightTop">被困电梯，需要救援</div> <div class="itemRight">
<div class="rightBottom"> <div class="rightTop">
<div class="rbInner1">处理状态：已处理</div> <div class="overHiddenText" style="width:60%">被困电梯，需要救援的风景和深刻搭街坊后来空手道解放螺丝钉顺利打开飞机螺丝钉看见分列式雕刻技法</div>
<div class="rbInner2">处理报告：下载</div> <div style="width:20%">检查人：张三</div>
<div class="rbInner3">2024-03-01 12:00:00</div> </div>
<div class="rightCenter">
<div style="">责任单位：辽宁五瞏</div>
</div>
<div class="rightBottom">
<div class="rbInner1">处理状态：已处理</div>
<div class="rbInner2">处理报告：下载</div>
<div class="rbInner3">2024-03-01 12:00:00</div>
</div>
</div> </div>
</div> </div>
</div> </el-scrollbar>
</div> </div>
<!-- <div class="not-data">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div> -->
</Card> </Card>
</div> </div>
</template> </template>
@ -42,7 +54,7 @@ onMounted(async () => {
padding: 10px 10px; padding: 10px 10px;
.itemBox{ .itemBox{
width: 100%; width: 100%;
height: 30%; height: 65px;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -58,40 +70,68 @@ onMounted(async () => {
} }
.itemRight{ .itemRight{
height: 100%; height: calc(100% - 10px);
width: calc(81% - 10px); width: calc(82% - 10px);
padding: 0 5px; padding: 5px 5px;
// background-color: rgba($color: #a85454, $alpha: 0.3); // background-color: rgba($color: #a85454, $alpha: 0.3);
background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px), background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px),
linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3)); linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
background-size: 100% 100%, 100% 100%; background-size: 100% 100%, 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.rightTop{ .rightTop{
height: 50%; height: 30%;
width: 100%; width: 100%;
transform: translateY(10px); display: flex;
white-space: nowrap; /* 防止文字换行 */ justify-content: space-between;
overflow: hidden; /* 超出部分隐藏 */ }
text-overflow: ellipsis; /* 超出部分显示省略号 */ .rightCenter{
height: 30%;
width: 100%;
display: flex;
justify-content: flex-end;
} }
.rightBottom{ .rightBottom{
color: #19bfef; color: #19bfef;
height: 50%; height: 30%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
transform: translateY(-3px); // transform: translateY(-3px);
.rbInner1{} .rbInner1{}
.rbInner2{} .rbInner2{}
.rbInner3{} .rbInner3{
font-style: italic;
}
} }
} }
} }
} }
} }
.overHiddenText{
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;
} }
::v-deep .h-card { ::v-deep .h-card {
position: relative; position: relative;
} }
.not-data {
top: 40%;
width: 30%;
left: 35%;
position: absolute;
text-align: center;
img {
width: 50%;
}
p {
color: #fff;
font-size: 14px;
}
}
</style> </style>