155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<template>
|
|
<div class="leftTop">
|
|
<Card title="各企业本周数据统计">
|
|
<el-carousel style="width: 100%;height: 100%;">
|
|
<el-carousel-item v-for="item in 4" :key="item" style="width: 100%; height: 100%">
|
|
<div class="box-content">
|
|
<div class="top-content">
|
|
<div class="top-content-left">辽宁五寰科技有限公司{{ item }}</div>
|
|
<div class="top-content-right" style="text-align: right">
|
|
事故报警总数
|
|
<span v-if="!projectData?.totalProjectDay" class="dayImg">0</span>
|
|
<span v-else class="dayImg" v-for="item in projectData?.totalProjectDay" :key="item">{{ item }}</span>
|
|
<!-- <span style="margin-left: 4%">天</span> -->
|
|
</div>
|
|
</div>
|
|
<div class="bottom-content">
|
|
<div class="top-data-item">
|
|
<span>入场人员总数</span>
|
|
<span>12/2500</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>企业安全分</span>
|
|
<span>85</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>安全隐患总数</span>
|
|
<span>12</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>质量隐患总数</span>
|
|
<span>12</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>特种作业数量</span>
|
|
<span>60</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>培训未通过率</span>
|
|
<span>30%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { onMounted, ref } from "vue";
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
const projectData = ref({
|
|
totalProjectDay: "180"
|
|
});
|
|
onMounted(() => {});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftTop {
|
|
width: 100%;
|
|
height: 100%;
|
|
.box-content {
|
|
.top-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 4%;
|
|
padding-top: 3%;
|
|
> div {
|
|
width: 45%;
|
|
line-height: 32px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
.dayImg {
|
|
margin-left: 2%;
|
|
font-size: 26px;
|
|
display: inline-block;
|
|
width: 29px;
|
|
height: 32px;
|
|
font-family: sadigitalNumber;
|
|
background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #4ac0f3;
|
|
}
|
|
}
|
|
&-left {
|
|
font-family: ABeeZee, ABeeZee;
|
|
font-weight: 400;
|
|
font-size: 16px !important;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
.bottom-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 10px;
|
|
margin: 0 6%;
|
|
margin-top: 3%;
|
|
.top-data-item {
|
|
width: 125px;
|
|
height: 51px;
|
|
background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2% 0;
|
|
padding-left: 8%;
|
|
margin-bottom: 8%;
|
|
span:nth-child(1) {
|
|
font-size: 13px;
|
|
color: #fff;
|
|
font-family: ABeeZee-Regular;
|
|
margin-bottom: 1%;
|
|
}
|
|
span:nth-child(2) {
|
|
font-size: 24px;
|
|
color: #65d7f9;
|
|
font-family: ABeeZee-Regular;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep .h-card .content {
|
|
height: 80%;
|
|
}
|
|
::v-deep .el-carousel__container {
|
|
height: 100%;
|
|
}
|
|
:deep(){
|
|
.el-carousel__indicator--horizontal .el-carousel__button {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #A8C3DD;
|
|
border: 1px solid #A8C3DD;
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
}
|
|
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #4AC0F3;
|
|
border: 1px solid #4AC0F3;
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|