管道基础大数据平台系统开发-【前端】-新系統界面
1
Surpriseplus
2022-12-20 c960e2add5751edbe728dd5d297079b36544d11a
src/components/MapView/mapMenuPop.vue
@@ -17,9 +17,21 @@
        <el-link @click="closeMenuBox" :underline="false" class="boxClose"
          ><i class="el-icon-close"></i>
        </el-link>
        <el-link
          :underline="false"
          v-show="$store.state.download"
          @click="dialogVisible = true"
          class="boxClose"
          ><i class="el-icon-download"></i>
        </el-link>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" style="height: 100%; width: 100%">
        <el-table
          :data="tableData"
          ref="dialogPayChannel"
          height="230px"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            type="index"
@@ -45,33 +57,117 @@
          ></el-table-column>
        </el-table>
      </div>
      <!-- <div class="rightPage"> -->
      <!-- <el-pagination
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listPage.pageIndex"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listPage.pageSize"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listPage.pageCount"
          :total="pageCount"
        >
        </el-pagination> -->
      <!-- </div> -->
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="$t('common.passworld')"
      :visible.sync="dialogVisible"
      width="30%"
      top="35vh"
      :modal="false"
      :before-close="handleCloseDown"
    >
      <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>
    </el-dialog>
    <iframe
      id="Iframe1"
      src=""
      style="display: none; border: 0; padding: 0; height: 0; width: 0"
    ></iframe>
  </div>
</template>
<script>
import {
  dataQuerySelectByPage,
  dataQuery_selectByPage,
  inquiry_selectDomains,
  inquiry_selectFields,
  dataQuerySelectWktById,
  sign_getPublicKey,
  dataLib_selectDownloadFile,
  decr,
} from '../../api/api.js';
import { getToken } from '@/utils/auth';
import $ from 'jquery';
export default {
  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 {
      dialogVisible: false,
      codeForm: {
        password: '',
        repassword: '',
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: passwordValidator, trigger: 'blur' },
        ],
        repassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repasswordValidator, trigger: 'blur' },
        ],
      },
      listPage: {
        pageSize: 10,
        pageIndex: 1,
@@ -88,6 +184,7 @@
        wkt: null,
        filter: null,
      },
      pageCount: 0,
      querylayer: null,
      queryTable: [],
      domainsLayer: [],
@@ -96,6 +193,74 @@
    };
  },
  methods: {
    async signGetPublicKey() {
      const res = await sign_getPublicKey();
      if (res && res.code == 200) {
        window.encrypt = new JSEncrypt();
        encrypt.setPublicKey(res.result);
      }
    },
    download() {
      if (this.codeForm.password == '') return;
      var obj = {
        pwd: encrypt.encrypt(this.codeForm.password),
        entities: [],
        wkt: this.listdata.wkt,
      };
      for (var i in this.option) {
        obj.entities.push(this.option[i].entity);
      }
      var token = getToken();
      var that = this;
      $.ajax(BASE_URL + '/dataLib/downloadDbReq?token=' + token, {
        type: 'post',
        data: JSON.stringify(obj),
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (res) => {
          if (res.code != 200) {
            return;
          }
          this.selectDownloadFile(res.result, obj.pwd);
        },
      });
    },
    async selectDownloadFile(rsid, rspwd) {
      var downObj = {
        guid: rsid,
        pwd: encodeURIComponent(rspwd),
      };
      const data = await dataLib_selectDownloadFile(downObj);
      if (data.code != 200) {
        this.$message.error('下载请求失败');
        return;
      }
      this.closeDown();
      var token = getToken();
      var url =
        BASE_URL +
        '/dataLib/downloadFile?token=' +
        token +
        '&guid=' +
        rsid +
        '&pwd=' +
        encodeURIComponent(rspwd);
      $('#Iframe1').attr('src', url).click();
    },
    handleCloseDown() {
      this.$confirm('确认关闭?')
        .then((_) => {
          this.closeDown();
        })
        .catch((_) => {});
    },
    closeDown() {
      this.dialogVisible = false;
      this.codeForm.password = '';
      this.codeForm.repassword = '';
    },
    startTableMssage() {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = 10;
@@ -103,11 +268,11 @@
      this.option = [];
    },
    setTableAll() {
      this.signGetPublicKey();
      this.startTableMssage();
      this.listdata.wkt = this.$store.state.mapMenuShpFile;
      this.querylayer = this.$store.state.mapSpaceQueryLayer;
      this.option = this.$store.state.mapSpaceQueryLayer;
      debugger;
      this.listdata.name = this.option[0].entity;
      this.getTableDateHidder();
@@ -187,10 +352,19 @@
      this.listdata.name = res.entity;
      this.getTableDateHidder();
    },
    handleSizeChange(val) {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getTableData();
    },
    async getTableData() {
      this.tableData = [];
      const data = await dataQuerySelectByPage(this.listdata);
      const data = await dataQuery_selectByPage(this.listdata);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
@@ -207,7 +381,9 @@
          }
        }
      }
      this.pageCount = data.count;
      this.tableData = data.result;
      this.$refs.dialogPayChannel.doLayout();
    },
    closeMenuBox() {
      if (this.imagePoint != null) {
@@ -273,11 +449,46 @@
      height: 327px;
    }
    .rightPage {
      position: absolute;
      bottom: 10px;
      margin-left: 50px;
      /*不可点击的*/
    }
    .pagination_box {
      position: absolute;
      bottom: 10px;
      /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;
      }
    }
    .boxClose {
      float: right;
      margin-right: 20px;