mudu-vx/src/views/vxEwm/enterprise/info.vue

<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 class="firm-info" v-if="active == 1">
        <div class="info-content">
          <div class="list-item">
            <div class="item-title">企业名称</div>
            <div class="item-value">{{ parkList.name }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">社会信用代码</div>
            <div class="item-value">{{ parkList.certificateCode }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">规上企业</div>
            <div class="item-value">
              {{ parkList.standardSized == 0 ? '否' : '是' }}
            </div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">上亿企业</div>
            <div class="item-value">
              {{ parkList.oneHundredMillion == 0 ? '否' : '是' }}
            </div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">企业类型</div>
            <div class="item-value">{{ parkList.typeName }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">所属行业</div>
            <div class="item-value">{{ parkList.industryName }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">所属地</div>
            <div class="item-value">{{ parkList.locationName }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">所属工业园</div>
            <div class="item-value">{{ parkList.parkName }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">法定代表人</div>
            <div class="item-value">{{ parkList.legalPerson }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">法人联系人</div>
            <div class="item-value">{{ parkList.legalPersonPhone }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">住所（注册地）</div>
            <div class="item-value">{{ parkList.registerAddress }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">实际经营地址</div>
            <div class="item-value">{{ parkList.businessAddress }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">企业人数</div>
            <div class="item-value">{{ parkList.person }}(人)</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">面积</div>
            <div class="item-value">{{ parkList.rentSpace }}(㎡)</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">企业状态</div>
            <div class="item-value">{{ parkList.status | fiterStatus }}</div>
          </div>
          <van-divider />
          <div class="list-item">
            <div class="item-title">入住园区</div>
            <div class="item-value">{{ parkList.parkName }}</div>
          </div>
          <van-divider />
        </div>
      </div>
      <div class="record-list" v-if="active == 2">
        <!-- <div class="serch-input">
          <div class="input-box">
            <input type="text" placeholder="请输入搜索关键字" v-model="EnterpriseName" />
            <div class="input-close" v-show="EnterpriseName">
              <van-icon name="clear" @click="EnterpriseName = undefined" />
            </div>
          </div>
          <div class="serch-btn" @click="onSearch"></div>
        </div> -->
        <!-- <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="list-items" v-for="item in 10">
            <div class="item-top">
              【日常巡查】 苏州智讯联电子有限公司
            </div>
            <div class="item-bottom">
              <div class="bottom-time">2024-02-27</div>
              <div class="bottom-right">
                <div class="right-name">打卡人：许龙彪</div>
                <img @click="goInfo(item)" src="@/assets/image/vxEwm/examine.png" alt="">
              </div>
            </div>
          </div>
        </van-list> -->
        <div>
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :immediate-check="true"
            >
              <div class="list-items" v-for="item in checkslist" :key="item.id">
                <div class="item-top">
                  {{
                    item.leaderJoin
                      ? '【领导检查】' + item.enterpriseName
                      : '【日常巡查】' + item.enterpriseName
                  }}
                </div>
                <div class="item-bottom">
                  <div class="bottom-time">{{ item.checkDate }}</div>
                  <div class="bottom-right">
                    <div class="right-name">
                      打卡人：{{ item.reportPersonName }}
                    </div>
                    <img
                      v-show="item.isTrouble == 1"
                      @click="goInfo(item)"
                      src="@/assets/image/vxEwm/examine.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import xApi from '../../../api/xApi'
import * as api from '@/api/api2.js'
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,
      parkList: {},
      loading: false,
      finished: false,
      pageIndex: 1,
      checkslist: [],
      refreshing: false,
      enterpriseId: null,
    }
  },
  filters: {
    fiterStatus(target) {
      if (target == 1) {
        return '正常'
      }
      if (target == 2) {
        return '注销'
      }
      if (target == 3) {
        return '搬离'
      }
    },
  },
  mounted() {
    let enterpriseId = this.$route.query.id
    this.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)
    this.getIdInfo(enterpriseId)
    this.onLoad(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
        }
      })
    },
    //根据id获取工业区详情
    getIdInfo(id) {
      xApi.getEnterInfo(id).then((res) => {
        this.parkList = res.data
      })
    },
    // 触底加载
    onLoad() {
      let initLimit = 10
      let params = {}
      if (this.refreshing) {
        this.checkslist = []
        this.refreshing = false
      }
      params = {
        enterpriseID: this.enterpriseId,
        limit: initLimit,
        page: this.pageIndex,
        leaderJoin: 0,
      }
      setTimeout(() => {
        api.getCheckslist(params).then((res) => {
          this.checkslist = this.checkslist.concat(res.data)
          if (res.data.length < initLimit) {
            // console.log(this.pageIndex++, '获取到的数据为' + res.data.length)
            this.finished = true
            return
          }
          this.loading = false
          this.pageIndex++
        })
      }, 500)
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 上拉清空页数
      this.pageIndex = 1
      // 上拉清空数据
      this.checkslist = []
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    // 检查详情
    goInfo(item) {
      this.$router.push({
        path: '/enterpriseData/check/info/' + item.id,
      })
    },
  },
}
</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;
    }
  }
}
.firm-info {
  .info-content {
    background: #ffffff;
    // box-shadow: 0.08rem 0rem 0.16rem 0rem #BBD5EC;
    border-radius: 0.24rem;
    padding: 0.35rem 0.42rem;
    .list-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .item-title {
        width: 1.8rem;
        flex-wrap: nowrap;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 0.21rem;
        color: #666666;
        // line-height: 0.8rem;
      }
      .item-value {
        flex: 1;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 0.22rem;
        color: #333333;
        // line-height: 0.8rem;
      }
    }
  }
}
.record-list {
  padding-bottom: 0.45rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // .serch-input {
  //   width: 99%;
  //   height: 0.8rem;
  //   border-radius: 28px;
  //   background-color: #fff;
  //   box-shadow: 0 2px 12px 0 #0000001a;
  //   padding: 0 0.25rem;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   .input-box {
  //     flex: 1;
  //     display: flex;
  //     align-items: center;
  //     input {
  //       border: 0;
  //       width: 90%;
  //     }
  //   }
  // }
  // .serch-btn {
  //   height: 0.3rem;
  //   width: 0.3rem;
  //   background: url('~@/assets/image/vxEwm/search-btn.png');
  //   background-size: 100% 100%;
  // }
  .list-items {
    width: 99%;
    margin-top: 0.24rem;
    background: #ffffff;
    box-shadow: 0.04rem 0.04rem 0.08rem 0rem #bbd5ec;
    border-radius: 0.24rem 0.24rem 0.24rem 0.24rem;
    .item-top {
      background: #ffffff;
      padding: 0.32rem 0.42rem;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 0.24rem;
      color: #333333;
      border-radius: 0.24rem 0.24rem 0rem 0rem;
    }
    .item-bottom {
      background: #fafafa;
      padding: 0.25rem 0.42rem;
      border-radius: 0rem 0rem 0.24rem 0.24rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 0.21rem;
      color: #666666;
      .bottom-time {
      }
      .bottom-right {
        display: flex;
        align-items: center;
        .right-name {
        }
        img {
          width: 0.66rem;
          margin-left: 0.15rem;
        }
      }
    }
  }
}
/deep/ .van-list {
  height: calc(100% - 1rem);
  overflow-y: auto;
  width: 100%;
  border-radius: 16px;
}
/deep/.van-cell {
  -webkit-box-shadow: 0rem 0rem 0rem 0rem;
  box-shadow: 0rem 0rem 0rem 0rem;
  border-bottom: 1px solid #cccc;
  border-radius: 0rem;
  height: auto;
  text-align: left;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
/deep/.van-cell__title {
  margin-top: 0.167rem;
  text-align: left;
  padding-left: 0.15rem;
  font-size: 0.267rem;

  & > span {
    font-family: 'AlibabaPuHuiTi-Medium';
    font-weight: 400;
    color: #34373b;
  }
}

.svan-label {
  font-size: 0.25rem;
  margin-bottom: 0.167rem;
  display: flex;
  font-family: 'AlibabaPuHuiTi-Regular';
  font-weight: 400;
  color: #868d98;
}
.svan-label span {
  flex: 1;
}
</style>