综合展示，导入导出，三维截面分析，影像对比分析

Surpriseplus

2022-12-14 ea52386a7c7b3ef91784280e3033f190ac39caee

 src/views/Archive/index.vue

@@ -1,240 +1,190 @@
<template>
  <div class="archive">
    <div class="left_active">
      <el-card class="arch_card">
        <div class="title_active">{{ $t('archive.name') }}</div>
        <el-divider />
        <el-tree
          :data="tree"
          :props="defaultProps"
          show-checkbox
          default-expand-all="true"
        />
      </el-card>
    </div>
    <div class="right_active">
      <el-card class="arch_card">
        <el-row :gutter="20">
          <el-col :span="6"></el-col>
          <el-col :span="4"
            ><div style="text-align: right; margin-top: 6px">
              {{ $t('archive.keyword') }}:
            </div>
          </el-col>
          <el-col :span="4">
    <div class="top_header">
      <div class="top_left">
        <label>{{ $t('synthesis.synthesis') }}</label>
        <span>/</span>
        <label>{{ $t('synthesis.archive') }}</label>
      </div>
      <div class="top_right">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="input"
              style="color: #fff"
              v-model="formInline.user"
              suffix-icon="el-icon-search"
              :placeholder="$t('common.pleaseInput')"
          /></el-col>
          <el-col :span="4"
            ><el-button class="primary">{{ $t('common.iquery') }}</el-button>
            <el-button v-if="archStatus.download" type="success">{{
              $t('common.download')
            }}</el-button>
          </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
        <el-divider />
        <el-card shadow="never" class="middle_card">
          <el-table :data="tableData" style="width: 10000px" stripe>
            <el-table-column
              prop="name"
              :label="$t('archive.uname')"
              width="180"
            />
            <el-table-column
              prop="type"
              sortable
              :label="$t('archive.type')"
              width="180"
            />
            <el-table-column
              prop="count"
              sortable
              :label="$t('archive.modifications')"
              width="180"
            />
            <el-table-column
              prop="timer"
              sortable
              :label="$t('archive.creationtime')"
            />
            <el-table-column
              prop="state"
              :label="$t('archive.state')"
              width="180"
            />
          </el-table>
        </el-card>
        <el-divider />

        <el-pagination
          :currentPage="currentPage4"
          :page-size="pageSize4"
          :page-sizes="[10, 20, 50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="primaries">{{ $t('common.iquery') }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="primaries">{{ $t('common.download') }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="primaries">{{ $t('common.iquery') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottom_content">
      <div class="left_bottom">
        <div class="left_tree">
          <el-tree
            :data="tree"
            :props="defaultProps"
            :default-expanded-keys="[1]"
            node-key="id"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
      <div class="right_bottom"></div>
    </div>
  </div>
</template>

<script>
import { dataLib_selectTabs, dataLib_selectTabFields } from '../../api/api';

import MyBread from '../../components/MyBread.vue';
export default {
  components: {
    MyBread,
  },
  data() {
    return {
      input: '',
      listdata: {
        name: null,
        pageSize: 10,
        pageIndex: 1,
      },
      count: 0,
      formInline: {},
      tree: [
        {
          label: '文献',
          children: [
            {
              label: '管道标准文献',
              url: '',
            },
            {
              label: '工业管道工程施工及验收规范',
              url: '',
            },
            {
              label: '综合管线设计标准',
              url: '',
            },
          ],
          tabDesc: '基础数据',
          label: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          label: '图纸', //label对应父级标签
          children: [
            {
              label: 'XXX管线设计图纸',
              url: ' ',
            },
            {
              label: 'XXXXXX管线设计图',
              url: ' ',
            },
            {
              label: 'XXXXX管线设计图',
              url: ' ',
            },
          ],
        },
        {
          label: '数据', //label对应父级标签
          children: [
            {
              label: '管道',
              url: ' ',
            },
            {
              label: '阀门',
              url: ' ',
            },
            {
              label: '消费设备',
              url: ' ',
            },
          ],
          tabDesc: '业务数据',
          label: '业务数据',
          value: 'BS',
          children: [],
        },
      ],
      defaultProps: {
        chilren: 'children', //"children"内的每个对象解析为一个子项;
        label: 'label', //所有"label"所在的对象解析为一个父项
      },
      tableData: [],
      archStatus: {
        download: false,
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    showArchMenu(res) {
      switch (res.tag) {
        case '/download':
          this.archStatus.download = true;
          break;
    //树节点点击事件
    handleNodeClick(data) {
      if (data.children != null) return;
      this.listData.name = data.entity; //要查询表格类型；
      this.filedsLayer = this.getDataLibSelectTabFields(data); //获取每个表字段名称及阈值
    },
    async getDataLibSelectTabFields(res) {
      const data = await dataLib_selectTabFields({
        ns: res.ns,
        tab: res.entity,
      });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        return;
      }
      debugger;
    },
    //获取所有表格数据
    async getDataLibSelectTabs() {
      const data = await dataLib_selectTabs();
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        return;
      }
      var option = data.result;
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
        if (option[i].ns == 'bd') {
          this.tree[0].children.push(val_Data);
        } else {
          this.tree[1].children.push(val_Data);
        }
      }
    },
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        // this.showMenuChange(permsEntity[i], permsEntity);
        this.showArchMenu(permsEntity[i]);
      }
    }
  mounted() {
    this.getDataLibSelectTabs();
  },
};
</script>

<style>
<style lang="less" scoped>
.archive {
  width: 100%;
  height: 100%;
  position: relative;
}
.archive .left_active {
  width: 21%;
  height: 100%;
  float: left;
}
  margin: 0;
  overflow: hidden;
  background: black;
  .top_header {
    width: calc(100% - 60px);
    height: 70px;
    background: #353539;
    display: flex;
    padding: 0 30px;
    justify-content: space-between;

.archive .right_active {
  width: 78.5%;
  height: 100%;
  float: right;
}
.archive .arch_card {
  width: 100%;
  height: 100%;
  background: #303030;
}
.archive .arch_card .el-card__body {
  padding: 10px;
}
.archive .el-divider--horizontal {
  margin: 10px 0 !important;
}
.archive .left_active .title_active {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3b4d6e;
}
.archive .middle_div {
  border: 1px solid red;
}
.archive .middle_card {
  width: 100%;
  height: 81vh;
  border: transparent;
  background: #303030;
}

.archive .el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-form-item__label {
  color: white;
}

.el-input__inner {
  background-color: transparent !important ;

  border: 1px solid;
}
.primary {
  background: #409eff;
  border: #409eff;
  color: white;
    label {
      font-size: 21px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #009cff;
      line-height: 70px;
    }
    span {
      color: gray;
      margin: 0 5px;
    }
    /deep/.el-form--inline .el-form-item__content {
      line-height: 70px;
    }
    /deep/.el-form--inline .el-form-item__label {
      line-height: 70px;
    }
  }
  .bottom_content {
    width: 100%;
    height: calc(100% - 70px);
    display: flex;
    justify-content: space-between;
    .left_bottom {
      width: 224px;
      height: calc(100% - 64px);
      background: #303030;
      padding: 32px 23px;
      .left_tree {
        width: 100%;
        height: 100%;
        overflow: auto;
      }
    }
    .right_bottom {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      padding: 10px;
    }
  }
  .primaries {
    background: linear-gradient(180deg, #002992, #080472);
    border: 1px solid #000000;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
    color: white;
  }
}
</style>