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

zxl

8 天以前 e0fa52615c6e284abee8cfec93908a6095eaf006

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

@@ -1,10 +1,9 @@

<template>
  <div class="demerit-record-table">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item label="区域" prop="belongUnit">
        <el-select v-model="queryParams.deptId" @change="handleQuery" clearable placeholder="运维考核单位">
          <el-option v-for="(item,index) in deptList" :key="index" :label="item.label" :value="item.value">
          <el-option v-for="(item, index) in deptList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
@@ -17,101 +16,73 @@
      </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-form-item label="选择月份:" v-show="queryParams.searchType === 'month'">
        <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="分建类型">
          <el-option v-for="(item,index) in constructionTypeList" :key="index" :label="item.label" :value="item.value">
          <el-option v-for="(item, index) in constructionTypeList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <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="videoOnlineRate" label="在线率" align="center" min-width="200">
        <template slot-scope="scope">
          {{ formatDemeritRate(scope.row.videoOnlineRate) }}
        </template>
      </el-table-column>
      <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">
        <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
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，第一个属性"贡井区"
@@ -121,25 +92,29 @@
        { value: 101, label: '富顺县' },     // FSX最后一个属性101，第一个属性"富顺县"
        { value: 210, label: '高新区' }      // GXQ最后一个属性210，第一个属性"高新区"
      ],
      queryParams:{
      queryParams: {
        searchType: 'day',
        dayDate: null,
        monthDate:null,
        monthDate: null,
        dayStart: null,
        dayEnd: null,
        monthStart: null,
        monthEnd: null,
        deptId: '',
        constructionType: '',
        pageNum: 1,
        pageSize: 20
      },
      constructionTypeList:[
        { label:'一二期',value:'PHASE_ONE_TWO' },
        { label:'三期',value:'PHASE_THREE' },
        { label:'四区人脸',value:'PHASE_FOURTH' },
        { label:'东部新城',value:'EASTERN_NEW_CITY' },
        { label:'沿滩二期人脸',value:'YAN_TAN_PHASE_TWO_FACE' },
        { label: '入川即检',value: 'CHECK_ENTER_SICHUAN'}
      constructionTypeList: [
        { label: '一二期', value: 'PHASE_ONE_TWO' },
        { label: '三期', value: 'PHASE_THREE' },
        { label: '四区人脸', value: 'PHASE_FOURTH' },
        { label: '东部新城', value: 'EASTERN_NEW_CITY' },
        { label: '沿滩二期人脸', value: 'YAN_TAN_PHASE_TWO_FACE' },
        { label: '入川即检', value: 'CHECK_ENTER_SICHUAN' }
      ],
      // 表格数据，实际项目中从接口获取
      total:0,
      total: 0,
      tableData: [
      ],
      // 建设类型映射，用于将英文标识转换为中文显示
@@ -147,9 +122,9 @@
        'PHASE_ONE_TWO': '一二期',
        'PHASE_THREE': '三期',
        'PHASE_FOURTH': '四区人脸',
        'EASTERN_NEW_CITY':'东部新城',
        'YAN_TAN_PHASE_TWO_FACE':'沿滩二期人脸',
        'CHECK_ENTER_SICHUAN':'入川即检',
        'EASTERN_NEW_CITY': '东部新城',
        'YAN_TAN_PHASE_TWO_FACE': '沿滩二期人脸',
        'CHECK_ENTER_SICHUAN': '入川即检',
      }
    };
  },
@@ -165,35 +140,113 @@

  },
  methods: {
    init(){
    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',
        {
          id:row.id,
          date:row.recordTime,
          deptId:row.deptId,
          type:row.constructionType
        },
        `${name}`)
    },
    init() {
      // 初始化查询参数
      this.getPage();

    },
    getPage(){
      if (this.queryParams.searchType === "day"){
    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;
      }else{
        this.queryParams.dayDate = null;
      }
      let from = {...this.queryParams}

      getPage(from).then(res =>{
        if (res.code === 200){
        if (this.queryParams.dayDate && this.queryParams.dayDate.length === 2) {
          this.queryParams.dayStart = this.queryParams.dayDate[0] +" 00:00:00";
          this.queryParams.dayEnd = this.queryParams.dayDate[1]+" 23:59:59";
        }
        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;
        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;
          this.total = res.total
        }
      })
    },
    handleQuery(){
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getPage()
    },
    resetQuery(){
    resetQuery() {
      this.queryParams = {
        searchType: 'day',
        dayDate: null,
        monthDate:null,
        monthDate: null,
        dayStart: null,
        dayEnd: null,
        monthStart: null,
        monthEnd: null,
        deptId: '',
        constructionType: '',
        pageNum: 1,
@@ -208,6 +261,14 @@
    // 格式化扣分显示，保留一位小数
    formatDemerit(value) {
      return value.toFixed(1);
    },
    formatDemeritRate(value) {
      if (value !== null && value !== 0) {
        return value.toFixed(1) + "%";
      } else {
        return "暂无"
      }

    }
  }
};