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