kuangshan-project/src/views/meihuajing/yinhuanpaicha/yinhuaninfo_gongshi.vue

<template>
  <div>
    <div class="footed">
      <div
        class="footed_box"
        v-for="(item, index) in TroubleshootData_list"
        :key="index"
      >
        <div class="footed_box_one">
          <p class="footed_box_one_p1">{{ item.add_person }}</p>
          <!-- <p class="footed_box_one_p2">{{item.created_at}}</p> -->
          <p class="footed_box_one_p6" v-if="item.rectification_status == 0">
            未整改
          </p>
          <p class="footed_box_one_p6_2" v-if="item.rectification_status == 1">
            已整改
          </p>
          <p
            class="footed_box_one_p6_3"
            style="background: #fdaf00"
            v-if="item.rectification_status == 2"
          >
            申请延期
          </p>
          <p class="footed_box_one_p6_3" v-if="item.rectification_status == 3">
            逾期
          </p>

          <p class="footed_box_one_p4" v-if="item.status == 1">未验收</p>
          <p class="footed_box_one_p3" v-if="item.status == 2">已验收</p>
          <p class="footed_box_one_p5" v-if="item.status == 3">逾期</p>
          <p class="footed_box_one_p5" v-if="item.status == 4">未通过</p>
        </div>
        <div class="footed_box_two">
          <div class="footed_box_two_div">
            <span class="footed_box_span1">风险点</span>
            <span>{{ item.risk_point }}</span>
          </div>
          <div class="footed_box_two_div">
            <span class="footed_box_span1">检查专业</span>
            <span>{{ item.inspection_specialty }}</span>
          </div>
          <div class="footed_box_two_div">
            <span class="footed_box_span1">责任单位</span>
            <span>{{ item.rectification_duty_unit }}</span>
          </div>
        </div>
        <div class="footed_box_three" @click="dianji(item)">
          <img src="../../../assets/images/meihuajing/信息.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 隐患列表
      TroubleshootData_list: [],
    };
  },
  methods: {
    // 获取隐患排查列表
    getTroubleshootData() {
      this.TroubleshootData_list = [];
      this.$toast.loading();

      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/getTroubleshootData",
          {
            type: 5,
          }
        )
        .then((res) => {
          this.$toast.clear();
          console.log(res);
          console.log(res.data.data.data);

          this.TroubleshootData_list = res.data.data.data;
        });
    },

    dianji(item) {
      if (item.rectification_status == 1 && item.status == 3) {
        //已整改 逾期
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_yzg_yq?id=` + item.id
        );
      } else if (item.rectification_status == 3) {
        // 逾期 未验收
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_wzgyq?id=` + item.id
        );
      } else if (item.rectification_status == 0 && item.status == 1) {
        //未整改 未验收
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_wzg_wys?id=` + item.id
        );
      } else if (item.rectification_status == 2 && item.status == 1) {
        //申请延期 未验收
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_sqyq_wys?id=` + item.id
        );
      } else if (item.rectification_status == 1 && item.status == 1) {
        //已整改 未验收
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_yzg_wys?id=` + item.id
        );
      } else if (item.status == 4) {
        // 未通过
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_yzg_wtg?id=` + item.id
        );
      } else if (item.status == 2) {
        // 已验收
        this.$router.push(
          `/meihuajing/yinhuanpaicha/yinhuanform_my_yys?id=` + item.id
        );
      }
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#f0f0f0"; //背景色

    this.getTroubleshootData();
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
.footed {
  width: 100%;
  background: #fff;
}
.footed_box {
  width: 90%;
  margin: 5px auto;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.footed_box_one {
  width: 30%;
  text-align: center;
}
.footed_box_two {
  width: 56%;
}
.footed_box_three {
  width: 10%;
  text-align: center;
}
.footed_box_three > img {
  margin-top: 34px;
  width: 34px;
}
.footed_box_two_div {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
.footed_box_span1 {
  width: 77px;
  color: #9b9b9b;
}
.footed_box_one_p1 {
  margin-top: 10px;
  font-size: 20px;
}
.footed_box_one_p2 {
  font-size: 14px;
  color: #9b9b9b;
}
.footed_box_one_p3 {
  background: #4dc100;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p4 {
  background: #fdaf00;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p5 {
  background: #c00201;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p6 {
  background: #39f;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p6_2 {
  background: #3ba7b5;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p6_3 {
  background: #c00201;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
</style>