大屏修改,录像核查修改，查询视频设备修改

zxl

2025-10-29 a34292254a49fbe57d4637304c39ab98ab88a610

 src/views/system/monitor/video/index.vue

@@ -2,13 +2,17 @@

  <div class="app-container">
    <div
      style="display: flex;flex-direction: row;min-width: 158px;max-width: 158px;margin-bottom: 5px;border-radius: 1px; user-select: none"
      style="display: flex;flex-direction: row;min-width: 300px;max-width: 300px;margin-bottom: 5px;border-radius: 1px; user-select: none"
    >
      <div @click="clickTab(null)" class="tab"
           :class="{tabActive: null == queryParams.provinceTag, tabInactive: null != queryParams.provinceTag}">全部
           :class="{tabActive: !queryParams.provinceTag && !queryParams.deptTag, tabInactive: queryParams.provinceTag || queryParams.deptTag}">
        全部
      </div>
      <div @click="clickTab(0)" class="tab"
           :class="{tabActive: 0 === queryParams.provinceTag, tabInactive: 0 !== queryParams.provinceTag}">省厅考核
           :class="{tabActive: queryParams.provinceTag, tabInactive: !queryParams.provinceTag}">省厅考核
      </div>
      <div @click="clickTab(1)" class="tab"
           :class="{tabActive: queryParams.deptTag, tabInactive: !queryParams.deptTag}">公安部考核
      </div>
    </div>
    <el-card class="box-card">
@@ -33,6 +37,10 @@
              <p>异常数</p>
            </div>
            <div class="dashboard-item">
              <h3 style="color: #4f4f4f">{{ count.unknownNumbers }}</h3>
              <p>未知数</p>
            </div>
            <div class="dashboard-item">
              <h3>{{ count.viewsPercentage }}%</h3>
              <p>设备运行率</p>
            </div>
@@ -42,13 +50,14 @@
    </el-card>
    <el-row type="flex">
      <el-col :span="20">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch">
          <el-form-item label="关键字" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入关键字"
              placeholder="设备名/设备编码/IP/单位名"
              clearable
              @keyup.enter.native="handleQuery"
              @clear="handleQuery"
            />
          </el-form-item>
          <el-form-item label="区域" prop="onState">
@@ -71,6 +80,7 @@
              v-model="queryParams.onState"
              placeholder="设备状态"
              clearable
              @change="handleQuery"
              style="width: 100px"
            >
              <el-option
@@ -82,86 +92,108 @@
            </el-select>
          </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>
            </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-form-item>

        </el-form>
        <!-- 导出按钮 -->
        <div v-hasPermi="['system:monitor:export']">
          <el-popover
            placement="left"
            width="300px"
            trigger="click">
            <span style="font-weight: bold;font-size: 16px">导出</span>
            <el-form ref="exportForm" :model="exportForm" :rules="exportRules" label-width="100px">
              <el-form-item label="考核时间" prop="month" required>
                <el-date-picker
                  v-model="exportForm.month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="区县" prop="deptIds" required>
                <el-select v-model="exportForm.deptIds" multiple clearable>
                  <el-option
                    v-for="dept in deptList"
                    :key="dept.deptId"
                    :label="dept.area"
                    :value="dept.deptId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="标签" prop="tags">
                <el-checkbox-group v-model="exportForm.tags">
                  <el-checkbox
                    v-for="item in tagOptions"
                    :key="item.value"
                    :label="item.value"
                  >{{ item.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="数据类型" prop="dataType" required>
                <el-radio-group v-model="exportForm.dataType">
<!--                  <div style="display: flex;margin-bottom: 10px;">-->
<!--                    <div style="width: 48%">-->
                      <el-radio :label="0">总量数据</el-radio>
<!--                    </div>-->
<!--                    <div style="width: 48%">-->
                      <el-radio :label="1">每日在线情况</el-radio>
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div style="display: flex;">-->
<!--                    <div style="width: 48%">-->
                      <el-radio :label="2">每日录像情况</el-radio>
<!--                    </div>-->
<!--                    <div style="width: 48%">-->
                      <el-radio :label="3">每日录像缺失时长</el-radio>
<!--                    </div>-->
<!--                  </div>-->
                </el-radio-group>
              </el-form-item>
              <el-button type="primary" size="small" style="width: 400px" @click="handleExport">导出</el-button>
            </el-form>
            <el-button slot="reference" type="primary" size="mini" plain>导出</el-button>
          </el-popover>
        <div style="display: flex">
          <div v-hasPermi="['system:monitor:export']">
            <el-button style="margin-right: 10px" slot="reference" type="primary" size="mini" @click="handleExport" plain >导出</el-button>
            <el-popover
              placement="left"
              width="300px"
              trigger="click">
              <span style="font-weight: bold;font-size: 16px">导出报表</span>
              <el-form ref="exportForm" :model="exportForm" :rules="exportRules" label-width="100px">
                <el-form-item label="考核时间" prop="month" required>
                  <el-date-picker
                    v-model="exportForm.month"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    type="month"
                    placeholder="选择月">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="区县" prop="deptIds">
                  <el-select v-model="exportForm.deptIds" multiple clearable>
                    <el-option
                      v-for="dept in deptList"
                      :key="dept.deptId"
                      :label="dept.area"
                      :value="dept.deptId"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="标签" prop="tags">
                  <el-checkbox-group v-model="exportForm.tags">
                    <el-checkbox
                      v-for="item in tagOptions"
                      :key="item.value"
                      :label="item.value"
                    >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="数据类型" prop="dataType" required>
                  <el-radio-group v-model="exportForm.dataType">
                    <!--                  <div style="display: flex;margin-bottom: 10px;">-->
                    <!--                    <div style="width: 48%">-->
                    <el-radio :label="0">总量数据</el-radio>
                    <!--                    </div>-->
                    <!--                    <div style="width: 48%">-->
                    <el-radio :label="1">每日在线情况</el-radio>
                    <!--                    </div>-->
                    <!--                  </div>-->
                    <!--                  <div style="display: flex;">-->
                    <!--                    <div style="width: 48%">-->
                    <el-radio :label="2">每日录像情况</el-radio>
                    <!--                    </div>-->
                    <!--                    <div style="width: 48%">-->
                    <el-radio :label="3">每日录像缺失时长</el-radio>
                    <!--                    </div>-->
                    <!--                  </div>-->
                  </el-radio-group>
                </el-form-item>
                <el-button type="primary" size="small" style="width: 100%" @click="handleFormExport">导出</el-button>
              </el-form>
              <el-button slot="reference" type="primary" size="mini" plain>导出报表</el-button>

            </el-popover>
            <el-button style="margin-left: 10px" type="primary" size="mini" @click="openImport" plain>导入设备标签</el-button>
          </div>

        </div>

      </el-col>
      <el-col :span="4">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
      <el-table-column label="设备名称" align="center" prop="name" width="280" fixed show-overflow-tooltip/>
      <el-table-column label="设备编码" align="center" prop="serialNumber" width="180"/>
      <el-table-column label="ip" align="center" prop="ip" width="180"/>
      <el-table-column label="标签" align="center" width="180" v-if="columns[0].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.provinceTag == 0 ? "省厅" : "市局" }}</div>
          <div>
            {{
              (
                (scope.row.provinceTagVideo ? '省厅、' : '') +
                (scope.row.deptTag ? '公安部、' : '')).replace(/、$/, '')
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="区域" align="center" prop="area" width="180" v-if="columns[1].visible"/>
@@ -195,18 +227,23 @@
          <div>{{ (scope.row.videoLoseTime * 60).toFixed(2) + '分钟' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="OSD标注" align="center" prop="OSD" width="180" v-if="columns[10].visible">
      <el-table-column label="OSD标注" align="center" prop="osd" width="180" v-if="columns[10].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.OSD === 1">正常</div>
          <div v-else-if="scope.row.OSD === 0">未知</div>
          <div v-else-if="scope.row.OSD === -1">异常</div>
          <div v-if="scope.row.osd ==true">正常</div>
          <div v-else-if="scope.row.osd == false">异常</div>
          <div v-else-if="scope.row.osd == null">未知</div>
        </template>
      </el-table-column>
      <el-table-column label="OSD时间" align="center" prop="OSDTime" width="180" v-if="columns[11].visible">
      <el-table-column label="OSD时间" align="center" prop="osdtime" width="180" v-if="columns[11].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.OSDTime === 1">正常</div>
          <div v-else-if="scope.row.OSDTime === 0">未知</div>
          <div v-else-if="scope.row.OSDTime === -1">异常</div>
          <div v-if="scope.row.osdtime ==true">正常</div>
          <div v-else-if="scope.row.osdtime == false">异常</div>
          <div v-else-if="scope.row.osdtime == null">未知</div>
        </template>
      </el-table-column>
      <el-table-column label="建设类型标签" align="center" prop="constructTag" width="180" v-if="columns[12].visible">
        <template slot-scope="scope">
          <div>{{ scope.row.tag }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
@@ -229,7 +266,63 @@
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="导入设备标签"
      width="800px"
      :visible.sync="importShow"
      :close-on-click-modal="false"
      custom-class="import-dialog"
    >
      <div class="import-content">
        <!-- 上传区域 -->
        <div class="upload-section">
          <el-upload
            ref="upload"
            class="custom-upload"
            action=""
            drag
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :auto-upload="false"
            accept=".xls,.xlsx"
          >
            <div class="upload-content">
              <i class="el-icon-upload"></i>
              <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="upload-tip">支持 .xls 或 .xlsx 格式文件，文件大小不超过10MB</div>
            </div>
          </el-upload>

        </div>

        <!-- 操作按钮 -->
        <div class="action-section">
          <el-button
            type="primary"
            size="medium"
            :loading="upload"
            @click="handleImport"
            class="import-btn"
            :disabled="!currentFile"
          >
            {{ upload ? '导入中...' : '开始导入' }}
          </el-button>
          <el-button
            size="medium"
            @click="downloadTemplate"
            class="template-btn"
          >
            <i class="el-icon-download"></i>下载模板
          </el-button>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="importShow = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 设备资产详情 -->
    <el-dialog title="视频监控详情" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="150px" size="mini">
@@ -237,10 +330,16 @@
          <el-form-item label="设备名称：">{{ form.name }}</el-form-item>
          <el-col :span="12">
            <el-form-item label="设备编码：">{{ form.serialNumber }}</el-form-item>
            <el-form-item label="标签：">{{ form.provinceTag == 0 ? '省厅' : '市局' }}</el-form-item>
            <el-form-item label="标签：">
              {{
                ((form.provinceTagVideo ? '省厅、' : '') +
                (form.deptTag ? '公安部、' : '')).replace(/、$/, '')
              }}
            </el-form-item>
            <el-form-item label="设备状态：">
              <div v-if="form.onState === 0">离线</div>
              <div v-if="form.onState === 0">未知</div>
              <div v-else-if="form.onState === 1">在线</div>
              <div v-else-if="form.onState === -1">离线</div>
            </el-form-item>
            <el-form-item label="管理单位：">{{ form.unitName }}</el-form-item>
          </el-col>
@@ -273,9 +372,9 @@
              <div v-else-if="form.videoComplete === -1">异常</div>
            </el-form-item>
            <el-form-item label="OSD标注：">
              <div v-if="form.OSD === 1">正常</div>
              <div v-else-if="form.OSD === 0">未知</div>
              <div v-else-if="form.OSD === -1">异常</div>
              <div v-if="form.osd ==true">正常</div>
              <div v-else-if="form.osd ==false">异常</div>
              <div v-else-if="form.osd ==null">未知</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -284,9 +383,9 @@
            </el-form-item>
            <el-form-item label="录像缺失时长：">{{ (form.videoLoseTime * 60).toFixed(2) + '分钟' }}</el-form-item>
            <el-form-item label="OSD时间：">
              <div v-if="form.OSDTime === 1">正常</div>
              <div v-else-if="form.OSDTime === 0">未知</div>
              <div v-else-if="form.OSDTime === -1">异常</div>
              <div v-if="form.osdtime ==true">正常</div>
              <div v-else-if="form.osdtime ==false">异常</div>
              <div v-else-if="form.osdtime ==null">未知</div>
            </el-form-item>
          </el-col>
        </el-row>
@@ -301,12 +400,26 @@
<script>
import {videoCount, listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor} from "@/api/platform/monitor";
import {listDept} from "@/api/system/dept";

import { importData } from "@/api/platform/monitorConstruction"
import {getToken} from "@/utils/auth";
export default {
  name: "Monitor",
  dicts: ['sys_normal_disable', 'platform_yes_no', 'camera_state'],
  data() {
    return {
      importShow: false,
      upload: false,
      fileList: [],
      currentFile: null,

      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'}
      ],
      deptList: [],
      // 列信息
      columns: [
@@ -321,12 +434,14 @@
        {key: 8, label: `录像完整状态`, visible: false},
        {key: 9, label: `录像缺失时长`, visible: false},
        {key: 10, label: `OSD标注`, visible: false},
        {key: 11, label: `OSD时间`, visible: false}
        {key: 11, label: `OSD时间`, visible: false},
        {key: 12, label: `建设类型`, visible: true}
      ],
      count: {
        totalPosts: 0,
        totalMembers: 0,
        postsPercentage: 0,
        unknownNumbers: 0,
        totalViews: 0,
        noStore: 0,
        partStore: 0,
@@ -381,9 +496,6 @@
        month: [
          {required: true, message: "时间不能为空", trigger: "blur"}
        ],
        deptIds: [
          {required: true, message: "部门不能为空", trigger: "blur"}
        ],
        dataType: [
          {required: true, message: "数据类型不能为空", trigger: "blur"}
        ]
@@ -413,8 +525,74 @@
    });
  },
  methods: {
    openImport(){
      this.fileList = []
      this.currentFile = null;
      this.importShow = true;
      this.upload = false;

    },
    beforeUpload(file) {
      // 文件验证逻辑
      const isExcel = file.type.includes('spreadsheet') ||
        file.name.endsWith('.xls') ||
        file.name.endsWith('.xlsx');
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件!');
        return false;
      }
      if (!isLt10M) {
        this.$message.error('文件大小不能超过 10MB!');
        return false;
      }

      return true;
    },
    handleFileRemove(){
      this.currentFile = null;
    },
    handleFileChange(file, fileList) {
      this.currentFile = file;
    },

    async handleImport() {
      if (!this.currentFile) {
        this.$message.warning('请先选择要导入的文件');
        return;
      }

      this.upload = true;
      // 这里执行上传逻辑
      // 上传完成后
      const formData = new FormData();
      formData.append('file', this.currentFile.raw);

      await importData(formData).then(res =>{
        if (res.code === 200){
          this.$message.success("导入成功");
        }
      })
      this.upload = false;
      this.importShow = false;
    },

    downloadTemplate() {
      // 下载模板文件逻辑
      this.download("monitorConstruction/importTemplate", {}, `设备标签模板.xlsx`);
    },
    clickTab(active) {
      this.queryParams.provinceTag = active
      if (active === 0) {
        this.queryParams.provinceTag = true
        this.queryParams.deptTag = null
      } else if (active === 1) {
        this.queryParams.provinceTag = null
        this.queryParams.deptTag = true
      } else {
        this.queryParams.provinceTag = null
        this.queryParams.deptTag = null
      }
      this.getList()
      this.getVideoCount()
    },
@@ -526,24 +704,37 @@
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/monitor/export', {
        ...this.queryParams
      }, `monitor_${new Date().getTime()}.xlsx`)
    },
    handleFormExport() {
      this.$refs["exportForm"].validate(valid => {
        if (valid) {
          if (this.exportForm.dataType === 0) {
            this.download('system/monitor/export/video/total', {
              ...this.exportForm,
            }, `总量情况_${new Date().getTime()}.xlsx`)
            }, `总量情况_${new Date().getTime()}.xlsx`, {
              timeout: 60000
            })
          } else if (this.exportForm.dataType === 1) {
            this.download('system/monitor/export/video/online', {
              ...this.exportForm,
            }, `点位在线_${new Date().getTime()}.xlsx`)
            }, `点位在线_${new Date().getTime()}.xlsx`, {
              timeout: 60000
            })
          } else if (this.exportForm.dataType === 2) {
            this.download('system/monitor/export/video/record', {
              ...this.exportForm,
            }, `录像情况_${new Date().getTime()}.xlsx`)
            }, `录像情况_${new Date().getTime()}.xlsx`, {
              timeout: 60000
            })
          } else if (this.exportForm.dataType === 3) {
            this.download('system/monitor/export/video/loseTime', {
              ...this.exportForm,
            }, `录像缺失时长_${new Date().getTime()}.xlsx`)
            }, `录像缺失时长_${new Date().getTime()}.xlsx`, {
              timeout: 60000
            })
          }
        }
      });
@@ -552,7 +743,50 @@
};
</script>
<style lang="scss" scoped>
.custom-upload{
  width: 100%;
  height: 100%;

}
.custom-upload ::v-deep .el-upload-dragger {
  width: 500px;
  height: 200px;
  padding: 0; /* 移除默认的内边距 */
  margin: 0 0 0 125px;
}

.custom-upload ::v-deep .el-upload-dragger .el-icon-upload {
  margin-top: 0; /* 调整图标的上边距 */
}

/* 确保自定义内容区域充满整个拖拽区域 */
.custom-upload .upload-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.action-section {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}
.import-content {
  padding: 10px 0;
}
.upload-section {
  width: 100%;
  margin-bottom: 20px;
}
.el-upload{
  width: 100%;
}
.el-upload .el-upload-dragger{
  width: 100%;
}
.tab {
  padding: 5px 15px;
}