soc_web/src/views/iot/dailycheck/index.vue

<template>
  <div class="app-container">
    <div class="main-right-box">
      <!--    搜索条件    -->
      <div class="main-search-box">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
          <el-form-item label="检查机构">
            <org-tree
              v-model="queryParams.orgId"
              @defaultOrg="getDefaultOrg"
              @checkChange="checkChange"
              @click="clickTreeNode"
              ref="orgTree"
            ></org-tree>
          </el-form-item>
          <el-form-item label="检测时间" prop="range">
            <el-date-picker
              v-model="queryParams.range"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery"
            >搜索
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery"
            >重置
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon="el-icon-upload2" size="mini" type="primary" @click="handleExport"
            >导出
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </div>


      <el-row :gutter="20">
        <!--  日历和饼图  -->
        <el-col :xs="24" :sm="12" :md="9" :lg="9">
          <p class="card-title">统计</p>
          <el-card>
            <div>
              <Calendar
                :startDate="this.queryParams.range[0]"
                :endDate="this.queryParams.range[1]"
                :doDates="this.doDates"
                :unDoDates="this.unDoDates"
                :halfDoDates="this.halfDoDates"
                @select="onSelectDate"
              ></Calendar>
              <el-descriptions :column="1">
                <el-descriptions-item label="丢失时段">
                  <!--          <time-line></time-line>-->
                  <ul class="legend-box">
                    <li>
                      <i class="legend" style="background-color: green"></i>
                      <span>已检</span>
                    </li>
                    <li>
                      <i class="legend" style="background-color: orange"></i>
                      <span>未检查完全</span>
                    </li>
                    <li>
                      <i class="legend" style="background-color: red"></i>
                      <span>未检</span>
                    </li>
                  </ul>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
          <div style="height: 340px">
            <report
              :rateData="this.rateData"
            ></report>
          </div>
        </el-col>

        <!--  分页数据  -->
        <el-col :xs="24" :sm="12" :md="15" :lg="15">

          <el-table v-loading="loading" :data="dataList" border height="680" size="small">
            <el-table-column align="center" label="序号" min-width="50" >
              <template v-slot:default="scope">
                <span v-text="getPageIndex(scope.$index)"> </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="地区" prop="affiliatedArea"/>
            <el-table-column align="center" label="行社" prop="affiliatedBank"/>
            <el-table-column align="center" label="机构名称" prop="orgName"/>
            <el-table-column align="center" label="文件名称" prop="fileName"/>
            <el-table-column align="center" label="检测时间" prop="recordDate" width="110px"/>
            <el-table-column align="center" label="操作人" prop="userName"width="80px"/>

            <el-table-column
              class-name="small-padding fixed-width"
              width="80px"
              label="操作"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-button
                  class="el-icon-download"
                  size="mini"
                  type="text"
                  @click="handleDownLoad(row.id)"
                >下载
                </el-button>

              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
                      :total="total"
                      @pagination="getList"/>


        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {mapGetters} from "vuex";
import {pageData, rateData, statistics} from "@/api/iot/dailyCheck";
import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
import Calendar from "./Calendar.vue";
import report from "./report.vue";

export default {
  name: "dayiltCheck",
  components: {
    DataRangePicker,
    OrgTree,
    Calendar,
    report,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个停用
      single: true,
      // 非多个停用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      selectedOrgName: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        checkSub: true,
        orgId: null,
        range: this.getTodayRange(),
      },
      dataList: [],
      doDates: [],
      unDoDates: [],
      halfDoDates: [],
      rateData: {},
    };
  },
  mounted() {
    // this.getList();
  },
  computed: {
    ...mapGetters(["roleList", "isAdmin", "orgName"]),
  },

  methods: {
    dayjs,
    getTodayRange() {
      const start = new Date();
      start.setHours(0, 0, 0, 0); // 设置为当天的0点0分0秒

      const end = new Date();
      end.setHours(23, 59, 59, 999); // 设置为当天的23点59分59秒

      return [start, end];
    },
    onSelectDate(date) {

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.selectedOrgName = this.orgName;
      this.handleQuery();
    },
    getDefaultOrg(node) {
      this.queryParams.orgId = node.id;
      this.selectedOrgName = node.shortName;
      this.getList();
    },
    //单选框状态改变
    checkChange(state) {
      this.queryParams.checkSub = state;
      this.selectedOrgName = node.shortName;
      this.getList();
    },
    // 节点单击事件
    clickTreeNode(data) {
      if (data == null) {
        return;
      }
      this.queryParams.orgId = data.id;
      this.selectedOrgName = node.shortName;
      this.getList();
    },

    handleClose() {
      this.show = false;
      this.selectMsg = null;
    },
    /** 查询主机列表 */
    getList() {
      this.loading = true;
      console.log(123, this.queryParams.range);
      pageData(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      });
      statistics(this.queryParams).then(response => {
          this.doDates = response.data.doDates;
          this.unDoDates = response.data.unDoDates;
          this.halfDoDates = response.data.halfDoDates;
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      });
      rateData(this.queryParams).then(response => {
          this.rateData = response.data;
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      });
    },
    getPageIndex($index) {
      //表格序号
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
    /** 导出按钮操作 */
    handleDownLoad(id) {
      this.download(
        "/iot/dailyCheckData/downLoad",
        {
          id,
        },
        `${this.selectedOrgName}-${this.$tab.getCurrentTabName()}-${dayjs(
          new Date()
        ).format("YYYYMMDD")}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.total <1){
        this.$modal.alert("暂无可用数据导出");
        return;
      }
      this.download(
        "/iot/dailyCheckData/export",
        {
          ...this.queryParams,
        },
        `${
          this.selectedOrgName
        }-${this.$tab.getCurrentTabName()}-${dayjs().format("YYYYMMDD")}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.tab_font {
  font-size: 16px;
  font-weight: bold;
}

.home-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    margin-top: 20px;
  }
}

.card-title {
  width: 120px;
  margin: 0 0 10px 0;
  padding-left: 4px;
  color: #fff;
  line-height: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(to right, #71bfe3, #fff);
}

.card-group {
  height: 740px;

  .card-title {
    margin: 0;
  }
}

.tab-panel {
  height: 457px;
  overflow: auto;
}

//css 透明的属性=
.card-item-icon {
  width: 50px;
  height: 50px;

  &:hover {
    opacity: 0.8;
  }
}

.msg-item {
  font-size: 15px;
  padding: 0 10px;
  color: #1ea8e9;
  line-height: 39px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }

  > span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
  }

  .item-title {
    flex: 0.75;
  }

  .item-time {
    flex: 0.25;
    text-align: right;
  }
}
.legend-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  > li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
    i {
      margin-right: 5px;
    }
  }
}
.legend {
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
</style>