lukeyan
1 year ago
parent
27f048de1b
commit
066f4e9f1e
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 802 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,243 @@
|
|||||||
|
<!-- 园区车辆 -->
|
||||||
|
<template>
|
||||||
|
<div class="company_car_box">
|
||||||
|
<!-- 模块标题 -->
|
||||||
|
<div class="title">
|
||||||
|
<div class="img_box">
|
||||||
|
<!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="title_text">园区车辆</div>
|
||||||
|
</div>
|
||||||
|
<div class="car_num_box">
|
||||||
|
<!-- 进园区车辆 -->
|
||||||
|
<div class="in_car">
|
||||||
|
<div class="in_car_icon">
|
||||||
|
<div class="in_car_icon_item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="in_car_item">
|
||||||
|
<div class="in_car_item_text">今日进园区</div>
|
||||||
|
<div class="in_car_item_value">
|
||||||
|
<div class="in_car_num">
|
||||||
|
{{ this.in_car_num }}
|
||||||
|
</div>
|
||||||
|
<div class="num_text">辆</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 出园区车辆 -->
|
||||||
|
<div class="out_car">
|
||||||
|
<div class="out_car_icon">
|
||||||
|
<div class="out_car_icon_item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="out_car_item">
|
||||||
|
<div class="out_car_item_text">今日出园区</div>
|
||||||
|
<div class="out_car_item_value">
|
||||||
|
<div class="out_car_num">
|
||||||
|
{{ this.out_car_num }}
|
||||||
|
</div>
|
||||||
|
<div class="num_text">辆</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { vehicleIn } from "@/api/safetyIndex";
|
||||||
|
export default {
|
||||||
|
name: "CompanyCar",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
in_car_num: "", // 今日进园区车数量
|
||||||
|
out_car_num: "", // 今日出园区车数量
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.get_in_car_num();
|
||||||
|
this.get_out_car_num();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取进园区车辆数
|
||||||
|
get_in_car_num() {
|
||||||
|
let params = {
|
||||||
|
direction: 1,
|
||||||
|
pageSize: 1,
|
||||||
|
pageNum: 1,
|
||||||
|
};
|
||||||
|
vehicleIn(params).then((res) => {
|
||||||
|
this.in_car_num = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取出园区车辆数
|
||||||
|
get_out_car_num() {
|
||||||
|
let params = {
|
||||||
|
direction: 2,
|
||||||
|
pageSize: 1,
|
||||||
|
pageNum: 1,
|
||||||
|
};
|
||||||
|
vehicleIn(params).then((res) => {
|
||||||
|
this.out_car_num = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.company_car_box {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 24vw;
|
||||||
|
height: 28vh;
|
||||||
|
background: url("~@/assets/safetyIndex/back001.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
/* 盒子标题 */
|
||||||
|
.title {
|
||||||
|
width: 24vw;
|
||||||
|
height: 2.7vh;
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-weight: 500;
|
||||||
|
/* 图片盒子 */
|
||||||
|
.img_box {
|
||||||
|
width: 1.5vw;
|
||||||
|
height: 2.7vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
width: 4vw;
|
||||||
|
height: 3.2vh;
|
||||||
|
line-height: 3.2vh;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.car_num_box {
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-top: 1vh;
|
||||||
|
width: 22vw;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.in_car {
|
||||||
|
width: 10vw;
|
||||||
|
height: 5vh;
|
||||||
|
// border: 0.1px solid #495e70;
|
||||||
|
display: flex;
|
||||||
|
.in_car_icon {
|
||||||
|
width: 2.5vw;
|
||||||
|
height: 5vh;
|
||||||
|
background: url("~@/assets/safetyIndex/back003.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.in_car_icon_item {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.in_car_item {
|
||||||
|
width: 7vw;
|
||||||
|
height: 5vh;
|
||||||
|
// border: 0.1px solid #495e70;
|
||||||
|
.in_car_item_text {
|
||||||
|
width: 7vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
.in_car_item_value {
|
||||||
|
background: url("~@/assets/safetyIndex/back004.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 7vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
display: flex;
|
||||||
|
.in_car_num {
|
||||||
|
width: 4vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 2vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.out_car {
|
||||||
|
width: 10vw;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.out_car_icon {
|
||||||
|
width: 2.5vw;
|
||||||
|
height: 5vh;
|
||||||
|
background: url("~@/assets/safetyIndex/back003.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.out_car_icon_item {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.out_car_item {
|
||||||
|
width: 7vw;
|
||||||
|
height: 5vh;
|
||||||
|
// border: 0.1px solid #495e70;
|
||||||
|
.out_car_item_text {
|
||||||
|
width: 7vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
.out_car_item_value {
|
||||||
|
background: url("~@/assets/safetyIndex/back004.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 7vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
display: flex;
|
||||||
|
.out_car_num {
|
||||||
|
width: 4vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 2vw;
|
||||||
|
height: 2.5vh;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,242 @@
|
|||||||
|
<!-- 惠企服务 -->
|
||||||
|
<template>
|
||||||
|
<div class="company_service_box">
|
||||||
|
<!-- 模块标题 -->
|
||||||
|
<div class="title">
|
||||||
|
<div class="img_box">
|
||||||
|
<!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="title_text">惠企服务</div>
|
||||||
|
</div>
|
||||||
|
<!-- 服务类别 -->
|
||||||
|
<div class="service_type">
|
||||||
|
<div class="month_service">
|
||||||
|
<div class="month_service_text">当月服务</div>
|
||||||
|
<div class="month_service_value">123</div>
|
||||||
|
</div>
|
||||||
|
<div class="season_service">
|
||||||
|
<div class="season_service_text">季度服务</div>
|
||||||
|
<div class="season_service_value">123</div>
|
||||||
|
</div>
|
||||||
|
<div class="year_service">
|
||||||
|
<div class="year_service_text">年度服务</div>
|
||||||
|
<div class="year_service_value">123</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 服务echarts表 -->
|
||||||
|
<div class="service_echarts">
|
||||||
|
<div class="left_chart"></div>
|
||||||
|
<div class="right_chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="chart_num">
|
||||||
|
<div class="left_chart_num">
|
||||||
|
<div class="chart_num_text">惠企服务总量</div>
|
||||||
|
<div class="chart_num_value">1222</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_chart_num">
|
||||||
|
<div class="chart_num_text">请求受理总量</div>
|
||||||
|
<div class="chart_num_value">1222</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CompanyService",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.company_service_box {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 24vw;
|
||||||
|
height: 28vh;
|
||||||
|
// border: 0.1px solid #495e70;
|
||||||
|
background: url("~@/assets/safetyIndex/back001.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
/* 盒子标题 */
|
||||||
|
.title {
|
||||||
|
width: 24vw;
|
||||||
|
height: 2.7vh;
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-weight: 500;
|
||||||
|
/* 图片盒子 */
|
||||||
|
.img_box {
|
||||||
|
width: 1.5vw;
|
||||||
|
height: 2.7vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
width: 4vw;
|
||||||
|
height: 3.2vh;
|
||||||
|
line-height: 3.2vh;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.service_type {
|
||||||
|
width: 22vw;
|
||||||
|
height: 6vh;
|
||||||
|
margin-top: 1vh;
|
||||||
|
margin-left: 1vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.month_service {
|
||||||
|
width: 6vw;
|
||||||
|
height: 6.5vh;
|
||||||
|
background: url("~@/assets/safetyIndex/service001.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.month_service_text {
|
||||||
|
width: 6vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #37fdc7;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
}
|
||||||
|
.month_service_value {
|
||||||
|
text-align: center;
|
||||||
|
color: #37fdc7;
|
||||||
|
width: 6vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
line-height: 3.5vh;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.season_service {
|
||||||
|
width: 6vw;
|
||||||
|
height: 6.5vh;
|
||||||
|
background: url("~@/assets/safetyIndex/service002.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.season_service_text {
|
||||||
|
width: 6vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #ecde3d;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
}
|
||||||
|
.season_service_value {
|
||||||
|
text-align: center;
|
||||||
|
color: #ecde3d;
|
||||||
|
width: 6vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
line-height: 3.5vh;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.year_service {
|
||||||
|
width: 6vw;
|
||||||
|
height: 6.5vh;
|
||||||
|
background: url("~@/assets/safetyIndex/service001.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.year_service_text {
|
||||||
|
width: 6vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #37fdc7;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
}
|
||||||
|
.year_service_value {
|
||||||
|
text-align: center;
|
||||||
|
color: #37fdc7;
|
||||||
|
width: 6vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
line-height: 3.5vh;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.service_echarts {
|
||||||
|
width: 24vw;
|
||||||
|
height: 13vh;
|
||||||
|
display: flex;
|
||||||
|
.left_chart {
|
||||||
|
width: 12vw;
|
||||||
|
height: 13vh;
|
||||||
|
border: 0.1px solid #495e70;
|
||||||
|
}
|
||||||
|
.right_chart {
|
||||||
|
width: 12vw;
|
||||||
|
height: 13vh;
|
||||||
|
border: 0.1px solid #495e70;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart_num {
|
||||||
|
margin-top: 0.5vh;
|
||||||
|
width: 24vw;
|
||||||
|
height: 3vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.left_chart_num {
|
||||||
|
width: 10vw;
|
||||||
|
height: 3vh;
|
||||||
|
background: url("~@/assets/safetyIndex/service003.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.chart_num_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.chart_num_value {
|
||||||
|
width: 3vw;
|
||||||
|
height: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_chart_num {
|
||||||
|
width: 10vw;
|
||||||
|
height: 3vh;
|
||||||
|
background: url("~@/assets/safetyIndex/service003.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.chart_num_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.chart_num_value {
|
||||||
|
width: 3vw;
|
||||||
|
height: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
<!-- 警情通报 -->
|
||||||
|
<template>
|
||||||
|
<div class="notification_box">
|
||||||
|
<!-- 模块标题 -->
|
||||||
|
<div class="title">
|
||||||
|
<div class="img_box">
|
||||||
|
<!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="title_text">警情通报</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Notification",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.notification_box {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 24vw;
|
||||||
|
height: 32vh;
|
||||||
|
// border: 0.1px solid #495e70;
|
||||||
|
background: url("~@/assets/safetyIndex/back001.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
/* 盒子标题 */
|
||||||
|
.title {
|
||||||
|
width: 24vw;
|
||||||
|
height: 2.7vh;
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #d9e7ff;
|
||||||
|
font-weight: 500;
|
||||||
|
/* 图片盒子 */
|
||||||
|
.img_box {
|
||||||
|
width: 1.5vw;
|
||||||
|
height: 2.7vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
width: 4vw;
|
||||||
|
height: 3.2vh;
|
||||||
|
line-height: 3.2vh;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue