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

<!--  -->
<template>
  <div class="superviseDetails_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>
            </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.actual_supervisor
                  }}</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.supervisor_time
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">监督形式：</span>
                  <span class="list_div_val">{{
                    taskObj.supervisor_type
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">监督单位：</span>
                  <span class="list_div_val">{{
                    taskObj.supervisor_depa
                  }}</span>
                </div>

                <div class="list_div">
                  <span class="list_div_tlt">监督情况：</span>
                  <span class="list_div_val">{{ taskObj.supervisor_msg }}</span>
                </div>
              </li>
            </ul>
          </div>
        </el-col>

        <!-- 任务信息 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt">
              <span>任务信息</span>
            </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>
                  <span v-if="taskObj.end_time">
                    - {{ taskObj.end_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.actual_operator==''?"无":taskObj.actual_operator }}</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.indexOf('http') == -1 ? (DOMIN + item) : 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="500px"
    >
      <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>
  </div>
</template>

<script>
import DOMIN from "../../util/server"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //
      loading: true, // 加载

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

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

      // 任务汇报
      reportList: [
        "1、今天做了检测完成任务了没有",
        "2、途中发生了什么事情",
        "3、对这次任务有什么总结",
        "4、我对这次任务有哪些建议"
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  //方法集合
  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;
          console.log(err);
        });
    },

    // 查看
    examine(data) {
      this.titleData = "设备编号：" + data.trap_number;
      this.insectList = data.pest_list;
      this.dialogVisible = 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>
.superviseDetails_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: 40%;
          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>