MingGao_vue/minggao/src/page/commandCenter/superviseAdminDetails.vue

<!--  -->
<template>
  <div class="superviseAdminDetails_box">
    <el-card :style="'height:' + fullHeight + 'px'" v-loading="loading">
      <el-row v-if="taskObj.task_id">
        <!-- 任务信息 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt">
              <span>任务信息</span>
              <el-button type="primary" size="mini" @click="overseer"
                >监督</el-button
              >
            </div>

            <ul class="list_ul">
              <li class="list_li">
                <div class="list_div">
                  <span class="list_div_tlt">任务类型：</span>
                  <span class="list_div_val">{{ taskObj.task_type }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">任务监督人：</span>
                  <span class="list_div_val">{{
                    taskObj.supervisor_user
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">任务时间：</span>
                  <span class="list_div_val">{{ taskObj.start_time }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">任务发布人：</span>
                  <span class="list_div_val">{{ taskObj.owner_user }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">任务处理人：</span>
                  <span class="list_div_val">{{ taskObj.operator_user }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">任务状态：</span>
                  <span class="list_div_val">{{ taskObj.task_status }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">任务描述：</span>
                  <span class="list_div_val">{{ taskObj.tesk_msg }}</span>
                </div>
              </li>
            </ul>
          </div>
        </el-col>

        <!-- 签到信息 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt">签到信息</div>

            <ul class="list_ul">
              <li class="list_sing_li">
                <div class="list_sing_div">
                  <span class="list_div_tlt">签到图片：</span>
                  <p v-if="taskObj.img_list.length !== 0" style="display: flex">
                    <span
                      class="list_div_img"
                      v-for="(item, index) in taskObj.img_list"
                      :key="index"
                    >
                      <img v-viewer :src="item" alt="" />
                    </span>
                  </p>
                  <span v-else>暂无签到图片</span>
                </div>

                <div class="list_sing_div">
                  <span class="list_div_tlt">签到时间：</span>
                  <span class="list_div_val">{{
                    taskObj.end_time || "暂无"
                  }}</span>
                </div>
              </li>
            </ul>
          </div>
        </el-col>

        <!-- 任务填报信息 -->
        <el-col :span="24" v-if="taskObj.task_type == '有害生物监测'">
          <div class="list_box">
            <div class="list_tlt">任务填报信息</div>
            <ul class="list_table_ul">
              <li class="list_li">
                <el-table :data="tableData" stripe style="width: 100%">
                  <el-table-column prop="trap_number" label="设备编号">
                  </el-table-column>
                  <el-table-column prop="monitor_point" label="监测点">
                  </el-table-column>
                  <el-table-column prop="inducer_type" label="诱剂">
                  </el-table-column>
                  <el-table-column prop="report_status" label="有害生物登记">
                    <template slot-scope="scope">
                      <span
                        v-if="scope.row.report_status == '已登记'"
                        @click="examine(scope.row)"
                        style="color: #409eff; cursor: pointer"
                        >查看</span
                      >
                      <span v-else>{{ scope.row.report_status || "无" }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="report_time" label="录入时间">
                    <template slot-scope="scope">
                      <span>{{ scope.row.report_time || "无" }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </li>
            </ul>
          </div>
        </el-col>

        <!-- 任务汇报 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt">任务汇报</div>

            <ul class="list_report_ul">
              <li class="list_report_li">
                {{ taskObj.report_msg || "暂无任务汇报" }}
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 填报信息弹框 -->
    <el-dialog
      :title="titleData"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
    >
      <ul class="insect_ul">
        <li
          class="insect_list"
          v-for="(item, index) in insectList"
          :key="index"
        >
          <div>{{ item.pest_name + "：" }}</div>
          <div style="margin: 0 0 0 20px">{{ item.pest_number }}</div>
        </li>
      </ul>
    </el-dialog>

    <!-- 监督弹框 -->
    <el-dialog
      title="监督"
      :visible.sync="superviseVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
    >
      <el-form
        v-loading="loading2"
        :model="ruleForm2"
        :rules="rules2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="监督形式" prop="resource">
          <el-radio-group v-model="ruleForm2.resource">
            <el-radio label="现场监督"></el-radio>
            <el-radio label="远程监督"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="监督单位" prop="region">
          <el-input v-model="ruleForm2.region" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="监督情况" prop="desc">
          <el-input type="textarea" v-model="ruleForm2.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="superviseSubmitForm('ruleForm2')">取 消</el-button>
          <el-button
            :disabled="submitBtn"
            type="primary"
            @click="superviseAxiso('ruleForm2')"
            >{{ submitBtn == true ? "发布中..." : "发布" }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //
      loading: true, // 加载

      // 详情总数据
      taskObj: {},

      // 任务填报信息
      tableData: [],
      dialogVisible: false, // 弹框
      titleData: "", // 弹框标题
      insectList: [], //害虫列表

      // 任务汇报
      reportList: [],

      // 监督弹框
      superviseVisible: false,
      // 监督弹框
      ruleForm2: {
        resource: "", // 监督形式
        region: "", // 监督单位
        desc: "", // 监督情况
      },
      rules2: {
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      loading2: false, //加载
      isClick: true, // 防止重复弹框
      submitBtn: false, // 防止弹框确定按钮重复请求
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    superviseVisible(val) {
      if (val == false) {
        this.superviseSubmitForm("ruleForm2");
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 详情界面数据
    detailsData() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_info",
        data: this.qs.stringify({
          task_id: this.$route.query.id,
        }),
      })
        .then((res) => {
          if (res.data.data) {
            var data = res.data.data;
            data.img_list = JSON.parse(data.img_list);
            this.taskObj = data;
            this.tableData = data.trap_record_list;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 查看
    examine(data) {
      this.titleData = "设备编号：" + data.trap_number;
      this.insectList = data.pest_list;
      this.dialogVisible = true;
    },

    // 监督
    superviseAxiso(formName) {
      this.loading2 = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitBtn = true;
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=control_center.task.supervisor_add",
            data: this.qs.stringify({
              task_id: this.$route.query.id, //任务id
              supervisor_type: this.ruleForm2.resource, // 监督类型
              supervisor_depa: this.ruleForm2.region, // 监督部门
              supervisor_msg: this.ruleForm2.desc, // 监督内容
            }),
          })
            .then((res) => {
              if (res.data.data == true) {
                this.$message({
                  message: "成功！",
                  type: "success",
                  duration: 1500,
                });
                this.superviseVisible = false;
                // this.$router.push({
                //   path: "/index/superviserec",
                // });
              }
              this.loading2 = false;
              this.submitBtn = false;
            })
            .catch((err) => {
              this.loading2 = false;
              this.submitBtn = false;
            });
          // this.loading2 = false;
          // this.submitBtn = false;
        } else {
          this.loading2 = false;
          return false;
        }
      });
    },

    // 监督 - 取消
    superviseSubmitForm(formName) {
      this.superviseVisible = false;
      this.$refs[formName].resetFields();
    },

    // 监督 - 弹框
    overseer() {
      this.superviseVisible = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true; // 加载
    this.get_boderHeight(); // 动态获取浏览器高度
    this.detailsData(); //详情界面数据
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.superviseAdminDetails_box {
  // 任务信息
  .list_box {
    margin: 0 0 20px 0;
    .list_tlt {
      display: flex;
      justify-content: space-between;
      width: 95%;
      margin: 0 auto;
      font-size: 20px;
    }

    .list_ul {
      margin: 20px 0 0 0;
      padding: 20px 40px 20px 40px;
      background: #f6f8fa;
      .list_li {
        display: flex;
        flex-wrap: wrap;
        .list_div {
          margin: 0 0 25px 0;
          width: 33%;
          font-size: 14px;
          color: #333333;
        }
      }

      .list_sing_li {
        display: flex;
        justify-content: space-between;
        .list_sing_div {
          margin: 0 0 25px 0;
          width: 33%;
          font-size: 14px;
          display: flex;
          color: #333333;
          .list_div_img {
            width: 113px;
            margin: 0 15px 0 0;
            display: flex;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    // 任务填报信息
    .list_table_ul {
      margin: 20px 0 0 0;
      padding: 20px 40px 20px 40px;
      // background: #f6f8fa;
      .list_li {
        display: flex;
        flex-wrap: wrap;
        .list_div {
          margin: 0 0 25px 0;
          width: 33%;
          font-size: 14px;
          color: #333333;
        }
      }
    }

    // 任务汇报
    .list_report_ul {
      margin: 20px 0 0 0;
      padding: 20px 40px 20px 40px;
      background: #f6f8fa;
      .list_report_li {
        font-size: 14px;
        margin: 0 0 10px 0;
        color: #333333;
      }
    }
  }

  /deep/.el-table th.el-table__cell {
    background-color: #f6f8fa;
  }

  /deep/.el-card {
    overflow: hidden;
    overflow-y: auto;
  }

  // 害虫弹框
  .insect_ul {
    .insect_list {
      display: flex;
      margin: 0 0 20px 0;
      div {
        font-size: 18px;
        width: 20%;
        text-align: right;
        margin: 0px 0 0 -35px;
      }
    }
  }
}
</style>