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