Merge remote-tracking branch 'origin/dev' into dev

src/api/doc/share1.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询文档分享列表
+export function listShare(query) {
+  return request({
+    url: '/doc/share/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询文档分享详细
+export function getShare(docId) {
+  return request({
+    url: '/doc/share/' + docId,
+    method: 'get'
+  })
+}
+
+// 新增文档分享
+export function addShare(data) {
+  return request({
+    url: '/doc/share',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改文档分享
+export function updateShare(data) {
+  return request({
+    url: '/doc/share',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除文档分享
+export function delShare(docId) {
+  return request({
+    url: '/doc/share/' + docId,
+    method: 'delete'
+  })
+}
+
+
+// 首页最近收到的文件
+export function delShare1(query) {
+  return request({
+    url: '/doc/share/receive',
+    method: 'get',
+    params: query
+  })
+}
+// 首页最近发送的文件
+export function delShare2(query) {
+  return request({
+    url: '/doc/share/send',
+    method: 'get',
+    params: query
+  })
+}

src/router/index.js

@@ -165,10 +165,6 @@ export const constantRoutes = [{
       ]
       },
       {
-        path: "/home/personal/classify",
-        component: () => import('@/views1/Personal/Classify/ClassifyView.vue')
-      },
-      {
         path: "/home/personal/space",
         component: () => import('@/views1/Personal/Space/SpaceView.vue')
       },

src/store/modules/permission.js

@@ -148,6 +148,7 @@ export const loadView = (view) => {
   }
 }
 export const loadView1 = (view) => {
+  // console.log(view);
   if (process.env.NODE_ENV === 'development') {
     return (resolve) => require([`@/views1/${view}`], resolve)
   } else {

src/views1/File/Part/PartView.vue

@@ -62,19 +62,19 @@
                 />
               </el-form-item>
               <el-form-item label="标签" prop="params">
-              <el-select
-               v-model="queryParams.params"
-               placeholder="请输入标签名称"
-               @change="handleQuery"
-               style="width: 180px"
-            >
-              <el-option
-              v-for="item in tags"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-              />
-            </el-select>
+                <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
@@ -183,14 +183,18 @@
                 prop="createYear"
                 width="90"
               />
-              <el-table-column label="标签" align="center" prop="tagName" width="250">
+              <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,index) in scope.row.tagList" :key="index">
-                  {{item.tagName}}
-                </el-tag>
-              </div>
-               
+                  <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
@@ -298,13 +302,6 @@
             <el-form-item label="文件名称" prop="docName">
               <el-input v-model="form.docName" placeholder="请输入文件名称" />
             </el-form-item>
-            <el-form-item label="文件描述">
-              <el-input
-                v-model="form.docDesc"
-                type="textarea"
-                placeholder="请输入内容"
-              />
-            </el-form-item>
             <el-form-item label="文件级别" prop="docLevel">
               <el-select v-model="form.docLevel" placeholder="请选择文件级别">
                 <el-option
@@ -333,6 +330,8 @@
                 size="small"
                 @keyup.enter.native="handleInputConfirm"
                 @blur="handleInputConfirm"
+                maxlength="5"
+                placeholder="最多输入五个字"
               >
               </el-input>
               <el-button
@@ -345,12 +344,20 @@
             </el-form-item>
             <el-form-item label="文件标签" color="red">
               <el-tag
-                 v-for="tag in tags"
-                 :key="tag.name"
-                 :type="tag.type"
-                 @click="handleInputConfirm1(tag)">
-                 {{ tag.name }}
-            </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">
@@ -384,6 +391,8 @@
 <script>
 import "@/styles1/element-ui1.scss";
 
+import { listTag } from "@/api/doc/tag.js";
+
 import {
     listInfo,
     getInfo,
@@ -425,14 +434,8 @@ export default {
     //图片路径和显示
     imgg:"",
     img1:false,
-    //标签列表
-    tags: [
-          { name: '十四大', id:0 },
-          { name: '领导讲话', id:1 },
-          { name: '会议精神', id:2 },
-          { name: '党章', id:3 },
-          { name: '212专案', id:4 }
-        ],
+     //标签列表
+     tags: [],
 
       //选择标签
       dynamicTags: [],
@@ -470,6 +473,9 @@ export default {
         docName: null,
         docLevel: null,
         createYear: null,
+        params: {
+          tagId: null,
+        },
       },
       // 表单参数
       form: {},
@@ -533,47 +539,87 @@ export default {
     gb(){
     this.a=false;
     },
-    //选择标签
+    //选择标签关闭
     handleClose(tag) {
-      this.form.tagList.map((i,index)=>{
-       if(tag==i.tagName){
-        this.form.tagList.splice(index,1)
-       }   
-      })
+      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() {
-      this.inputVisible = true;
-      this.$nextTick((_) => {
+      if(this.dynamicTags.length>=5){
+        this.inputVisible = false;
+        alert("标签数不允许超过五个")
+      }else{
+        this.inputVisible = true;
+        this.$nextTick((_) => {
         this.$refs.saveTagInput.$refs.input.focus();
       });
+      }
+
     },
     //固定的标签
     handleInputConfirm1(tag) {
-      this.dynamicTags.push(
-      // {
-      //   tagId:tag.id,
-      //   tagName:tag.name,
-      tag.name
-      // }
-      );  
+      if(this.dynamicTags.indexOf(tag.tagName)==-1){
+        this.dynamicTags.push(
+        tag.tagName
+      );
       this.form.tagList.push({
-        tagId:tag.id,
-        tagName:tag.name,
-      });  
+        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 = "";
-      this.form.tagList.push({
-        tagName: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()
+      };
     },
 
     /** 转换目录信息数据结构 */
@@ -663,6 +709,10 @@ export default {
             this.levelOptions = response.rows;
           });
           this.loading = false;
+            //标签数据
+           listTag().then((res) => {
+          this.tags = res.rows;
+        });
         });
       },
     /**处理文档级别数据*/
@@ -909,6 +959,9 @@ export default {
         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;
       }

src/views1/HomeView.vue

@@ -35,9 +35,9 @@
               <span class="nav1">
                 <img :src="srcIndex == '2' ? icoUrl[2]['doc1'] : icoUrl[2]['doc2']" /> </span>文档管理
             </template>
-            <template v-for="(item, index) in  docMenus">
+            <li v-for="(item, index) in  docMenus" :key="index">
               <el-menu-item :index="item.path">{{item.meta.title}}</el-menu-item>
-            </template>
+            </li>
             <!-- <li v-for="(item, index) in arr" :key="index"> -->
             <!-- <el-menu-item index="/home/file/part">部门文档</el-menu-item>
             <el-menu-item index="/home/doc/public">公共文档</el-menu-item>
@@ -56,14 +56,15 @@
                   " />
                 <!-- <img src="../assets/img/nav-person1.png"> --> </span>个人设置
             </template>
-            <template v-for="(item, index) in  settingMenus">
-              <el-menu-item :index="item.path">{{item.meta.title}}</el-menu-item>
-            </template>
+            <li v-for="(item, index) in  settingMenus" :key="index">
+              <el-menu-item 
+              :index="item.path">{{item.meta.title}}
+              </el-menu-item>
+            </li>
             <!-- <el-menu-item index="/home/personal/Partspace">部门存储空间</el-menu-item>
             <el-menu-item index="/home/personal/Publispace">公共存储空间</el-menu-item>
             <el-menu-item index="/home/personal/Storagespace">分组存储空间</el-menu-item>
             <el-menu-item index="/home/personal/space">个人存储空间</el-menu-item>
-            <el-menu-item index="/home/personal/classify">个人文档分类</el-menu-item>
             <el-menu-item index="/home/personal/modify">登录密码修改</el-menu-item>
             <el-menu-item index="/home/personal/identificat">文字识别</el-menu-item> -->
           </el-submenu>
@@ -118,11 +119,6 @@
 </template>
 
 <script>
-  // import page from "./Page/PageView";
-  // import retrieval from "./Retrieval/RetrievalView";
-  // import file from "./File/FileView";
-  // import personal from "./Personal/PersonalView";
-  // import system from "./System/SystemView";
   import {
     constantRoutes
   } from "@/router";
@@ -162,13 +158,6 @@
         ]
       };
     },
-    // components: {
-    //   page,
-    //   retrieval,
-    //   file,
-    //   personal,
-    //   system
-    // },
     created() {
       console.log(this.routers)
 
@@ -205,11 +194,11 @@
       },
     },
     computed: {
-
       // 文档菜单
       docMenus() {
         let docMenus = [];
         this.routers.map((menu) => {
+          console.log(menu,'sdfsfsfdsf');
           if (menu.path === "/home-doc") {
             docMenus = menu.children;
           }
@@ -220,6 +209,7 @@
       settingMenus() {
         let settingMenus = [];
         this.routers.map((menu) => {
+          // console.log(menu);
           if (menu.path === "/home-setting") {
             settingMenus = menu.children;
           }

src/views1/Page/PageView.vue

@@ -158,69 +158,366 @@
           <h3>最近收到的文件</h3>
         </div>
         <el-table
-          :data="tableData"
+          :data="tableData1"
           stripe
           style="width: 99%"
           class="left-main"
           height="calc(100vh * (230 / 1080))"
         >
-          <el-table-column prop="name" label="文件名" width="220">
+          <el-table-column prop="docName" label="文件名" width="180">
           </el-table-column>
-          <el-table-column prop="date" label="收到时间" width="180">
+          <el-table-column prop="user" label="发件人" width="140">
           </el-table-column>
-          <el-table-column prop="address" label="文件类型" width="120"> 
+          <el-table-column prop="createTime" label="收到时间" width="160">
           </el-table-column>
-          <el-table-column prop="addrecc" label="文件位置"> 
+          <el-table-column prop="docType" label="文件类型" width="100">
+          </el-table-column>
+          <el-table-column prop="isSecret" label="机密" width="50">
+          </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="isSecretRole(scope.row)"
+                >预览</el-button
+              >
+            </template>
           </el-table-column>
         </el-table>
       </div>
       <div class="right">
-        <div class="left-top">
+        <div class="right-top">
           <h3>最近发送的文件</h3>
         </div>
+        <el-table
+          :data="tableData2"
+          stripe
+          style="width: 99%"
+          class="right-main"
+          height="calc(100vh * (230 / 1080))"
+        >
+          <el-table-column prop="docName" label="文件名" width="200">
+          </el-table-column>
+          <el-table-column prop="createTime" label="收到时间" width="180">
+          </el-table-column>
+          <el-table-column prop="docType" label="文件类型" width="120">
+          </el-table-column>
+          <el-table-column prop="isSecret" label="机密" width="50">
+          </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="isSecretRole(scope.row)"
+                >预览</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 预览对话框 -->
+    <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%" />
+        <el-button-group>
+          <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
+          <el-button
+            icon="el-icon-refresh-right"
+            @click="rotate(90)"
+          ></el-button>
+          <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
+          <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
+        </el-button-group>
       </div>
+      <el-button class="gb" icon="el-icon-close" circle @click="gb" />
+    </div>
+
+    <!-- 是否机密文件 -->
+    <div class="jm" v-if="check">
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        label-width="100px"
+        class="login-form"
+      >
+        <el-form-item label="手机号/邮箱" prop="username">
+          <el-input
+            type="password"
+            v-model="loginForm.username"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            type="password"
+            v-model="loginForm.password"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button
+            size="medium"
+            type="primary"
+            style="width: 30%"
+            @click="submitForm"
+          >
+            提交
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-button class="gb1" icon="el-icon-close" circle @click="gb1" />
     </div>
   </div>
 </template>
 
 <script>
+import Cookies from "js-cookie";
+
+import { delShare1, delShare2 } from "@/api/doc/share1";
 export default {
   data() {
     return {
+      //机密文件的账号密码内容
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+      },
+      //机密文件的账号密码验证规则
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" },
+        ],
+      },
+
       //底部左边表格数据
-      tableData: [
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-      ],
+      tableData1: [],
+      //底部右边表格数据
+      tableData2: [],
+      //预览图片的旋转
+      scalePercentage: 1,
+      //预览图片的缩放
+      rotationAngle: 0,
+
+      // 预览界面
+      preview: false,
+
+      // 机密界面
+      check: false,
+
+      //视频路径和显示
+      vid: "",
+      vid1: false,
+      //音频路径和显示
+      aud: "",
+      aud1: false,
+      //图片路径和显示
+      imgg: "",
+      img1: false,
+      // 临时保存当前点击行 row
+      currentRow: {},
     };
   },
-  methods:{
+  methods: {
+    //底部表格数据
+    getList() {
+      //左边表格
+      delShare1(this.queryParams).then((response) => {
+        // console.log(response.rows,'111111111');
+        // 给定义的列表空数组赋值
+        this.tableData1 = response.rows;
+        //改变是否机密的值
+        var newisSecret = this.tableData1.map((item) => item.isSecret);
+        // console.log(a);
+        newisSecret = response.rows.map(
+          (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
+        );
+        // console.log(newisSecret);
+      });
+      //右边边表格
+      delShare2(this.queryParams).then((response) => {
+        // console.log(response.rows,'111111111');
+        // 给定义的列表空数组赋值
+        this.tableData2 = response.rows;
+        //改变是否机密的值
+        var newisSecret = this.tableData2.map((item) => item.isSecret);
+        // console.log(a);
+        newisSecret = response.rows.map(
+          (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
+        );
+        // console.log(newisSecret);
+      });
+    },
+    //预览图片的缩放
+    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})`;
+    },
 
- },
+    // 检验关闭
+    gb1() {
+      this.check = false;
+    },
+    // 预览关闭
+    gb() {
+      this.preview = false;
+    },
+
+    // 是否机密
+    isSecretRole(row) {
+      console.log(`row=${row}`);
+      if (row.isSecret == "是") {
+        this.check = true;
+        this.currentRow = row;
+      }
+    },
 
+    //预览
+    handlePreview() {
+      const previewRow = this.currentRow;
+      // console.log("handlePreview started");
+
+      //图片后缀名
+      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 == previewRow.docType)) {
+        this.preview = true;
+        this.vid1 = true;
+        this.aud1 = false;
+        this.img1 = false;
+        this.vid = previewRow.docPath;
+      } else if (audios.some((item) => item == previewRow.docType)) {
+        this.preview = true;
+        this.aud1 = true;
+        this.vid1 = false;
+        this.img1 = false;
+        this.aud = previewRow.docPath;
+      } else if (pictures.some((item) => item == previewRow.docType)) {
+        this.preview = true;
+        this.aud1 = false;
+        this.vid1 = false;
+        this.img1 = true;
+        this.imgg = previewRow.docPath;
+      } else {
+        this.$tab.openPage(
+          window.open("/individual/Pre/user/" + previewRow.docId, "_blank"),
+          localStorage.setItem("docName", previewRow.docName)
+        );
+      }
+    },
 
+    //验证账号密码
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
+    },
+
+    //验证账号密码
+    submitForm(row) {
+      // this.$refs.loginForm.validate((valid) => {
+      //   if (valid) {
+      //     login(this.loginForm.username, this.loginForm.password).then(
+
+      //     );
+      //   }
+      // });
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+          }
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              // 登录成功
+              this.currentLoginStatus = 1;
+              // 关闭登录界面
+              this.check = false;
+              // console.log("登录成功", "关闭登录界面");
+
+              // console.log("预览界面");
+              this.handlePreview(row);
+            })
+            .catch(() => {
+              this.currentLoginStatus = 0;
+            });
+        }
+      });
+    },
+  },
+
+  mounted() {
+    this.getList();
+  },
 };
 </script>
 
@@ -242,19 +539,19 @@ export default {
     .left,
     .right {
       //滚动条样式
-::-webkit-scrollbar {
-  width: 3.5px;
-}
-::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0);
-}
-::-webkit-scrollbar-thumb {
-  background: #2e8aec;
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #2e8aec;
-}
+      ::-webkit-scrollbar {
+        width: 3.5px;
+      }
+      ::-webkit-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #2e8aec;
+        border-radius: 3px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #2e8aec;
+      }
       width: calc(100vw * (395 / 1920));
       height: calc(100vh * (568 / 1080));
       background: url(../../assets/img/main_BG_left.png);
@@ -479,15 +776,14 @@ export default {
     padding-right: calc(100vw * (34 / 1920));
     display: flex;
     justify-content: space-between;
-    .left,
-    .right {
+    .left {
       width: calc(100vw * (920 / 1920));
       height: calc(100vh * (304 / 1080));
       background: url(../../assets/img/footer.png);
       background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
       padding-left: 10px;
       .left-top {
-        width: calc(100vw * (760 / 1920));
+        width: calc(100vw * (880 / 1920));
         height: calc(100vh * (40 / 1080));
         font-size: 16px;
         font-weight: 400;
@@ -503,26 +799,125 @@ export default {
       }
       .left-main {
         margin-top: calc(100vh * (8 / 1080));
-        color: #7EA4C8FF;
+        color: #7ea4c8ff;
         background: transparent;
         height: calc(100vh * (230 / 1080));
         overflow: auto;
         font-size: 0.14rem;
       }
-       //滚动条样式
-       ::-webkit-scrollbar {
-          width: 3.5px;
-        }
-        ::-webkit-scrollbar-track {
-          background-color: rgba(0, 0, 0, 0);
-        }
-        ::-webkit-scrollbar-thumb {
-          background: #2e8aec;
-          border-radius: 3px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background: #2e8aec;
+      //滚动条样式
+      ::-webkit-scrollbar {
+        width: 3.5px;
+      }
+      ::-webkit-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #2e8aec;
+        border-radius: 3px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #2e8aec;
+      }
+    }
+    .right {
+      width: calc(100vw * (920 / 1920));
+      height: calc(100vh * (304 / 1080));
+      background: url(../../assets/img/footer.png);
+      background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
+      padding-left: 10px;
+      .right-top {
+        width: calc(100vw * (900 / 1920));
+        height: calc(100vh * (40 / 1080));
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 10px;
+        background: url(../../assets/img/main_left_decorate.png);
+        background-size: cover;
+        h3 {
+          padding-top: 3px;
+          padding-left: 10px;
+          margin: 0;
         }
+      }
+      .right-main {
+        margin-top: calc(100vh * (8 / 1080));
+        color: #7ea4c8ff;
+        background: transparent;
+        height: calc(100vh * (230 / 1080));
+        overflow: auto;
+        font-size: 0.14rem;
+      }
+      //滚动条样式
+      ::-webkit-scrollbar {
+        width: 3.5px;
+      }
+      ::-webkit-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #2e8aec;
+        border-radius: 3px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #2e8aec;
+      }
+    }
+  }
+  .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;
+      top: 10%;
+      right: 1%;
+    }
+  }
+
+  .jm {
+    width: calc(100vw * (530 / 1920));
+    height: calc(100vh * (370 / 1080));
+    // background: salmon;
+    background: #0f1540ff;
+    position: absolute;
+    top: 25%;
+    left: 35%;
+    z-index: 99;
+    display: flex;
+    // justify-content: center;
+    align-items: center;
+    .gb1 {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    .el-button-group {
+      position: absolute;
+      top: 10%;
+      right: 1%;
     }
   }
 }
@@ -532,13 +927,17 @@ export default {
 
 //table样式
 ::v-deep .el-table th {
-  background: #016C9AA6;
-  color: #2E8AECFF;
+  background: #016c9aa6;
+  color: #2e8aecff;
 }
 ::v-deep .el-table tr {
   background: transparent;
 }
-::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell  {
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
   background: transparent;
 }
 //table顶部白线消失处理
@@ -554,9 +953,9 @@ export default {
   width: 0;
 }
 //tr下面边框
-::v-deep  .el-table td.el-table__cell {
-    border-bottom: 1px solid #083B61FF;
-    padding: 8px 0;
+::v-deep .el-table td.el-table__cell {
+  border-bottom: 1px solid #083b61ff;
+  padding: 8px 0;
 }
 ::v-deep .el-table tbody tr:hover > td {
   background-color: #016c9a78 !important;

src/views1/Personal/Classify/ClassifyView.vue

@@ -1,911 +0,0 @@
-<template>
-    <div class="containe">
-      <div class="header">
-        <span>个人设置</span>
-        <img src="../../../assets/img/chevron-down.png" alt="" />
-        <img src="../../../assets/img/slash.png" alt="" />
-        <span class="top1">个人文档分类</span>
-        <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
-        <img src="../../../assets/img/slash.png" alt="" />
-      </div>
-      <div class="title">个人文档分类</div>
-      <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="deptOptions"
-                  :props="defaultProps"
-                  :expand-on-click-node="false"
-                  :filter-node-method="filterNode"
-                  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"
-                  class="main-right-form"
-                >
-                  <el-form-item label="用户名称" prop="userName">
-                    <el-input
-                      v-model="queryParams.userName"
-                      placeholder="请输入用户名称"
-                      clearable
-                      style="width: 240px"
-                      @keyup.enter.native="handleQuery"
-                    />
-                  </el-form-item>
-                  <el-form-item label="手机号码" prop="phonenumber">
-                    <el-input
-                      v-model="queryParams.phonenumber"
-                      placeholder="请输入手机号码"
-                      clearable
-                      style="width: 240px"
-                      @keyup.enter.native="handleQuery"
-                    />
-                  </el-form-item>
-                  <el-form-item label="状态" prop="status">
-                    <el-select
-                      v-model="queryParams.status"
-                      placeholder="用户状态"
-                      clearable
-                      style="width: 240px"
-                    >
-                      <el-option
-                        v-for="dict in dict.type.sys_normal_disable"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                      />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="创建时间">
-                    <el-date-picker
-                      v-model="dateRange"
-                      style="width: 240px"
-                      value-format="yyyy-MM-dd"
-                      type="daterange"
-                      range-separator="-"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期"
-                    ></el-date-picker>
-                  </el-form-item>
-                  <el-form-item>
-                    <el-button
-                      type="primary"
-                      icon="el-icon-search"
-                      size="mini"
-                      @click="handleQuery"
-                      >搜索</el-button
-                    >
-                    <el-button
-                      icon="el-icon-refresh"
-                      size="mini"
-                      @click="resetQuery"
-                      >重置</el-button
-                    >
-                  </el-form-item>
-                </el-form>
-    
-                <el-row
-                  :gutter="10"
-                  class="mb8"
-                  style="
-                    margin-left: calc(100vw * (20 / 1920));
-                    padding-right: calc(100vw * (20 / 1920));
-                  "
-                >
-                  <el-col :span="1.5">
-                    <el-button
-                      type="primary"
-                      plain
-                      icon="el-icon-plus"
-                      size="mini"
-                      @click="handleAdd"
-                      v-hasPermi="['system:user: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="['system:user: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="['system:user:remove']"
-                      >删除</el-button
-                    >
-                  </el-col>
-                  <el-col :span="1.5">
-                    <el-button
-                      type="info"
-                      plain
-                      icon="el-icon-upload2"
-                      size="mini"
-                      @click="handleImport"
-                      v-hasPermi="['system:user:import']"
-                      >导入</el-button
-                    >
-                  </el-col>
-                  <el-col :span="1.5">
-                    <el-button
-                      type="warning"
-                      plain
-                      icon="el-icon-download"
-                      size="mini"
-                      @click="handleExport"
-                      v-hasPermi="['system:user:export']"
-                      >导出</el-button
-                    >
-                  </el-col>
-                  <right-toolbar
-                    :showSearch.sync="showSearch"
-                    @queryTable="getList"
-                    :columns="columns"
-                  ></right-toolbar>
-                </el-row>
-    
-                <el-table
-                  v-loading="loading"
-                  :data="userList"
-                  @selection-change="handleSelectionChange"
-                  class="main-right-table"
-                >
-                  <el-table-column type="selection" width="50" align="center" />
-                <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-                <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-                <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-                <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-                <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" widmain-right-tableth="120" />
-                <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-                  <template slot-scope="scope">
-                    <el-switch
-                      v-model="scope.row.status"
-                      active-value="0"
-                      inactive-value="1"
-                      @change="handleStatusChange(scope.row)"
-                    ></el-switch>
-                  </template>
-                </el-table-column>
-                <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-                  <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  label="操作"
-                  align="center"
-                  width="160"
-                  class-name="small-padding fixed-width"
-                >
-                  <template slot-scope="scope" v-if="scope.row.userId !== 1">
-                    <el-button
-                      size="mini"
-                      type="text"
-                      icon="el-icon-edit"
-                      @click="handleUpdate(scope.row)"
-                      v-hasPermi="['system:user:edit']"
-                    >修改</el-button>
-                    <el-button
-                      size="mini"
-                      type="text"
-                      icon="el-icon-delete"
-                      @click="handleDelete(scope.row)"
-                      v-hasPermi="['system:user:remove']"
-                    >删除</el-button>
-                    <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                      <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                      <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                          v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
-                        <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                          v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown>
-                  </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="600px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="用户昵称" prop="nickName">
-                    <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="归属部门" prop="deptId">
-                    <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="手机号码" prop="phonenumber">
-                    <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="邮箱" prop="email">
-                    <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-                    <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-                    <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="用户性别">
-                    <el-select v-model="form.sex" placeholder="请选择性别">
-                      <el-option
-                        v-for="dict in dict.type.sys_user_sex"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="状态">
-                    <el-radio-group v-model="form.status">
-                      <el-radio
-                        v-for="dict in dict.type.sys_normal_disable"
-                        :key="dict.value"
-                        :label="dict.value"
-                      >{{dict.label}}</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="12">
-                  <el-form-item label="岗位">
-                    <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
-                      <el-option
-                        v-for="item in postOptions"
-                        :key="item.postId"
-                        :label="item.postName"
-                        :value="item.postId"
-                        :disabled="item.status == 1"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="角色">
-                    <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
-                      <el-option
-                        v-for="item in roleOptions"
-                        :key="item.roleId"
-                        :label="item.roleName"
-                        :value="item.roleId"
-                        :disabled="item.status == 1"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item label="备注">
-                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </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>
-  
-          <!-- 用户导入对话框 -->
-          <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-            <el-upload
-              ref="upload"
-              :limit="1"
-              accept=".xlsx, .xls"
-              :headers="upload.headers"
-              :action="upload.url + '?updateSupport=' + upload.updateSupport"
-              :disabled="upload.isUploading"
-              :on-progress="handleFileUploadProgress"
-              :on-success="handleFileSuccess"
-              :auto-upload="false"
-              drag
-            >
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-              <div class="el-upload__tip text-center" slot="tip">
-                <div class="el-upload__tip" slot="tip">
-                  <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
-                </div>
-                <span>仅允许导入xls、xlsx格式文件。</span>
-                <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
-              </div>
-            </el-upload>
-            <div slot="footer" class="dialog-footer">
-              <el-button type="primary" @click="submitFileForm">确 定</el-button>
-              <el-button @click="upload.open = false">取 消</el-button>
-            </div>
-          </el-dialog>
-        </div>
-      </div>
-    </div>
-  </template>
-    
-    <script>
-  import {
-    listUser,
-    getUser,
-    delUser,
-    addUser,
-    updateUser,
-    resetUserPwd,
-    changeUserStatus,
-    deptTreeSelect,
-  } from "@/api/system/user";
-  import { getToken } from "@/utils/auth";
-  import Treeselect from "@riophae/vue-treeselect";
-  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-  
-  export default {
-    name: "User",
-    dicts: ["sys_normal_disable", "sys_user_sex"],
-    components: { Treeselect },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 用户表格数据
-        userList: null,
-        // 弹出层标题
-        title: "",
-        // 部门树选项
-        deptOptions: undefined,
-        // 是否显示弹出层
-        open: false,
-        // 部门名称
-        deptName: undefined,
-        // 默认密码
-        initPassword: undefined,
-        // 日期范围
-        dateRange: [],
-        // 岗位选项
-        postOptions: [],
-        // 角色选项
-        roleOptions: [],
-        // 表单参数
-        form: {},
-        defaultProps: {
-          children: "children",
-          label: "label",
-        },
-        // 用户导入参数
-        upload: {
-          // 是否显示弹出层（用户导入）
-          open: false,
-          // 弹出层标题（用户导入）
-          title: "",
-          // 是否禁用上传
-          isUploading: false,
-          // 是否更新已经存在的用户数据
-          updateSupport: 0,
-          // 设置上传的请求头部
-          headers: { Authorization: "Bearer " + getToken() },
-          // 上传的地址
-          url: process.env.VUE_APP_BASE_API + "/system/user/importData",
-        },
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          userName: undefined,
-          phonenumber: undefined,
-          status: undefined,
-          deptId: undefined,
-        },
-        // 列信息
-        columns: [
-          { key: 0, label: `用户编号`, visible: true },
-          { key: 1, label: `用户名称`, visible: true },
-          { key: 2, label: `用户昵称`, visible: true },
-          { key: 3, label: `部门`, visible: true },
-          { key: 4, label: `手机号码`, visible: true },
-          { key: 5, label: `状态`, visible: true },
-          { key: 6, label: `创建时间`, visible: true },
-        ],
-        // 表单校验
-        rules: {
-          userName: [
-            { required: true, message: "用户名称不能为空", trigger: "blur" },
-            {
-              min: 2,
-              max: 20,
-              message: "用户名称长度必须介于 2 和 20 之间",
-              trigger: "blur",
-            },
-          ],
-          nickName: [
-            { required: true, message: "用户昵称不能为空", trigger: "blur" },
-          ],
-          password: [
-            { required: true, message: "用户密码不能为空", trigger: "blur" },
-            {
-              min: 5,
-              max: 20,
-              message: "用户密码长度必须介于 5 和 20 之间",
-              trigger: "blur",
-            },
-          ],
-          email: [
-            {
-              type: "email",
-              message: "请输入正确的邮箱地址",
-              trigger: ["blur", "change"],
-            },
-          ],
-          phonenumber: [
-            {
-              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-              message: "请输入正确的手机号码",
-              trigger: "blur",
-            },
-          ],
-        },
-      };
-    },
-    watch: {
-      // 根据名称筛选部门树
-      deptName(val) {
-        this.$refs.tree.filter(val);
-      },
-    },
-    created() {
-      this.getList();
-      this.getDeptTree();
-      this.getConfigKey("sys.user.initPassword").then((response) => {
-        this.initPassword = response.msg;
-      });
-    },
-    methods: {
-      /** 查询用户列表 */
-      getList() {
-        this.loading = true;
-        listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
-          (response) => {
-            this.userList = response.rows;
-            this.total = response.total;
-            this.loading = false;
-          }
-        );
-      },
-      /** 查询部门下拉树结构 */
-      getDeptTree() {
-        deptTreeSelect().then((response) => {
-          this.deptOptions = response.data;
-        });
-      },
-      // 筛选节点
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.label.indexOf(value) !== -1;
-      },
-      // 节点单击事件
-      handleNodeClick(data) {
-        this.queryParams.deptId = data.id;
-        this.handleQuery();
-      },
-      // 用户状态修改
-      handleStatusChange(row) {
-        let text = row.status === "0" ? "启用" : "停用";
-        this.$modal
-          .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
-          .then(function () {
-            return changeUserStatus(row.userId, row.status);
-          })
-          .then(() => {
-            this.$modal.msgSuccess(text + "成功");
-          })
-          .catch(function () {
-            row.status = row.status === "0" ? "1" : "0";
-          });
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          userId: undefined,
-          deptId: undefined,
-          userName: undefined,
-          nickName: undefined,
-          password: undefined,
-          phonenumber: undefined,
-          email: undefined,
-          sex: undefined,
-          status: "0",
-          remark: undefined,
-          postIds: [],
-          roleIds: [],
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.dateRange = [];
-        this.resetForm("queryForm");
-        this.queryParams.deptId = undefined;
-        this.$refs.tree.setCurrentKey(null);
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map((item) => item.userId);
-        this.single = selection.length != 1;
-        this.multiple = !selection.length;
-      },
-      // 更多操作触发
-      handleCommand(command, row) {
-        switch (command) {
-          case "handleResetPwd":
-            this.handleResetPwd(row);
-            break;
-          case "handleAuthRole":
-            this.handleAuthRole(row);
-            break;
-          default:
-            break;
-        }
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
-        getUser().then((response) => {
-          this.postOptions = response.posts;
-          this.roleOptions = response.roles;
-          this.open = true;
-          this.title = "添加用户";
-          this.form.password = this.initPassword;
-        });
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const userId = row.userId || this.ids;
-        getUser(userId).then((response) => {
-          this.form = response.data;
-          this.postOptions = response.posts;
-          this.roleOptions = response.roles;
-          this.$set(this.form, "postIds", response.postIds);
-          this.$set(this.form, "roleIds", response.roleIds);
-          this.open = true;
-          this.title = "修改用户";
-          this.form.password = "";
-        });
-      },
-      /** 重置密码按钮操作 */
-      handleResetPwd(row) {
-        this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          closeOnClickModal: false,
-          inputPattern: /^.{5,20}$/,
-          inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
-        })
-          .then(({ value }) => {
-            resetUserPwd(row.userId, value).then((response) => {
-              this.$modal.msgSuccess("修改成功，新密码是：" + value);
-            });
-          })
-          .catch(() => {});
-      },
-      /** 分配角色操作 */
-      handleAuthRole: function (row) {
-        const userId = row.userId;
-        this.$router.push("/system/user-auth/role/" + userId);
-      },
-      /** 提交按钮 */
-      submitForm: function () {
-        this.$refs["form"].validate((valid) => {
-          if (valid) {
-            if (this.form.userId != undefined) {
-              updateUser(this.form).then((response) => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              addUser(this.form).then((response) => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
-            }
-          }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const userIds = row.userId || this.ids;
-        this.$modal
-          .confirm(
-            '删除用户时会删除该用户的存储空间!是否确认删除 登录名为"' +
-              row.userName +
-              '"的用户？'
-          )
-          .then(function () {
-            return delUser(userIds);
-          })
-          .then(() => {
-            this.getList();
-            this.$modal.msgSuccess("删除成功");
-          })
-          .catch(() => {});
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.download(
-          "system/user/export",
-          {
-            ...this.queryParams,
-          },
-          `user_${new Date().getTime()}.xlsx`
-        );
-      },
-      /** 导入按钮操作 */
-      handleImport() {
-        this.upload.title = "用户导入";
-        this.upload.open = true;
-      },
-      /** 下载模板操作 */
-      importTemplate() {
-        this.download(
-          "system/user/importTemplate",
-          {},
-          `user_template_${new Date().getTime()}.xlsx`
-        );
-      },
-      // 文件上传中处理
-      handleFileUploadProgress(event, file, fileList) {
-        this.upload.isUploading = true;
-      },
-      // 文件上传成功处理
-      handleFileSuccess(response, file, fileList) {
-        this.upload.open = false;
-        this.upload.isUploading = false;
-        this.$refs.upload.clearFiles();
-        this.$alert(
-          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
-            response.msg +
-            "</div>",
-          "导入结果",
-          { dangerouslyUseHTMLString: true }
-        );
-        this.getList();
-      },
-      // 提交上传文件
-      submitFileForm() {
-        this.$refs.upload.submit();
-      },
-    },
-  };
-  </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 * (880 / 1080));
-      .app-container {
-        width: calc(100vw * (1876 / 1920));
-        height: calc(100vh * (880 / 1080));
-        padding: 0;
-      }
-      .main-left {
-        width: calc(100vw * (260 / 1920));
-        height: calc(100vh * (880 / 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 * (880 / 1080));
-        .head-top {
-          color: #ffffffff;
-          font-size: 0.2rem;
-          padding-left: calc(100vw * (15 / 1920));
-          padding-top: calc(100vh * (18 / 1080));
-        }
-      }
-      .main-right {
-        width: calc(100vw * (1600 / 1920));
-        height: calc(100vh * (880 / 1080));
-        background: url(../../../assets/img/Group-610.png);
-        background-size: calc(100vw * (1600 / 1920)) calc(100vh * (880 / 1080));
-        p {
-          color: #ffffffff;
-          font-size: 0.16rem;
-          padding-left: calc(100vw * (15 / 1920));
-          padding-top: calc(100vh * (18 / 1080));
-        }
-        .main-right-form {
-          width: calc(100vw * (1540 / 1920));
-          height: calc(100vh * (150 / 1080));
-          margin-top: calc(100vh * (20 / 1080));
-          margin-left: calc(100vw * (20 / 1920));
-        }
-        .main-right-table {
-          width: calc(100vw * (1540 / 1920));
-          height: calc(100vh * (520 / 1080));
-          margin-left: calc(100vw * (20 / 1920));
-          background: transparent;
-        }
-        .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-tree {
-    width: calc(100vw * (200 / 1920));
-    margin-top: calc(100vh * (30 / 1080));
-    background: transparent;
-    color: #7ea4c8ff;
-  }
-  
-  ::v-deep .el-progress-bar__outer {
-    border-radius: 0;
-  }
-  ::v-deep .el-progress-bar__inner {
-    border-radius: 0;
-  }
-  ::v-deep [data-v-f3e82ab8] .el-tree {
-    margin-left: 0;
-  }
-  ::v-deep .el-tree-node {
-    width: calc(100vw * (232 / 1920));
-  }
-  ::v-deep .el-input__inner {
-    background-color: transparent;
-    border: 1px solid #01d1ffff;
-    color: #ffffffcc;
-  }
-  ::v-deep .el-form-item__label {
-    color: #2e8aecff;
-  }
-  ::v-deep .el-date-editor .el-range-input {
-    background: transparent;
-  }
-  ::v-deep .el-table {
-    background: transparent;
-  }
-  ::v-deep .el-pagination.is-background .btn-prev {
-    background: transparent;
-    border: 1px dashed grey;
-  }
-  ::v-deep .el-pagination.is-background .btn-next {
-    background: transparent;
-    border: 1px dashed grey;
-  }
-  ::v-deep .el-table tr {
-    background: transparent;
-  }
-  ::v-deep .el-table th {
-    background: transparent;
-  }
-  ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
-    color: #006C9AFF;
-  }
-  ::v-deep .el-breadcrumb__inner {
-    color: #006C9AFF;
-  }
-  ::v-deep .el-input__inner {
-    color: black;
-  }
-  </style>
-    

src/views1/Retrieval/RetrievalView.vue

@@ -11,40 +11,11 @@
         class="cen—top-img"
       />
     </div>
-    <!-- <div class="range">
-      <p class="range-p">文档范围：</p>
-      <ul class="range-ul">
-        <li>全部文档</li>
-        <li>公共文档</li>
-        <li>部门文档</li>
-        <li>个人文档</li>
-      </ul>
-    </div> -->
-    <!-- <div class="category">
-    <p class="range-p">文档分类：</p>
-      <ul class="range-ul">
-        <li>全部文档</li>
-        <li>公共文档</li>
-        <li>部门文档</li>
-        <li>个人文档</li>
-      </ul>
-    </div> -->
-    <!-- <div class="time">    
-    <span>时间选择：</span>
-    <el-checkbox-group v-model="checkList"> 
-    <el-checkbox label="不限"></el-checkbox>
-    <el-checkbox label="30天"></el-checkbox>
-    <el-checkbox label="7天"></el-checkbox>
-    <el-checkbox label="1天"></el-checkbox>
-    <el-date-picker
-      v-model="value1"
-      type="daterange"
-      range-separator="至"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期">
-    </el-date-picker>
-  </el-checkbox-group>
-    </div> -->
+    <div class="main">
+      <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+    <li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li>
+    </ul>
+    </div>
   </div>
 </template>
 
@@ -53,11 +24,14 @@
     data() {
       return {
         checkList: [],
-        value1: ''
+        value1: '',
+        count: 0,
       };
     },
     methods:{
-
+      load () {
+        this.count += 2
+      },
     }
   };
 
@@ -145,5 +119,11 @@
       }
     }
   }
+  .main{
+    width: calc(100vw * (1450/ 1920));
+    height: calc(100vh * (670 / 1080));
+    background: salmon;
+    margin-left: calc(100vw * (230 / 1920));
+  }
 }
 </style>