<template>
|
<div class="v-safety-views">
|
<!-- 内容 -->
|
<div class="content-wrap ">
|
<!-- 服务质量 -->
|
<div class="column">
|
<quality />
|
</div>
|
<!-- 安全驾驶 -->
|
<div class="column ml78">
|
<safetyDrive />
|
</div>
|
<!-- 规章制度和工作要求管理 -->
|
<div class="column ml78">
|
<ruleDrive />
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {PerfectScrollbar} from "vue2-perfect-scrollbar";
|
import quality from "@/components/safety/safety/quality";
|
import safetyDrive from "@/components/safety/safety/safety";
|
import ruleDrive from "@/components/safety/safety/rules";
|
import moment from 'moment'
|
export default {
|
name: "safety",
|
components: {
|
PerfectScrollbar,
|
ruleDrive,
|
quality,
|
safetyDrive
|
},
|
data() {
|
return {
|
statistics: {
|
up: 1726,
|
down: 51,
|
ignore: 30,
|
},
|
auditList: [],
|
learnList: [],
|
lostList: [],
|
authButton: [],
|
ruleList: [],
|
pageSize: 20,
|
auditPageNum: 1,
|
auditTotal: 1, // 总页数
|
learnPageNum: 1,
|
learnTotal: 1,
|
rulePageNum: 1,
|
ruleTotal: 1,
|
lostPageNum: 1,
|
lostTotal: 1,
|
};
|
},
|
created() {
|
// this.getStastics();
|
// this.getAuditList();
|
// this.getLearnList();
|
// this.getRuleList();
|
// this.getLostList();
|
},
|
activated() {
|
// this.getStastics();
|
// this.getAuditList();
|
// this.getLearnList();
|
// this.getRuleList();
|
// this.getAuth();
|
// this.getLostList();
|
},
|
methods: {
|
getAuth() {
|
this.$axios.get(this.$Interface.auth).then(res => {
|
console.log(res);
|
if (res.data && res.data.length > 0) {
|
this.authButton = res.data.map(item => item.permissions);
|
} else {
|
this.authButton = []
|
}
|
})
|
},
|
getAuthBtn(type) {
|
return this.authButton.includes(type);
|
},
|
checkItem(id) {
|
},
|
getStastics() {
|
this.$axios.get(this.$Interface.accident.statistics).then((res) => {
|
const data = res.data;
|
this.statistics.up = data.report;
|
this.statistics.down = data.issued;
|
this.statistics.ignore = data.ignore;
|
});
|
},
|
getAuditList() {
|
this.$axios
|
.get(this.$Interface.accident.list, {
|
params: {
|
limit: this.pageSize,
|
page: this.auditPageNum,
|
},
|
})
|
.then((res) => {
|
this.auditList = res.data.list;
|
this.auditTotal = Math.ceil(res.data.total / this.pageSize) || 1;
|
});
|
},
|
getLostList() {
|
this.$axios
|
.get(this.$Interface.safety.lostList, {
|
params: {
|
limit: this.pageSize,
|
page: this.lostPageNum,
|
},
|
})
|
.then((res) => {
|
this.lostList = res.data.list;
|
this.lostTotal = Number(res.data.total);
|
});
|
},
|
getLearnList() {
|
this.$axios
|
.get(this.$Interface.safetyArticle.list, {
|
params: {
|
limit: this.pageSize,
|
page: this.learnPageNum,
|
type: '3'
|
},
|
})
|
.then((res) => {
|
this.learnList = res.data.records;
|
this.learnTotal = Math.ceil(Number(res.data.total) / this.pageSize) || 1;
|
});
|
},
|
getRuleList() {
|
this.$axios
|
.get(this.$Interface.safetyArticle.list, {
|
params: {
|
limit: this.pageSize,
|
page: this.learnPageNum,
|
type: '4'
|
},
|
})
|
.then((res) => {
|
this.ruleList = res.data.records;
|
this.ruleTotal = Math.ceil(Number(res.data.total) / this.pageSize) || 1;
|
});
|
},
|
togglePage(arrow, type) {
|
switch (arrow) {
|
case "pre":
|
switch (type) {
|
case "audit":
|
if (this.auditPageNum > 1) {
|
this.auditPageNum -= 1;
|
this.getAuditList();
|
}
|
break;
|
case "learn":
|
if (this.learnPageNum > 1) {
|
this.learnPageNum -= 1;
|
this.getLearnList();
|
}
|
break;
|
case "rule":
|
if (this.rulePageNum > 1) {
|
this.rulePageNum -= 1;
|
this.getRuleList();
|
}
|
break;
|
}
|
break;
|
case "next":
|
switch (type) {
|
case "audit":
|
if (this.auditPageNum < this.auditTotal) {
|
this.auditPageNum += 1;
|
this.getAuditList();
|
}
|
break;
|
case "learn":
|
if (this.learnPageNum < this.learnTotal) {
|
this.learnPageNum += 1;
|
this.getLearnList();
|
}
|
break;
|
case "rule":
|
if (this.rulePageNum < this.ruleTotal) {
|
this.rulePageNum += 1;
|
this.getRuleList();
|
}
|
break;
|
}
|
break;
|
}
|
},
|
|
},
|
mounted() {
|
},
|
};
|
</script>
|
<style src="vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css"></style>
|
<style lang="less">
|
@import url("../../assets/css/common.css");
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.v-safety-views {
|
padding: 24px 30px;
|
.no-data {
|
color: #ffffff;
|
opacity: 0.6;
|
text-align: center;
|
padding: 100px;
|
}
|
|
.pointer {
|
cursor: pointer;
|
}
|
|
.flex {
|
display: flex;
|
}
|
.top-menu {
|
margin-top: 10px;
|
margin-right: 2.7vw;
|
margin-bottom: 10px;
|
.animate-block{
|
display: flex;
|
align-items: center;
|
height: 45px;
|
}
|
.menu-item {
|
opacity: 0.8;
|
line-height: 20px;
|
padding: 7px 16px;
|
border-top: 2px solid;
|
border-bottom: 1px solid;
|
margin-left: 40px;
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 16px;
|
margin-left: 8px;
|
}
|
}
|
|
.menu-item-l {
|
margin-right: 16px;
|
width: 204px;
|
height: 46px;
|
opacity: 0.6;
|
background: linear-gradient(
|
270deg,
|
rgba(136, 194, 255, 0),
|
rgba(23, 141, 227, 0.46)
|
);
|
border: 1px solid;
|
border-image: linear-gradient(270deg, rgba(20, 131, 242, 0), #0080ff) 1 1;
|
box-sizing: border-box;
|
line-height: 46px;
|
font-size: 14px;
|
padding: 0 17px;
|
border-right: none;
|
|
.value {
|
width: 82px;
|
box-sizing: border-box;
|
font-size: 22px;
|
font-family: "Digital";
|
font-weight: "Digital";
|
text-align: center;
|
}
|
|
.label {
|
flex: 1;
|
color: #fff;
|
}
|
|
display: flex;
|
}
|
|
.menu-item-l:first-child {
|
margin-left: 2.7vw;
|
}
|
|
.border1 {
|
border-color: #1dffff;
|
background-color: rgba(29, 255, 255, 0.1);
|
}
|
|
.border2 {
|
border-color: #48a4ff;
|
background-color: rgba(72, 164, 255, 0.1);
|
}
|
}
|
.ml78 {
|
margin-left: 78px;
|
}
|
._table-btn {
|
color: #48A4FF;
|
cursor: pointer;
|
}
|
.content-wrap {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
/deep/.dv-border-box-1 {
|
.border-box-content{
|
padding: 20px;
|
}
|
}
|
.column {
|
flex: 1;
|
.title {
|
background-image: url("../../assets/newImg/bgtitle.png");
|
height: 33px;
|
background-repeat: no-repeat;
|
background-size: auto 100%;
|
font-size: 16px;
|
padding-left: 30px;
|
display: flex;
|
align-items: center;
|
font-family: YouSheBiaoTiHeiT;
|
|
span {
|
line-height: 33px;
|
}
|
|
img {
|
width: 14px;
|
margin-right: 6px;
|
}
|
|
.calendar {
|
padding-right: 20px;
|
opacity: 0.8;
|
}
|
}
|
|
.layer {
|
width: 100%;
|
margin-top: 15px;
|
background-size: cover;
|
background-position: center;
|
background-repeat: no-repeat;
|
&-1{
|
background-image: url("../../assets/safety/banner1.png");
|
}
|
&-2{
|
background-image: url("../../assets/safety/banner2.png");
|
}
|
&-3{
|
background-image: url("../../assets/safety/banner3.png");
|
}
|
}
|
|
.action-bar {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin: 14px 0;
|
|
.action-item {
|
margin-left: 16px;
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
|
.orange {
|
border-color: @orange;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
|
.blue {
|
border-color: @blue;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
|
.ps {
|
height: calc(100vh - 625px);
|
background-color: rgba(60, 129, 255, 0.04);
|
}
|
|
.list-wrap {
|
.list-item {
|
margin: 0 22px;
|
padding: 20px 0;
|
border-bottom: 1px dashed;
|
border-color: rgba(62, 95, 137, 0.5);
|
|
img.icon {
|
width: 21px;
|
height: 19px;
|
flex-shrink: 0;
|
margin-right: 10px;
|
}
|
|
.item-info {
|
flex: 1;
|
|
.item-title {
|
color: #fff;
|
line-height: 22px;
|
}
|
|
.item-sub {
|
color: #fff;
|
opacity: 0.6;
|
font-size: 14px;
|
line-height: 20px;
|
}
|
|
.item-ellipsis-info {
|
font-size: 14px;
|
color: #fff;
|
opacity: 0.8;
|
margin-top: 14px;
|
margin-bottom: 16px;
|
}
|
}
|
|
.status {
|
height: 100%;
|
color: #3e89d3;
|
line-height: 42px;
|
font-size: 14px;
|
}
|
|
.img-wrap {
|
position: relative;
|
width: 170px;
|
height: 113px;
|
box-sizing: border-box;
|
border: 1px solid #293e5c;
|
margin-right: 26px;
|
text-align: center;
|
display: table-cell;
|
vertical-align: middle;
|
|
.inner-border {
|
position: absolute;
|
width: 10px;
|
height: 10px;
|
}
|
|
.top-left {
|
top: 0;
|
left: 0;
|
border-top: 1px solid #5cadff;
|
border-left: 1px solid #5cadff;
|
}
|
|
.top-right {
|
top: 0;
|
right: 0;
|
border-top: 1px solid #5cadff;
|
border-right: 1px solid #5cadff;
|
}
|
|
.bottom-left {
|
bottom: 0;
|
left: 0;
|
border-bottom: 1px solid #5cadff;
|
border-left: 1px solid #5cadff;
|
}
|
|
.bottom-right {
|
bottom: 0;
|
right: 0;
|
border-bottom: 1px solid #5cadff;
|
border-right: 1px solid #5cadff;
|
}
|
|
img {
|
max-width: 100%;
|
max-height: 100%;
|
display: block;
|
margin: auto;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.clear {
|
clear: both;
|
}
|
|
.block {
|
display: block;
|
}
|
|
.pagination {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 20px;
|
font-size: 14px;
|
|
.page-num {
|
width: 48px;
|
background: none;
|
|
/deep/ input {
|
height: 22px;
|
background: none;
|
font-size: 14px;
|
color: #fff;
|
line-height: 22px;
|
text-align: center;
|
border: 0 !important;
|
}
|
}
|
|
.seporator {
|
color: rgba(255, 255, 255, 0.65);
|
width: 40px;
|
text-align: center;
|
}
|
|
.page-total {
|
color: rgba(255, 255, 255, 0.65);
|
}
|
|
.act {
|
color: rgba(255, 255, 255, 0.65);
|
width: 44px;
|
text-align: center;
|
cursor: pointer;
|
}
|
}
|
|
}
|
|
</style>
|
