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

<template>
  <div>
    <!-- <div v-if="shows">
      <van-nav-bar title="风险评级" left-arrow @click-left="onClickLeft" />
    </div> -->
    <div class="headers">
      <div>
        <van-field
          v-model="value12"
          name="检查人"
          label="检查人"
          placeholder="检查人"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value10"
          name="检查人部门"
          label="检查人部门"
          placeholder="检查人部门"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value1"
          name="检查专业"
          label="检查专业"
          placeholder="检查专业"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value2"
          name="隐患等级"
          label="隐患等级"
          placeholder="隐患等级"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-cell-group>
          <van-field
            v-model="message1"
            rows="1"
            autosize
            label="存在问题或隐患"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message2"
            rows="1"
            autosize
            label="整改措施"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="contents">
      <div>
        <van-field
          v-model="value3"
          name="风险点"
          label="风险点"
          placeholder="风险点"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value4"
          name="风险类型"
          label="风险类型"
          placeholder="风险类型"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value5"
          name="风险等级"
          label="风险等级"
          placeholder="风险等级"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value6"
          name="事故类型"
          label="事故类型"
          placeholder="事故类型"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-cell-group>
          <van-field
            v-model="message3"
            rows="1"
            autosize
            label="风险描述"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message4"
            rows="1"
            autosize
            label="后果及影响"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message5"
            rows="1"
            autosize
            label="管控措施"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
      <!-- <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column label="日期" width="90">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div> -->
    </div>
    <div class="contents1">
      <div>
        <van-cell-group>
          <van-field
            v-model="message6"
            rows="1"
            autosize
            label="整改责任单位"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message7"
            rows="1"
            autosize
            label="整改责任人"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>

      <div>
        <van-field
          v-model="value7"
          name="督办部门"
          label="督办部门"
          placeholder="督办部门"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value8"
          name="督办责任人"
          label="督办责任人"
          placeholder="督办责任人"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value11"
          name="整改类型"
          label="整改类型"
          placeholder="整改类型"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value9"
          name="整改期限"
          label="整改期限"
          placeholder="整改期限"
          readonly="false"
        />
      </div>
    </div>
    <div class="contents1">
      <div>
        <van-field
          v-model="value13"
          name="整改状态"
          label="整改状态"
          placeholder="整改状态"
          readonly="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";

export default {
  data() {
    return {
      shows: true,
      value1: "", //检查专业
      value2: "", //隐患等级
      message1: "", //存在问题或隐患
      message2: "", //整改措施
      value3: "", //风险点
      value4: "", //风险类型
      value5: "", //风险等级
      value6: "", //事故类型
      message3: "", //风险描述
      message4: "", //后果及影响
      message5: "", //管控措施
      message6: "", //整改责任单位
      message7: "", //整改责任人
      value7: "", //督办部门
      value8: "", //督办责任人
      value9: "", //整改期限
      message8: "", //整改意见
      message9: "", //验收意见
      message10: "", //验收日期
      message11: "", //验收部门
      message12: "", //验收责任人
      message13: "", //验收结果
      fileList: [],
      infos: [],

      // 检查人部门
      value10: "",
      // 整改类型
      value11: "",
      // 检查人
      value12: "",

      // 详情id
      id: "",
      // 详情数据
      detail: {},

      value13:"逾期"
    };
  },
  methods: {
    //返回按钮
    onClickLeft() {
      window.history.back();
      // console.log("sss");
    },

    // 获取详情
    getTroubleshootDetail(id) {
      this.$toast.loading();

      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/getTroubleshootDetail",
          {
            id: id,
          }
        )
        .then((res) => {
          this.$toast.clear();

          console.log(res.data.data);

          this.detail = res.data.data;

          const data = res.data.data;

          this.value10 = data.inspected_unit;
          this.value1 = data.inspection_specialty;
          this.value2 = data.hidden_danger_level;
          this.message1 = data.hidden_danger;
          this.message2 = data.rectification_measures;
          this.value3 = data.risk_rating.risk_point;
          this.value4 = data.risk_rating.risk_type;
          this.value5 = data.risk_rating.risk_level;
          this.value6 = data.risk_rating.accident_type;
          this.message3 = data.risk_rating.risk_description;
          this.message4 = data.risk_rating.consequences_and_impact;
          this.message5 = data.risk_rating.control_measures;
          this.message6 = data.rectification_duty_unit;
          this.message7 = data.rectification_duty_person;
          this.value7 = data.supervision_department;
          this.value8 = data.supervision_duty_person;
          this.value11 = data.rectification_type;
          this.value9 = data.rectification_term;
          this.value12 = data.inspected_person;
        });
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#f0f0f0"; //背景色

    this.id = getAllUrlParams(window.location.href).id;
    this.getTroubleshootDetail(this.id);
  },
};
</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;
}
.headers {
  width: 100%;
  background: #fff;
}
.contents,
.contents1,
.contents2,
.contents3 {
  width: 100%;
  background: #fff;
  margin-top: 10px;
}
.buttons {
  width: 100%;
  text-align: center;
}
.buttons > .buttons_one {
  border: none;
  background: #4dc100;
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 20px;
  margin: 15px 20px;
}
.buttons > .buttons_two {
  border: none;
  background: #c00201;
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 20px;
  margin: 15px 20px;
}
.contents2_img {
  display: flex;
}
.contents2_img > p {
  font-size: 14px;
  margin-left: 16px;
  color: #646566;
}
.contents2_img > div {
  margin-left: 40px;
}
</style>