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

<!--  -->
<template>
  <div class="taskRegulatorDetails_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">
            <!-- <span class="list_tlt">任务信息</span> -->
            <div class="list_tlt">
              <p>任务信息</p>
              <p class="list_tlt_p"></p>
            </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">
              <p>签到信息</p>
              <p class="list_tlt_p"></p>
            </div>
            <ul class="list_ul">
              <li class="list_sing_li">
                <div class="list_sing_div">
                  <p class="list_div_tlt" style="width: 12%">签到图片：</p>
                  <p
                    v-if="taskObj.img_list.length !== 0"
                    style="display: flex; width: 88%; flex-wrap: wrap"
                  >
                    <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">
          <div class="list_box">
            <div class="list_tlt">
              <p>任务汇报</p>
              <p class="list_tlt_p"></p>
            </div>
            <ul class="list_report_ul">
              <!-- <li
                class="list_report_li"
                v-for="item in tabskObj.report_msg"
                :key="item"
              >
                {{ item }}
              </li> -->
              <li class="list_report_li">{{ taskObj.report_msg || "暂无" }}</li>
            </ul>
          </div>
        </el-col>

        <!-- 任务填报信息 -->
        <el-col :span="24">
          <div class="list_box">
            <div class="list_tlt_box">
              <div class="list_tlts" @click="tabtask(0)">
                <p>签到信息</p>
                <p class="list_tlts_p" v-if="taskindex == 0"></p>
              </div>
              <div
                class="list_tlts_dian"
                v-if="taskObj.task_type == '有害生物监测'"
              >
                ●
              </div>
              <div
                class="list_tlts"
                @click="tabtask(1)"
                v-if="taskObj.task_type == '有害生物监测'"
              >
                <p>任务填报信息</p>
                <p class="list_tlts_p" v-if="taskindex == 1"></p>
              </div>
            </div>
            <ul class="list_table_ul" v-if="taskindex == 1">
              <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 class="clockinbox" v-show="taskindex == 0">
              <div class="clock_item">
                <p v-if="activities.length == 0">暂无打卡记录</p>
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :icon="activity.icon"
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                    :timestamp="activity.timestamp"
                  >
                    <div class="clock_item_timeline">
                      <p class="timeline_title">{{ activity.content }}</p>
                      <div class="timeline_imglist">
                        <img
                          v-for="(item, index) in activity.arrlist"
                          :key="index"
                          :src="$deriveData + item"
                          alt=""
                          v-viewer
                        />
                      </div>
                      <p class="timeline_text">{{ activity.text }}</p>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
              <div class="track_item">
                <div class="track_item_ser">
                  <div class="track_item_ser_left">
                    <el-checkbox
                      v-model="checked1"
                      size="mini"
                      label="展示面积"
                    ></el-checkbox>
                    <el-button
                      type="info"
                      size="mini"
                      @click="playtrack(0)"
                      style="margin-left: 15px"
                      :disabled="btndisabled"
                      >播放轨迹</el-button
                    >
                  </div>
                  <div class="track_item_ser_right">
                    <div class="track_item_ser_right_item">
                      <img src="../../../static/images/warning/1.png" alt="" />
                      <p>监测点</p>
                    </div>
                    <div class="track_item_ser_right_item">
                      <img src="../../../static/images/warning/2.png" alt="" />
                      <p>诱捕器</p>
                    </div>
                    <div class="track_item_ser_right_item">
                      <img src="../../../static/images/warning/3.png" alt="" />
                      <p>打卡点</p>
                    </div>
                  </div>
                </div>
                <div class="track_item_map" id="mapContainer2"></div>
              </div>
            </div>
          </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>
  </div>
</template>

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

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

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

      // 任务汇报
      reportList: [
        "1、今天做了检测完成任务了没有",
        "2、途中发生了什么事情",
        "3、对这次任务有什么总结",
        "4、我对这次任务有哪些建议",
      ],
      loading: false, // 加载
      taskindex: 0,
      //轨迹地图
      map: null,
      trackmarker: [],
      lineArr: [],
      checked1: true,
      polyline2: [],
      pos_icon_pserson: null,
      //签到信息
      activities: [],
      btndisabled: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);
      }
    },
    checked1(val) {
      if (val) {
        for (var i = 0; i < this.lineArr.length; i++) {
          var polyline2 = new AMap.Polyline({
            map: this.map,
            path: this.lineArr[i],
            isOutline: true,
            outlineColor: "#ED7119",
            borderWeight: 10,
            strokeColor: "#3AD00C",
            strokeOpacity: 0.6,
            strokeWeight: 6,
            // 折线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],
            lineJoin: "round",
            lineCap: "round",
            zIndex: 50,
          });
          this.polyline2.push(polyline2);
        }
      } else {
        for (var i = 0; i < this.polyline2.length; i++) {
          this.map.remove(this.polyline2[i]);
        }
        this.polyline2 = []
      }
    },
  },
  //方法集合
  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) => {
          console.log(res);
          if (res.data.data) {
            var data = res.data.data;
            // data.img_list = JSON.parse(data.img_list);
            this.taskObj = data;
            this.activities = [];
            for (var i = 0; i < this.taskObj.clock_in_list.length; i++) {
              var obj = {
                content: this.taskObj.clock_in_list[i].address,
                timestamp: this.taskObj.clock_in_list[i].create_time,
                color: "#409eff",
                text: this.taskObj.clock_in_list[i].message,
                arrlist: [],
              };
              obj.arrlist = this.taskObj.clock_in_list[i].img_list;
              this.activities.push(obj);
            }
            this.lineArr = [];
            for (var i = 0; i < this.taskObj.walk_lnglat_list.length; i++) {
              var lnglat = this.taskObj.walk_lnglat_list[i];
              var arr = [];
              for (var j = 0; j < lnglat.length; j++) {
                arr.push([Number(lnglat[j].lng), Number(lnglat[j].lat)]);
              }
              this.lineArr.push(arr);
            }
            console.log(this.taskObj);
            this.tableData = data.trap_record_list;
          }
          this.$nextTick(() => {
            this.initmap();
          });
          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;
    },
    tabtask(index) {
      this.taskindex = index;
    },
    initmap() {
      var map = new AMap.Map(document.getElementById("mapContainer2"), {
        center: [114.052758, 22.545817],
        resizeEnable: true,
        zoom: 10,
        lang: "en",
        mapStyle: "amap://styles/fresh",
        layers: [],
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
        map.addControl(new AMap.ToolBar());
        this.geocoder = new AMap.Geocoder({
          city: "全国",
          radius: 1000,
        });
      });
      AMap.plugin("AMap.MoveAnimation", function () {});
      this.map = map;
      for (var i = 0; i < this.lineArr.length; i++) {
        this.inittrack(this.lineArr[i]);
      }
      for (var i = 0; i < this.taskObj.check_point_lnglat_list.length; i++) {
        var data = this.taskObj.check_point_lnglat_list[i];
        this.setmak(1, [Number(data.lng), Number(data.lat)]);
      }
      for (var i = 0; i < this.taskObj.trap_lnglat_list.length; i++) {
        var data = this.taskObj.trap_lnglat_list[i];
        this.setmak(2, [Number(data.lng), Number(data.lat)]);
      }
      for (var i = 0; i < this.taskObj.clock_in_lnglat_list.length; i++) {
        var data = this.taskObj.clock_in_lnglat_list[i];
        this.setmak(3, [Number(data.lng), Number(data.lat)]);
      }
      this.pos_icon_pserson = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(44, 42),
        // 图标的取图地址
        image: "../../../static/images/warning/person1.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(44, 42),
      });
      if (this.lineArr[0]) {
        this.trackmarker = new AMap.Marker({
          map: this.map,
          position: this.lineArr[0][0],
          icon: this.pos_icon_pserson,
          offset: new AMap.Pixel(-22, -36),
        });
      }
    },
    setmak(index, data) {
      // console.log(data);
      var pos_icon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(18, 22),
        // 图标的取图地址
        image: "../../../static/images/warning/" + index + ".png",
        // 图标所用图片大小
        imageSize: new AMap.Size(18, 22),
      });
      var marker = new AMap.Marker({
        position: data,
        offset: new AMap.Pixel(-10, -10),
        icon: pos_icon, // 添加 Icon 图标 URL
        title: "设备标点",
      });
      this.map.add(marker);
    },
    //渲染轨迹图
    inittrack(arrlist) {
      console.log(arrlist);
      if (this.checked1) {
        var polyline2 = new AMap.Polyline({
          map: this.map,
          path: arrlist,
          isOutline: true,
          outlineColor: "#ED7119",
          borderWeight: 10,
          strokeColor: "#3AD00C",
          strokeOpacity: 0.6,
          strokeWeight: 6,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });
        this.polyline2.push(polyline2);
      }
      var polyline = new AMap.Polyline({
        map: this.map,
        path: arrlist,
        showDir: true,
        strokeColor: "#3AD00C", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        zIndex: 51,
        // strokeStyle: "solid"  //线样式
      });
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "red", //线颜色
        strokeWeight: 6, //线宽
      });
      this.map.setFitView();
    },
    //播放轨迹
    playtrack(index) {
      this.btndisabled = true
      if (this.trackmarker) {
        this.map.remove(this.trackmarker);
      }
      // console.log(index);
      this.trackmarker = new AMap.Marker({
        map: this.map,
        position: this.lineArr[index][0],
        icon: this.pos_icon_pserson,
        offset: new AMap.Pixel(-22, -36),
      });
      this.trackmarker.moveAlong(this.lineArr[index], {
        // 每一段的时长
        duration: 500, //可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        autoRotation: false,
      });
      this.trackmarker.on("movealong", (e) => {
        index++;
        if (index == this.lineArr.length || index > this.lineArr.length) {
          this.btndisabled = false
          return false;
        } else {
          this.map.remove(this.trackmarker);
          this.playtrack(index);
        }
        // console.log("结束");
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前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>
.taskRegulatorDetails_box {
  // 任务信息
  .list_box {
    margin: 0 0 20px 0;
    .list_tlt {
      width: 80px;
      // margin-left: 2.5%;
      font-size: 20px;
      .list_tlt_p {
        width: 50%;
        margin: 5px auto 0;
        height: 3px;
        background-color: #1b76ff;
        border-radius: 3px;
      }
    }
    .list_tlt_box {
      display: flex;
      width: 100%;
      margin: 0 auto;
      .list_tlts {
        font-size: 20px;
        margin-right: 15px;
        .list_tlts_p {
          width: 50%;
          margin: 5px auto 0;
          height: 3px;
          background-color: #1b76ff;
          border-radius: 3px;
        }
      }
      .list_tlts_dian {
        margin-right: 15px;
        font-size: 20px;
        color: #e1eaf4;
      }
    }
    .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: 100%;
          font-size: 14px;
          display: flex;
          color: #333333;
          .list_div_img {
            width: 113px;
            margin: 0 15px 15px 0;
            display: flex;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    // 任务填报信息
    .list_table_ul {
      margin: 20px 0 0 0;
      .list_li {
        display: flex;
        flex-wrap: wrap;
        .list_div {
          margin: 0 0 25px 0;
          width: 33%;
          font-size: 14px;
          color: #333333;
        }
      }
    }
    .clockinbox {
      width: 100%;
      height: 588px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .clock_item {
        width: 49%;
        height: 588px;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        .clock_item_timeline {
          .timeline_title {
            font-size: 14px;
            color: #409eff;
          }
          .timeline_imglist {
            display: flex;
            margin: 10px 0;
            img {
              width: 100px;
              margin-right: 10px;
            }
          }
          .timeline_text {
            font-size: 14px;
          }
        }
      }
      .track_item {
        width: 49%;
        height: 588px;
        padding: 10px;
        box-sizing: border-box;
        .track_item_ser {
          display: flex;
          justify-content: space-between;
          .track_item_ser_right {
            display: flex;
            .track_item_ser_right_item {
              display: flex;
              margin-left: 20px;
              img {
                width: 18px;
                height: 22px;
                margin-top: 3px;
              }
              p {
                font-size: 14px;
                margin-left: 10px;
                line-height: 28px;
              }
            }
          }
        }
        /deep/.el-button--info {
          background-color: #409eff;
          border-color: #409eff;
        }
        .track_item_map {
          width: 100%;
          margin-top: 10px;
          height: calc(100% - 38px);
          /deep/.amap-logo {
            display: none !important;
          }
          /deep/.amap-copyright {
            display: none !important;
          }
          /deep/.amap-controls {
            display: none !important;
          }
        }
      }
    }

    // 任务汇报
    .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 l;'
      margin-bottom: 20px;
      div {
        font-size: 16px;
        width: 30%;
        text-align: left;
      }
    }
  }
}
</style>