Bladeren bron

修改文件时,文件名问题

wukai 2 jaren geleden
bovenliggende
commit
7808a41e3a
2 gewijzigde bestanden met toevoegingen van 889 en 892 verwijderingen
  1. 23 25
      src/components/FileUpload/index.vue
  2. 866 867
      src/views1/File/Individual/IndividualView.vue

+ 23 - 25
src/components/FileUpload/index.vue

@@ -1,19 +1,9 @@
 <template>
   <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="fileUpload"
-    >
+    {{ residueNum }}
+    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit"
+      :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false"
+      :headers="headers" class="upload-file-uploader" ref="fileUpload">
       <!-- 上传按钮 -->
       <el-button size="mini" type="primary">选取文件</el-button>
       <!-- 上传提示 -->
@@ -60,12 +50,16 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc","docx", "xls","xlsx", "ppt", "txt", "pdf","gz"],
+      default: () => ["doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf", "gz"],
     },
     // 是否显示提示
     isShowTip: {
       type: Boolean,
       default: true
+    },
+    residueNum: {
+      type: String,
+      default: '0'
     }
   },
   data() {
@@ -74,10 +68,10 @@ export default {
       uploadList: [],
       uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传文件服务器地址
       headers: {
-        Authorization: "Bearer " + getToken(),
+        Authorization: "Bearer " + getToken()
       },
-      fileList: [],
-    };
+      fileList: []
+    }
   },
   watch: {
     value: {
@@ -89,14 +83,14 @@ export default {
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
-              item = { name: item, url: item };
+              item = { name: item, url: item }
             }
             item.uid = item.uid || new Date().getTime() + temp++;
-            return item;
-          });
+            return item
+          })
         } else {
-          this.fileList = [];
-          return [];
+          this.fileList = []
+          return []
         }
       },
       deep: true,
@@ -122,9 +116,10 @@ export default {
       //     return false;
       //   }
       // }
+      console.log((this.residueNum * 1024).toFixed(2), 'residue')
       // 校检文件大小
       if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        const isLt = file.size / 1024 / 1024 < (this.residueNum * 1024).toFixed(2)
         if (!isLt) {
           this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
           return false;
@@ -189,25 +184,28 @@ export default {
       return strs != '' ? strs.substr(0, strs.length - 1) : '';
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }

+ 866 - 867
src/views1/File/Individual/IndividualView.vue

@@ -5,16 +5,16 @@
         <el-row :gutter="20">
           <!--目录数据-->
           <el-col :span="4" :xs="24" class="main-left">
-            <div class="head-top">个人文档目录</div>
+            <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"
+              <el-tree ref="tree" :data="dirList" :props="defaultProps" :expand-on-click-node="false" 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"
+            <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true"
               label-width="68px" class="main-right-top">
               <el-form-item label="文件名称" prop="docName">
                 <el-input v-model="queryParams.docName" placeholder="请输入文件名称" clearable
@@ -23,7 +23,7 @@
               <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>
+                    :value="item.levelId" />
                 </el-select>
               </el-form-item>
               <el-form-item label="文件年份" prop="createYear">
@@ -31,21 +31,21 @@
                   @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-select v-model="queryParams.params.tagId" placeholder="请输入标签名称" style="width: 180px"
+                  @change="handleQuery">
                   <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-button icon="el-icon-refresh" size="mini" class="reset1" @click="resetQuery">重置</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-button v-hasPermi="['doc:info:add']" type="primary" plain icon="el-icon-plus" size="mini"
+                  @click="handleAdd">上传</el-button>
               </el-col>
               <!-- <el-col :span="1.5">
                 <el-button
@@ -82,13 +82,12 @@
                   >导出</el-button
                 >
               </el-col> -->
-              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+              <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
             </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 v-loading="loading" :data="infoList" class="main-right-table" height="calc(100vh * (630 / 1080))"
+              align="left" :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
+              <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" />
@@ -106,21 +105,21 @@
               </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-button v-if="checkLevel(scope.row, 'view')" size="mini" type="text" icon="el-icon-view"
+                    @click="handlePreview(scope.row)">预览</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-item v-if="checkLevel(scope.row, 'share')" icon="el-icon-view"
+                        @click.native="handleShare(scope.row)">分享</el-dropdown-item>
+                      <el-dropdown-item v-if="checkLevel(scope.row, 'download')" icon="el-icon-view"
+                        @click.native="handleDownload(scope.row)">下载</el-dropdown-item>
+                      <el-dropdown-item v-if="checkLevel(scope.row, 'edit')" icon="el-icon-view"
+                        @click.native="handleEdit(scope.row)">在线编辑</el-dropdown-item>
+                      <el-dropdown-item v-if="checkLevel(scope.row, 'modify')" v-hasPermi="['doc:info:edit']"
+                        icon="el-icon-edit" @click.native="handleUpdate(scope.row)">修改</el-dropdown-item>
+                      <el-dropdown-item v-if="checkLevel(scope.row, 'del')" v-hasPermi="['doc:info:remove']"
+                        icon="el-icon-delete" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </template>
@@ -137,7 +136,7 @@
           <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" />
+              <file-upload :residueNum="residueNum" v-model="form.docPath" />
             </el-form-item>
             <el-form-item label="文件目录" prop="dirId">
               <treeselect v-model="form.dirId" :options="dirList" :normalizer="normalizer" placeholder="请选择文件目录" />
@@ -148,17 +147,16 @@
             <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>
+                  :value="item.levelId" />
               </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"
+              <el-tag v-for="tag in dynamicTags" :key="tag" 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-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" size="small"
+                maxlength="5" placeholder="最多输入五个字" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
               <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
             </el-form-item>
             <el-form-item label="文件标签" color="red">
@@ -177,23 +175,22 @@
         </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 v-if="preview" class="dhk">
+          <video v-if="vid1" :src="vid" controls />
+          <audio v-if="aud1" :src="aud" controls />
 
-          <div class="image-container" v-if="img1">
-            <el-image :src="imgg" ref="imageRef" style="max-width: 100%" @mousewheel.prevent="gunlun" />
+          <div v-if="img1" class="image-container">
+            <el-image ref="imageRef" :src="imgg" 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 icon="el-icon-refresh-left" title="向左旋转" @click="rotate(-90)" />
+              <el-button icon="el-icon-refresh-right" title="向右旋转" @click="rotate(90)" />
+              <el-button icon="el-icon-zoom-in" title="放大" @click="scale(0.1)" />
+              <el-button icon="el-icon-zoom-out" title="缩小" @click="scale(-0.1)" />
             </el-button-group>
           </div>
           <el-button class="gb" icon="el-icon-close" circle @click="gb" />
         </div>
 
-
       </div>
     </div>
 
@@ -201,892 +198,894 @@
 </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 {
-    listDir,
-    getDir,
-    delDir,
-    addDir,
-    updateDir,
-    personalList,
-  } 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: [
-          // { name: '十四大', id: 0 },
-          // { name: '领导讲话', id: 1 },
-          // { name: '会议精神', id: 2 },
-          // { name: '党章', id: 3 },
-          // { name: '212专案', id: 4 }
-        ],
-
-        //选择标签
-        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})`;
+import '@/styles1/element-ui1.scss'
+
+import {
+  listTag
+} from '@/api/doc/tag.js'
+
+import {
+  listInfo,
+  getInfo,
+  delInfo,
+  addInfo,
+  updateInfo
+} from '@/api/doc/info'
+import {
+  listDir,
+  getDir,
+  delDir,
+  addDir,
+  updateDir,
+  personalList
+} from '@/api/doc/dir'
+import {
+  listLevel
+} from '@/api/doc/level'
+import { getPersonalSpace } from '@/api/doc/space'
+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: [
+        // { name: '十四大', id: 0 },
+        // { name: '领导讲话', id: 1 },
+        // { name: '会议精神', id: 2 },
+        // { name: '党章', id: 3 },
+        // { name: '212专案', id: 4 }
+      ],
+
+      // 选择标签
+      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
         }
       },
-
-
-      //预览图片的旋转
-      rotate(angle) {
-        this.rotationAngle += angle;
-        const image = this.$refs.imageRef.$el.querySelector("img");
-        image.style.transform = `rotate(${this.rotationAngle}deg)`;
-        console.log(image.style.transform);
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: 'children',
+        label: 'dirName',
+        id: 'dirId'
       },
-      //预览图片的缩放
-      scale(delta) {
-        this.scalePercentage += delta;
-        const image = this.$refs.imageRef.$el.querySelector("img");
-        image.style.transform = `scale(${this.scalePercentage})`;
+      // 表单校验
+      rules: {
+        docName: [{
+          required: true,
+          message: '文件名称不能为空',
+          trigger: 'blur'
+        }],
+        dirId: [{
+          required: true,
+          message: '文件目录不能为空',
+          trigger: 'blur'
+        }],
+        docLevel: [{
+          required: true,
+          message: '文件级别不能为空',
+          trigger: 'blur'
+        }]
       },
+      residueNum: '0'
+    }
+  },
+
+  watch: {
+    'form.docPath': {
+      handler(path, old) {
+        if (!this.form.docName && path && path.lastIndexOf('/') > -1) {
+          const name = path.slice(path.lastIndexOf('/') + 1)
+          this.form.docName = name.split('_')[0]
+        }
+      }
+    }
+  },
+  created() {
+    this.dirTree()
+  },
+  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})`
+      }
+    },
 
-      // 预览关闭
-      gb() {
-        this.preview = false;
-      },
+    // 预览图片的旋转
+    rotate(angle) {
+      this.rotationAngle += angle
+      const image = this.$refs.imageRef.$el.querySelector('img')
+      image.style.transform = `rotate(${this.rotationAngle}deg)`
+      console.log(image.style.transform)
+    },
+    // 预览图片的缩放
+    scale(delta) {
+      this.scalePercentage += delta
+      const image = this.$refs.imageRef.$el.querySelector('img')
+      image.style.transform = `scale(${this.scalePercentage})`
+    },
 
-      //选择标签关闭
-      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);
-      },
+    // 预览关闭
+    gb() {
+      this.preview = false
+    },
 
-      showInput() {
-        if (this.dynamicTags.length >= 5) {
-          this.inputVisible = false;
-          alert("标签数不允许超过五个")
-        } else {
-          this.inputVisible = true;
-          this.$nextTick((_) => {
-            this.$refs.saveTagInput.$refs.input.focus();
-          });
+    // 选择标签关闭
+    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)
+    },
 
-      },
-      //固定的标签
-      handleInputConfirm1(tag) {
-        if (this.dynamicTags.indexOf(tag.tagName) == -1) {
-          this.dynamicTags.push(
-            tag.tagName
-          );
-          this.form.tagList.push({
-            tagId: tag.tagId,
-            tagName: tag.tagName,
-          });
-        }
+    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()
-        };
+      if (this.dynamicTags.length > 5) {
+        alert('标签数不允许超过五个')
+        this.dynamicTags.pop()
+      }
+    },
+    // 自定义标签
+    handleInputConfirm() {
+      const 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()
+      }
+    },
 
-      },
-      //自定义标签
-      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) {
+      this.$router.push('/home/file/individual/share/user/' + row.docId)
+    },
+    /** 下载按钮操作*/
+    handleDownload(row) {
+      location.href = row.docPath
+    },
 
-      /** 转换目录信息数据结构 */
-      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) {
-        this.$router.push("/home/file/individual/share/user/" + row.docId);
-      },
-      /**下载按钮操作*/
-      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);
+    },
 
-      //预览
-      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;
+    // 在线编辑
+    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
+      personalList().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) {
+      try {
+        const obj = this.levelOptions.find((item) => item.levelId == value)
+        return obj.levelName
+      } catch (e) { }
+    },
+    /** 根据文档级别显示数据*/
+    checkLevel(row, role) {
+      try {
+        const obj = this.levelOptions.find(
+          (item) => item.levelId == row.docLevel
+        )
+        if (obj.levelRole.indexOf(role) != -1) {
+          return true
         } 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);
+          return false
         }
-        // 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;
-        personalList().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) {
-        try {
-          const obj = this.levelOptions.find((item) => item.levelId == value);
-          return obj.levelName;
-        } catch (e) {}
-      },
-      /**根据文档级别显示数据*/
-      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;
-        });
-      },
+      } 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() {
-        // const para = {
-        //   tagId: queryParams.params.tagId,
-        // }
-        // this.queryParams.params = para;
-        // console.log(this.queryParams);
-
-        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 = "添加文件基本信息";
-        // this.dynamicTags=[];
+    // 取消按钮
+    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() {
+      // const para = {
+      //   tagId: queryParams.params.tagId,
+      // }
+      // this.queryParams.params = para;
+      // console.log(this.queryParams);
+
+      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 = '添加文件基本信息'
+      getPersonalSpace({}).then(res => {
+        this.residueNum = (res.data.spaceCap - res.data.usedCap).toFixed(2).toString()
+        console.log(this.residueNum, 'resss')
+      })
+      // this.dynamicTags=[];
+      // console.log(this.dynamicTags);
+    },
+    /** 修改按钮操作 */
+    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)
         // console.log(this.dynamicTags);
-      },
-      /** 修改按钮操作 */
-      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);
-          this.form.dirId=this.dirList[0].dirId;
-        });
-      },
-      /** 提交按钮 */
-      submitForm() {
-        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();
-              });
-            }
-          }
-        });
-
-        // console.log(this.dynamicTags.length);
         // console.log(this.form);
-        // console.log(this.dynamicTags);
-
-      },
-      /** 删除按钮操作 */
-      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`;
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      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()
+            })
+          }
         }
+      })
+
+      // console.log(this.dynamicTags.length);
+      // console.log(this.form);
+      // console.log(this.dynamicTags);
+    },
+    /** 删除按钮操作 */
+    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 {
+.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));
-      margin-top: calc(100vh * (35 / 1080));
+      padding: 0;
+    }
 
-      .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 * (25 / 1080));
       }
 
-      .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 * (25 / 1080));
-        }
-
-        //左边下拉菜单
-        .head-container {
-          margin-top: -5px;
-        }
+      //左边下拉菜单
+      .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 * (25 / 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 {
+      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 * (25 / 1080));
+      }
 
-        .main-right-table {
-          background: transparent;
-          color: #7ea4c8ff;
-        }
+      .main-right-top {
+        height: calc(100vh * (60 / 1080));
+        margin-top: calc(100vw * (25 / 1920));
 
-        //表格底部
-        .pagination-container {
-          width: calc(100vw * (1540 / 1920));
-          height: calc(100vh * (50 / 1080));
+        .reset1 {
+          color: #2e8aecff;
           background: transparent;
-          padding: 0 !important;
-          margin: 0;
-          margin-left: calc(100vw * (20 / 1920));
-          margin-top: calc(100vh * (10 / 1080));
+          border: 1px solid #2e8aecff;
         }
       }
-    }
 
-    //预览弹窗
-    .dhk {
-      width: calc(100vw * (1200 / 1920));
-      height: calc(100vh * (850 / 1080));
-      // background: salmon;
-      background: #0F1540FF;
-      position: absolute;
-      top: 10%;
-      left: 20%;
-      z-index: 99;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .gb {
-        position: absolute;
-        top: 0;
-        right: 0;
+      .mb8 {
+        margin-top: 20px;
       }
 
-      video {
-        width: calc(100vw * (1440 / 1920));
-        height: calc(100vh * (810 / 1080));
+      .main-right-table {
+        background: transparent;
+        color: #7ea4c8ff;
       }
 
-      .el-image {
-        width: calc(100vw * (960 / 1920));
-        height: calc(100vh * (720 / 1080));
-      }
-
-      .el-button-group {
-        position: absolute;
-        bottom: 0;
-        left: 35%;
+      //表格底部
+      .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));
       }
     }
   }
 
-  //标签按钮
-  ::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;
-  }
+  //预览弹窗
+  .dhk {
+    width: calc(100vw * (1200 / 1920));
+    height: calc(100vh * (850 / 1080));
+    // background: salmon;
+    background: #0F1540FF;
+    position: absolute;
+    top: 10%;
+    left: 20%;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .gb {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
 
-  ::v-deep .el-form-item--small .el-form-item__content {
-    width: calc(100vw * (220 / 1920));
-  }
+    video {
+      width: calc(100vw * (1440 / 1920));
+      height: calc(100vh * (810 / 1080));
+    }
 
-  //右边顶部标签搜索
-  ::v-deep .el-select>.el-input {
-    width: calc(100vw * (180 / 1920));
-  }
+    .el-image {
+      width: calc(100vw * (960 / 1920));
+      height: calc(100vh * (720 / 1080));
+    }
 
-  //右边表格线条隐藏
-  ::v-deep .el-table::before {
-    height: 0;
+    .el-button-group {
+      position: absolute;
+      bottom: 0;
+      left: 35%;
+    }
   }
-
-  //table样式
-  ::v-deep .el-table {
+}
+
+//标签按钮
+::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 {
+  overflow: auto;
+}
+
+::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-dialog__headerbtn {
+  top: calc(100vh * (45 / 1080));
+  right: calc(100vw * (20 / 1920));
+  font-size: 20px;
+}
+
+::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__body {
+    // width: calc(100vw * (620 / 1920)) ;
+    height: calc(100vh * (780 / 1080));
+    margin-top: calc(100vh * (50 / 1080));
+    margin-bottom: calc(100vh * (20 / 1080));
+    padding-right: 50px;
     overflow: auto;
+    // background: salmon;
   }
 
-  ::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;
+  .el-dialog__header {
+    padding-bottom: 0;
   }
 
-  //新增/修改弹窗样式
-  ::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 {
+  .el-upload__tip {
+    font-size: 12px;
     color: #006c9aff;
+    margin-top: 0px;
   }
 
-  //上传弹窗位置高度
-  ::v-deep .el-dialog:not(.is-fullscreen) {
-    margin-top: 1vh !important;
-  }
-
-  ::v-deep .el-form {
-    height: calc(100vh * (800 / 1080));
+  .el-upload-list__item {
+    margin: 0;
   }
 
-  //弹窗底部按钮的位置
-  ::v-deep .el-dialog__footer {
-    padding: 0;
-    
+  .el-tag+.el-tag {
+    margin-left: 10px;
   }
 
-  //弹窗关闭按钮
-  ::v-deep .el-dialog__headerbtn {
-    top: calc(100vh * (45 / 1080));
-    right: calc(100vw * (20 / 1920));
-    font-size: 20px;
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 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__body {
-      // width: calc(100vw * (620 / 1920)) ;
-      height: calc(100vh * (780 / 1080));
-      margin-top: calc(100vh * (50 / 1080));
-      margin-bottom: calc(100vh * (20 / 1080));
-      padding-right: 50px;
-      overflow: auto;
-      // background: salmon;
-    }
-
-    .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;
-    }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
   }
-</style>
+}
+</style>