163 lines
6.4 KiB
Vue
163 lines
6.4 KiB
Vue
<template>
|
||
<div class="centerBottom">
|
||
<div class="cbHeader">
|
||
<div class="cbHeaderInfo">
|
||
<div class="cubeIcon"></div>
|
||
<div>公告提示</div>
|
||
</div>
|
||
<div class="cbHeaderLine"></div>
|
||
</div>
|
||
<div class="cbContent">
|
||
<el-scrollbar height="370">
|
||
<div class="item" v-for="(item,index) in listData" :key="index">
|
||
<div class="itemHead">
|
||
<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
|
||
<div class="itemHeadInner2" v-if="item.type === 3">{{item.header}}</div>
|
||
<div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
|
||
<text style="margin-left:10px">{{item.content}}</text>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
|
||
{{item.content}}
|
||
</el-tooltip>
|
||
</div> -->
|
||
<div class="itemTime">
|
||
<text class="timeInfo">{{item.startTime + '-' + item.endTime}}</text>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "@/components/card.vue";
|
||
import { ref, watch, onMounted } from "vue";
|
||
import { getStageOption } from "@/api/modules/projectOverview";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
|
||
let listData = ref([
|
||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控胜多负少v现场v在时代广场彼此相伴',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||
])
|
||
|
||
onMounted( async () => {
|
||
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.centerBottom{
|
||
background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
|
||
// background: #fff;
|
||
background-size: 100% 100%;
|
||
// width: 100%;
|
||
// height: 60%;
|
||
// background-color: #fff;
|
||
padding: 10px 20px;
|
||
position: relative;
|
||
// padding-top: 15px;
|
||
.cbHeader{
|
||
width:100%;
|
||
height: 40px;
|
||
// background-color: darkred;
|
||
.cbHeaderInfo{
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.cubeIcon{
|
||
width: 36px;
|
||
height: 36px;
|
||
// background-color: #fff;
|
||
background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
// margin-left: -5px;
|
||
margin: 0 3px 0 -5px;
|
||
}
|
||
}
|
||
.cbHeaderLine{
|
||
height: 4px;
|
||
width: 100%;
|
||
// background-color: darkblue;
|
||
background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.cbContent{
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
// background: #fff;
|
||
.item{
|
||
width: 100%;
|
||
line-height: 130%;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: flex-start;
|
||
justify-content: space-between;
|
||
// background-color: green;
|
||
color: #fff;
|
||
.itemHead{
|
||
white-space: nowrap;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
width: 75%;
|
||
.itemHeadInner{
|
||
border: 1px solid #f77c7d;
|
||
box-shadow: 0 0 0 1px #f77c7d;
|
||
background: rgba(247,124,125, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
.itemHeadInner2{
|
||
font-size: 16px;
|
||
border: 1px solid #0db027;
|
||
box-shadow: 0 0 0 1px #0db027;
|
||
background: rgba(13,176,39, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
.itemContent{
|
||
margin-left: 10px;
|
||
font-size: 15px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.itemTime{
|
||
// background-color: #fff;
|
||
width: 25%;
|
||
font-size: 16px;
|
||
.timeInfo{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|