录像扣分页面调整新增内容

zxl

2026-01-21 aab6b50f31e0da9736a8a221b082b246cd47c498

 src/views/system/check/demeritRecord/index.vue

@@ -1,4 +1,3 @@

<template>
  <div class="demerit-record-table">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
@@ -17,25 +16,13 @@
      </el-form-item>

      <el-form-item label="选择日期:" v-show="queryParams.searchType === 'day'">
        <el-date-picker
          v-model="queryParams.dayDate"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="small"
        ></el-date-picker>
        <el-date-picker v-model="queryParams.dayDate" type="daterange"  range-separator="至" start-placeholder="选择日期"
        end-placeholder="结束日期" format="yyyy-MM-dd"  value-format="yyyy-MM-dd" size="small"></el-date-picker>
      </el-form-item>

      <el-form-item label="选择月份:"  v-show="queryParams.searchType === 'month'">
        <el-date-picker
          v-model="queryParams.monthDate"
          type="month"
          placeholder="选择月份"
          format="yyyy-MM"
          value-format="yyyy-MM"
          size="small"
        ></el-date-picker>
        <el-date-picker v-model="queryParams.monthDate" type="monthrange" range-separator="至" start-placeholder="开始月份"
          end-placeholder="结束月份" format="yyyy-MM" value-format="yyyy-MM" size="small"></el-date-picker>
      </el-form-item>
      <el-form-item label="分建类型">
        <el-select v-model="queryParams.constructionType" @change="handleQuery" clearable placeholder="分建类型">
@@ -46,82 +33,56 @@
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        <el-button size="small" @click="updateData">更新</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
    >
      <el-table-column
        prop="deptName"
        label="区域名"
        align="center"
        min-width="150"
      ></el-table-column>
    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading"
      :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }">
      <el-table-column prop="deptName" label="区域名" align="center" min-width="150"></el-table-column>

      <el-table-column
        prop="constructionType"
        label="分建设类型"
        align="center"
        min-width="180"
      >
      <el-table-column prop="constructionType" label="分建设类型" align="center" min-width="180">
        <template slot-scope="scope">
          {{ formatConstructionType(scope.row.constructionType) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="demerit"
        label="扣分"
        align="center"
        min-width="120"
      >
      <el-table-column prop="demerit" label="扣分" align="center" min-width="120">
        <template slot-scope="scope">
          {{ formatDemerit(scope.row.demerit) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="recordTime"
        label="日期"
        align="center"
        min-width="200"
      >
      <el-table-column prop="recordTime" label="日期" align="center" min-width="200">
        <template slot-scope="scope">
          <!-- recordTime格式为 "yyyy-MM-dd HH:mm:ss"，通过split截取日期部分 -->
          {{ scope.row.recordTime ? scope.row.recordTime.split(' ')[0] : '-' }}
        </template>
      </el-table-column>

      <el-table-column
        prop="action"
        label="操作"
        align="=center">
      <el-table-column prop="videoOnlineRate" label="在线率" align="center" min-width="200">
        <template slot-scope="scope">
          {{ formatDemeritRate(scope.row.videoOnlineRate) }}
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" align="=center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="exportInfo(scope.row)">导出详情</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPage"
    />
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getPage" />
  </div>
</template>
<script>
import { getPage,exportInfo
import {
  getPage, exportInfo,executeDecemberStats
} from "@/api/platform/demeritRecord"
export default {
  name: 'DemeritRecordTable',
  data() {
    return {
      loading:false,
      deptList: [
        { value: 201, label: '自流井区' },   // ZLJQ最后一个属性201，第一个属性"自流井区"
        { value: 202, label: '贡井区' },     // GJQ最后一个属性202，第一个属性"贡井区"
@@ -135,6 +96,10 @@
        searchType: 'day',
        dayDate: null,
        monthDate:null,
        dayStart: null,
        dayEnd: null,
        monthStart: null,
        monthEnd: null,
        deptId: '',
        constructionType: '',
        pageNum: 1,
@@ -175,11 +140,28 @@

  },
  methods: {
    updateData(){
      if (this.loading){
        return
      }
      this.loading = true
      executeDecemberStats().then(res =>{
        if (res.code === 200){
          this.$message("执行成功")
        }
        this.loading = false
      })
    },
    exportInfo(row){
      console.log(row)
      let name = row.deptName + '设备详情.xlsx'
      this.download('demeritRecord/exportInfo/' +row.id,
        {},
      this.download('demeritRecord/exportInfo',
        {
          id:row.id,
          date:row.recordTime,
          deptId:row.deptId,
          type:row.constructionType
        },
        `${name}`)
    },
    init(){
@@ -188,13 +170,63 @@

    },
    getPage(){
      console.log(this.queryParams.dayDate)
      this.queryParams.dayStart = null;
      this.queryParams.dayEnd = null;
      this.queryParams.monthStart = null;
      this.queryParams.monthEnd = null;
      let from = null;
      if (this.queryParams.searchType === "day"){
        this.queryParams.monthDate = null;

        if (this.queryParams.dayDate && this.queryParams.dayDate.length === 2) {
          this.queryParams.dayStart = this.queryParams.dayDate[0];
          this.queryParams.dayEnd = this.queryParams.dayDate[1];
        }
        from = {
          searchType: this.queryParams.searchType,
          dayStart: this.queryParams.dayStart,
          dayEnd: this.queryParams.dayEnd,
          deptId: this.queryParams.deptId,
          constructionType: this.queryParams.constructionType,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        }
      }else{
        this.queryParams.dayDate = null;
      }
      let from = {...this.queryParams}
        if (this.queryParams.monthDate && this.queryParams.monthDate.length === 2) {
          const monthStart = this.queryParams.monthDate[0];
          const monthEnd = this.queryParams.monthDate[1];


          const [startYear, startMonth] = monthStart.split('-').map(Number);
          // 月份补零，比如 2025-1 → 2025-01
          const formattedStartMonth = String(startMonth).padStart(2, '0');
          // 拼接成完整的日期时间格式，兼容Timestamp解析
          this.queryParams.monthStart = `${startYear}-${formattedStartMonth}-01 00:00:00`;


          // 修复2：标准化结束月份格式，添加时间戳并补零

          const [year, month] = monthEnd.split('-').map(Number);
          const lastDay = new Date(year, month, 0).getDate();
          // 月份和日期都补零，比如 2025-11-3 → 2025-11-03
          const formattedMonth = String(month).padStart(2, '0');
          const formattedDay = String(lastDay).padStart(2, '0');
          // 拼接成当月最后一天的23:59:59，确保覆盖整个月份
          this.queryParams.monthEnd = `${year}-${formattedMonth}-${formattedDay} 23:59:59`;

          from = {
            searchType: this.queryParams.searchType,
            monthStart: this.queryParams.monthStart,
            monthEnd: this.queryParams.monthEnd,
            deptId: this.queryParams.deptId,
            constructionType: this.queryParams.constructionType,
            pageNum: this.queryParams.pageNum,
            pageSize: this.queryParams.pageSize
          }
        }
      }
      getPage(from).then(res =>{
        if (res.code === 200){
          this.tableData = res.data;
@@ -211,6 +243,10 @@
        searchType: 'day',
        dayDate: null,
        monthDate:null,
        dayStart: null,
        dayEnd: null,
        monthStart: null,
        monthEnd: null,
        deptId: '',
        constructionType: '',
        pageNum: 1,
@@ -225,6 +261,14 @@
    // 格式化扣分显示，保留一位小数
    formatDemerit(value) {
      return value.toFixed(1);
    },
    formatDemeritRate(value) {
      if (value !== null && value !== 0) {
        return value.toFixed(1) + "%";
      } else {
        return "暂无"
      }

    }
  }
};