资料馆页面添加，接口对接

Surpriseplus

2022-12-16 22850e47eb4726a0177fa0569cfa37f92b13177e

资料馆页面添加，接口对接

 src/api/api.js

@@ -608,8 +608,37 @@
  return request.get('/dataLib/selectTabs', { params: params });
}
//资料馆=>查询所有表格
export function dataLib_selectTabFields(params) {
  return request.get('/dataLib/selectTabs', { params: params });
export function dataLib_selectFields(params) {
  return request.get('/dataLib/selectFields', { params: params });
}
//资料馆=>查询值域信息
export function dataLib_selectDomains(params) {
  return request.get('/dataLib/selectDomains', { params: params });
}
//资料馆=>分页查询
export function dataLib_selectByPage(params) {
  return request.get('/dataLib/selectByPage', { params: params });
}
//资料馆=>查询文件
export function dataLib_selectFiles(params) {
  return request.get('/dataLib/selectFiles', { params: params });
}
//资料馆=>删除文件
export function dataLib_deletes(params) {
  return request.get('/dataQuery/deletes', { params: params });
}

//资料馆=>分页查询元数据
export function dataLib_selectByPageForMeta(params) {
  return request.get('/dataLib/selectByPageForMeta', { params: params });
}
//资料馆=>文件下载
export function dataLib_selectDownloadFile(params) {
  return request.get('/dataLib/selectDownloadFile', { params: params });
}
//资料馆=>请求下载
export function dataLib_downloadReq(params) {
  return request.post('/dataLib/downloadReq', params);
}

//请求站场点内容

 src/assets/lang/en.js

@@ -471,6 +471,8 @@
      m7: 'volume',
      m8: 'angle',
    },
    more: 'More',
    Multiplechoice: 'Multiple choice',
  },
  loglog: {
    serialnumber: 'Serial Number',

 src/assets/lang/zh.js

@@ -468,6 +468,9 @@
      m7: '体积',
      m8: '角度',
    },
    more: '更多',

    Multiplechoice: '多选',
  },
  loglog: {
    serialnumber: '序号',

 src/components/js/archive.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,56 @@
export const data_type = [
  { name: '不限' },
  { name: 'DOM' },
  { name: 'DLG' },
  { name: 'DEM' },
  { name: '区域地质' },
  { name: '水文地质' },
  { name: '基础转孔' },
  { name: '基础地灾' },
  { name: '气象' },
  { name: '冻土' },
  { name: '勘察数据' },
  { name: '测量数据' },
  { name: '岩土数据' },
  { name: '合规数据' },
  { name: '三维模型' },
  { name: '三维场景' },
  { name: 'POI' },
  { name: 'DSM' },
  { name: 'DRG' },
  { name: '管理数据' },
  { name: '0.5ç±³DOM' },
  { name: '0.05ç±³DOM' },
  { name: '0.2ç±³DOM' },
  { name: '1ç±³DOM' },
  { name: '2ç±³DOM' },
  { name: '0.5ç±³DSM' },
  { name: '1:500DLG' },
  { name: '1:1000DLG' },
  { name: '1:2000DLG' },
  { name: '1:5000DLG' },
  { name: '1:10000DLG' },
  { name: '1:50000DLG' },
  { name: '1:25万DLG' },
  { name: '1:100万DLG' },
  { name: '90ç±³DEM' },
  { name: '30ç±³DEM' },
  { name: '12.5ç±³DEM' },
  { name: '2ç±³DEM' },
  { name: '1:1万DRG' },
  { name: '1:5万DRG' },
  { name: '1:5万区域地质' },
  { name: '1:20万区域地质' },
  { name: '1:5万水文地质' },
  { name: '1:20万水文地质' },
  { name: '倾斜模型' },
  { name: 'BIM模型' },
  { name: '点云模型' },
];
export const project_name = [
  { name: '不限' },
  { name: '西气东输一线管道工程' },
  { name: '西气东输二线管道工程' },
  { name: '红柳压气站工程' },
  { name: '河北气库工程' },
];

 src/components/mapsdk.vue

@@ -364,7 +364,7 @@
      //   true,
      //   ''
      // );
      openStreetMap.item.show = false;
      // openStreetMap.item.show = false;
      //mpt加载
      var option = {
        url: window.sceneConfig.mpt.url,

 src/views/Archive/index.vue

@@ -2,9 +2,9 @@
  <div class="archive">
    <div class="top_header">
      <div class="top_left">
        <label>{{ $t('synthesis.synthesis') }}</label>
        <span>/</span>
        <label>{{ $t('synthesis.archive') }}</label>
        <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">
@@ -16,111 +16,1101 @@
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="primaries">{{ $t('common.iquery') }}</el-button>
            <el-button icon="el-icon-search" 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-button @click="getSpaceMapVisibale" class="primaries">{{
              $t('synthesis.rangequery')
            }}</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 class="box_item">
      <div class="box_left">资料类别</div>
      <div class="box_cont">
        <div class="box_div" v-for="(item, index) in showList" :key="index">
          <el-checkbox
            v-if="isShowFirstCheck"
            v-model="item.isCheckedFlag"
            :checked="item.isCheckedFlag"
          ></el-checkbox>
          <div style="margin-left: 5px">{{ item.name }}</div>
        </div>
      </div>
      <div class="right_bottom"></div>
      <div class="box_right">
        <div class="box_div box_menu" @click="moreEvent(1)">
          {{ $t('synthesis.more') }}
        </div>
        <div class="box_div box_menu" @click="checkEvent(1)">
          <i class="el-icon-plus"></i> {{ $t('synthesis.Multiplechoice') }}
        </div>
      </div>
    </div>
    <div class="box_item">
      <div class="box_left">项目名称</div>
      <div class="box_cont">
        <div class="box_div" v-for="(item, index) in showList1" :key="index">
          <el-checkbox
            v-if="isShowSecondCheck"
            v-model="item.isCheckedFlag"
            :checked="item.isCheckedFlag"
          ></el-checkbox>
          <div style="margin-left: 5px">{{ item.name }}</div>
        </div>
      </div>
      <div class="box_right">
        <div class="box_div box_menu" @click="moreEvent(2)">
          {{ $t('synthesis.more') }}
        </div>
        <div class="box_div box_menu" @click="checkEvent(2)">
          <i class="el-icon-plus"></i> {{ $t('synthesis.Multiplechoice') }}
        </div>
      </div>
    </div>
    <div  class="bottom_content">
      <div class="bottom_left">
        <div class="box_div">当前搜索关键词:</div>
        <div>
          <ul>
            <li>搜索类型</li>
            <li @click="getMenuChange(1)" :class="{ menuActive: isMenuActive }">
              æ•°æ®åº“
            </li>
            <li
              @click="getMenuChange(2)"
              :class="{ menuActive: !isMenuActive }"
              style="border-bottom: 1px solid white"
            >
              æ–‡ä»¶æ•°æ®ç±»åž‹
            </li>
          </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 }} ({{ item.tab }})
            </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 :label="$t('dataManage.vmobj.keyword')" >
    <el-input v-model="queryForm.name" :placeholder="$t('common.pleaseInput')"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button
            @click="queryInfo()"
            icon="el-icon-search"
            class="primary"
            size="small"
            >{{ $t('common.iquery') }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            @click="resetInfo('queryForm')"
            icon="el-icon-refresh"
            type="info"
            size="small"
            >{{ $t('common.reset') }}</el-button
          >
        </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="downFormData"
            icon="el-icon-download"
            type="success"
            size="small"
            >{{ $t('common.download') }}</el-button
          >
        </el-form-item>
</el-form>
 <el-table
            :data="tableData1"
            style="width: 100%"
            @selection-change="handleSelectionChange1"
            height="86%"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" :label="$t('dataManage.vmobj.name')" />
            <el-table-column
              prop="type"
              :label="$t('dataManage.vmobj.format')"
            />
            <el-table-column
              prop="sizes"
              :label="$t('dataManage.vmobj.size')"
              :formatter="stateFormatSizes"
            />
            <el-table-column
              prop="depName"
              :label="$t('dataManage.vmobj.depName')"
            />
             <el-table-column
              prop="dirName"
              :label="$t('dataManage.vmobj.dirName')"
            />


            <el-table-column
          :label="$t('dataManage.dataUpObj.tableName')">
 <template slot-scope="scope">
      <a   @click="detail(scope.row)" >{{
          scope.row.tab
        }}</a>
    </template>
            </el-table-column>

             <el-table-column
              prop="gather"
              :label="$t('dataManage.vmobj.gather')"
              :formatter="formatData"
            />
            <el-table-column
              prop="describe"
              :label="$t('dataManage.vmobj.describe')"
            />
            <el-table-column
              prop="uname"
              :label="$t('dataManage.vmobj.createonuser')"
            />
            <el-table-column
              prop="createTime"
              :label="$t('dataManage.vmobj.createontime')"
              :formatter="formatData"
            />
            <el-table-column min-width="100" :label="$t('common.operate')">
              <template slot-scope="scope">
                <el-link style="color: white" @click="showDetail1(scope.row)">{{
                  $t('common.details')
                }}</el-link>
                <!-- <el-link
                  @click="editInfo(scope.row)"
                  style="margin-left: 10px; color: white"
                  >{{ $t('common.edit') }}</el-link
                > -->
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
    <div class="panerPage">
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listData.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="90%"
      top="10vh"
      :before-close="handleClose"
    >
      <el-dialog width="30%" :visible.sync="innerVisible" append-to-body>
        <div class="contentBox">
          <ul>
            <li v-for="(item, index) in itemdetail">
              <p>
                <label> {{ item.label }}:</label>
                <label class="boxlabel">{{ item.value }}</label>
              </p>
              <el-divider></el-divider>
            </li>
          </ul>
        </div>
      </el-dialog>
      <el-dialog width="30%" :visible.sync="outerVisible" append-to-body>
              <el-form :model="fromfile" class="demo-form-inline">
        <el-form-item >
          <el-input
            v-model="fromfile.file"
            style="width: 300px; margin-right: 20px"
            :placeholder="$t('common.choose')"
            disabled
          ></el-input>
          <input
            name="file1"
            type="file"
            id="insertFile"
            multiple="multiple"
            style="display: none"
              @change="insertFile( )"
          />
          <el-link  @click="getInsertFile( )" :underline="false"
            ><i class="el-icon-folder-opened"></i
          ></el-link>
        </el-form-item>
        <el-form-item>
          <el-row  >
            <el-col :span="3"> <el-link  class="elLink" :underline="false" @click="setAttachInsert" >{{$t('common.append')}}</i></el-link></el-col>
            <el-col :span="3">   <el-link  class="elLink" :underline="false" @click="setAttachDel" >{{$t('common.delete')}}</i></el-link></el-col>
            <!-- <el-col :span="3">  <el-link  class="elLink" :underline="false" >{{$t('common.reset')}}</i></el-link></el-col> -->
          </el-row>
        </el-form-item>
        <el-form-item>
 <el-table
       :data="tableAttach"
            ref="filterTable"
            height="99%"
            border
            style="width: 100%"
            @selection-change="handleAttatchChange"
          >
                  <el-table-column type="selection" width="55" />
          <el-table-column width="60" type="index" :label="$t('common.index')" />
              <el-table-column  prop="date"
         :label="$t('common.fileNme')"
         />

      <el-table-column
        prop="name"
        :label="$t('common.filePath')"
        />

           </el-table>
        </el-form-item>
        <el-form-item>

<el-row :gutter="20">
  <el-col :span="12" :offset="8">  <el-button  class="primary" @click="outerVisible = false">确认</el-button>  <el-button type="info"   @click="outerVisible = false">取消</el-button></el-col>
</el-row>
        </el-form-item>
      </el-form>
      </el-dialog>
      <div style="height: 700px">
        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
          <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
            <el-input
              v-model="ruleForm.name"
              :placeholder="$t('common.choose')"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search"     @click="submitForm('ruleForm')" class="primary" size="small">{{
              $t('common.iquery')
            }}</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('ruleForm')" type="info" size="small">{{
              $t('common.reset')
            }}</el-button>
          </el-form-item>
        </el-form>
        <el-divider class="eldivider" />
        <el-table
          ref="filterTable"
          :data="tableData"
          height="78%"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55" />
          <el-table-column
            width="60"
            type="index"
            align="center"
            :label="$t('common.index')"
          />
          <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-column
            min-width="80"
            align="center"
            :label="$t('common.operate')"
          >
            <template slot-scope="scope">
              <el-link
                class="elLink"
                @click="showDetail(scope.$index, scope.row)"
                >{{ $t('common.details') }}</el-link
              >
              <el-link
                class="elLink"
                @click="getAttachTable(scope.$index, scope.row)"
                style="margin-left: 20px"
                >{{ $t('common.enclosure') }}</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="panerPage">
          <div class="pagination_box">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="listTypeData.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="listTypeData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count1"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
     <div class="downloadBox" v-if="showCodeBox">
      <h4 style="padding: 20px">{{$t('common.passworld')}}</h4>
      <el-form
        :model="codeForm"
        :rules="rules"
        ref="codeForm"
        label-width="100px"
        class="codeForm"
      >
        <el-form-item :label="$t('common.passworld')" prop="password">
          <el-input type="password" v-model="codeForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.SPassword')" prop="repassword">
          <el-input type="password" v-model="codeForm.repassword" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="primary" size="small" @click="download('codeForm')"
            >{{$t('common.confirm')}}</el-button
          >
          <el-button type="info" size="small" @click="closeDown('codeForm')"
            >{{$t('common.cancel')}}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="infoBox" v-show="showinfoBox1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t('common.details') }}</span>
          <div style="float: right; cursor: pointer" @click="closeDetial">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="contentBox">
          <p>{{ $t('dataManage.vmobj.name') }}：{{ itemdetail1.name }}</p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.format') }}：{{ itemdetail1.type }}</p>
          <el-divider></el-divider>
          <p>{{ $t('common.size') }}：{{ setInfoBoxSize(itemdetail1.sizes) }}</p>
          <el-divider></el-divider>
          <p>{{ $t('dataManage.vmobj.depName') }}：{{ itemdetail1.depName }}</p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.gather') }}：{{
              setInfoBoxTime(itemdetail1.gather)
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.describe') }}：{{ itemdetail1.describe }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.createonuser') }}：{{ itemdetail1.uname }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.createontime') }}：{{
              setInfoBoxTime(itemdetail1.createTime)
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.updateonuser') }}：{{
              itemdetail1.updateUser
            }}
          </p>
          <el-divider></el-divider>
          <p>
            {{ $t('dataManage.vmobj.updateontime') }}：{{
              setInfoBoxTime(itemdetail1.updateTime)
            }}
          </p>
        </div>
      </el-card>
    </div>
    <el-dialog
  :title=" $t('synthesis.rangequery')"
  :visible.sync="dialogMapVisible"
  width="90%"
  :before-close="handleMapClose">
<div style="height:700px">
  <map-sdk v-if='showMapVisible'></map-sdk>
</div>
</el-dialog>
     <iframe id="downFrame" src="" style="display: none; border: 0; padding: 0; height: 0; width: 0"></iframe>
  </div>
</template>

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

import { flatten } from '@turf/turf';
import {
  dataLib_selectTabs,
  dataLib_selectFields,
  dataLib_selectDomains,
  dataLib_selectByPage,
  dataLib_selectFiles,
  dataLib_deletes,
  dataLib_selectByPageForMeta,
  dataLib_selectDownloadFile,
  dataLib_downloadReq,
  sign_getPublicKey,
  selectdirTab,
  deleteMeta,
} from '../../api/api';
import $ from 'jquery'
import { getToken } from '@/utils/auth';
import { data_type, project_name } from '../../components/js/archive.js';
import MyBread from '../../components/MyBread.vue';
import MapSdk from '../../components/mapsdk.vue'
export default {
  components: {
    MyBread,
    MapSdk
  },
  data() {
     var repasswordValidator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.codeForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var passwordValidator = (rule, value, callback) => {
      var passwordreg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
      if (!passwordreg.test(value)) {
        callback(
          new Error('密码必须由数字、字母、特殊字符组合,请输入13-20位')
        );
      } else {
        callback();
      }
    };
    return {
      listdata: {
        name: null,
        pageSize: 10,
      queryForm:{
        dirid:null,
      },
      formInline: {},
      codeForm: {
        password: '',
        repassword: '',
      },
      fromfile:{ file: '',},
      listType: [], // 1mi
      listProject: [],
      companyOption:[],
      showinfoBox1:false,
      dialogMapVisible:false,
      showMapVisible:false,
      showCodeBox:false,
      showFirstAll: false,
      isShowFirstCheck: false,
      showSecondAll: false,
      isShowSecondCheck: false,
      isMenuActive: true,
      dialogVisible: false,
      innerVisible: false,
      outerVisible: false,
      dataType: [],
      filedsLayer: [],
      attributeData: [],
      tableData: [],
      tableData1:[],
      multipleSelection: [],
      multipleSelection1:[],
         attacgSelection: [],
      tableAttach:[],
      itemdetail: [],
      itemdetail1:{},
      listTypeData: {
        pageIndex: 1,
        pageSize: 10,
        name: null,
        filter: null,
        wkt: null,
      },
      listData: {
        pageIndex: 1,
        pageSize: 10,
      },
      count: 0,
      formInline: {},
      tree: [
        {
          tabDesc: '基础数据',
          label: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          tabDesc: '业务数据',
          label: '业务数据',
          value: 'BS',
          children: [],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      count1: 0,
      dialogtitle: null,
      ruleForm: {
        name: null,
      },
        rules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { validator: passwordValidator, trigger: 'blur' }],
        repassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repasswordValidator, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    //树节点点击事件
    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,
  computed: {
    newList() {
      this.listType.forEach((item) => {
        this.$set(item, 'isCheckedFlag', false);
      });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      return this.listType;
    },
    showList() {
      this.listType = data_type;
      if (this.showFirstAll == false) {
        var showList = [];
        if (this.newList.length > 8) {
          for (var i = 0; i < 14; i++) {
            showList.push(this.newList[i]); //将数组的前7条存放到showList数组中
          }
        } else {
          showList = this.newList; //个数足够显示，不需要再截取
        }
        return showList;
      } else {
        return this.newList;
      }
    },
    newList1() {
      this.listProject.forEach((item) => {
        this.$set(item, 'isCheckedFlag', false);
      });
      return this.listProject;
    },
    showList1() {
      this.listProject = project_name;
      if (this.showSecondAll == false) {
        var showList1 = [];
        if (this.newList1.length > 8) {
          for (var i = 0; i < 14; i++) {
            showList1.push(this.newList1[i]); //将数组的前7条存放到showList数组中
          }
        } else {
          showList1 = this.newList1; //个数足够显示，不需要再截取
        }
        return showList1;
      } else {
        return this.newList1;
      }
    },
  },
  methods: {
    getSpaceMapVisibale(){
      this.dialogMapVisible =true;
      this.showMapVisible =true;
      this.$store.state.mapMenuBoolean = true;
      this.$store.state.mapMenuBoxFlag = '1';
    },
    handleMapClose(){
   this.dialogMapVisible =false;
      this.showMapVisible =false;
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = null;
    },
    moreEvent(res) {
      switch (res) {
        case 1:
          this.showFirstAll = !this.showFirstAll;
          break;
        case 2:
          this.showSecondAll = !this.showSecondAll;
          break;
      }
    },
    checkEvent(res) {
      switch (res) {
        case 1:
          this.isShowFirstCheck = !this.isShowFirstCheck;
          break;
        case 2:
          this.isShowSecondCheck = !this.isShowSecondCheck;
          break;
      }
    },
    getMenuChange(res) {
      switch (res) {
        case 1:
             this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
            this.getDataLibSelectTabs();
          this.isMenuActive = true;

          break;
        case 2:
          this.getQueryDepTree();
          this.isMenuActive = false;
          break;
      }
    },
     //单位列表获取
    async getQueryDepTree() {
      const res = await selectdirTab();
      if (res.code != 200) {
        this.$message.error('单位列表获取失败');
        return;
      }
      debugger;
      this.queryForm.dirid = 1;
      this.companyOption = this.treeData(res.result);
      this.getMetaData();
    },
    //获取所有表格数据
        // æŸ¥è¯¢
    queryInfo() {
      this.listData.name = this.queryForm.name.trim();
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.getMetaData();
    },
     // é‡ç½®æŸ¥è¯¢
    resetInfo(formName) {
this.queryForm.name ='';
      this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.listData.name = null;
      this.getMetaData();
    },
     deleteMetaInfo() {
      this.$confirm('确定是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          var std = [];
          for (var i in this.multipleSelection1) {
            std.push(this.multipleSelection1[i].id);
          }
          deleteMeta({ ids: std.toString() }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
              this.multipleSelection1 = [];
              this.listData.pageSize = 10;
              this.listData.pageIndex = 1;
              this.getMetaData();
            } else {
              this.$message.error('删除失败');
              this.multipleSelection1 = [];
            }
          });
        })
        .catch(() => {
          this.$message('已取消删除');
        });
    },
     downFormData() {
      if (this.multipleSelection1.length == 0) {
        alert('请先选择要下载的文件');
        return;
      }
      this.showCodeBox = true;
    },
     async download() {
      var std = [];
      for (var i in this.multipleSelection1) {
        std.push(this.multipleSelection1[i].id)
      }
      debugger
      var obj = {
        pwd: encrypt.encrypt(this.codeForm.repassword),
        ids: std
      };
      const res = await dataLib_downloadReq(JSON.stringify(obj))

      if (res.code != 200) {
        this.$message.error('下载请求失败');
        return
      }

      var downObj = {
        guid: res.result,
        pwd: encodeURIComponent(encrypt.encrypt(this.codeForm.repassword))
      }
      debugger
      const data = await dataLib_selectDownloadFile(downObj)

      if (data.code != 200) {
        this.$message.error('下载请求失败');
        return
      }
      var token = getToken()
      var url = BASE_URL + "/dataLib/downloadFile?token=" + token + "&guid=" + res.result + "&pwd=" + encodeURIComponent(encrypt.encrypt(this.codeForm.repassword));

      $("#downFrame").attr("src", url).click();
      this.closeDown();
    },
    closeDown() {
      this.showCodeBox = false;
      this.codeForm.password = '';
      this.codeForm.repassword = '';
    },
 getMetaData() {
    this.listData.dirid = this.queryForm.dirid
      dataLib_selectByPageForMeta(this.listData).then((res) => {
        this.tableData1 = res.result;
        this.count = res.count;
      });
    },
    handleChange(value) {
   this.listData.pageSize = 10;
      this.listData.pageIndex = 1;
      this.queryForm.dirid = value;
       this.getMetaData();
    },
 //树列表生成
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      return cloneData.filter((father) => {
        // å¾ªçŽ¯æ‰€æœ‰é¡¹
        let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
        return father.pid == 0; // è¿”回一级菜单
      });
    },

    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);
      this.count = data.result.length;
      this.dataType = data.result;
    },
    showDetail1(row){

  this.showinfoBox1 = true;

      this.itemdetail1 = row;
    },
    // å…³é—­æŸ¥çœ‹
    closeDetial() {
      this.showinfoBox1 = false;
      this.itemdetail = {};
    },
     // å…³é”®å­—查询
    submitForm() {
      this.listTypeData.pageIndex = 1;
      this.listTypeData.pageSize = 10;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
     // é‡ç½®æŸ¥è¯¢
    resetForm(formName) {
      this.searchName = '';
      this.$refs[formName].resetFields();
      //获取table信息
        this.listTypeData.pageIndex = 1;
      this.listTypeData.pageSize = 10;
      this.getCollapseTable(this.filedsLayer);
    },

    async getShowTable(res) {
      this.listTypeData.name = res.entity;
      this.listTypeData.pageIndex = 1;
      this.listTypeData.pageSize = 10;
      this.dialogtitle = res.tabDesc + '(' + res.tab + ')';
      this.filedsLayer = this.getCollapseDomFiled();

      this.getCollapseTable(this.filedsLayer);
    },
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm = {
        name: null,
      };
    },
    showDetail(index, row) {
      var std = [];
      for (var i in this.attributeData) {
        std.push({
          label: this.attributeData[i].alias,
          value: row[this.attributeData[i].field],
        });
      }
      this.itemdetail = std;
      this.innerVisible = true;
    },
    getAttachTable() {
      this.outerVisible = true;
      this.getAttacthFlieList();
    },
 async setAttachDel() {
       var std = [];
      for (var i in this.attacgSelection) {
        std.push(this.attacgSelection[i].id);
      }
      const res = await dataLib_deletes({ ids: std.toString() });
      if(res.code != 200){
        this.$message.error('文件删除失败');
      }
       this.getAttacthFlieList();
    },
    setAttachInsert() {
      var token = getToken();
      var fs = document.getElementById("insertFile");
      if (fs.files.length == 0) {
        alert("请选择要上传的文件！");
        return;
      }
      const formData = new FormData()
      for (var i = 0, c = fs.files.length; i < c; i++) {

        formData.append('file', fs.files[i]); // fs.files[i].name,file
      }

      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName=lf.sys_style&eventid=fa25979a5ef8b43ba82a0be35b3fb0d4", {
        type: "post",
        data: formData,
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (rs) => {
          this.$message({
            message: '附件添加成功',
            type: 'success'
          });
          document.getElementById("insertFile").value = "";
          this.formInline = {
            file: '',
          }
          this.getAttacthFlieList();
        },
        error: (e) => {
          document.getElementById("insertFile").value = "";
          this.$message.error('附件添加失败');
        }
      });
    },


   async getAttacthFlieList(){
  var obj = {
        tabName: 'lf.sys_style',
        eventid: 'fa25979a5ef8b43ba82a0be35b3fb0d4'
      }
      const res = await dataLib_selectFiles(obj);
      if (res.code != 200) {
        this.$message.error('列表调用失败');
        return
      }
      this.tableAttach = res.result;
    },
    //附件=>文件选择
    getInsertFile() {
      $('#insertFile').click();
    },
    insertFile() {
      var val = document.getElementById('insertFile').files;
      if (!val || !val.length) return;

      this.fromfile.file = val[0].name;
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleAttatchChange(val){
 this.attacgSelection = val;
    },
    async getCollapseTable(res) {
      res.then((val) => {
        this.attributeData = val;
      });
      if (this.ruleForm.name != null) {
        this.listData.filter = 'name like ' + this.ruleForm.name;
      } else {
        this.listData.filter = null;
      }

      const data = await dataLib_selectByPage(this.listTypeData);
      if (data.code != 200) {
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }
      var res_val = this.attributeData;
      this.count1 = data.count;
      for (var i in data.result) {
        let val_Data = data.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;
          }
        }
      }
      this.tableData = data.result;

      this.dialogVisible = true;
    },
    //分页点击事件
    handleSizeChange1(val) {
      this.listTypeData.pageSize = val;
      this.listTypeData.pageIndex = 1;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    handleCurrentChange1(val) {
      this.listTypeData.pageIndex = val;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    async getCollapseDomFiled() {
      const fileds = await dataLib_selectFields({
        name: this.listTypeData.name,
      });
      if (fileds.code != 200) {
        this.$message.error('列表调用失败');
        return;
      }
      const domains = await dataLib_selectDomains({
        name: this.listTypeData.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;
    },

    handleSizeChange(res) {
                   this.listData.pageIndex = 1;
      this.listData.pageSize = res;
      if(this.isMenuActive == false){this.getMetaData()}
    },
    handleCurrentChange(res) {
         this.listData.pageIndex = res;
          if(this.isMenuActive == false){this.getMetaData()}
    },
     async signGetPublicKey() {
      const res = await sign_getPublicKey();
      if (res && res.code == 200) {
        window.encrypt = new JSEncrypt();
        encrypt.setPublicKey(res.result);
      }
    },
     //单位转换
    stateFormatSizes(row, column) {
      if (row.sizes >= 1024) {
        const val = parseFloat(row.sizes / 1024).toFixed(3);
        return val + ' GB';
      } else {
        return row.sizes + ' MB';
      }
    },
     setInfoBoxTime(res) {
      if (res == null) {
        return res;
      }
      return this.format(res);
    },
    setInfoBoxSize(res) {
      if (res >= 1024) {
        return parseFloat(res / 1024).toFixed(3) + ' GB';
      } else {
        return res + ' MB';
      }
    },
     //格式化列表
    formatData(row, column) {
      let data = row[column.property];
      if (data == null) {
        return data;
      }
      return this.format(data);
    },
    //格式化时间
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        '-' +
        this.add0(m) +
        '-' +
        this.add0(d) +
        ' ' +
        h +
        ':' +
        mm +
        ':' +
        s
      );
    },
    //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
  },
  mounted() {
    this.getDataLibSelectTabs();
    this.signGetPublicKey();
  },
};
</script>
@@ -131,15 +1121,18 @@
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: black;
  background: #353539;
  .top_header {
    width: calc(100% - 60px);
    height: 70px;
    background: #353539;
    display: flex;
    padding: 0 30px;
    justify-content: space-between;

    border-bottom: 1px solid white;
    .top_left {
      display: flex;
      align-items: center;
    }
    label {
      font-size: 21px;
      font-family: Source Han Sans SC;
@@ -158,27 +1151,113 @@
      line-height: 70px;
    }
  }
  .bottom_content {
    width: 100%;
    height: calc(100% - 70px);
  .box_item {
    width: calc(100% - 60px);
    border-bottom: 1px solid white;
    height: auto;
    padding: 10px 30px;

    align-items: center;
    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;
    float: left;
    .box_left {
      color: white;
      height: 100%;
      line-height: 100%;
      width: 100px;
      text-align: center;
      color: white;
      font-size: 14px;
      font-weight: 400;
    }
    .box_cont {
      color: white;
      height: 100%;
      width: 80%;
      display: flex;
      flex-wrap: wrap;
      /* è®¾ç½®å¤šè¡Œå¯¹é½ */
      align-content: flex-start;
      color: white;
      font-size: 14px;
      font-weight: 400;
    }
    .box_right {
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
      color: white;
      font-size: 14px;
      align-self: flex-start;
      font-weight: 400;
      .box_menu {
        border: 1px solid white;
      }
      .box_menu:hover {
        border: 1px solid #009cff;
        color: #009cff;
      }
    }
    .right_bottom {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      padding: 10px;
  }
  .bottom_content {
    width: calc(100% - 60px);

    height: auto;
    padding: 10px 30px;

    display: flex;
    justify-content: space-between;
    .bottom_left {
      width: 270px;
      font-size: 14px;
      font-weight: 400;
      align-self: flex-start;
      color: white;
      ul {
        margin-left: 10px;
      }
      li {
        height: 42px;
        border-top: 1px solid white;
        border-left: 1px solid white;
        border-right: 1px solid white;
        font-size: 14px;
        line-height: 42px;
        padding: 5px 15px;
      }
      .menuActive {
        color: #409eff;
      }
    }
    .bottom_right {
      width: calc(100% - 320px);
      padding: 0px 20px;
      max-height: 460px;
      overflow-y: auto;
      color: white;
      li {
        border-bottom: 1px solid white;
        padding: 10px 0px;
      }
      li:hover {
        color: #409eff;
      }
    }
  }
  .panerPage {
    width: 100%;
    padding: 5px 0px;
    bottom: 10px;
    position: absolute;
    display: flex;
    justify-content: center;
  }
  .box_div {
    padding: 5px 15px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    display: flex;
  }
  .primaries {
    background: linear-gradient(180deg, #002992, #080472);
@@ -186,5 +1265,185 @@
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
    color: white;
  }
  .elLink {
    color: white;
  }
    .infoBox {
    width: 500px;
    position: absolute;
    z-index: 100;
    top:  25%;
    right: 25%;
    background: #303030;
    color: #fff;
    .el-card {
      background-color: transparent;
      color: #fff;
      span {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .contentBox {
      margin: 0 aotu 10px;
      height: 500px;
      overflow: auto;
      p {
        // background-color: #bfa;
        // margin-bottom: 10px;
        font-size: 14px;
      }
    }
  }

.downloadBox {
    position: absolute;
    top: 20%;
    left: 40%;
    padding: 20px;
    background: #303030;
    width: 30%;
    border: 1px solid gray;
    border-radius: 10px;
    color: white;
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
    /deep/.btn-next i {
      color: white;
    }
    /deep/.btn-prev i {
      color: white;
    }
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }


}

  .elLink {
    color: white !important;
  }
  .el-icon-folder-opened {
    color: white;
  }

.contentBox {
  height: 550px;
  overflow: auto;
  color: white;
}
/deep/ .el-dialog {
  background: #303030;
}
/deep/.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border: 1px solid;
}
/deep/.el-dialog__title {
  color: white;
}
/deep/ .el-dialog__body {
  padding: 10px;
}
 /*修改table è¡¨ä½“的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // è¡¨å¤´èƒŒæ™¯è‰²
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // æ»šåŠ¨æ¡å®½é«˜
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 5px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 å†…阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 å†…阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
    // è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid white !important;
  }
    /deep/.el-form-item__label {
    color: white;
  }
  /deep/.el-dialog__wrapper{
    overflow: hidden;
  }
</style>

 src/views/Synthesis/LeftMenu.vue

@@ -10,6 +10,7 @@
      <div>{{ $t(item.label) }}</div>
    </div>
    <mapinfo ref="mapinfo" />
    <maplayer ref="maplayer" />
    <input type="file" accept=".kml" class="file" style="display: none" />
  </div>
</template>
@@ -17,8 +18,10 @@
<script>
import { transform } from 'ol/proj';
import mapinfo from '../Tools/mapinfo.vue';
import maplayer from '../Tools/maplayer.vue';

export default {
  components: { mapinfo },
  components: { mapinfo, maplayer },
  data() {
    return {
      showTwoMenuFlag: false,
@@ -932,6 +935,13 @@
          break;
      }
    },
    setCoverage(res) {
      switch (res) {
        case 'a1':
          this.$refs && this.$refs.maplayer && this.$refs.maplayer.open();
          break;
      }
    },
    menuChange(res) {
      this.setListTwoMenu = this.setListTwoMenuAll[res];
    },

 src/views/Synthesis/analyse.vue

@@ -12,18 +12,15 @@
        <div class="div_li">{{ $t(item.name) }}</div>
      </li>
    </ul>
    <mapinfo ref="mapinfo" />
  </div>
</template>

<script>
import $ from 'jquery';
// æµ‹é‡-信息弹窗
import mapinfo from '../Tools/mapinfo.vue';

export default {
  components: {
    mapinfo,
  },
  components: {},
  data() {
    return {
      changeAnalsyFlag: null,

 src/views/Synthesis/index.vue

@@ -24,6 +24,7 @@
        </div>
      </div>
    </div>
    <maplayer ref="maplayer" />
  </div>
</template>

@@ -31,10 +32,12 @@
import { getPerms } from '../../api/api';
import mapdiv from '../../components/MapDiv.vue';
import leftMenu from './LeftMenu.vue';
import maplayer from '../Tools/maplayer.vue';
export default {
  components: {
    mapdiv,
    leftMenu,
    maplayer,
  },
  data() {
    return {

 src/views/Tools/maplayer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,114 @@
<template>
  <div class="InfoPopup">
    <Popup
      ref="pop"
      v-for="(data, index) in PopupData"
      :key="data.id"
      title="图层管理"
      :maxHeight="data.maxHeight || '500px'"
      @close="close(data.id)"
      :left="data.left || left"
      :top="data.top || top + index * 42 + 'px'"
    >
      <div class="treeContainer">
        <el-tree
          ref="tree"
          :data="treeData"
          show-checkbox
          node-key="id"
          draggable
          :expand-on-click-node="false"
          :auto-expand-parent="false"
          :default-expanded-keys="defaultExpanded"
          :default-checked-keys="defaultCheck"
        >
        </el-tree>
      </div>
    </Popup>
  </div>
</template>

<script>
import Popup from './Popup.vue';
export default {
  name: 'maplayer',
  components: {
    Popup,
  },
  data() {
    return {
      // å¼¹çª—数据
      PopupData: ['maplayer'],
      left: 'calc(100% - 330px)',
      top: 10,
      treeData: [],
      defaultCheck: [],
      defaultExpanded: [],
      selectNode: undefined,
      rightClickMenuDisplay: false,
      rightClickMenuStyle: {},
      isClickParent: false,
      isNewFold: false,
      newFoldName: undefined,
      mergeNode: false,
    };
  },
  computed: {},
  mounted() {
    this.treeData([
      { id: '82A0C3DE', name: '影像', children: [] },
      { id: '82C3DE', name: '地形', children: [] },
      { id: '4FE10400', name: '模型', children: [] },
      { id: '0A51CF71', name: '矢量', children: [] },
    ]);
  },
  methods: {
    // å…³é—­æ‰€æœ‰
    closeAll() {
      this.PopupData.forEach((item) => {
        item.close && item.close();
      });
      this.PopupData = [];
    },
    // å…³é—­å¼¹çª—
    close(id) {
      let index = this.PopupData.findIndex((item) => {
        return item.id === id;
      });
      let data = this.PopupData.splice(index, 1)[0];
      data.close && data.close();
    },
    // æ‰“开弹窗
    open(title, value, style = {}) {
      this.PopupData.push({
        id: this.createRandomId(),
        title,
        value,
        ...style,
      });
      let index = this.PopupData.length - 1;
      this.$nextTick(() => {
        this.$refs.pop[index].open();
      });
      return this.PopupData[index];
    },
    // éšæœºid
    createRandomId() {
      return (
        (Math.random() * 10000000).toString(16).substr(0, 4) +
        '-' +
        new Date().getTime() +
        '-' +
        Math.random().toString().substr(2, 5)
      );
    },
  },
};
</script>

<style scoped lang="less">
.text {
  margin-left: 15px;
  margin-right: 15px;
}
</style>