lzga-ui/src/views1/File/Individual/IndividualView.vue

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

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">上传</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange"
              class="main-right-table" height="calc(100vh * (630 / 1080))" align="left"
              :header-cell-style="{ 'text-align': 'center' }">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column label="文件名称" align="left" prop="docName" />
              <el-table-column label="文件大小" align="center" prop="docSize" :formatter="fileSizeData" width="100" />
              <el-table-column label="修改时间" align="center" prop="updateTime" />
              <el-table-column label="文件级别" align="center" prop="docLevel" :formatter="fileLevelData" width="90" />
              <el-table-column label="文件年份" align="center" prop="createYear" width="90" />
              <el-table-column label="文件类型" align="center" prop="docType" />
              <el-table-column label="标签" align="center" prop="tagName" width="250">
                <template slot-scope="scope">
                  <div v-if="scope.row.tagList != []">
                    <el-tag v-for="item in scope.row.tagList" :key="item.tagId">
                      {{ item.tagName }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view"
                    @click="handlePreview(scope.row)">预览</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)">分享</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-view"
                        @click.native="handleDownload(scope.row)">下载</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-view"
                        @click.native="handleEdit(scope.row)">在线编辑</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-edit"
                        @click.native="handleUpdate(scope.row)">修改</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-delete"
                        @click.native="handleDelete(scope.row)">删除</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="500px" append-to-body custom-class="el-dialog5">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="" prop="docPath">
              <!-- <el-input v-model="form.docPath" placeholder="请输入文件路径" /> -->
              <file-upload :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="请选择文件目录" />
            </el-form-item>
            <el-form-item label="文件名称" prop="docName">
              <el-input v-model="form.docName" placeholder="请输入文件名称" />
            </el-form-item>
            <el-form-item label="文件级别" prop="docLevel">
              <el-select v-model="form.docLevel" placeholder="请选择文件级别">
                <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
                  :value="item.levelId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择标签(最多5个)" prop="tagName" color="red">
              <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" maxlength="5" placeholder="最多输入五个字">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
            </el-form-item>
            <el-form-item label="文件标签" color="red">
              <el-tag v-for="tag in tags" :key="tag.tagName" :type="tag.type" @click="handleInputConfirm1(tag)">
                {{ tag.tagName }}
              </el-tag>
            </el-form-item>
            <el-form-item label="文件描述">
              <el-input v-model="form.docDesc" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

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

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

  </div>
</template>

<script>
  import "@/styles1/element-ui1.scss";

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

  import {
    listInfo,
    getInfo,
    delInfo,
    addInfo,
    updateInfo,
    getYears,
    officeType
  } 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,
        //文件上传大小限制
        residueNum: null,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 文件基本信息表格数据
        infoList: [],
        //目录ID
        dirId: undefined,
        //目录数据
        dirList: undefined,
        //文件等级数据
        levelOptions: [],
        yearOptions: [],
        // 弹出层标题
        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 (!this.form.docName && path && path.lastIndexOf("/") > -1) {
          let name = path.slice(path.lastIndexOf("/") + 1);
          this.form.docName = name.split("_")[0];
        }
      },
    },
    methods: {
      // 滚轮滑动放大缩小
      gunlun(e) {
        const image = this.$refs.imageRef.$el.querySelector("img");
        if (e.deltaY > 0) {
          // console.log("鼠标向下滚动，图片缩小");
          this.scalePercentage -= 0.1;
          image.style.transform = `scale(${this.scalePercentage})`;
        } else {
          // console.log("鼠标向上滚动，图片放大");
          this.scalePercentage += 0.1;
          image.style.transform = `scale(${this.scalePercentage})`;
        }
      },
      //预览图片的旋转
      rotate(angle) {
        this.rotationAngle += angle;
        const image = this.$refs.imageRef.$el.querySelector("img");
        image.style.transform = `rotate(${this.rotationAngle}deg)`;
        console.log(image.style.transform);
      },
      //预览图片的缩放
      scale(delta) {
        this.scalePercentage += delta;
        const image = this.$refs.imageRef.$el.querySelector("img");
        image.style.transform = `scale(${this.scalePercentage})`;
      },
      // 预览关闭
      gb() {
        this.preview = false;
      },
      //选择标签关闭
      handleClose(tag) {
        this.form.tagList.map((i, index) => {
          if (tag == i.tagName) {
            this.form.tagList.splice(index, 1);
          }
        });
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      showInput() {
        if (this.dynamicTags.length >= 5) {
          this.inputVisible = false;
          alert("标签数不允许超过五个")
        } else {
          this.inputVisible = true;
          this.$nextTick((_) => {
            this.$refs.saveTagInput.$refs.input.focus();
          });
        }

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

        if (this.dynamicTags.length > 5) {
          alert("标签数不允许超过五个")
          this.dynamicTags.pop()
        };

      },
      //自定义标签
      handleInputConfirm() {
        let inputValue = this.inputValue;
        // if (inputValue) {
        //   this.dynamicTags.push(inputValue);
        // }
        // this.inputVisible = false;
        // this.inputValue = "";
        // this.form.tagList.push({
        //   tagName:inputValue,
        // });

        //查询输入的标签在固定标签里是否存在
        var Newtags = this.tags.find((value) => value.tagName == inputValue);
        // console.log(a);
        //删除标签
        if (this.dynamicTags.indexOf(inputValue) != -1) {
          this.dynamicTags.pop()
          this.form.tagList.pop()
        }
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
        //判断输入的标签在固定标签里是否存在，存在则换成固定标签
        if (Newtags) {
          this.form.tagList.push({
            tagId: Newtags.tagId,
            tagName: Newtags.tagName,
          });
        } else {
          this.form.tagList.push({
            tagName: inputValue,
          });
        }
        // console.log(this.form);
        if (this.dynamicTags.length > 5) {
          alert("标签数不允许超过五个")
          this.dynamicTags.pop()
        };
      },
      /** 转换目录信息数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.dirId,
          label: node.dirName,
          children: node.children,
        };
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.dirId = data.dirId;
        this.queryParams.dirId = this.dirId;
        this.queryParams.searchValue = this.spaceId;
        this.handleQuery();
      },
      //分享
      handleShare(row) {
        this.$router.push("/home/file/individual/share/user/" + row.docId);
      },
      /**下载按钮操作*/
      handleDownload(row) {
        location.href = row.docPath;
      },
      //预览
      handlePreview(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 if (officeType.some(item => item == row.docType)) {
          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);
        } else {
          this.$modal.msgWarning("该文件不支持预览");
        }
        // console.log(row.docPath);
        // console.log(vid);
      },
      //在线编辑
      handleEdit(row) {
        if (!officeType.some(item => item == row.docType)) {
          this.$modal.msgWarning("该文件不支持在线编辑");
          return false;
        }
        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;
          });

          getYears().then((response) => {
            this.yearOptions = response.data;
          });

          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;
        });
      },
      // 取消按钮
      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 => {
          //容量需先转换成MB
          this.residueNum = ((res.data.spaceCap - res.data.usedCap) * 1024).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);
          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('是否确认删除文件名称为"' + row.docName + '"的数据项？')
          .then(function() {
            return delInfo(docIds);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "doc/info/export", {
            ...this.queryParams,
          },
          `info_${new Date().getTime()}.xlsx`
        );
      },
      /**格式化文件大小数据*/
      fileSizeData(row, col, value) {
        const KB = 1;
        const MB = KB * 1024;
        const GB = MB * 1024;
        if (value < MB) {
          return `${(value / KB).toFixed(2)} KB`;
        } else if (value < GB) {
          return `${(value / MB).toFixed(2)} MB`;
        } else {
          return `${(value / GB).toFixed(2)} GB`;
        }
      },
    },
  };
</script>

<style scoped lang='scss'>
  .containe {
    color: #7ea4c8;
    font-size: 0.14rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    padding-left: calc(100vw * (20 / 1920));

    // .header {
    //   width: calc(100vw * (300 / 1920));
    //   height: calc(100vh * (22 / 1080));
    //   margin-top: calc(100vh * (20 / 1080));
    //   margin-bottom: calc(100vh * (20 / 1080));
    //   display: flex;
    //   align-items: center;

    //   img {
    //     width: calc(100vw * (16 / 1920));
    //     height: calc(100vh * (16 / 1080));
    //     border: 1px dashed grey;
    //     margin-left: 3px;
    //     margin-right: 3px;
    //   }

    //   .top1 {
    //     color: #2e8aecff;
    //   }
    // }

    // .title {
    //   height: calc(100vh * (22 / 1080));
    //   margin-top: calc(100vh * (20 / 1080));
    //   margin-bottom: calc(100vh * (20 / 1080));
    //   color: #ffffffff;
    //   font-size: 0.16rem;
    //   font-weight: bold;
    //   line-height: calc(100vh * (22 / 1080));
    // }

    .main {
      width: calc(100vw * (1876 / 1920));
      height: calc(100vh * (930 / 1080));
      margin-top: calc(100vh * (35 / 1080));

      .app-container {
        width: calc(100vw * (1876 / 1920));
        height: calc(100vh * (930 / 1080));
        padding: 0;
      }

      .main-left {
        width: calc(100vw * (260 / 1920));
        height: calc(100vh * (930 / 1080));
        margin-right: calc(100vw * (20 / 1920));
        margin-left: calc(100vw * (10 / 1920));
        background: url(../../../assets/img/Group-609.png);
        background-size: calc(100vw * (260 / 1920)) calc(100vh * (930 / 1080));

        .head-top {
          color: #ffffffff;
          font-size: 0.2rem;
          padding-left: calc(100vw * (15 / 1920));
          padding-top: calc(100vh * (25 / 1080));
        }

        //左边下拉菜单
        .head-container {
          margin-top: -5px;
        }
      }

      .main-right {
        width: calc(100vw * (1600 / 1920));
        height: calc(100vh * (930 / 1080));
        background: url(../../../assets/img/Group-610.png);
        background-size: calc(100vw * (1600 / 1920)) calc(100vh * (930 / 1080));

        p {
          color: #ffffffff;
          font-size: 0.16rem;
          padding-left: calc(100vw * (15 / 1920));
          padding-top: calc(100vh * (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-table {
          background: transparent;
          color: #7ea4c8ff;
        }

        //表格底部
        .pagination-container {
          width: calc(100vw * (1540 / 1920));
          height: calc(100vh * (50 / 1080));
          background: transparent;
          padding: 0 !important;
          margin: 0;
          margin-left: calc(100vw * (20 / 1920));
          margin-top: calc(100vh * (10 / 1080));
        }
      }
    }

    //预览弹窗
    .dhk {
      width: calc(100vw * (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;
      }

      video {
        width: calc(100vw * (1440 / 1920));
        height: calc(100vh * (810 / 1080));
      }

      .el-image {
        width: calc(100vw * (960 / 1920));
        height: calc(100vh * (720 / 1080));
      }

      .el-button-group {
        position: absolute;
        bottom: 0;
        left: 35%;
      }
    }
  }

  //标签按钮
  ::v-deep .el-tag {
    color: #df9439ff;
    border: 1px solid #ff9839ff;
    background: #bba99240;
    margin-left: 3px;
    margin-bottom: 3px;
    height: calc(100vh * (35 / 1080));
    line-height: calc(100vh * (35 / 1080));
  }

  //左边下拉菜单样式
  ::v-deep .el-tree {
    width: calc(100vw * (200 / 1920));
    margin-top: calc(100vh * (30 / 1080));
    background: transparent;
    color: #7ea4c8ff;
  }

  ::v-deep .el-tree-node {
    width: calc(100vw * (232 / 1920));
  }

  //悬停时的样式
  ::v-deep .el-tree-node__content:hover {
    background: #293667ff;
  }

  //右边顶部字体样式
  ::v-deep .el-form-item__label {
    color: #2e8aecff;
  }

  //右边顶部搜索框样式
  ::v-deep .el-input__inner {
    background-color: transparent;
    border: 1px solid #01d1ffff;
    color: #ffffffcc;
  }

  ::v-deep .el-form-item--small .el-form-item__content {
    width: calc(100vw * (220 / 1920));
  }

  //右边顶部标签搜索
  ::v-deep .el-select>.el-input {
    width: calc(100vw * (180 / 1920));
  }

  //右边表格线条隐藏
  ::v-deep .el-table::before {
    height: 0;
  }

  //table样式
  ::v-deep .el-table {
    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;
    }

    .el-dialog__header {
      padding-bottom: 0;
    }

    .el-upload__tip {
      font-size: 12px;
      color: #006c9aff;
      margin-top: 0px;
    }

    .el-upload-list__item {
      margin: 0;
    }

    .el-tag+.el-tag {
      margin-left: 10px;
    }

    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
</style>