sky_proxy_ui/src/components/proxy/ConfigManage.vue

<template>
  <div id="configManage">
    <div class="functionBtn">
      <el-select v-show="proxyType!='INTEGRATION'" v-model="dataType" placeholder="请选择类型" style="margin-right: 12px" default-first-option>
        <el-option v-for="(item, index) in selectOptions" :key="index" :label="item.label" :value="item.value" ></el-option>
      </el-select>
      <el-button  type="primary" round @click="handleDetailVisible('Add')">新增配置</el-button>
      <el-button v-show="proxyType!='INTEGRATION'" round @click="viewAllModel">全部预览</el-button>
      <el-tooltip content="刷新" placement="right">
        <el-button circle @click="refresh"><el-icon><IconPark-refresh /></el-icon></el-button>
      </el-tooltip>
    </div>
    <div class="tableContent">
      <el-table ref="table"
                :data="tableData"
                :max-height="maxHeight"
                v-loading="loading"
                @current-change="(row)=>{this.currRow=row}"
                border
                stripe
      >
        <el-table-column prop="id" label="ID" width="60" align="center"/>
        <el-table-column prop="key" label="标题" min-width="100">
          <template #default="scope">
            <span style="font-weight: bold;font-family: JetBrainsMono-Regular,serif" >{{scope.row.key}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="描述" min-width="120" />
        <el-table-column prop="proxyUrl" label="链接" min-width="180">
          <template #default="scope">
            <span style="font-family: JetBrainsMono-Regular,serif" >{{ scope.row.proxyUrl}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleDetailVisible('Edit', scope.row)">
              <el-icon><IconPark-edit /></el-icon>
              修改
            </el-button>
            <el-button size="small" @click="deleteConfig(scope.row)">
              <el-icon><IconPark-delete /></el-icon>
              删除
            </el-button>
            <el-button v-show="proxyType!='INTEGRATION'" size="small" @click="view(scope.row)" >
              <el-icon><IconPark-preview-open /></el-icon>
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background
                       layout="sizes, prev, pager, next, jumper, ->, total"
                       v-model:current-page="pageInfo.page"
                       v-model:page-size="pageInfo.pageSize"
                       :total="pageInfo.total"
        />
      </div>
    </div>
  </div>

  <ConfigDetail v-model:show="detailVisible"
                :operation="detailOperation"
                :item="currRow"
                :is-edit="detailIsEdit"
                :select-options="selectOptions"
                :proxy-type="proxyType"
                :data-type="dataType"
                :refresh="getData"
  >
  </ConfigDetail>

  <CesiumMap v-if="isMapShow"
      :is-show="isMapShow"
      :type="mapType"
      :close="closeMap"
      :item="mapItem"
  >
  </CesiumMap>

  <AllCesiumMap v-if="isAllMapShow"
                :is-show="isAllMapShow"
                :type="allMapType"
                :close="closeMap"
                :item="tableData"
  >
  </AllCesiumMap>
</template>

<script>
import ConfigDetail from "@/components/proxy/ConfigDetail.vue";
import CesiumMap from "@/components/map/CesiumMap.vue";
import AllCesiumMap from "@/components/map/AllCesiumMap.vue";

export default {
  data() {
    return {
      maxHeight: 450,
      loading: false,
      configData: [],
      tableData: [],
      currRow: {},
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      proxyType: '',
      dataType: '',
      selectOptions: [],
      dataTypes: {
        99: {
          label: '数据',
          value: 'UNKNOWN'
        },
        0: {
          label: '全部',
          value: 'ALL'
        },
        1: {
          label: '地图',
          value: 'MAP',
        },
        2: {
          label: '三维模型',
          value: 'MODEL',
        },
        3: {
          label: 'GLTF模型',
          value: 'GLTF',
        }
      },

      routerParam: {
        'publish_twoD': {
          proxyType: 'PUBLISH',
          dataTypes: [1],
        },
        'publish_threeD': {
          proxyType: 'PUBLISH',
          dataTypes: [2,3],
        },
        'integration_data': {
          proxyType: 'INTEGRATION',
          dataTypes: [99],
        },
      },

      mapTypes: {
        'MODEL': 1,
        'GLTF': 2,
        'MAP': 4
      },

      detailVisible: false,
      detailOperation: '',
      detailIsEdit: false,

      isMapShow: false,
      mapType: 0,
      mapItem: {},

      allMapType: -1,
      isAllMapShow: false,
    }
  },
  watch: {
    "pageInfo.page": function () {
      this.renderTable();
    },
    "pageInfo.pageSize": function () {
      this.renderTable();
    },
    "dataType": function () {
      this.refresh()
    },
    "$route.name": function (val) {
      if (val) {
        this.initType();
        this.refresh();
      }
    }
  },
  components: {
    ConfigDetail,
    CesiumMap,
    AllCesiumMap,
  },
  created() {
    this.initType()
  },
  mounted() {
    let container = document.getElementById("configManage");
    this.maxHeight = container.clientHeight*0.85;

    this.getData();
  },
  methods: {
    initType() {
      let obj = this.routerParam[this.$route.name];
      if (!obj) {
        return;
      }
      this.proxyType = obj.proxyType
      this.dataType = '';
      this.selectOptions = [];
      //this.selectOptions.push(this.dataTypes[0])
      for (let index of obj.dataTypes) {
        this.selectOptions.push(this.dataTypes[index])
      }
      if (this.selectOptions.length>0) {
        this.dataType = this.selectOptions[0].value
      }
    },
    refresh() {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = 10;
      this.pageInfo.total = 0;
      this.getData();
    },
    getData() {
      if (!this.dataType || this.dataType=='') {
        this.configData = [];
        this.tableData = []
        this.pageInfo.total = 0;
        return;
      }
      let that = this;
      that.loading = true;

      let params = {
        proxyType: this.proxyType,//"PUBLISH"
        dataType: this.dataType,//"MAP"
      }
      this.$request.postForm('/proxy_proxy/proxy_api/config/getByType', params).then(res => {
        that.configData = [];
        if (res.code === 200) {
          let num = 0;
          that.configData = [];
          that.pageInfo.total = 0;
          if (res.content) {
            that.configData = JSON.parse(JSON.stringify(res.content))
            that.configData.forEach(i=>{
              i.id = num++;
              i.proxyUrl = systemConfig.proxyUrl.replace('{PROXYURL}', i.key);
            })
            that.pageInfo.total = that.configData.length;
          }
          this.renderTable();
        }
        that.loading = false;
      }).catch(err=>{
        that.loading = false;
        that.$message({message: err.message, type: 'error'});
      })
    },
    renderTable() {
      let start = (this.pageInfo.page-1) * this.pageInfo.pageSize
      let end = this.pageInfo.page * this.pageInfo.pageSize
      this.tableData = this.configData.slice(start, end)
    },
    handleDetailVisible(operation, item) {
      this.detailOperation = operation;
      this.detailVisible = true;
      this.detailIsEdit = true;
      if (operation==='Add') {
        this.currRow = {title: '', url: ''};
        this.detailIsEdit = false;
      } else {
        this.currRow = JSON.parse(JSON.stringify(item));
      }
    },
    viewAllModel() {
      let type = this.mapTypes[this.dataType];
      if (type) {
        this.allMapType = type;
        this.isAllMapShow = true;
      }  else {
        this.$message.error('该类型暂不支持预览');
        return;
      }
    },
    view(item) {
      // 0-GeoJson、1-3DTiles、2-gltf/glb、3-水面、4-地图
      this.mapItem = JSON.parse(JSON.stringify(item))
      let type = this.mapTypes[this.dataType];
      if (type) {
        this.mapType = type;
        this.isMapShow = true;
      }  else {
        this.$message.error('该类型暂不支持预览');
        return;
      }
    },
    closeMap() {
      this.isMapShow = false
      this.isAllMapShow = false
    },
    deleteConfig(item) {
      let that = this;
      this.$msgbox.confirm('确定要删除：'+item.key+'吗?').then(()=>{
        let params = {
          proxyType: this.proxyType,
          dataType: this.dataType,
          index: item.id
        }
        that.$request.deleteForm('/proxy_proxy/proxy_api/config/delete', params).then(res=>{
          if (res.code === 200) {
            that.$message({message:'删除成功', type: 'success'});
            that.getData();
          } else {
            that.$message({message:res.content, type: 'error'});
          }
        }).catch(err=>{
          that.$message({message:err.message, type: 'error'});
        })
      })

    },
  }
}
</script>

<style lang="less" scoped>
#configManage {
  width: 98%;
  height: 100%;

  .functionBtn {
    margin-top: 1%;
  }

  .tableContent {
    margin-top: 1%;
    .pagination {
      margin-top: 1%;
      position: relative;
      float: right;
      padding-bottom: 5%;
    }
  }
}
</style>