资料馆界面优化

Surpriseplus

2023-02-02 3b1d1e53e902631099a483511724ee7c423db140

 src/views/Archive/index.vue

@@ -4,60 +4,38 @@
      <div class="top_left">
        <My-bread :list="[`${$t('synthesis.synthesis')}`, `${$t('synthesis.archive')}`]"></My-bread>
      </div>
      <div class="top_right">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-input
              v-model="formInline.tab"
              suffix-icon="el-icon-search"
              :placeholder="$t('common.pleaseInput')"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              @click="searchDataLibSelectTabs"
              class="primaries"
            >{{
              $t('common.iquery')
            }}</el-button>
            <el-button
              icon="el-icon-refresh"
              @click="restDataLibSelectTabs"
              type="info"
            >{{
              $t('common.reset')
            }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="getSpaceMapVisibale"
              class="primaries"
            >{{
              $t('synthesis.rangequery')
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div class="box_item">
      <div class="box_left">资料类别</div>
      <div class="box_cont">

        <div v-if="isShowFirstCheck">
          <el-checkbox-group v-model="checkedDataType">
            <el-checkbox
              @change="handleCheckedDataTypeChange(item)"
              v-for="(item, index)  in showList"
              :label="item.name"
              :key="index"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div
          v-if="!isShowFirstCheck"
          class="box_div"
          v-for="(item, index) in showList"
          :key="index"
          @click="changeListDataType(item)"
        >
          <el-checkbox
          <!-- <el-checkbox
            v-if="isShowFirstCheck"
            v-model="item.isCheckedFlag"
            :checked="item.isCheckedFlag"
          ></el-checkbox>
          <div style="margin-left: 5px">{{ item.name }}</div>
          ></el-checkbox> -->
          <div
            :class="{menuActive:dataTypeName == item.name}"
            style="margin-left: 5px"
          >{{ item.name }}</div>
        </div>
      </div>
      <div class="box_right">
@@ -71,24 +49,36 @@
          class="box_div box_menu"
          @click="checkEvent(1)"
        >
          <i class="el-icon-plus"></i> {{ $t('synthesis.Multiplechoice') }}
          <i class="el-icon-plus"></i>
          <span v-if="!isShowFirstCheck">{{ $t('synthesis.Multiplechoice') }}</span>
          <span v-if="isShowFirstCheck">{{ $t('synthesis.Singlechoice') }}</span>
        </div>
      </div>
    </div>
    <div class="box_item">
      <div class="box_left">项目名称</div>
      <div class="box_cont">
        <div v-if=" isShowSecondCheck">
          <el-checkbox-group v-model="checkedEntryName">
            <el-checkbox
              @change="handleCheckedEntryNameChange(item)"
              v-for="(item, index)  in showList1"
              :label="item.name"
              :key="index"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div
          v-if="!isShowSecondCheck"
          class="box_div"
          v-for="(item, index) in showList1"
          :key="index"
          @click="changeListEntryName(item)"
        >
          <el-checkbox
            v-if="isShowSecondCheck"
            v-model="item.isCheckedFlag"
            :checked="item.isCheckedFlag"
          ></el-checkbox>
          <div style="margin-left: 5px">{{ item.name }}</div>
          <div
            :class="{menuActive:EntryName == item.name}"
            style="margin-left: 5px"
          >{{ item.name }}</div>
        </div>
      </div>
      <div class="box_right">
@@ -102,11 +92,14 @@
          class="box_div box_menu"
          @click="checkEvent(2)"
        >
          <i class="el-icon-plus"></i> {{ $t('synthesis.Multiplechoice') }}
          <i class="el-icon-plus"></i>
          <span v-if="!isShowSecondCheck">{{ $t('synthesis.Multiplechoice') }}</span>
          <span v-if="isShowSecondCheck">{{ $t('synthesis.Singlechoice') }}</span>
        </div>
      </div>
    </div>
    <div class="bottom_content">

      <div class="bottom_left">
        <!-- <div class="box_div">当前搜索关键词:</div> -->
        <div>
@@ -128,84 +121,96 @@
          </ul>
        </div>
      </div>
      <div
        v-if="isMenuActive"
        class="bottom_right"
      >
        <ul>
          <li
            v-for="(item, index) in dataType"
            :key="index"
          >
            <div
              class="box_div"
              @click="getShowTable(item)"
            >
              {{ item.tabDesc }} 
            </div>
          </li>
        </ul>
      </div>
      <div
        v-if="!isMenuActive"
        class="bottom_right"
      >
        <el-form
          :inline="true"
          :model="queryForm"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-cascader
              v-model="queryForm.dirid"
              :show-all-levels="false"
              :options="companyOption"
              @change="handleChange"
              :props="{
              label: 'name',
              value: 'id',
              children: 'children',
              checkStrictly: true,
              emitPath: false,
            }"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-cascader
              v-model="queryForm.depid"
              :show-all-levels="false"
              :options="companyOption1"
              @change="handleChange1"
              :props="{
              label: 'name',
              value: 'id',
              children: 'children',
              checkStrictly: true,
              emitPath: false,
            }"
            ></el-cascader>
          </el-form-item>

          <!-- <el-form-item>
            
            <el-button
              type="danger"
              size="small"
              @click="deleteMetaInfo"
              icon="el-icon-delete"
            >{{ $t('common.delete') }}</el-button>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-button
              @click="setBatchDownload"
              icon="el-icon-download"
              type="success"
              size="small"
            >批量下载</el-button>
          </el-form-item> -->
        </el-form>
      <div class="bottom_right">
        <div>
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
          >
            <!-- <el-form-item>
              <el-cascader
                v-model="formInline.dirid"
                :show-all-levels="false"
                :options="companyOption"
                @change="handleChange"
                :props="{
              label: 'name',
              value: 'id',
              children: 'children',
              checkStrictly: true,
              emitPath: false,
            }"
              ></el-cascader> -->
            </el-form-item>
            <el-form-item>
              <el-cascader
                v-model="formInline.depid"
                :show-all-levels="false"
                :options="companyOption1"
                @change="handleChange1"
                :props="{
              label: 'name',
              value: 'id',
              children: 'children',
              checkStrictly: true,
              emitPath: false,
            }"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formInline.tab"
                suffix-icon="el-icon-search"
                :placeholder="$t('common.pleaseInput')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                @click="searchDataLibSelectTabs"
                size="mini"
              >{{
              $t('common.iquery')
            }}</el-button>
              <el-button
                icon="el-icon-refresh"
                @click="restDataLibSelectTabs"
                type="info"
                size="mini"
              >{{
              $t('common.reset')
            }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="getSpaceMapVisibale"
                size="mini"
              >{{
              $t('synthesis.rangequery')
            }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="isMenuActive">
          <ul>
            <li
              v-for="(item, index) in dataType"
              :key="index"
            >
              <div
                class="box_div"
                @click="getShowTable(item)"
              >
                {{ item.tabDesc }}
              </div>
            </li>
          </ul>
        </div>
        <div
          class="boxCard"
          v-if="!isMenuActive"
          v-for="(item,index) in tableData1"
        >
          <el-card class="box-card">
@@ -234,7 +239,6 @@
            <div class="cardItem"> {{$t('dataManage.vmobj.createontime')}} : {{format(item.createTime)}} </div>
          </el-card>
        </div>

      </div>
    </div>
    <div class="panerPage">
@@ -770,10 +774,13 @@
  selectdirTab,
  selectdepTab,
  deleteMeta,
  dataLib_selectProject,
  dataLib_selectBaseType,
  dataLib_selectBusinessType
} from '../../api/api';
import $ from 'jquery'
import { getToken } from '@/utils/auth';
import { data_type, project_name } from '../../components/js/archive.js';
// import { data_type, project_name } from '../../components/js/archive.js';
import MyBread from '../../components/MyBread.vue';
import MapSdk from '../../components/mapsdk.vue'
export default {
@@ -803,6 +810,12 @@
      }
    };
    return {
      data_type: [],
      project_name: [],
      checkedDataType: [],
      checkedEntryName: [],
      dataTypeName: '不限',
      EntryName: '不限',
      conditionVisible: false,
      formSql: {
        field: '',
@@ -815,11 +828,11 @@
      fromSqlflag: false,
      filedsOption: [],
      condOption: [],
      queryForm: {
        dirid: null,

      formInline: {
        tab: '', fileName: '', dirid: null,
        depid: null,
      },
      formInline: { tab: '', fileName: '' },
      codeForm: {
        password: '',
        repassword: '',
@@ -894,7 +907,6 @@
    };
  },
  computed: {

    newList() {
      this.listType.forEach((item) => {
        this.$set(item, 'isCheckedFlag', false);
@@ -902,7 +914,7 @@
      return this.listType;
    },
    showList() {
      this.listType = data_type;
      this.listType = this.data_type;
      if (this.showFirstAll == false) {
        var showList = [];
        if (this.newList.length > 8) {
@@ -924,7 +936,7 @@
      return this.listProject;
    },
    showList1() {
      this.listProject = project_name;
      this.listProject = this.project_name;
      if (this.showSecondAll == false) {
        var showList1 = [];
        if (this.newList1.length > 8) {
@@ -941,8 +953,41 @@
    },
  },
  methods: {
    handleCheckedEntryNameChange(res) {
      if (this.checkedEntryName.indexOf(res.name) != -1) {
        if (res.name == "不限") {
          this.checkedEntryName = ['不限']
        } else {
          var index = this.checkedEntryName.indexOf('不限')
          if (index > -1) {
            this.checkedEntryName.splice(index, 1);
          }
        }
      }
    },
    handleCheckedDataTypeChange(res) {
      if (this.checkedDataType.indexOf(res.name) != -1) {
        if (res.name == "不限") {
          this.checkedDataType = ['不限']
        } else {
          var index = this.checkedDataType.indexOf('不限')
          if (index > -1) {
            this.checkedDataType.splice(index, 1);
          }
        }
      }


    },
    changeListDataType(res) {
      if (this.isShowFirstCheck == false) {
        this.dataTypeName = res.name;
      }
    },
    changeListEntryName(res) {
      if (this.isShowSecondCheck == false) {
        this.EntryName = res.name;
      }
    },
    getSpaceMapVisibale() {
      this.dialogMapVisible = true;
      this.showMapVisible = true;
@@ -983,14 +1028,29 @@
      switch (res) {
        case 1:
          this.isShowFirstCheck = !this.isShowFirstCheck;
          if (this.isShowFirstCheck == false) {
            this.checkedDataType = []
            this.dataTypeName = '不限';
          } else {
            this.dataTypeName = null;
            this.checkedDataType = ['不限']
          }

          break;
        case 2:
          this.isShowSecondCheck = !this.isShowSecondCheck;
          if (this.isShowSecondCheck == false) {
            this.checkedEntryName = []
            this.EntryName = '不限';
          } else {
            this.EntryName = null;
            this.checkedEntryName = ['不限']
          }
          break;
      }
    },
    getMenuChange(res) {

      this.getQueryDirTree();
      this.formInline.tab = ""
      switch (res) {
        case 1:
@@ -1011,9 +1071,9 @@
            dirid: null,
            name: null
          }
          this.getQueryDirTree();

          this.isMenuActive = false;
          this.getMetaData();
          break;
      }
    },
@@ -1024,7 +1084,7 @@
        this.$message.error('单位列表获取失败');
        return;
      }
      this.queryForm.dirid = 1;
      this.formInline.dirid = 1;
      this.companyOption = this.treeData(res.result);
      this.getQueryDepTree();
    },
@@ -1034,9 +1094,9 @@
        this.$message.error('单位列表获取失败');
        return;
      }
      this.queryForm.depid = 1;
      this.formInline.depid = 1;
      this.companyOption1 = this.treeData(res.result);
      this.getMetaData();
      // this.getMetaData();
    },

    // 查询
@@ -1046,7 +1106,7 @@
    },
    // 重置查询
    resetInfo(formName) {
      this.queryForm.name = '';
      this.formInline.name = '';
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.listData.name = null;
@@ -1172,8 +1232,8 @@
      this.codeForm.repassword = '';
    },
    getMetaData() {
      this.listData.dirid = this.queryForm.dirid
      this.listData.depid = this.queryForm.depid;
      this.listData.dirid = this.formInline.dirid
      this.listData.depid = this.formInline.depid;
      dataLib_selectByPageForMeta(this.listData).then((res) => {

        this.tableData1 = res.result;
@@ -1184,13 +1244,13 @@
    handleChange(value) {
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.queryForm.dirid = value;
      this.formInline.dirid = value;
      this.getMetaData();
    },
    handleChange1(value) {
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.queryForm.depid = value;
      this.formInline.depid = value;
      this.getMetaData();
    },
    //树列表生成
@@ -1301,7 +1361,7 @@
      this.listTypeData.name = res.entity;
      this.listTypeData.pageIndex = 1;
      this.listTypeData.pageSize = 10;
      this.dialogtitle = res.tabDesc ;
      this.dialogtitle = res.tabDesc;
      this.upAttach.tabName = res.ns + "." + res.tab;
      this.filedsLayer = this.getCollapseDomFiled();

@@ -1694,10 +1754,49 @@
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    async getDataTyeAndEntryName() {
      const data = await dataLib_selectProject();//查询项目名称
      if (data.code != 200) {
        this.$message.error('项目列表调用失败');
      }

      const res = await dataLib_selectBaseType(); //查询基础地理类别
      if (res.code != 200) {
        this.$message.error('基础地理类别列表调用失败');
      }
      const rest = await dataLib_selectBusinessType(); //查询业务类别
      if (rest.code != 200) {
        this.$message.error('业务类别列表调用失败');
      }
      var std = [{ name: "不限", id: null }]
      var str = [{ name: "不限", id: null }]
      for (var i in data.result) {
        std.push({
          id: data.result[i].key,
          name: data.result[i].value
        })
      }
      this.project_name = std;
      for (var i in res.result) {
        str.push({
          id: res.result[i].key,
          name: res.result[i].value
        })
      }
      for(var i in rest.result){
          str.push({
          id: rest.result[i].key,
          name: rest.result[i].value
        })
      }
      this.data_type = str;
    }
  },
  mounted() {
    this.getDataLibSelectTabs();
    this.signGetPublicKey();
    this.getQueryDirTree();
    this.getDataTyeAndEntryName();
  },
};
</script>
@@ -1710,10 +1809,10 @@
  overflow-y: auto;
  background: #353539;
  .top_header {
    width: calc(100% - 60px);
    height: 70px;
    width: calc(100% -20px);
    height: 60px;
    display: flex;
    padding: 0 30px;
    padding: 0 10px;
    justify-content: space-between;
    border-bottom: 1px solid white;
    .top_left {
@@ -1817,7 +1916,7 @@
      }
    }
    .bottom_right {
      width: calc(100% - 320px);
      width: 100%;
      padding: 0px 20px;
      height: auto;
      color: white;
@@ -1852,6 +1951,9 @@
    display: flex;
    align-items: center;
    display: flex;
    .menuActive {
      color: #409eff;
    }
  }
  .primaries {
    background: linear-gradient(180deg, #002992, #080472);
@@ -1940,6 +2042,10 @@
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/.el-checkbox {
    color: #ffff;
    line-height: 25px;
  }
}

.elLink {
@@ -1956,6 +2062,10 @@
}
/deep/ .el-dialog {
  background: #303030;
  z-index: 99;
}
.downloadBox {
  z-index: 999;
}
/deep/.el-range-editor.is-active,
.el-range-editor.is-active:hover,