1

Surpriseplus

2022-12-20 c960e2add5751edbe728dd5d297079b36544d11a

 src/components/MapView/mapMenuPop.vue

@@ -7,64 +7,167 @@
          @click="setTableChange(item)"
          class="leftBoxLi"
        >
          {{ item.tabDesc }}
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="rightBox">
      <div class="rightTitle">
        <span>管道</span>
        <el-link :underline="false" class="boxClose"
        <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>
      <el-table :data="tableData" height="220">
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column label="定位" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-map-location"
              size="mini"
              @click="spaceLocation(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <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>
      <div class="rightPage">
        <!-- <el-pagination
      <div class="tableBox">
        <el-table
          :data="tableData"
          ref="dialogPayChannel"
          height="230px"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column label="定位" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
                size="mini"
                @click="spaceLocation(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <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>
      </div>
      <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> -->
        </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,
@@ -81,6 +184,7 @@
        wkt: null,
        filter: null,
      },
      pageCount: 0,
      querylayer: null,
      queryTable: [],
      domainsLayer: [],
@@ -89,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;
@@ -96,6 +268,7 @@
      this.option = [];
    },
    setTableAll() {
      this.signGetPublicKey();
      this.startTableMssage();
      this.listdata.wkt = this.$store.state.mapMenuShpFile;
      this.querylayer = this.$store.state.mapSpaceQueryLayer;
@@ -179,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('列表调用失败');
      }
@@ -199,7 +381,18 @@
          }
        }
      }
      this.pageCount = data.count;
      this.tableData = data.result;
      this.$refs.dialogPayChannel.doLayout();
    },
    closeMenuBox() {
      if (this.imagePoint != null) {
        sgworld.Creator.DeleteObject(this.imagePoint);
        this.imagePoint = null;
      }
      sgworld.Creator.SimpleGraphic.clear();
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
    },
  },
  created() {
@@ -252,11 +445,49 @@
      color: white;
      width: 100%;
    }
    .tableBox {
      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;
@@ -264,31 +495,64 @@
      color: white;
    }
  }
}
</style>
<style lang="less">
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
  /deep/ .el-table {
    background-color: transparent;

/* 表格内背景颜色 */
/deep/ .el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
  color: white;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  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;
    }
  }
}
</style>
<style lang="less"></style>
<style scoped lang="less"></style>