parent
817398701f
commit
71aeb10cbc
@ -0,0 +1,457 @@
|
|||||||
|
<template>
|
||||||
|
<div class="enterprise-container">
|
||||||
|
<div class="tab-main">
|
||||||
|
<div
|
||||||
|
class="tab-item"
|
||||||
|
:class="active == index ? 'activeTab' : ''"
|
||||||
|
v-for="(item, index) in tabList"
|
||||||
|
:key="item.value"
|
||||||
|
@click="changeTab(item.name, index)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
<div class="tab-line" v-show="active == index"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-box" ref="targetElement">
|
||||||
|
<div class="timer-shaft" v-if="active == 0">
|
||||||
|
<div class="timer-item">
|
||||||
|
<div class="circle" style="top: 0.08rem">
|
||||||
|
<img src="@/assets/image/vxEwm/big-circle2.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="circle-line" style="top: 0.08rem; height: 135%"></div>
|
||||||
|
<div class="data-mian">
|
||||||
|
<div class="timer-line-title enterprise-name">
|
||||||
|
{{ enterpriseName }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timer-item">
|
||||||
|
<div class="circle">
|
||||||
|
<img src="@/assets/image/vxEwm/circle.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="circle-line"></div>
|
||||||
|
<div class="row-cell">
|
||||||
|
<div class="cell-box">
|
||||||
|
<div class="left-icon-name">
|
||||||
|
<div class="left-icon">
|
||||||
|
<img src="@/assets/image/vxEwm/row-cell-1.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left-name">日常巡查</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-data-unit">
|
||||||
|
<div class="right-data">
|
||||||
|
{{ zhengchang.countValue ? zhengchang.countValue : 0 }}
|
||||||
|
</div>
|
||||||
|
<div class="right-unit">次</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timer-item">
|
||||||
|
<div class="circle">
|
||||||
|
<img src="@/assets/image/vxEwm/circle.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="circle-line"></div>
|
||||||
|
<div class="row-cell">
|
||||||
|
<div class="two-rows">
|
||||||
|
<div class="top-row">
|
||||||
|
<div class="left-icon-name">
|
||||||
|
<div class="left-icon">
|
||||||
|
<img src="@/assets/image/vxEwm/row-cell-3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left-name">风险隐患</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-data-unit">
|
||||||
|
<div class="right-data">{{ yinhuanSum }}</div>
|
||||||
|
<div class="right-unit">条</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="bottom-row">
|
||||||
|
<div>
|
||||||
|
<span class="unit">未派单</span>
|
||||||
|
<span class="unit-num" style="color: #f563cd">
|
||||||
|
{{ weipandan.countValue || 0 }}
|
||||||
|
</span>
|
||||||
|
<span class="unit"> 条</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="unit">已派单</span>
|
||||||
|
<span class="unit-num" style="color: #ff9600">
|
||||||
|
{{ yipaidan.countValue || 0 }}
|
||||||
|
</span>
|
||||||
|
<span class="unit"> 条</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="unit">已整改</span>
|
||||||
|
<span class="unit-num" style="color: #4cbaf3">
|
||||||
|
{{ yizhenggai.countValue || 0 }}
|
||||||
|
</span>
|
||||||
|
<span class="unit"> 条</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timer-item">
|
||||||
|
<div class="circle">
|
||||||
|
<img src="@/assets/image/vxEwm/circle.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="circle-line"></div>
|
||||||
|
<div class="row-cell">
|
||||||
|
<div class="two-rows">
|
||||||
|
<div class="top-row">
|
||||||
|
<div class="left-icon-name">
|
||||||
|
<div class="left-icon">
|
||||||
|
<img src="@/assets/image/vxEwm/row-cell-3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left-name">整改工单</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-data-unit">
|
||||||
|
<div class="right-data">
|
||||||
|
{{ gongdanSum ? gongdanSum : 0 }}
|
||||||
|
</div>
|
||||||
|
<div class="right-unit">个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="bottom-row">
|
||||||
|
<div></div>
|
||||||
|
<div>
|
||||||
|
<span class="unit">未处理</span>
|
||||||
|
<span class="unit-num" style="color: #f563cd">
|
||||||
|
{{ weigongdan ? weigongdan : 0 }}
|
||||||
|
</span>
|
||||||
|
<span class="unit"> 条</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="unit">已处理</span>
|
||||||
|
<span class="unit-num" style="color: #4cbaf3">
|
||||||
|
{{ yigongdan ? yigongdan : 0 }}</span
|
||||||
|
>
|
||||||
|
<span class="unit"> 条</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timer-item">
|
||||||
|
<div class="circle">
|
||||||
|
<img src="@/assets/image/vxEwm/circle.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<!-- <div class="circle-line"></div> -->
|
||||||
|
<div class="row-cell">
|
||||||
|
<div class="cell-box">
|
||||||
|
<div class="left-icon-name">
|
||||||
|
<div class="left-icon">
|
||||||
|
<img src="@/assets/image/vxEwm/row-cell-3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left-name">企业提交整改</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-data-unit">
|
||||||
|
<div class="right-data">
|
||||||
|
{{ zhenggaiInfo ? zhenggaiInfo : 0 }}
|
||||||
|
</div>
|
||||||
|
<div class="right-unit">次</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import xApi from '../../../api/xApi'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
enterpriseName: '',
|
||||||
|
active: 0,
|
||||||
|
tabList: [
|
||||||
|
{ name: '企业动态', value: 0 },
|
||||||
|
{ name: '企业详情', value: 1 },
|
||||||
|
{ name: '检查记录', value: 2 },
|
||||||
|
],
|
||||||
|
zhengchang: {}, //正常
|
||||||
|
weipandan: {},
|
||||||
|
yipaidan: {}, //已派单
|
||||||
|
yizhenggai: {}, //已整改
|
||||||
|
zhenggaiInfo: null, //整改情况
|
||||||
|
yinhuanSum: 0,
|
||||||
|
gongdanSum: null, //工单总数
|
||||||
|
weigongdan: 0,
|
||||||
|
yigongdan: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let enterpriseId = this.$route.query.id
|
||||||
|
this.enterpriseName = this.$route.query.name
|
||||||
|
let isShow = this.$route.query.isShow
|
||||||
|
if (isShow) {
|
||||||
|
this.$store.commit('SET_IS_SHOW', isShow)
|
||||||
|
} else {
|
||||||
|
this.$store.commit('SET_IS_SHOW', false)
|
||||||
|
}
|
||||||
|
this.getYinHuan(enterpriseId)
|
||||||
|
this.getJianChaNum(enterpriseId)
|
||||||
|
this.getGongDan(enterpriseId)
|
||||||
|
this.getZhengGaiInfo(enterpriseId)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTab(name, index) {
|
||||||
|
if (this.active == index) return
|
||||||
|
this.active = index
|
||||||
|
// 滚动页面至顶部
|
||||||
|
this.$refs.targetElement.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth', // 使用平滑滚动效果
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//风险隐患
|
||||||
|
getYinHuan(id) {
|
||||||
|
let params = {
|
||||||
|
EnterpriseID: id,
|
||||||
|
}
|
||||||
|
xApi.getenterprisetroublecount(params).then((res) => {
|
||||||
|
res.data.forEach((item) => {
|
||||||
|
if (item.status == 0) {
|
||||||
|
this.weipandan = item
|
||||||
|
} else if (item.status == 1) {
|
||||||
|
this.yipaidan = item
|
||||||
|
} else if (item.status == 2) {
|
||||||
|
this.yizhenggai = item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (JSON.stringify(this.weipandan) == '{}') {
|
||||||
|
//判断存在不存在的state
|
||||||
|
this.weipandan.countValue = 0
|
||||||
|
}
|
||||||
|
if (JSON.stringify(this.yipaidan) == '{}') {
|
||||||
|
this.yipaidan.countValue = 0
|
||||||
|
}
|
||||||
|
if (JSON.stringify(this.yizhenggai) == '{}') {
|
||||||
|
this.yizhenggai.countValue = 0
|
||||||
|
}
|
||||||
|
this.yinhuanSum =
|
||||||
|
this.weipandan.countValue +
|
||||||
|
this.yipaidan.countValue +
|
||||||
|
this.yizhenggai.countValue
|
||||||
|
// console.log('风险隐患',JSON.stringify(this.weipandan) == '{}')
|
||||||
|
// console.log('未派单',this.weipandan,'已派单',this.yipaidan,'已整改',this.yizhenggai,'总数',this.yinhuanSum)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取领导检查次数
|
||||||
|
getJianChaNum(id) {
|
||||||
|
let params = {
|
||||||
|
EnterpriseID: id,
|
||||||
|
}
|
||||||
|
xApi.getenterprisecheckscount(params).then((res) => {
|
||||||
|
res.data.forEach((it) => {
|
||||||
|
if (it.leaderJoin == 0) {
|
||||||
|
//领导检查
|
||||||
|
this.zhengchang = it
|
||||||
|
}
|
||||||
|
if (it.leaderJoin == 1) {
|
||||||
|
//日常巡查
|
||||||
|
this.linDao = it
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//整改工单
|
||||||
|
getGongDan(id) {
|
||||||
|
let params = {
|
||||||
|
EnterpriseID: id,
|
||||||
|
}
|
||||||
|
xApi.getenterpriseimprovingcount(params).then((res) => {
|
||||||
|
// console.log(res.data)
|
||||||
|
for (var i = 0; i < res.data.length; i++) {
|
||||||
|
this.gongdanSum += res.data[i].countValue
|
||||||
|
if (res.data[i].isFinal == 0) {
|
||||||
|
this.weigongdan += res.data[i].countValue
|
||||||
|
} else if (res.data[i].isFinal == 1) {
|
||||||
|
this.yigongdan += res.data[i].countValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//获取整改情况
|
||||||
|
getZhengGaiInfo(id) {
|
||||||
|
let params = {
|
||||||
|
EnterpriseID: id,
|
||||||
|
}
|
||||||
|
xApi.getimprovingreviewcount(params).then((res) => {
|
||||||
|
for (var i = 0; i < res.data.length; i++) {
|
||||||
|
this.zhenggaiInfo += res.data[i].countValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
div {
|
||||||
|
text-align: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.enterprise-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tab-main {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.25rem;
|
||||||
|
color: #666666;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
.tab-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -0.35rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 0.65rem;
|
||||||
|
height: 0.26rem;
|
||||||
|
background: url('~@/assets/image/vxEwm/tab-line.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.activeTab {
|
||||||
|
color: #177fd4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container-box {
|
||||||
|
height: calc(100% - 0.7rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.timer-shaft {
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
.timer-item {
|
||||||
|
position: relative;
|
||||||
|
.circle {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.4rem;
|
||||||
|
z-index: 2;
|
||||||
|
width: 0.33rem;
|
||||||
|
height: 0.34rem;
|
||||||
|
}
|
||||||
|
.circle-line {
|
||||||
|
position: absolute;
|
||||||
|
left: calc(0.33rem / 2.3);
|
||||||
|
top: 0.4rem;
|
||||||
|
z-index: 1;
|
||||||
|
width: 0.03rem;
|
||||||
|
height: 100%;
|
||||||
|
background: url('~@/assets/image/vxEwm/circle-line.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.data-mian {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 0.43rem;
|
||||||
|
padding-bottom: 0.6rem;
|
||||||
|
width: 100%;
|
||||||
|
.enterprise-name {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 0.29rem;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row-cell {
|
||||||
|
padding-left: 0.43rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
.cell-box {
|
||||||
|
padding: 0 0.42rem;
|
||||||
|
min-height: 1rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.two-rows {
|
||||||
|
padding: 0.2rem 0.42rem;
|
||||||
|
min-height: 1rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
margin: 0.18rem 0;
|
||||||
|
height: 0.01rem;
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
.bottom-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.unit {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.unit-num {
|
||||||
|
font-size: 0.29rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'PingFang-SC-Bold';
|
||||||
|
margin: 0 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-icon-name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.left-icon {
|
||||||
|
width: 0.3rem;
|
||||||
|
height: 0.3rem;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
.left-name {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-data-unit {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.right-data {
|
||||||
|
font-size: 0.38rem;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'PingFang-SC-Bold';
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
.right-unit {
|
||||||
|
font-size: 0.19rem;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue