486 lines
12 KiB
Vue
486 lines
12 KiB
Vue
<template>
|
|
<el-row>
|
|
|
|
<el-col :md="12" :sm="24" style="padding-right: 7.5px; padding-left: 7.5px">
|
|
<el-card header="进行项目">
|
|
<div style="width:33%;float:left">
|
|
<div style="margin: 0px 20px 12px 40px;">
|
|
<el-badge :value="operationnumber" class="item">
|
|
<el-button
|
|
icon="el-icon-document-copy"
|
|
type="primary"
|
|
size="small"
|
|
></el-button>
|
|
</el-badge>
|
|
</div>
|
|
<div style="margin: 0px 20px 12px 40px">
|
|
<span>作业</span>
|
|
</div>
|
|
</div>
|
|
<div style="width:33%;float:left">
|
|
<div style="margin: 0px 20px 12px 40px;">
|
|
<el-badge :value="rpjnumber" class="item">
|
|
<el-button
|
|
icon="el-icon-document-copy"
|
|
type="warning"
|
|
size="small"
|
|
></el-button>
|
|
</el-badge>
|
|
</div>
|
|
<div style="margin: 0px 20px 12px 40px">
|
|
<span>相关方项目</span>
|
|
</div>
|
|
</div>
|
|
<div style="width:33%;float:left">
|
|
<div style="margin: 0px 20px 12px 40px;">
|
|
<el-badge :value="visitnumber" class="item">
|
|
<el-button
|
|
icon="el-icon-document-copy"
|
|
type="success"
|
|
size="small"
|
|
></el-button>
|
|
</el-badge>
|
|
</div>
|
|
<div style="margin: 0px 20px 12px 40px">
|
|
<span>访客项目</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24" style="padding-left: 7.5px">
|
|
<el-card>
|
|
<div class="screen-cockpits">
|
|
<div class="cockpit-count">
|
|
<div class="divider"></div>
|
|
<div class="simple-title">
|
|
<span>人员统计</span>
|
|
<div class="countTypeWrap">
|
|
<span
|
|
:class="{ activeCount: countIndex === '1' }"
|
|
@click="countINdexChange('1')"
|
|
>有卡</span
|
|
>
|
|
<el-divider direction="vertical"></el-divider>
|
|
<span
|
|
:class="{ activeCount: countIndex === '2' }"
|
|
@click="countINdexChange('2')"
|
|
>在厂</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="count-list">
|
|
<div class="count-list-item">
|
|
<div class="item-img item-img2"></div>
|
|
<div class="item-info">
|
|
<div title="员工" class="normal">内部员工</div>
|
|
<div class="bottom">
|
|
<span class="large">{{ userCount.count_employee }}</span
|
|
> <span class="normal">人</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="count-list-item">
|
|
<div class="item-img item-img1"></div>
|
|
<div class="item-info">
|
|
<div title="外来人员" class="normal">访客</div>
|
|
<div class="bottom">
|
|
<span class="large">{{ userCount.count_visitor }}</span
|
|
> <span class="normal">人</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="count-list-item">
|
|
<div class="item-img item-img3"></div>
|
|
<div class="item-info">
|
|
<div title="承包商" class="normal">相关方</div>
|
|
<div class="bottom">
|
|
<span class="large">{{ userCount.count_remployee }}</span
|
|
> <span class="normal">人</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dutyAgg: [],
|
|
//数据统计
|
|
userCount: {
|
|
total: 0,
|
|
count_employee: 0, //内部员工
|
|
count_remployee: 0, //访客
|
|
count_visitor: 0, //相关方
|
|
},
|
|
operationnumber: null,
|
|
rpjnumber:null,
|
|
visitnumber:null
|
|
};
|
|
},
|
|
created() {
|
|
this.getdutyAgg();
|
|
this.getManCount(); //人员统计$$
|
|
this.getOperation();
|
|
this.getRpj();
|
|
this.getVisit();
|
|
},
|
|
methods: {
|
|
//工单待办
|
|
async getdutyAgg() {
|
|
let res = await this.$API.wf.ticket.dutyAgg.req({ page: 0 });
|
|
this.dutyAgg = res.details;
|
|
},
|
|
//人员统计
|
|
getManCount() {
|
|
let that = this;
|
|
if (that.countIndex === "2") {
|
|
that.$API.third.blt.countNow.req().then((res) => {
|
|
if (res.err_msg) {
|
|
} else {
|
|
that.userCount = { ...res };
|
|
}
|
|
});
|
|
} else {
|
|
that.$API.third.blt.countBind.req().then((res) => {
|
|
if (res.err_msg) {
|
|
} else {
|
|
that.userCount = { ...res };
|
|
}
|
|
});
|
|
}
|
|
},
|
|
//有卡/在线切换
|
|
countINdexChange(index) {
|
|
this.countIndex = index;
|
|
this.getManCount();
|
|
},
|
|
|
|
//作业
|
|
getOperation() {
|
|
this.$API.opm.operation.list
|
|
.req({ page: 1, page_size: 1, state: 40 })
|
|
.then((res) => {
|
|
this.operationnumber = res.count;
|
|
});
|
|
},
|
|
//相关方入场项目
|
|
getRpj() {
|
|
this.$API.rpm.rpj.list
|
|
.req({ page: 1, page_size: 1, state: 40 })
|
|
.then((res) => {
|
|
this.rpjnumber = res.count;
|
|
});
|
|
},
|
|
//访客
|
|
getVisit() {
|
|
this.$API.vm.visit.list
|
|
.req({ page: 1, page_size: 1, state: 40 })
|
|
.then((res) => {
|
|
this.visitnumber = res.count;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.welcome .logo {
|
|
text-align: center;
|
|
}
|
|
|
|
.welcome .logo img {
|
|
vertical-align: bottom;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.welcome .logo h2 {
|
|
font-size: 30px;
|
|
font-weight: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tips {
|
|
margin-top: 20px;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
.tips-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 7.5px 0;
|
|
}
|
|
|
|
.tips-item-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
margin-right: 20px;
|
|
color: var(--el-color-primary);
|
|
background: rgba(180, 180, 180, 0.1);
|
|
}
|
|
.item {
|
|
margin-top: 10px;
|
|
margin-right: 40px;
|
|
}
|
|
.tips-item-message {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
}
|
|
.item-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
position: relative;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-img:after {
|
|
content: "";
|
|
width: 38px;
|
|
height: 38px;
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 7px;
|
|
background: url(/public/img/rotate_line.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
-webkit-animation: rotate 4s linear infinite;
|
|
animation: rotate 4s linear infinite;
|
|
}
|
|
.zuoye {
|
|
background: url(/public/img/zuoye.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.actions {
|
|
text-align: center;
|
|
margin: 40px 0 20px 0;
|
|
}
|
|
.screen-cockpits {
|
|
margin-top: -15px;
|
|
.cockpit-count {
|
|
.count-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
|
|
.count-list-item {
|
|
width: 33.3333%;
|
|
height: 50%;
|
|
display: flex;
|
|
|
|
.item-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
position: relative;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-img:after {
|
|
content: "";
|
|
width: 38px;
|
|
height: 38px;
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 7px;
|
|
background: url(/public/img/rotate_line.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
-webkit-animation: rotate 4s linear infinite;
|
|
animation: rotate 4s linear infinite;
|
|
}
|
|
|
|
.item-img1 {
|
|
background: url(/public/img/icon_wlry.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.item-img2 {
|
|
background: url(/public/img/icon_nbyg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.item-img3 {
|
|
background: url(/public/img/icon_cbs.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.item-info {
|
|
.normal {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
// color: #fff;
|
|
}
|
|
|
|
.large {
|
|
font-size: 30px;
|
|
font-weight: 400;
|
|
//color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-title {
|
|
line-height: 22px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
//color: #fff;
|
|
position: relative;
|
|
padding-left: 8px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.countTypeWrap {
|
|
font-size: 14px;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.activeCount {
|
|
display: inline-block;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
border-radius: 16px;
|
|
//color: #fff;
|
|
font-size: 14px;
|
|
padding: 0 18px;
|
|
border: 1px solid #32fde3;
|
|
background: #007767;
|
|
box-shadow: inset 0 0 8px #5aecf0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cockpit-alarm {
|
|
.alarm-bell {
|
|
padding: 0 18px 0 32px;
|
|
position: relative;
|
|
// color: #fff;
|
|
}
|
|
|
|
.alarm-bell:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 8px;
|
|
width: 14px;
|
|
height: 16px;
|
|
background: url(/public/img/bell.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.alarm-bell.danger {
|
|
border: 1px solid #ffc679;
|
|
background: #dd8000;
|
|
box-shadow: inset 0 0 8px #fda732;
|
|
}
|
|
|
|
.alarm-bell.danger:hover {
|
|
box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
|
|
}
|
|
|
|
.alarm-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: calc(100% - 50px);
|
|
|
|
.content-left {
|
|
width: 160px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.alarm-danger {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: url(/public/img/a_danger.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.content-right {
|
|
width: calc(100% - 170px);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.alarm-item {
|
|
width: 50%;
|
|
height: 25%;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
padding-left: 8px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item-name {
|
|
margin-right: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-number {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.alarm-item-danger {
|
|
color: #fda732;
|
|
|
|
.item-icon {
|
|
background: url(/public/img/r_danger.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.alarm-item-safe {
|
|
// color: #fff;
|
|
|
|
.item-icon {
|
|
background: url(/public/img/r_safe.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cockpit-info {
|
|
.header-tab {
|
|
width: 210px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|