lzga-ui/src/views1/File/Part/PartView.vue

<template>
  <div class="containe">
    <div class="main">
      <div class="app-container">
        <el-row :gutter="20">
          <!--目录数据-->
          <el-col :span="4" :xs="24" class="main-left">
            <div class="head-top">部门结构</div>
            <div class="head-container">
              <el-tree
                :data="dirList"
                :props="defaultProps"
                :expand-on-click-node="false"
                ref="tree"
                node-key="id"
                default-expand-all
                highlight-current
                @node-click="handleNodeClick"
              />
            </div>
          </el-col>
          <!--文件数据-->
          <el-col :span="20" :xs="24" class="main-right">
            <p>部门文档</p>
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
              label-width="68px"
              class="main-right-top"
            >
              <el-form-item label="文件名称" prop="docName">
                <el-input
                  v-model="queryParams.docName"
                  placeholder="请输入文件名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="文件级别" prop="docLevel">
                <el-select v-model="queryParams.docLevel" placeholder="请选择文件级别" @change="handleQuery">
              <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
                :value="item.levelId"></el-option>
            </el-select>
              </el-form-item>
              <el-form-item label="文件年份" prop="createYear">
                <el-input
                  v-model="queryParams.createYear"
                  placeholder="请输入文件创建年份"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="标签" prop="params">
                <el-select
                  v-model="queryParams.params.tagId"
                  placeholder="请输入标签名称"
                  @change="handleQuery"
                  style="width: 180px"
                >
                  <el-option
                    v-for="item in tags"
                    :key="item.tagId"
                    :label="item.tagName"
                    :value="item.tagId"
                  />
                </el-select>
              </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"
                  class="reset1"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                  v-hasPermi="['doc:info:add']"
                  >上传</el-button
                >
              </el-col>
              <!-- <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate"
                  v-hasPermi="['doc:info:edit']"
                  >修改</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['doc:info:remove']"
                  >删除</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport"
                  v-hasPermi="['doc:info:export']"
                  >导出</el-button
                >
              </el-col> -->
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
              ></right-toolbar>
            </el-row>

            <el-table
              v-loading="loading"
              :data="infoList"
              @selection-change="handleSelectionChange"
              class="main-right-table"
              height="calc(100vh * (630 / 1080))"
              align="left"
              :header-cell-style="{'text-align':'center'}"
            >
            <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="文件名称" align="left" prop="docName" />
              <el-table-column label="文件大小" align="center" prop="docSize" :formatter="fileSizeData" width="100" />
              <el-table-column label="修改时间" align="center" prop="updateTime" />
              <el-table-column label="文件级别" align="center" prop="docLevel" :formatter="fileLevelData" width="90" />
              <el-table-column label="文件年份" align="center" prop="createYear" width="90" />
              <el-table-column label="文件类型" align="center" prop="docType" />
              <el-table-column label="标签" align="center" prop="tagName" width="250">
                <template slot-scope="scope">
                  <div v-if="scope.row.tagList != []">
                    <el-tag v-for="item in scope.row.tagList" :key="item.tagId">
                      {{ item.tagName }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handlePreview(scope.row)"
                    v-if="checkLevel(scope.row, 'view')"
                    >预览</el-button>
                <el-dropdown size="mini">
                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-view" @click.native="handleShare(scope.row)" v-if="checkLevel(scope.row, 'share')">分享</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-view" @click.native="handleDownload(scope.row)" v-if="checkLevel(scope.row, 'download')">下载</el-dropdown-item>
                  <el-dropdown-item   icon="el-icon-view" @click.native="handleEdit(scope.row)" v-if="checkLevel(scope.row, 'edit')">在线编辑</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-edit" @click.native="handleUpdate(scope.row)" v-hasPermi="['doc:info:edit']"
                    v-if="checkLevel(scope.row, 'modify')">修改</el-dropdown-item>
                  <el-dropdown-item   icon="el-icon-delete" @click.native="handleDelete(scope.row)" v-hasPermi="['doc:info:remove']" v-if="checkLevel(scope.row, 'del')">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleShare(scope.row)"
                    v-if="checkLevel(scope.row, 'share')"
                    >分享</el-button
                  > -->
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleDownload(scope.row)"
                    v-if="checkLevel(scope.row, 'download')"
                    >下载</el-button
                  > -->
                  
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleEdit(scope.row)"
                    v-if="checkLevel(scope.row, 'edit')"
                    >在线编辑</el-button
                  > -->
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['doc:info:edit']"
                    v-if="checkLevel(scope.row, 'modify')"
                    >修改</el-button
                  > -->
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['doc:info:remove']"
                    v-if="checkLevel(scope.row, 'del')"
                    >删除</el-button
                  > -->
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-col>
        </el-row>

        <!-- 添加或修改文件基本信息对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="500px"
          append-to-body
          custom-class="el-dialog5"
        >
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="" prop="docPath">
              <!-- <el-input v-model="form.docPath" placeholder="请输入文件路径" /> -->
              <file-upload v-model="form.docPath" />
            </el-form-item>
            <el-form-item label="文件目录" prop="dirId">
              <treeselect
                v-model="form.dirId"
                :options="dirList"
                :normalizer="normalizer"
                placeholder="请选择文件目录"
              />
            </el-form-item>
            <el-form-item label="文件名称" prop="docName">
              <el-input v-model="form.docName" placeholder="请输入文件名称" />
            </el-form-item>
            <el-form-item label="文件级别" prop="docLevel">
              <el-select v-model="form.docLevel" placeholder="请选择文件级别">
                <el-option
                  v-for="item in levelOptions"
                  :key="item.levelId"
                  :label="item.levelName"
                  :value="item.levelId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择标签(最多5个)" prop="tagName" color="red">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                maxlength="5"
                placeholder="最多输入五个字"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
                >添加标签</el-button
              >
            </el-form-item>
            <el-form-item label="文件标签" color="red">
              <el-tag
                v-for="tag in tags"
                :key="tag.tagName"
                :type="tag.type"
                @click="handleInputConfirm1(tag)"
              >
                {{ tag.tagName }}
              </el-tag>
            </el-form-item>
            <el-form-item label="文件描述">
              <el-input
                v-model="form.docDesc"
                type="textarea"
                placeholder="请输入内容"
              />
            </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>
          </div>
        </el-dialog>


               <!-- 预览对话框 -->
      <div class="dhk" v-if="preview">
       <video :src="vid" controls v-if="vid1"></video>
       <audio :src="aud" controls v-if="aud1"></audio>

       <div class="image-container" v-if="img1">
        <el-image :src="imgg" ref="imageRef" style="max-width: 100%" @mousewheel.prevent="gunlun" />
        <el-button-group>
          <el-button icon="el-icon-refresh-left" @click="rotate(-90)" title="向左旋转"></el-button>
              <el-button icon="el-icon-refresh-right" @click="rotate(90)" title="向右旋转"></el-button>
              <el-button icon="el-icon-zoom-in" @click="scale(0.1)" title="放大"></el-button>
              <el-button icon="el-icon-zoom-out" @click="scale(-0.1)" title="缩小"></el-button>
    </el-button-group>
  </div>
        <el-button class="gb" icon="el-icon-close" circle @click="gb" />
      </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import "@/styles1/element-ui1.scss";

import { listTag } from "@/api/doc/tag.js";

import {
    listInfo,
    getInfo,
    delInfo,
    addInfo,
    updateInfo
  } from "@/api/doc/info";
  import {
    deptList
  } from "@/api/doc/dir";
  import {
    listLevel
  } from "@/api/doc/level";


import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Info",
  components: {
    Treeselect,
  },
  data() {
    return {
    //预览图片的旋转缩放
    scalePercentage: 1,
    rotationAngle: 0,
    
    // 预览界面
    preview:false,
    
    //视频路径和显示
    vid:"",
    vid1:false,
    //音频路径和显示
    aud:"",
    aud1:false,
    //图片路径和显示
    imgg:"",
    img1:false,
     //标签列表
     tags: [],

      //选择标签
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 文件基本信息表格数据
      infoList: [],
      //目录ID
      dirId: undefined,
      //目录数据
      dirList: undefined,
      //文件等级数据
      levelOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        docName: null,
        docLevel: null,
        createYear: null,
        params: {
          tagId: null,
        },
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "dirName",
        id: "dirId",
      },
      // 表单校验
      rules: {
        docName: [
          {
            required: true,
            message: "文件名称不能为空",
            trigger: "blur",
          },
        ],
        dirId: [
          {
            required: true,
            message: "文件目录不能为空",
            trigger: "blur",
          },
        ],
        docLevel: [
          {
            required: true,
            message: "文件级别不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.dirTree();
  },
  watch: {
    "form.docPath": function (path, old) {
      if (path && path.lastIndexOf("/") > -1) {
        let name = path.slice(path.lastIndexOf("/") + 1);
        this.form.docName = name.split("_")[0];
      }
    },
  },
  methods: {
     // 滚轮滑动放大缩小
     gunlun(e) {
        const image = this.$refs.imageRef.$el.querySelector("img");   
        if (e.deltaY > 0) {
        // console.log("鼠标向下滚动，图片缩小");
        this.scalePercentage -= 0.1;
        image.style.transform = `scale(${this.scalePercentage})`;
      } else {
        // console.log("鼠标向上滚动，图片放大");
        this.scalePercentage += 0.1;
        image.style.transform = `scale(${this.scalePercentage})`;
      }
      },


      //预览图片的缩放
      rotate(angle) {
      this.rotationAngle += angle;
      const image = this.$refs.imageRef.$el.querySelector("img");
      image.style.transform = `rotate(${this.rotationAngle}deg)`;
    },
      //预览图片的旋转
    scale(delta) {
      this.scalePercentage += delta;
      const image = this.$refs.imageRef.$el.querySelector("img");
      image.style.transform = `scale(${this.scalePercentage})`;
    },

    // 预览关闭
    gb(){
    this.preview=false;
    },
    //选择标签关闭
    handleClose(tag) {
      this.form.tagList.map((i, index) => {
        if (tag == i.tagName) {
          this.form.tagList.splice(index, 1);
        }
      });
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      if(this.dynamicTags.length>=5){
        this.inputVisible = false;
        alert("标签数不允许超过五个")
      }else{
        this.inputVisible = true;
        this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
      }

    },
    //固定的标签
    handleInputConfirm1(tag) {
      if(this.dynamicTags.indexOf(tag.tagName)==-1){
        this.dynamicTags.push(
        tag.tagName
      );
      this.form.tagList.push({
        tagId: tag.tagId,
        tagName: tag.tagName,
      });
      }

      if(this.dynamicTags.length>5){
        alert("标签数不允许超过五个")
        this.dynamicTags.pop()
      };
    
    },
    //自定义标签
    handleInputConfirm() {
      let inputValue = this.inputValue;
      // if (inputValue) {
      //   this.dynamicTags.push(inputValue);
      // }
      // this.inputVisible = false;
      // this.inputValue = "";
      // this.form.tagList.push({
      //   tagName:inputValue,
      // });

      //查询输入的标签在固定标签里是否存在
      var Newtags = this.tags.find((value) => value.tagName == inputValue);
      // console.log(a);
      //删除标签
    if(this.dynamicTags.indexOf(inputValue)!=-1){
      this.dynamicTags.pop()
      this.form.tagList.pop()
    }
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
      //判断输入的标签在固定标签里是否存在，存在则换成固定标签
      if (Newtags) {
        this.form.tagList.push({
          tagId: Newtags.tagId,
          tagName: Newtags.tagName,
        });
      } else {
        this.form.tagList.push({
          tagName: inputValue,
        });
      }
      // console.log(this.form);
      if(this.dynamicTags.length>5){
        alert("标签数不允许超过五个")
        this.dynamicTags.pop()
      };
    },

    /** 转换目录信息数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.dirId,
        label: node.dirName,
        children: node.children,
      };
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.dirId = data.dirId;
      this.queryParams.dirId = this.dirId;
      this.queryParams.searchValue = this.spaceId;
      this.handleQuery();
    },
    //分享
    handleShare(row) {
     //图片后缀名
     var tp= ['jpeg','tiff','raw','bmp','gif','png' , 'jpg'];
      //音频后缀名
      var yp=['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
      //视频后缀名
      var sp= ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm' , 'rmvb'];

      //判断后缀名
      if(sp.some(item=>item==row.docType)){
        this.preview=true;
        this.vid1=true;
        this.aud1=false;
        this.img1=false;
        this.vid=row.docPath;
      }else if(yp.some(item=>item==row.docType)){
        this.preview=true;
        this.aud1=true;
        this.vid1=false;
        this.img1=false;
        this.aud=row.docPath;
      }else if(tp.some(item=>item==row.docType)){
        this.preview=true;
        this.aud1=false;
        this.vid1=false;
        this.img1=true;
        this.imgg=row.docPath;
      }
      else{
        row.isEdit = false;
          this.$tab.openPage(
            window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
              '_blank'),
      );
      }
    },
    /**下载按钮操作*/
    handleDownload(row) {
      location.href = row.docPath;
    },
    //预览
    handlePreview(row) {
        console.log(row);
        // console.log( this.$route.meta.title);
        // row.isEdit = false;
        // this.$tab.openPage(
        //   // "文件[" + row.docName + "]预览",
        // document.title = row.docName,
        //   // window.open("/individual/Pre/user/" + row.docId, '_blank'),
        //   // row
        // );

        //图片后缀名
        var pictures = ['jpeg', 'tiff', 'raw', 'bmp', 'gif', 'png', 'jpg'];
        //音频后缀名
        var audios = ['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
        //视频后缀名
        var videos = ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm', 'rmvb'];

        //判断后缀名
        if (videos.some(item => item == row.docType)) {
          this.preview = true;
          this.vid1 = true;
          this.aud1 = false;
          this.img1 = false;
          this.vid = row.docPath;
        } else if (audios.some(item => item == row.docType)) {
          this.preview = true;
          this.aud1 = true;
          this.vid1 = false;
          this.img1 = false;
          this.aud = row.docPath;
        } else if (pictures.some(item => item == row.docType)) {
          this.preview = true;
          this.aud1 = false;
          this.vid1 = false;
          this.img1 = true;
          this.imgg = row.docPath;
        } else {
          row.isEdit = false;
          this.$tab.openPage(
            window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
              '_blank'),
            // window.open("/individual/Pre/user/" + row.docId +"/title/"+ row.docName, '_blank'),
          );
          // console.log(111);
        }
        // console.log(row.docPath);
        // console.log(vid);
      },

      //在线编辑
      handleEdit(row) {
        row.isEdit = true;
        this.$tab.openPage(
          window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
            '_blank')
        );
      },
    //先获取左边目录树，拿到目录ID和spaceId才能查询
    dirTree() {
        this.loading = true;
        deptList().then(response => {
          this.dirId = response.data[0].dirId;
          this.spaceId = response.data[0].spaceId;
          this.dirList = this.handleTree(response.data, "dirId");

          this.queryParams.dirId = this.dirId;
          this.queryParams.searchValue = this.spaceId;
          this.getList();
          //获取文件级别数据
          listLevel().then(response => {
            this.levelOptions = response.rows;
          });
          this.loading = false;
            //标签数据
           listTag().then((res) => {
          this.tags = res.rows;
        });
        });
      },
    /**处理文档级别数据*/
    fileLevelData(row, col, value) {
      const obj = this.levelOptions.find((item) => item.levelId == value);
      return obj.levelName;
    },
    /**根据文档级别显示数据*/
    checkLevel(row, role) {
      try {
        const obj = this.levelOptions.find(
          (item) => item.levelId == row.docLevel
        );
        if (obj.levelRole.indexOf(role) != -1) {
          return true;
        } else {
          return false;
        }
      } catch (e) {}
    },
    /** 查询文件基本信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then((response) => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        docId: null,
        dirId: this.dirId,
        docName: null,
        docType: null,
        docSize: null,
        classifyId: null,
        docDesc: null,
        docPath: null,
        docLevel: null,
        allowEdit: null,
        docOf: null,
        owner: null,
        createYear: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        isDel: null,
        searchValue: this.spaceId,
        tagList:[],
      };
      this.resetForm("form");
      this.dynamicTags=[]
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.dirId = this.dirId;
      this.queryParams.searchValue = this.spaceId;
      this.queryParams.params.tagId = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.docId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加文件基本信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const docId = row.docId || this.ids;
      getInfo(docId, row.createYear).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改文件基本信息";
        this.dynamicTags = this.form.tagList.map(item=>item.tagName);
      });
    },
    /** 提交按钮 */
    submitForm() {
      // console.log(this.dynamicTags);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.docId != null) {
            updateInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const docIds = row.docId || this.ids;
      this.$modal
        .confirm('是否确认删除文件基本信息编号为"' + docIds + '"的数据项？')
        .then(function () {
          return delInfo(docIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "doc/info/export",
        {
          ...this.queryParams,
        },
        `info_${new Date().getTime()}.xlsx`
      );
    },
    /**格式化文件大小数据*/
    fileSizeData(row, col, value) {
      const KB = 1;
      const MB = KB * 1024;
      const GB = MB * 1024;
      if (value < MB) {
        return `${(value / KB).toFixed(2)} KB`;
      } else if (value < GB) {
        return `${(value / MB).toFixed(2)} MB`;
      } else {
        return `${(value / GB).toFixed(2)} GB`;
      }
    },
  },
};
</script>
  
<style scoped lang='scss'>
.containe {
  color: #7ea4c8;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  padding-left: calc(100vw * (20 / 1920));
  // .header {
  //   width: calc(100vw * (300 / 1920));
  //   height: calc(100vh * (22 / 1080));
  //   margin-top: calc(100vh * (20 / 1080));
  //   margin-bottom: calc(100vh * (20 / 1080));
  //   display: flex;
  //   align-items: center;
  //   img {
  //     width: calc(100vw * (16 / 1920));
  //     height: calc(100vh * (16 / 1080));
  //     border: 1px dashed grey;
  //     margin-left: 3px;
  //     margin-right: 3px;
  //   }
  //   .top1 {
  //     color: #2e8aecff;
  //   }
  // }
  // .title {
  //   height: calc(100vh * (22 / 1080));
  //   margin-top: calc(100vh * (20 / 1080));
  //   margin-bottom: calc(100vh * (20 / 1080));
  //   color: #ffffffff;
  //   font-size: 0.16rem;
  //   font-weight: bold;
  //   line-height: calc(100vh * (22 / 1080));
  // }
  .main {
    width: calc(100vw * (1876 / 1920));
    height: calc(100vh * (930 / 1080));
    margin-top: calc(100vh * (35 / 1080));
    .app-container {
      width: calc(100vw * (1876 / 1920));
      height: calc(100vh * (930 / 1080));
      padding: 0;
    }
    .main-left {
      width: calc(100vw * (260 / 1920));
      height: calc(100vh * (930 / 1080));
      margin-right: calc(100vw * (20 / 1920));
      margin-left: calc(100vw * (10 / 1920));
      background: url(../../../assets/img/Group-609.png);
      background-size: calc(100vw * (260 / 1920)) calc(100vh * (930 / 1080));
      .head-top {
        color: #ffffffff;
        font-size: 0.2rem;
        padding-left: calc(100vw * (15 / 1920));
        padding-top: calc(100vh * (20 / 1080));
      }
      //左边下拉菜单
      .head-container {
        margin-top: -5px;
      }
    }
    .main-right {
      width: calc(100vw * (1600 / 1920));
      height: calc(100vh * (930 / 1080));
      background: url(../../../assets/img/Group-610.png);
      background-size: calc(100vw * (1600 / 1920)) calc(100vh * (930 / 1080));
      p {
        color: #ffffffff;
        font-size: 0.16rem;
        padding-left: calc(100vw * (15 / 1920));
        padding-top: calc(100vh * (18 / 1080));
      }
      .main-right-top {
        height: calc(100vh * (60 / 1080));
        margin-top: calc(100vw * (25 / 1920));
        .reset1 {
          color: #2e8aecff;
          background: transparent;
          border: 1px solid #2E8AECFF;
        }
      }
      .mb8 {
        margin-top: 20px;
      }
      .main-right-table {
        // width: calc(100vw * (1540 / 1920));
        height: calc(100vh * (600 / 1080));
        // margin-left: calc(100vw * (20 / 1920));
        background: transparent;
        color: #7ea4c8ff;
      }
      //表格底部
      .pagination-container {
        width: calc(100vw * (1540 / 1920));
        height: calc(100vh * (50 / 1080));
        background: transparent;
        padding: 0 !important;
        margin: 0;
        margin-left: calc(100vw * (20 / 1920));
        margin-top: calc(100vh * (10 / 1080));
      }
    }
  }
  //预览弹窗
  .dhk{
    width: calc(100vw * (1500 / 1920));
    height: calc(100vh * (850 / 1080));
    // background: salmon;
    background: #0F1540FF;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    .gb{
    position: absolute;
    top: 0;
    right: 0; 
    }
    video{
     width: calc(100vw * (1440 / 1920));
     height: calc(100vh * (810 / 1080)); 
    }
    .el-image{
     width: calc(100vw * (960 / 1920));
     height: calc(100vh * (720 / 1080)); 
    }
    .el-button-group {
        position: absolute;
        bottom: 0;
        left: 35%;
      }
  }
}
//标签按钮
::v-deep .el-tag {
  color: #DF9439FF;
  border: 1px solid #FF9839FF;
  background: #BBA99240;
  margin-left: 3px;
  margin-bottom: 3px;
  height: calc(100vh * (35 / 1080));
  line-height: calc(100vh * (35 / 1080));
}
//左边下拉菜单样式
::v-deep .el-tree {
  width: calc(100vw * (200 / 1920));
  margin-top: calc(100vh * (30 / 1080));
  background: transparent;
  color: #7ea4c8ff;
}
::v-deep .el-tree-node {
  width: calc(100vw * (232 / 1920));
}
//悬停时的样式
::v-deep .el-tree-node__content:hover {
  background: #293667ff;
}
//右边顶部字体样式
::v-deep .el-form-item__label {
  color: #2e8aecff;
}
//右边顶部搜索框样式
::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #01d1ffff;
  color: #ffffffcc;
}
::v-deep .el-form-item--small .el-form-item__content {
  width: calc(100vw * (220 / 1920));
}
//右边顶部标签搜索
::v-deep .el-select > .el-input {
    width: calc(100vw * (180 / 1920));
}
//右边表格线条隐藏
::v-deep .el-table::before {
  height: 0;
}
//table样式
::v-deep .el-table th {
  background: #016c9aa6;
  color: #2e8aec;
}
::v-deep .el-table tr {
  background: transparent;
}
::v-deep .el-table tbody tr:hover > td {
  background-color: #016c9a78 !important;
}
::v-deep .el-table td.el-table__cell {
  border-bottom: 1px solid #006c9aff;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #006c9aff;
}
//搜索刷新按钮颜色
::v-deep .el-button.is-circle {
  background: #006c9aff;
  color: white;
}
//按钮的样式
::v-deep .el-button--primary.is-plain,
.el-button--success.is-plain.is-disabled,
.el-button--danger.is-plain.is-disabled,
.el-button--warning.is-plain,
.el-button--success.is-plain,
.el-button--danger.is-plain {
  background-color: #002a5cff;
  border: none;
  color: #2e8aec;
}
//新增/修改弹窗样式
::v-deep .el-dialog__title {
  color: white;
}
::v-deep .el-dialog .el-form-item {
  margin-top: calc(100vw * (30 / 1920));
}
::v-deep .el-upload-list__item:hover {
  background: #002659ff;
}
//建议框样式
::v-deep .el-textarea__inner {
  background: transparent;
  resize: none;
}
//传文件的内容颜色
::v-deep .el-link.el-link--default {
  color: #006c9aff;
}
//上传弹窗位置高度
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 1vh !important;
}
::v-deep .el-form {
 height: calc(100vh * (800 / 1080));
}
//弹窗底部按钮的位置
::v-deep .el-dialog__footer {
  padding: 0;
}
::v-deep .el-dialog5 {
  width: calc(100vw * (800 / 1920)) !important;
  height: calc(100vh * (1050 / 1080)) !important;
  background: url(../../../assets/img/Group-585.png);
  background-size: calc(100vw * (800 / 1920)) calc(100vh * (1050 / 1080));
  .el-dialog__header {
    padding-bottom: 0;
  }
  .el-upload__tip {
    font-size: 12px;
    color: #006c9aff;
    margin-top: 0px;
  }
  .el-upload-list__item {
    margin: 0;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>