<template>
  <div class="deviceReport">
    <div class="reportBox">
      <div class="photoGraphicBtnGroup">
        <h4>装置报表</h4>
        <div></div>
      </div>
      <div class="searchBox">
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <div class="selectForm">
            <el-form-item label="电压等级" class="dybox">
              <el-select v-model="formdata.dyId" @change="getSearchxl">
                <el-option
                  v-for="item in dyOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="线路名称" class="xlbox">
              <el-select
                v-model="formdata.lineId"
                @change="getSearchgt"
                filterable
              >
                <el-option
                  v-for="item in xlOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="杆塔名称">
              <el-select v-model="formdata.towerId" filterable>
                <el-option
                  v-for="item in gtOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker
                v-model="formdata.starttime"
                type="datetime"
                placeholder="开始日期"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="formdata.endtime"
                type="datetime"
                default-time="23:59:59"
                placeholder="结束日期"
                value-format="timestamp"
                class="ml10"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formdata.search"
                placeholder="请输入线路/杆塔/设备编号"
                clearable
              ></el-input>
            </el-form-item>
          </div>
          <div class="btngrop">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-document"
                @click="handleExport()"
                >导出</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="photoGraphicTable">
        <el-table
          ref="multipleTable"
          :data="terminalTableData"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 40px)"
          v-loading="loading"
        >
          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            prop="dyName"
            label="电压等级"
            min-width="120"
            show-overflow-tooltip
            fixed
          >
          </el-table-column>

          <el-table-column
            prop="lineName"
            label="线路名称"
            show-overflow-tooltip
            min-width="120"
            fixed
          >
            <template slot-scope="scope">
              {{ scope.row.lineName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="towerName"
            label="杆塔名称"
            show-overflow-tooltip
            min-width="150"
            fixed
          >
            <template slot-scope="scope">
              {{ scope.row.towerName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="equipName"
            label="设备名称"
            show-overflow-tooltip
            min-width="150"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="cmdId"
            label="设备编号"
            show-overflow-tooltip
            min-width="150"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="sim"
            label="SIM卡号"
            show-overflow-tooltip
            min-width="170"
          >
          </el-table-column>
          <el-table-column
            prop="netType"
            label="网络类型"
            show-overflow-tooltip
            min-width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.netType == 1"> 移动</span>
              <span v-if="scope.row.netType == 2"> 联通</span>
              <span v-if="scope.row.netType == 3"> 电信</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="isonline"
            label="状态"
            show-overflow-tooltip
            min-width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.isonline ? "在线" : "离线" }}</template
            >
          </el-table-column>
          <el-table-column
            prop="model"
            label="装置型号"
            show-overflow-tooltip
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="bsManufacturer"
            label="装置厂家"
            show-overflow-tooltip
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="protocolName"
            label="规约名称"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="workingDate"
            label="投运日期"
            show-overflow-tooltip
            min-width="120"
          >
            <template slot-scope="scope">
              {{
                scope.row.workingDate == null
                  ? ""
                  : $moment(scope.row.workingDate).format("yy-MM-DD")
              }}</template
            >
          </el-table-column>
          <el-table-column
            prop="isonline"
            label="最新运行状态"
            show-overflow-tooltip
            min-width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.isonline ? "在线" : "离线" }}</template
            >
          </el-table-column>
          <el-table-column
            prop="protocolName"
            label="在线天数"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="图片数量"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="最后数据上送时间"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="最后图片上送时间"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="最新基本信息采集时间"
            show-overflow-tooltip
            min-width="180"
          />
          <el-table-column
            prop="protocolName"
            label="装置名称"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="装置型号"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="装置版本号"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="生产厂家"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="生产日期"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="出厂编号"
            show-overflow-tooltip
            min-width="120"
          />

          <el-table-column
            prop="protocolName"
            label="最新工作状态采集时间"
            show-overflow-tooltip
            min-width="180"
          />
          <el-table-column
            prop="protocolName"
            label="电源电压"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="工作温度"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="电池电量"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="浮充状态"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="工作总时间"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="连续工作时间"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="网络连接状态"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="最新运行状态采集时间"
            show-overflow-tooltip
            min-width="180"
          />
          <el-table-column
            prop="protocolName"
            label="4G信号强度"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="2G信号强度"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="剩余运行内存"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="剩余存储内"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="最新GPS位置采集时间"
            show-overflow-tooltip
            min-width="180"
          />
          <el-table-column
            prop="protocolName"
            label="半径"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="维度"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="protocolName"
            label="经度"
            show-overflow-tooltip
            min-width="120"
          />

          <!-- <el-table-column
            prop="status"
            label="装置状态"
            show-overflow-tooltip
            v-if="roleUser != 2"
          >
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "运行中" : "已删除" }}
            </template>
          </el-table-column> -->
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTerminalJoggle,
  getSearchInfo,
  getTerminalListExcel,
} from "@/utils/api/index";
export default {
  data() {
    return {
      dyOptions: [{ id: -1, name: "全部" }], //电压数据
      xlOptions: [{ id: -1, name: "全部" }], //线路数据
      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
      formdata: {
        dyId: -1,
        lineId: -1,
        towerId: -1,
        search: "",
      },
      terminalTableData: [], //表格数据
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: true,
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
  },
  mounted() {
    this.$set(
      this.formdata,
      "starttime",
      new Date(new Date().toLocaleDateString()).getTime()
    );
    this.$set(this.formdata, "endtime", new Date().setHours(23, 59, 59, 59));
    this.getSearchdy();
    this.terminalList();
  },
  methods: {
    //获取电压信息
    getSearchdy() {
      getSearchInfo({ type: 1 })
        .then((res) => {
          this.dyOptions = [{ id: -1, name: "全部" }];
          this.dyOptions = this.dyOptions.concat(res.data.list);
          this.formdata.dyId = this.dyOptions[0].id;
          this.getSearchxl();
        })
        .catch((err) => {});
    },
    //获取线路数据
    getSearchxl() {
      getSearchInfo({ type: 2, id: this.formdata.dyId })
        .then((res) => {
          this.xlOptions = [{ id: -1, name: "全部" }];
          this.xlOptions = this.xlOptions.concat(res.data.list);
          this.formdata.lineId = this.xlOptions[0].id;
          this.getSearchgt();
        })
        .catch((err) => {});
    },
    //获取杆塔数据
    getSearchgt() {
      getSearchInfo({ type: 3, id: this.formdata.lineId })
        .then((res) => {
          this.gtOptions = [{ id: -1, name: "全部" }];
          this.gtOptions = this.gtOptions.concat(res.data.list);
          this.formdata.towerId = this.gtOptions[0].id;
        })
        .catch((err) => {});
    },

    //查询
    onSubmit() {
      this.page = 1;
      this.terminalList();
    },
    //重置
    onReset() {
      this.formdata = {};
      this.getSearchdy();
      this.page = 1;
      this.pageSize = 20;

      this.terminalList();
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    ////获取拍照装置列表数据
    terminalList() {
      this.loading = true;
      this.$set(this.formdata, "pageindex", this.page);
      this.$set(this.formdata, "pagesize", this.pageSize);
      getTerminalJoggle(this.formdata)
        .then((res) => {
          console.log(res);
          this.terminalTableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //导出
    handleExport() {
      //window.location.href = "/api/api/getTerminalListExcel";
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.terminalList(); //刷新
    },

    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.terminalList();
    },
  },
};
</script>

<style lang="less">
.deviceReport {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #ffffff;
  .reportBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
    .searchBox {
      display: flex;
      flex-direction: column;
      .ml10 {
        margin-left: 10px;
      }
      .el-form {
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 185px;
        }
        .dybox {
          .el-form-item__content {
            width: 120px;
          }
        }
        .xlbox {
          .el-form-item__content {
            width: 160px;
          }
        }
      }
    }
    .photoGraphicBtnGroup {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .searchBox {
      margin-top: 8px;
    }
    .photoGraphicTable {
      // margin-top: 16px;
      //margin-top: 36px;
      height: calc(100% - 130px);
    }
  }
}
</style>
