zkPCproject/src/views/Equipment/equipmentOnlineRecordList.vue

<template>
  <div class="box-center">
    <div class="toptab"  style="cursor: pointer;">
      <div
        @click="tapclickyab(0)"
        :class="{ activecllasscet: activeTotal == 0 }"
        :style="{ background: activeTotal == 0 ? '#2671E2' : '#ffffff' }"
      >
        设备离线记录
      </div>
      <div
        @click="tapclickyab(1)"
        :class="{ activecllasscet: activeTotal == 1 }"
        :style="{ background: activeTotal == 1 ? '#2671E2' : '#ffffff' }"
      >
        设备指派记录
      </div>
    </div>
    <div class="titlebox" v-if="activeTotal == 0">
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <span style="line-height: 40px" class="demonstration">离线时间：</span>
        <el-date-picker
          @change="confirmtime()"
          v-model="customtime"
          type="daterange"
          range-separator="-"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <span class="demonstration" v-if="orgType!=3" style="margin-left: 18px; line-height: 40px"
          >项目名称：</span
        >
        <div style="width: 200px" v-if="orgType!=3">
          <!--			<el-input  v-model="page.houseName"></el-input>-->
          <el-select v-model="page.houseName" filterable placeholder="请选择">
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <span style="line-height: 40px" class="demonstration">领用人：</span>
        <div style="width: 200px">
          <el-input maxlength="10" clearable placeholder="领用人" v-model="page.accountName"></el-input>
        </div>
        <span class="demonstration"  style="margin-left: 18px; line-height: 40px"
          >设备编号：</span
        >
        <div style="width: 200px">
          <el-input maxlength="20" placeholder="设备编号" clearable v-model="page.imei"></el-input>
        </div>
      </div>
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <div style="margin-left: 20px">
          <el-button
            @click="screening()"
            style="background: #2671e2; color: #ffffff"
            >筛选</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="empty()" type="text">清空筛选条件</el-button>
        </div>
        <div style="margin-left: auto;margin-right:10px;" v-if="equ_edg_download">
          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
        </div>
      </div>
    </div>
    <div class="tablebox" v-if="activeTotal == 0">
      <template>
        <el-table :data="tableData" style="width: 100%"  :header-cell-style="{background:'#F5F7FA',color:'#333333'}">
          <el-table-column prop="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="imei" label="设备编号" align="center">
          </el-table-column>
          <el-table-column prop="accountName" label="领用人" align="center">
          </el-table-column>
          <el-table-column prop="openTime" label="离线开始时间" align="center">
          </el-table-column>
          <el-table-column prop="closeTime" label="恢复在线时间" align="center">
          </el-table-column>
          <el-table-column prop="offlineTimeStr" label="离线时长" align="center">
          </el-table-column>
          <el-table-column prop="offStatusName" label="离线原因" align="center">
          </el-table-column>
        </el-table>
      </template>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[ 10, 30, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>

    <div class="titlebox" v-if="activeTotal == 1">
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <span style="line-height: 40px" class="demonstration">指派时间：</span>
        <el-date-picker
          @change="confirmtime()"
          v-model="customtime"
          type="daterange"
          range-separator="-"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <span class="demonstration" v-if="orgType!=3" style="margin-left: 18px; line-height: 40px"
          >项目名称：</span
        >
        <div style="width: 200px;" v-if="orgType!=3">
          <!--			<el-input  v-model="page.houseName"></el-input>-->
          <el-select v-model="page.houseName" filterable placeholder="请选择">
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <span style="line-height: 40px" class="demonstration">领用人：</span>
        <div style="width: 200px">
          <el-input v-model="page.accountName" placeholder="领用人"></el-input>
        </div>
        <span class="demonstration" style="margin-left: 18px; line-height: 40px"
          >设备编号：</span
        >
        <div style="width: 200px">
          <el-input v-model="page.imei" placeholder="设备编号"></el-input>
        </div>
        <span class="demonstration" style="margin-left: 18px; line-height: 40px"
          >录音结果：</span
        >
        <div style="width: 200px">
          <el-select v-model="page.recording" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <div style="margin-left: 20px">
          <el-button
            @click="screening()"
            style="background: #2671e2; color: #ffffff"
            >筛选</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="empty()" type="text">清空筛选条件</el-button>
        </div>
        <div style="margin-left: auto;margin-right:10px;" v-if="equ_edg_download">
          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
        </div>
      </div>
    </div>
    <div class="tablebox" v-if="activeTotal == 1">
      <template>
        <el-table :data="tableData" style="width: 100%"  :header-cell-style="{background:'#F5F7FA',color:'#333333'}">
          <el-table-column prop="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="imei" label="设备编号" align="center">
          </el-table-column>
          <el-table-column prop="agentName" label="领用人" align="center">
          </el-table-column>
          <!--			<el-table-column-->
          <!--					prop="id"-->
          <!--					label="接待记录ID"-->
          <!--					align="center">-->
          <!--			</el-table-column>-->

          <el-table-column prop="staTime" label="指派时间" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.endTime.substring(0, 19) }}
            </template>
          </el-table-column>
          <el-table-column prop="recordingName" label="录音结果" align="center">
          </el-table-column>
          <el-table-column
            prop="recordingReasonName"
            label="未完整录音原因"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="" label="操作" align="center" v-if="equ_edg_detail">
            <template slot-scope="{ row }">
              <el-button
                v-if="row.recording != 0&&equ_edg_detail"
                @click.native.prevent="goinfo(row)"
                type="text"
                size="small"
                >接待详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[ 10, 30, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeTotal: 0,
      customtime: "",
      tableData: [],
      currentPage4: 1,
      orgType:localStorage.getItem('orgType'),
      houseList: [],
      flag: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total: 10,
        recording: "",
      },
      options: [
        {
          value: "0",
          label: "无录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
      ],
    };
  },
    computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.equ_edg_detail = this.permissions["equ_edg_detail"];
    this.equ_edg_download = this.permissions["equ_edg_download"];
  },
  mounted() {
    // return
    let theRequest = this.$route.query;
    console.log(theRequest, "123"); //此时的theRequest就是我们需要的参数；
    if (theRequest.houseId) {
      this.activeTotal = theRequest.flag;
      this.flag = true;
      this.page.openTime = theRequest.startDate;
      this.page.closeTime = theRequest.endDate;
      this.customtime = [theRequest.startDate, theRequest.endDate];
      this.page.houseName = theRequest.houseId;
    } else {
      let num = 24 * 3600 * 1000 * 6;
      let time1 = this.timestampToTime(new Date().getTime() - num);
      console.log(this.timestampToTime(new Date().getTime()), time1);
      this.page.openTime = time1.trim();
      this.page.closeTime = this.timestampToTime(new Date().getTime()).trim();
      this.customtime = [this.page.openTime, this.page.closeTime];
    }

    // this.activeTotal=0;
    // this.customtime=[] ;
    this.tableData = [];
    this.tableData1 = [];
    this.getHouseList();
  },
  methods: {
    downLoad(){
      let obj = {
        imei: this.page.imei,
      };
      if (this.activeTotal == 0) {
        obj.openTime = this.page.openTime;
        obj.closeTime = this.page.closeTime;
        obj.houseId = this.page.houseName;
        obj.accountName = this.page.accountName;
        this.exportMethodPost('autoSR/zk/equipment/onlineRecordListExport','设备在线记录',obj)
      } else {
        obj.staDate = this.page.openTime;
        obj.endDate = this.page.closeTime;
        obj.projectId = this.page.houseName;
        obj.agentName = this.page.accountName;
        obj.recording = this.page.recording;
        this.exportMethodPost('autoSR/zk/equipment/assignmentRecordListExport','设备指派记录',obj)
      }

    },
    // 导出.Excel公用方法
    exportMethodPost(url, name, data = {}) {
      axios({
        method: "get",
        url: url,
        params:data,
        responseType: "blob",
      })
        .then((res) => {
          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          let date = new Date();
          let time = date.toLocaleDateString();
          // console.log(time, "时间");
          if ("download" in document.createElement("a")) {
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            // link.download = res.headers['content-disposition'] //下载后文件名
            link.download = (name || "导出文件") + time + ".xlsx"; //下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          } else {
            // console.log("--------------------jingla")
            let fileName = (name || "导出文件") + time + ".xlsx"; //下载的文件名
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((error) => {
          // Message.error({
          //     message: '网络连接错误'
          //  })
          console.log(error);
        });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000

      var yyyy = date.getFullYear() + "-";

      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      // var dd = date.getDate() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return yyyy + MM + dd;
    },
    //时间补0
    Zeropadding(s) {
      return s < 10 ? "0" + s : s;
    },
    tapclickyab(i) {
      this.activeTotal = i;
      this.getTableList();
    },
    screening() {
      this.page.pageNum = 1;
      // this.page.pageSize = 6;
      this.getTableList();
    },
    goinfo(row) {
      console.log(row);
      return;
      location.href = "${jypath}/zk/file/receptionDetails";
      localStorage.setItem("AudioListId", row.id);
      localStorage.setItem("AudioIdx", 0);
    },
    empty() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        openTime: "",
        closeTime: "",
        // houseName: this.houseList[0].id,
        houseName:this.orgType==3? localStorage.getItem('houseId'):this.houseList[0].id,
        accountName: "",
        imei: "",
        total: "",
      };
      this.customtime = "";
      this.getTableList();
    },
    //时间选择
    confirmtime() {
      console.log(this.customtime);
      this.page.openTime = this.customtime[0];
      this.page.closeTime = this.customtime[1];
    },
    handleSizeChange(val) {
      console.log("每页条" + val);
      this.page.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      console.log("当前页" + val);
      this.page.pageNum = val;
      this.getTableList();
    },
    //获取项目数据
    getHouseList() {
      axios({
        url: `/autoSR/zkhouse/findHouseByUser`,
        method: "get",
        params:{
          orgType:this.orgType,
          agentId:localStorage.getItem("agentId"),
          orgCode:localStorage.getItem("orgCode"),
        }
      }).then((res) => {
        // console.log(res.data.obj)

        this.houseList = res.data;
        if (!this.flag) {
          if (localStorage.getItem("orgType") == 3) {
            this.page.houseName = localStorage.getItem("houseId");
          } else {
            this.page.houseName = res.data[0].id;
          }
          // this.page.houseName = res.data[0].id;
        }
        this.getTableList();
      });
    },
    //获取table数据、
    getTableList() {
      console.log(this.activeTotal, "888888888888888888888");
      var url = "";
      let obj = {
        current: this.page.pageNum,
        size: this.page.pageSize,
        imei: this.page.imei,
      };
      this.tableData = [];
      if (this.activeTotal == 0) {
        url = `autoSR/zk/equipment/onlineRecordList`;
        obj.openTime = this.page.openTime;
        obj.closeTime = this.page.closeTime;
        obj.houseId = this.page.houseName;
        obj.accountName = this.page.accountName;
      } else {
        url = `autoSR/zk/equipment/assignmentRecordList`;
        obj.staDate = this.page.openTime;
        obj.endDate = this.page.closeTime;
        obj.projectId = this.page.houseName;
        obj.agentName = this.page.accountName;
        obj.recording = this.page.recording;
      }
      axios({
        url: url,
        method: "get",
        params: obj,
      }).then((res) => {
        // console.log(res)

        if (!res.data.records) return;
        res.data.records.forEach((item, index) => {
          item.index = index + 1;
        });
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      });
    },
  },
};
</script>

<style  scoped lang="less">
/deep/ .el-table__header-wrapper{
  thead{
    tr{
      th{
        background: #F5F7FA;
        color: #333333;
      }
    }
  }
}
.box-center {
  width: 100%;
  padding: 5px 15px 40px;
  min-width: 1000px;
}
.toptab {
  width: 100%;
  display: flex;
}
.toptab div {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
}
.activecllasscet {
  color: #ffffff;
}
.titlebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-top: 20px;
  padding-bottom: 18px;
}
.tablebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-top: 20px;
  padding: 18px;
}
/deep/ .el-button--text{
  color: #2671E2;
}
</style>