fuliqi
2024-08-07 c46d8df84b7eefe4cfeb433571112eb6be71a893
src/views/system/point/index.vue
@@ -1,12 +1,12 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="点位名称" prop="pointName">
        <el-input v-model="queryParams.pointName" placeholder="请输入点位名称" clearable @keyup.enter.native="handleQuery" />
        <el-input v-model="queryParams.pointName" placeholder="输入点位名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <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>
@@ -29,8 +29,36 @@
          v-hasPermi="['point:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-top" size="mini" @click="handleImportPoint"
          v-hasPermi="['point:import']">导入点位</el-button>
        <el-button type="primary" plain icon="el-icon-bottom" v-loading="download" size="mini" @click="handleExport"
                   v-hasPermi="['point:export']">导出点位</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-popover>
          <div>
            <el-select v-model="importUnitId" size="small" placeholder="负责单位">
              <el-option v-for="unit in unitList" :key="unit.id" :label="unit.value" :value="unit.id"></el-option>
            </el-select>
          </div>
          <div>
            <el-upload
              ref="upload"
              class="upload-demo"
              drag
              :action="importUrl"
              :file-list="fileList"
              :before-upload="beforeUpload"
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
            </el-upload>
          </div>
          <div>
            <el-button type="primary" size="small" v-model="upload" :disabled="! importUnitId || ! importFile"  @click="handleImport" style="width: 100%; margin-top: 5px"
                       v-hasPermi="['point:import']">导入</el-button>
          </div>
          <el-button type="primary" size="mini" plain icon="el-icon-top" slot="reference">导入点位</el-button>
        </el-popover>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-receiving" size="mini" @click="handleEditBatch"
@@ -41,10 +69,17 @@
    <el-table v-loading="loading" :data="pointList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="点位名称" prop="pointName" width="200" />
      <el-table-column label="标签" align="center" width="90">
      <el-table-column label="点位名称" prop="pointName" width="200" show-overflow-tooltip/>
      <el-table-column label="重点标签" align="center" width="90" show-overflow-tooltip>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.point_tag" :value="scope.row.pointTags" />
          <div v-if="scope.row.importantTag === 'important'">重点点位</div>
          <div v-else-if="scope.row.importantTag === 'normal'">普通点位</div>
        </template>
      </el-table-column>
      <el-table-column label="省厅标签" align="center" width="90" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.provinceTag === 'province'">省厅点位</div>
          <div v-else-if="scope.row.provinceTag === 'normal'">普通点位</div>
        </template>
      </el-table-column>
      <el-table-column label="点位开始时间" align="center" prop="startTime" width="180">
@@ -59,13 +94,6 @@
      </el-table-column>
      <el-table-column label="运维单位" align="center" prop="unitName" />
      <el-table-column label="监管部门" align="center" prop="deptName" />
      <el-table-column label="运维类别" align="center" prop="category">
        <template slot-scope="scope">
          <div v-if="scope.row.category === 1">视频监控</div>
          <div v-else-if="scope.row.category === 2">车辆识别</div>
          <div v-else-if="scope.row.category === 3">人脸识别</div>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
@@ -86,21 +114,21 @@
        <el-form-item label="点位名称" prop="pointName">
          <el-input v-model="form.pointName" placeholder="请输入点位名称" />
        </el-form-item>
        <el-form-item label="点位标签" prop="pointTag">
          <el-select v-model="form.pointTag" placeholder="点位标签" multiple clearable>
            <el-option v-for="dict in dict.type.point_tag" :key="dict.value" :label="dict.label" :value="dict.value" />
        <el-form-item label="重点标签" prop="importantTag">
          <el-select v-model="form.importantTag" placeholder="重点标签" clearable>
            <el-option label="重点点位" value="important" />
            <el-option label="普通点位" value="normal" />
          </el-select>
        </el-form-item>
        <el-form-item label="省厅标签" prop="provinceTag">
          <el-select v-model="form.provinceTag" placeholder="省厅标签" clearable>
            <el-option label="省厅点位" value="province" />
            <el-option label="普通点位" value="normal" />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="点位所在地" prop="region">-->
        <!--          <el-cascader v-model="form.region" :options="regionList" placeholder="点位所在地" :props="props" collapse-tags></el-cascader>-->
        <!--        </el-form-item>-->
        <el-form-item label="设备类型" prop="category">
          <el-select v-model="form.category" placeholder="设备类型">
            <el-option label="人脸识别" value="2" />
            <el-option label="视频监控" value="1" />
            <el-option label="车辆监控" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="监管部门" prop="deptId">
          <el-cascader v-model="form.deptId" :options="deptOptions" :show-all-levels="false" clearable
            :props="{ checkStrictly: true }">
@@ -122,8 +150,8 @@
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
@@ -147,8 +175,8 @@
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBatchEdit">确 定</el-button>
        <el-button @click="cancelBatchEdit">取 消</el-button>
        <el-button type="primary" @click="submitBatchEdit">确 定</el-button>
      </div>
    </el-dialog>
@@ -156,7 +184,7 @@
</template>
<script>
import { listPoint, getPoint, delPoint, addPoint, batchEdit, updatePoint } from "@/api/platform/point";
import { listPoint, getPoint, delPoint, addPoint, batchEdit, updatePoint, exportData, importData } from "@/api/platform/point";
import { unitSelect } from "@/api/platform/unit";
import { getCascader } from '@/api/platform/region'
import { cascader } from '@/api/system/dept'
@@ -166,6 +194,12 @@
  dicts: ['point_tag'],
  data() {
    return {
      fileList: [],
      importFile: null,
      importUrl: '',
      importUnitId: null,
      download: false,
      upload: false,
      deptOptions: [],
      // 批量修改表单
      batchEditForm: {
@@ -240,9 +274,39 @@
    this.getDeptCascader();
  },
  methods: {
    beforeUpload(file) {
      this.importFile = file
      this.fileList = [file]
      return false
    },
    // 点位导入
    handleImportPoint() {
    handleImport() {
      this.upload =true;
      let formData = new FormData()
      formData.append("file", this.importFile)
      importData(formData, this.importUnitId).then(res => {
        this.$message.success("导入成功")
        this.upload = false
      })
    },
    // 点位导出
    handleExport() {
      this.download = true
      exportData(this.queryParams).then(res => {
        // 将二进制数据转换为 Blob 对象
        let blob = new Blob([res], { type: 'application/octet-stream' });
        // 创建下载链接
        let downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.setAttribute('download', "点位更换运维单位.xlsx"); // 设置下载文件的文件名
        downloadLink.style.display = 'none';
        // 添加到页面并触发下载
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
        this.download = false
      })
    },
    cos(value) {
      console.log(value)
@@ -314,7 +378,8 @@
        createTime: null,
        updateTime: null,
        deleted: null,
        pointTag: []
        importantTag: null,
        provinceTag: null
      };
      this.resetForm("form");
    },
@@ -346,10 +411,10 @@
      const id = row.id || this.ids
      getPoint(id).then(response => {
        this.form = response.data;
        this.form.pointTag = response.data.pointTags;
        this.form.deptId = response.data.deptIds
        this.form.category = this.form.category + ''
        this.open = true;
        console.log(this.form)
        this.title = "修改运维点位";
      });
    },
@@ -394,12 +459,6 @@
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('x/point/export', {
        ...this.queryParams
      }, `point_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>