zkPCproject/src/views/Equipment/equipmentOnlineRecordList.vue

<template>
  <div class="box-center">
    <div class="toptab">
      <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" style="margin-left: 18px; line-height: 40px"
          >楼盘名称：</span
        >
        <div style="width: 200px">
          <!--			<el-input  v-model="page.houseName"></el-input>-->
          <el-select v-model="page.houseName" 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"></el-input>
        </div>
        <span class="demonstration" style="margin-left: 18px; line-height: 40px"
          >设备编号：</span
        >
        <div style="width: 200px">
          <el-input 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()">清空筛选条件</el-button>
        </div>
      </div>
    </div>
    <div class="tablebox" v-if="activeTotal == 0">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <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="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="currentPage4"
          :page-sizes="[6, 10, 14, 20]"
          :page-size="6"
          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" style="margin-left: 18px; line-height: 40px"
          >楼盘名称：</span
        >
        <div style="width: 200px">
          <!--			<el-input  v-model="page.houseName"></el-input>-->
          <el-select v-model="page.houseName" 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"></el-input>
        </div>
        <span class="demonstration" style="margin-left: 18px; line-height: 40px"
          >设备编号：</span
        >
        <div style="width: 200px">
          <el-input v-model="page.imei"></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()">清空筛选条件</el-button>
        </div>
      </div>
    </div>
    <div class="tablebox" v-if="activeTotal == 1">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <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">
            <template slot-scope="{ row }">
              <el-button
                v-if="row.recording != 0"
                @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="currentPage4"
          :page-sizes="[6, 10, 14, 20]"
          :page-size="6"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTotal: 0,
      customtime: "",
      tableData: [],
      currentPage4: 1,
      houseList: [],
      flag: false,
      page: {
        pageNum: 1,
        pageSize: 6,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total:10,
        recording: "",
      },
      options: [
        {
          value: "0",
          label: "无录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
      ],
    };
  },
  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: {
    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()) + " ";

      // var HH = date.getHours() + ':';
      // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
      //
      // // var mm = date.getMinutes() + ':';
      // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
      //
      // // var ss = date.getSeconds();
      // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());

      // return yyyy+MM+dd+HH+mm+ss;
      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);
      location.href = "${jypath}/zk/file/receptionDetails";
      localStorage.setItem("AudioListId", row.id);
      localStorage.setItem("AudioIdx", 0);
    },
    empty() {
      this.page = {
        pageNum: 1,
        pageSize: 6,
        openTime: "",
        closeTime: "",
        houseName: this.houseList[0].id,
        accountName: "",
        imei: "",
        total: "",
      };
      this.customtime = "";
      this.getTableList();
    },
    //时间选择
    confirmtime() {
      console.log(this.customtime);
      // const d = new Date(this.customtime[0])
      // this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate())
      // const c = new Date(this.customtime[1])
      // this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate())
      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: `${jypath}/equipment/onlinerecord/findAllProperties`,
        method: "get",
      }).then((res) => {
        // console.log(res.data.obj)
        if (res.data.res == 1) {
          this.houseList = res.data.obj;
          if (!this.flag) {
            this.page.houseName = res.data.obj[0].id;
          }
          this.getTableList();
          // res.data.obj.results.forEach((item,index)=>{
          // 	item.index=index+1
          // })
          // this.tableData=res.data.obj.results;
          // this.page.total = res.data.obj.totalRecord;
        }
      });
    },
    //获取table数据、
    getTableList() {
      console.log(this.activeTotal, "888888888888888888888");
      var url = "";
      let obj = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        imei: this.page.imei,
      };
      this.tableData = [];
      if (this.activeTotal == 0) {
        url = `${jypath}/equipment/onlinerecord/findByPage`;
        obj.openTime = this.page.openTime;
        obj.closeTime = this.page.closeTime;
        obj.houseId = this.page.houseName;
        obj.accountName = this.page.accountName;
      } else {
        url = `${jypath}/equipment/onlinerecord/assignmentRecord`;
        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: "post",
        data: obj,
      }).then((res) => {
        // console.log(res)
        if (res.data.res == 1) {
          if (!res.data.obj.results) return;
          res.data.obj.results.forEach((item, index) => {
            item.index = index + 1;
          });
          this.tableData = res.data.obj.results;
          this.page.total = res.data.obj.totalRecord;
        }
      });
    },
  },
};
</script>

<style  scoped >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
.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;
}
</style>