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

feat:完成现场大屏中下右部分质量待办、右上部分应急记录以及右下部分安全待办部分的静态页面开发

Browse Source
This commit is contained in:
Vce 2024-06-13 16:33:10 +08:00
parent 6209420a28
commit 6002913671
4 changed files with 200 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,9 +113,9 @@ import { GlobalStore } from "@/stores";
// justify-content: space-around; // justify-content: space-around;
.listItem{ .listItem{
width: 100%; width: 100%;
height: 27%; height: 27.6%;
margin-bottom: 10px; margin-bottom: 10px;
background-color: rgba($color: #062d5a, $alpha: 0.8); background-color: rgba($color: #062d5a, $alpha: 0.7);
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
display: flex; display: flex;

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

@ -1,7 +1,35 @@
<template> <template>
<div class="centerBottomRight"> <div class="centerBottomRight">
<Card title="质量待办"> <Card title="质量待办">
<div class="mainContainer">
<div class="itemBox">
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></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 class="itemBox">
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></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 class="itemBox">
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></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>
</Card> </Card>
</div> </div>
</template> </template>
@ -18,6 +46,37 @@ import { GlobalStore } from "@/stores";
.centerBottomRight { .centerBottomRight {
width: 100%; width: 100%;
height: 100%; height: 100%;
.mainContainer{
width: calc(100% - 22px);
height: calc(100% - 26px);
padding: 10px 10px;
.itemBox{
// width: 100%;
// height: 30%;
border: 1px solid #0c58a2;
color: #fff;
padding: 5px 10px;
margin-bottom: 12px;
box-shadow: inset 0 0 8px 2px rgba($color: #0c58a2, $alpha: 1.0); /* 使用box-shadow属性添加发光效果，参数分别代表向内扩散、水平偏移、垂直偏移、模糊半径、阴影尺寸和颜色 */
// box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.7); /* 向内发光效果 */
.itemLine1{
font-size: 14px;
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.itemLine2{
font-size: 11px;
line-height: 20px;
}
.itemLine3{
font-size: 11px;
line-height: 20px;
display: flex;
justify-content: space-between;
}
}
}
} }
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;

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

@ -1,7 +1,17 @@
<template> <template>
<div class="rightBottom"> <div class="rightBottom">
<Card title="安全待办"> <Card title="安全待办">
<div class="mainContainer">
<div class="itemBox" v-for="(item,i) in 7" :key="i">
<div class="itemLine1">外墙、顶板、地板出现贯通性裂缝的疯狂世界东方螺丝钉解放数量大幅减少的ask大理石看得见啊来看看是多久啊老师的课</div>
<div class="itemLine2">整改结果：<span style="color:#19bfef">已逾期</span></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>
</Card> </Card>
</div> </div>
</template> </template>
@ -22,6 +32,37 @@ onMounted( async () => {
.rightBottom { .rightBottom {
width: 100%; width: 100%;
height: 100%; height: 100%;
.mainContainer{
width: calc(100% - 22px);
height: calc(100% - 26px);
padding: 10px 10px;
.itemBox{
// width: 100%;
// height: 30%;
border: 1px solid #0c58a2;
color: #fff;
padding: 5px 10px;
margin-bottom: 10px;
box-shadow: inset 0 0 8px 2px rgba($color: #0c58a2, $alpha: 1.0); /* 使用box-shadow属性添加发光效果，参数分别代表向内扩散、水平偏移、垂直偏移、模糊半径、阴影尺寸和颜色 */
// box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.7); /* 向内发光效果 */
.itemLine1{
font-size: 14px;
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.itemLine2{
font-size: 11px;
line-height: 20px;
}
.itemLine3{
font-size: 11px;
line-height: 20px;
display: flex;
justify-content: space-between;
}
}
}
} }
::v-deep .h-card .content { ::v-deep .h-card .content {

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

@ -1,7 +1,50 @@
<template> <template>
<div class="rightTop"> <div class="rightTop">
<Card title="应急记录"> <Card title="应急记录">
<div class="mainContainer">
<div class="itemBox">
<div class="itemLeft">
<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
<div style="margin-left:8px">事项</div>
</div>
<div class="itemRight">
<div class="rightTop">被困电梯，需要救援大幅简化了士大夫艰苦拉萨的封建士大夫地方势力的空间管理的飞机过来的开发工具奥斯卡大奖阿里山可见度拉克斯基的</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 class="itemBox">
<div class="itemLeft">
<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
<div style="margin-left:8px">事项</div>
</div>
<div class="itemRight">
<div class="rightTop">被困电梯，需要救援大幅简化了士大夫艰苦拉萨的封建士大夫地方势力的空间管理的飞机过来的开发工具奥斯卡大奖阿里山可见度拉克斯基的</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 class="itemBox">
<div class="itemLeft">
<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
<div style="margin-left:8px">事项</div>
</div>
<div class="itemRight">
<div class="rightTop">被困电梯，需要救援大幅简化了士大夫艰苦拉萨的封建士大夫地方势力的空间管理的飞机过来的开发工具奥斯卡大奖阿里山可见度拉克斯基的</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>
</Card> </Card>
</div> </div>
</template> </template>
@ -17,10 +60,61 @@ onMounted(async () => {
}); });
</script> </script>
<style scoped> <style lang="scss" scoped>
.rightTop { .rightTop {
width: 100%; width: 100%;
height: 100%; height: 100%;
.mainContainer{
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px 10px;
.itemBox{
width: 100%;
height: 30%;
color: #fff;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.itemLeft{
width: 16%;
height: 100%;
border-left: 2px solid #f73758;
background-color: rgba($color: darkred, $alpha: 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.itemRight{
height: 100%;
width: calc(81% - 10px);
padding: 0 5px;
// 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),
linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
background-size: 100% 100%, 100% 100%;
.rightTop{
height: 50%;
width: 100%;
transform: translateY(10px);
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.rightBottom{
color: #19bfef;
height: 50%;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateY(-3px);
.rbInner1{}
.rbInner2{}
.rbInner3{}
}
}
}
}
} }
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;