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

<!--  -->
<template>
  <div class="superviseLog_box">
    <el-card :style="'height:' + fullHeight + 'px'">
      <el-row>
        <el-col>
          <div class="search_box">
            <!-- 监测人员 -->
            <el-select
              filterable
              v-model="input"
              clearable
              @change="searchData"
              placeholder="请选择监测人员"
              size="mini"
            >
              <el-option
                v-for="item in conductorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 时间筛选 -->
            <el-date-picker
              size="mini"
              v-model="value"
              @change="searchData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              :editable="false"
            >
            </el-date-picker>

            <div class="btn_box">
              <el-button type="primary" size="mini" @click="searchData"
                >搜索</el-button
              >
              <el-button size="mini" @click="reset">重置</el-button>
              <el-button type="primary" size="mini" @click="exportData">
                <i v-if="loadingShow" class="el-icon-loading"></i>
                导出数据</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="ind" label="序号" width="100"> </el-table-column>
        <el-table-column prop="owner_user" label="监测人员" width="200">
        </el-table-column>
        <el-table-column prop="monitor_time" label="监测时间" width="250">
        </el-table-column>
        <el-table-column prop="weather" label="天气" width="200">
        </el-table-column>
        <el-table-column prop="temperature" label="温度" width="200">
        </el-table-column>
        <el-table-column prop="address" label="地点" width="280">
        </el-table-column>
        <el-table-column prop="monitor_time" label="提交时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <a
              href="javascript:;"
              class="reset"
              @click="examineDetail(scope.row)"
              >查看</a
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin: 60px 0 0 0"
        :page-size="10"
        @current-change="newPage"
        :current-page="page"
        v-if="tableData.length > 0"
        background
        layout="prev, pager, next, jumper"
        :total="tableSum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

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

      // 筛选
      conductorList: [], // 监测人员 - 筛选列表
      input: "", // 监测人员
      value: "", // 时间筛选
      startTime: "", //开始时间
      endTime: "", // 结束时间
      loadingShow: false, // 导出加载

      // 表格
      tableData: [],
      loading: false, // 加载

      // 分页
      page: 1, // 当前页码
      tableSum: 0 // 总页码
    };
  },
  //监听属性 类似于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;
        })();
      };
    },

    // 表格列表
    tableList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.monitor_log_list",
        data: this.qs.stringify({
          page: this.page, // 当前页码
          page_item: "10", //
          monitor_user_id: "", // 监测人id
          start_time: this.startTime, // 开始时间
          end_time: this.endTime // 结束时间
        })
      })
        .then(res => {
          if (res.data.data.total_item !== 0) {
            var data = res.data.data.page_list;
            this.tableSum = res.data.data.total_item;
            var list = [];
            data.forEach((item, index) => {
              item.ind = index + 1;
              item.temperature =
                item.temperature !== "" || item.temperature !== undefined
                  ? item.temperature + "°C"
                  : "暂无";
              list.push(item);
            });
            this.tableData = list;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },

    // 筛选列表 - 监测人员
    conductorAxios() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_user_list",
        data: this.qs.stringify({
          user_type: "supervisor", // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
          operator_id: "", // 已经选择的任务处理人id
          supervisor_id: "", // 已经选择的任务监督人id
          owner_id: "" // 已经选择的任务发布人id
        })
      })
        .then(res => {
          if (res.data.data.length !== 0) {
            var data = res.data.data;
            var list = [];
            data.forEach(item => {
              var obj = {};
              obj["value"] = item.user_id;
              obj["label"] = item.real_name;
              list.push(obj);
            });
            this.conductorList = list;
          }
        })
        .catch(err => {});
    },

    // 筛选
    searchData() {
      if (this.value) {
        this.startTime = this.formatTime(this.value[0], "yyyy-MM-dd");
        this.endTime = this.formatTime(this.value[1], "yyyy-MM-dd");
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.loading = true;
      this.tableData = [];
      this.tableList();
    },

    // 重置
    reset() {
      this.input = ""; // 监测人员
      this.value = ""; // 时间筛选
      this.startTime = ""; // 开始时间
      this.endTime = ""; // 结束时间
      this.tableData = [];
      this.loading = true;
      this.tableList();
    },

    // 下页
    newPage(page) {
      this.page = page;
      this.tableList();
    },

    // 查看
    examineDetail(data) {
      this.$router.push({
        path: "/index/superviseLogDetails",
        query: {
          id: data.id
        }
      });
    },

    // 导出数据
    exportData() {
      this.loadingShow = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.monitor_log_export",
        responseType: "blob"
      })
        .then(res => {
          this.downloadFile(res, "监测日志.xls");
          this.loadingShow = false;
        })
        .catch(err => {
          this.loadingShow = false;
          // console.log(err);
        });
    },

    // 流文件下载
    downloadFile(res, name) {
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(new Blob([res.data]));
      link.target = "_blank";
      // 文件名和格式
      link.download = name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true;
    this.get_boderHeight(); // 动态获取浏览器高度
    this.tableList(); // 表格列表数据
    this.conductorAxios(); // 筛选 - 监测人员列表
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.superviseLog_box {
  // 搜索
  .search_box {
    display: flex;
    /deep/.el-select {
      margin: 0 15px 0 0;
    }
    /deep/.el-input {
      margin: 0 15px 0 0;
    }
    .btn_box {
      margin: 0 0 0 15px;
      // width: 50%;
      display: flex;
      justify-content: start;
    }

    /deep/.el-range-editor--mini.el-input__inner {
      width: 20%;
    }
  }

  a {
    text-decoration: none;
  }
  .reset {
    color: #1890ff;
  }

  /deep/.el-card {
    overflow: hidden;
    overflow-y: auto;
  }
}
/deep/.el-date-editor{
  cursor: pointer;
  .el-range-input{
    cursor: pointer;
  }
}
</style>