人脸设备标签问题

zxl

2025-12-02 7623c217ad57ad1140fbf3b534fdc420ec6e4c08

人脸设备标签问题

 .env.development

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 视频图形综合管理平台
VUE_APP_TITLE = 视频图像综合管理平台

# 开发环境配置
ENV = 'development'

 .env.production

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 视频图形综合管理平台
VUE_APP_TITLE = 视频图像综合管理平台

# 生产环境配置
ENV = 'production'

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

@@ -97,8 +97,8 @@

    <div v-hasPermi="['system:monitor:export']">
      <el-button slot="reference" type="primary" size="mini" @click="handleExport" plain >导出</el-button>
      <el-button style="margin-left: 10px" type="primary" size="mini" @click="openImport" plain>导入设备标签</el-button>
    </div>

    <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"/>
@@ -146,6 +146,11 @@
      <el-table-column label="建模失败率" align="center" prop="failPercent" width="180" v-if="columns[12].visible"/>
      <el-table-column label="人脸合格率" align="center" prop="facePercent" width="180" v-if="columns[13].visible"/>
      <el-table-column label="大图可用率" align="center" prop="bigUsefulPercent" width="180" v-if="columns[14].visible"/>
      <el-table-column label="建设类型标签" align="center" prop="constructTag" width="180" v-if="columns[15].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">
          <template slot-scope="scope">
            <el-button
@@ -274,13 +279,70 @@
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
    <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>
  </div>
</template>

<script>
import { videoCount, listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor";
import { listDept } from "@/api/system/dept";
import { importData } from "@/api/platform/monitorConstruction";
export default {
  name: "Monitor",
  dicts: ['sys_normal_disable','platform_yes_no','camera_state'],
@@ -303,7 +365,8 @@
        { key: 11, label: `上传及时率`, visible: false },
        { key: 12, label: `建模失败率`, visible: false },
        { key: 13, label: `人脸合格率`, visible: false },
        { key: 14, label: `大图不可用量`, visible: false }
        { key: 14, label: `大图不可用量`, visible: false },
        {key: 15, label: `建设类型`, visible: true}
      ],
      count: {
        totalPosts: 0,
@@ -361,7 +424,12 @@
        address: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
      }
      },

      importShow: false,
      upload: false,
      fileList: [],
      currentFile: null,
    };
  },
  created() {
@@ -372,6 +440,63 @@
    });
  },
  methods: {
    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`);
    },
    openImport(){
      this.fileList = []
      this.currentFile = null;
      this.importShow = true;
      this.upload = false;

    },
    clickTab(active) {
      if (active === 0) {
        this.queryParams.provinceTag = true
@@ -500,6 +625,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;
}