195 lines
7.2 KiB
Vue
195 lines
7.2 KiB
Vue
<template>
|
|
<div class="centerBottom">
|
|
<div class="cbHeader">
|
|
<div class="cbHeaderInfo">
|
|
<div class="cubeIcon"></div>
|
|
<div class="cLeft">公告提示</div>
|
|
</div>
|
|
<div class="cbHeaderLine"></div>
|
|
</div>
|
|
<div class="cbContent">
|
|
<vue3-seamless-scroll :speed="1" :list="listData" :step="0.3" :hover="true" class="scroll">
|
|
<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>
|
|
</vue3-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
|
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: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
|
])
|
|
|
|
onMounted(async () => {
|
|
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.scroll {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
|
|
.cLeft {
|
|
width: 50%;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
background-image: linear-gradient(to bottom left, #c8E3FF, #007AFF);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.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>
|