ojk_dtb_manage_ui/src/components/dataPublish/Publish.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 "./dialog/ConfigDetail.vue";
import CesiumMap from "./dialog/CesiumMap.vue";
import AllCesiumMap from "./dialog/AllCesiumMap.vue";

import api from "@/api/data/publish"

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];
      let obj = this.routerParam["publish_twoD"];
      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,
        dataType: this.dataType,
      };
      api.getList(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,
        };
        api
          .delItem(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%;
  margin-left: 20px;

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