重新

Surpriseplus

2022-11-12 50f52beb0ed100105166f62027cd0b15e6b596dc

 src/views/Archive/index.vue

@@ -5,6 +5,7 @@
        <div class="title_active">{{ $t('archive.name') }}</div>
        <el-divider />
        <el-tree
          ref="tree"
          :data="tree"
          :props="defaultProps"
          show-checkbox
@@ -14,165 +15,299 @@
    </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">
            <el-input :placeholder="$t('common.pleaseInput')"
          /></el-col>
          <el-col :span="4"
            ><el-button type="primary">{{ $t('common.iquery') }}</el-button>
            <el-button v-if="archStatus.download" type="primary">{{
              $t('common.download')
            }}</el-button>
          </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input
                v-model="formInline.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getArchTableData">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button plain>重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button plain>下载</el-button>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="showDialogBox">空间查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <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"
        />
        <div class="centerBox">
          <el-collapse v-model="activeNames" @change="handleChange" accordion>
            <el-collapse-item
              v-for="(item, index) in companyList"
              :key="index"
              :name="item.entity"
              :title="item.tabDesc"
            >
              <div class="centerTable">
                <el-table :data="tableData" height="550" border stripe>
                  <el-table-column type="selection" width="55" />
                  <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    width="50"
                  />
                  <el-table-column
                    v-for="(item, index) in attributeData"
                    :key="index"
                    :label="item.alias"
                    :prop="item.field"
                    show-overflow-tooltip
                    align="center"
                  ></el-table-column>
                </el-table>
                <el-divider />
                <el-pagination
                  :current-page="listdata.pageIndex"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="listdata.pageSize"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="count"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>
    </div>

    <el-dialog
      title="空间查询"
      :visible.sync="dialogVisible"
      width="92%"
      style="margin-left: 16%"
      top="5vh"
      :before-close="handleClose"
    >
      <div style="height: 720px; width: 100%">
        <mapsdk></mapsdk>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mapsdk from '../../components/mapsdk.vue';
import {
  inquiry_SelectTabs,
  dataLib_selectFields,
  dataLib_selectByPage,
  dataLib_selectDomains,
} from '../../api/api.js';
export default {
  components: {
    mapsdk,
  },
  data() {
    return {
      dialogVisible: false,
      activeNames: null,
      listdata: {
        pageIndex: 1,
        pageSize: 10,
        filter: null,
        name: null,
        wkt: null,
      },
      companyList: [],
      formInline: {},
      count: 0,
      tree: [
        {
          label: '文献',
          children: [
            {
              label: '管道标准文献',
              url: '',
            },
            {
              label: '工业管道工程施工及验收规范',
              url: '',
            },
            {
              label: '综合管线设计标准',
              url: '',
            },
          ],
          tabDesc: '基础数据',
          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: '业务数据',
          value: 'BS',
          children: [],
        },
      ],
      defaultProps: {
        chilren: 'children', //"children"内的每个对象解析为一个子项;
        label: 'label', //所有"label"所在的对象解析为一个父项
        label: 'tabDesc', //所有"label"所在的对象解析为一个父项
      },
      tableData: [
        {
          timer: '2016-05-01',
          name: 'Tom',
          count: '3',
          type: '业务图层',
          state: 'x',
        },
        {
          timer: '2016-05-02',
          name: 'Tom',
          count: '2',
          type: '业务图层',
          state: 'x',
        },
        {
          timer: '2016-05-03',
          name: 'Tom',
          count: '1',
          type: '业务图层',
          state: 'x',
        },
      ],
      attributeData: [],
      tableData: [],
      archStatus: {
        download: false,
      },
      archOption: [],
      queryLayer: null,
    };
  },

  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = null;
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
    },
    showDialogBox() {
      this.$store.state.mapMenuBoolean = true;
      this.$store.state.mapMenuBoxFlag = '1';
      this.dialogVisible = true;
    },
    //获取表格数据
    getArchTableData() {
      this.companyList = [];
      this.activeNames = null;
      var valTree = this.$refs.tree.getCheckedNodes();
      if (valTree.length == 0) {
        this.$message.error('请选择要查询的图层资料!');
        return;
      }
      for (var i in valTree) {
        this.listdata.name = valTree[i].entity;
        var filedData = this.getCollapseDomFiled();
        this.archOption.push({
          name: valTree[i].entity,
          fileds: filedData,
          table: this.getCollapseTable(filedData),
        });
      }

      this.companyList = valTree;
    },
    //获取每个表字段名称及阈值
    async getCollapseDomFiled() {
      //查询字段信息;
      const fileds = await dataLib_selectFields({
        name: this.listdata.name,
      });
      if (fileds.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }
      //查询阈值信息；
      const domains = await dataLib_selectDomains({
        name: this.listdata.name,
      });
      if (domains.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }
      var data1 = fileds.result;
      var data2 = domains.result;
      var std = [];
      for (var i in data1) {
        if (data1[i].showtype == 1) {
          if (data1[i].domainNa != null) {
            data1[i].domainNa = this.getDomainNaFild(data1[i].domainNa, data2);
          }
          std.push(data1[i]);
        }
      }
      return std;
    },
    //值域字段匹配
    getDomainNaFild(res, result) {
      for (var i in result) {
        if (result[i].domName == res) {
          return result[i].codeDesc;
        }
      }
      return null;
    },

    //获取每个表的table
    async getCollapseTable(res) {
      var res_val;
      res.then((val) => {
        res_val = val;
      });

      if (this.formInline.name != null) {
        this.listdata.filter = 'name like ' + this.formInline.name;
      }
      const fileds = await dataLib_selectByPage(this.listdata);
      if (fileds.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }
      for (var i in fileds.result) {
        let val_Data = fileds.result[i];

        for (var j in res_val) {
          if (res_val[j].domainNa != null && res_val[j].domainNa != undefined) {
            val_Data[res_val[j].field] = res_val[j].domainNa;
          }
        }
      }
      return fileds;
    },

    //折叠面板切换事件
    handleChange(val) {
      if (val == '') return;
      var that = this;
      this.listdata.name = val;
      this.listdata.pageSize = 10;
      this.listdata.pageIndex = 1;
      for (var i in this.archOption) {
        if (this.archOption[i].name == val) {
          this.queryLayer = this.archOption[i].fileds;
          this.archOption[i].fileds.then((res) => {
            that.attributeData = res;
          });
          this.archOption[i].table.then((res) => {
            this.count = res.count;
            this.tableData = res.result;
          });
        }
      }
    },
    //分页点击事件
    handleSizeChange(val) {
      this.listdata.pageSize = val;
      this.listdata.pageIndex = 1;
      var res = this.getCollapseTable(this.queryLayer);
      res.then((res) => {
        this.tableData = res.result;
      });
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      var res = this.getCollapseTable(this.queryLayer);
      res.then((res) => {
        this.tableData = res.result;
      });
    },
    //获取树
    async getTreeData() {
      const data = await inquiry_SelectTabs();
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
      var option = data.result;

      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        if (option[i].ns == 'bd') {
          this.tree[0].children.push(val_Data);
        } else {
          this.tree[1].children.push(val_Data);
        }
      }
    },
    //权限管理
    showArchMenu(res) {
      switch (res.tag) {
        case '/download':
@@ -190,16 +325,18 @@
        this.showArchMenu(permsEntity[i]);
      }
    }
    this.getTreeData();
  },
};
</script>

<style>
<style scped lang="less">
.archive {
  width: 100%;
  height: 100%;
  position: relative;
}

.archive .left_active {
  width: 21%;
  height: 100%;
@@ -215,9 +352,37 @@
  width: 100%;
  height: 100%;
}
.archive .centerBox {
  max-height: 800px;
  overflow: auto;
}

.archive .centerBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.archive .centerBox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #e5e5e5;
}
.archive .centerBox::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ffffff;
}

.archive .centerTable {
  height: 600px;
}
.archive .arch_card .el-card__body {
  padding: 10px;
  overflow-y: auto;
}

.archive .el-divider--horizontal {
  margin: 10px 0 !important;
}