发布管理接口对接添加预览页面

Surpriseplus

2023-03-18 4c634c5542c4d61f33c98bc4756aca6e195ac6d2

发布管理接口对接添加预览页面

 src/api/api.js

@@ -1084,6 +1084,11 @@



//分页查询元数据 => æ ¹æ®å®žä½“名查询表名
export function publish_selectMetasByPage(params) {
  return request.get('/publish/selectMetasByPage', { params: params });
}





 src/assets/lang/en.js

@@ -1,5 +1,10 @@
const en = {
  common: {
    preview: 'preview',
    publish: "Publish",
    releaseTime: 'Release time',
    rublisher: 'Publisher',
    publishAddress: 'Publishing address',
    increase: 'increase',
    bak: 'Bak',
    domCode: 'DomCode',

 src/assets/lang/zh.js

@@ -1,5 +1,10 @@
const zh = {
  common: {
    preview: '预览',
    publish: "发布",
    releaseTime: '发布时间',
    rublisher: '发布人员',
    publishAddress: '发布地址',
    increase: '添加',
    bak: '备注',
    domCode: '编码',

 src/components/preview_map.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@

<template>
  <div
    id="mapdiv"
    class="previewBox"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      levelArray: [
        0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
        250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
        100, 50, 25, 10, 0,
      ],
    }
  },
  mounted() {
    this.init3DMap();
  },
  methods: {
    init3DMap() {
      //地图初始化
      window.sg = new SmartEarth.SGWorld("mapdiv", {
        url: SmartEarthRootUrl + "Workers/image/earth.jpg",
        licenseServer: window.sceneConfig.licenseServer,
      });

      window.Viewer = window.sg._Viewer;

      // Viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),
      // });

      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[1].url,
          maximumLevel: 18
        })
      );

      Viewer._enableInfoOrSelection = false;
      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false;
      //导航控件
      window.sg.navControl("nav", false);
      //比例尺
      window.sg.navControl("scale", false);
      //开启深度检测
      // sg.Analysis.depthTestAgainstTerrain(true)
      Viewer.scene.globe.depthTestAgainstTerrain = true;

      var option = {
        url: window.sceneConfig.SGUrl,
        layerName: window.sceneConfig.mptName,
        requestVertexNormals: true,
      };
      sg.Creator.sfsterrainprovider("", option, "", true, "");

      window.elevationTool = new SmartEarth.ElevationTool(window.sg);
      elevationTool.setContourColor("#F1D487");
      if (this.$store.state.previewLayer) {
        var res = this.$store.state.previewLayer;
        if (res.layer.indexOf('.png')) {
          console.log(res.layer)
          var wkt = this.$wkt.parse(res.geom);
          var height = this.getHeight(wkt.coordinates[2])
          console.log(wkt)
          window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
              url: res.layer,
              maximumLevel: 18
            })

          );
          debugger
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height),
          });
        }
      }
    },
    getHeight(level) {
      if (level > 0 && level < 23) {
        return this.levelArray[level]
      }
      return this.levelArray[this.levelArray.length - 1]
    },

  },

}
</script>

<style>
.previewBox {
  width: 100%;
  height: 100%;
}
</style>

 src/store/index.js

@@ -70,6 +70,7 @@
    catModelInfo: null,
    showPopBoxFlag: false,
    pickoption: null,
    previewLayer: null
  },
  mutations: {
    //获取权限合集

 src/views/Tools/AddOnlineMap.vue

@@ -168,7 +168,25 @@
            },

          ],
        },
        }, {
          name: '本地服务',
          sourceType: 'localmap',
          id: 3,
          isShow: true,
          list: [
            {
              name: "地图",
              image: require("../../assets/img/imageLayer/gdmap_map.jpg"),
              urls: "http://{host}/LFData/2d/tiles/vec/{z}/{x}/{y}.png",
            },
            {
              name: "影像",
              image: require("../../assets/img/imageLayer/gdmap_image.jpg"),
              urls: "http://{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png",
            },

          ],
        }

      ],
    };
@@ -259,16 +277,38 @@
          zIndex: -1
        });
        window.map.addLayer(window.olBaseMapLayer);
      } else if (mapCollection.sourceType === "localmap") {
        var ulr = map.urls;
        ulr = ulr.replace("{host}", iisHost)
        console.log(ulr)
        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: ulr,
            maximumLevel: this.data.maximumLevel,
          })
        );

        window.olBaseMapLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: ulr,
            wrapX: false
          }),
          zIndex: -1
        });
        window.map.addLayer(window.olBaseMapLayer);
      }
      Viewer.imageryLayers.lowerToBottom(window.BaseMapLayer);//将图层移到最底层

      Viewer.imageryLayers.raise(window.BaseMapLayer);//将图层上移一层





    },







    // æ·»åŠ æ•°æ®
    addData() {
      if (this.data.urls && this.data.sourceType) {

 src/views/datamanage/uploadmanage.vue

@@ -122,6 +122,13 @@
            ></i></el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <!-- å‘布 -->
          <el-button
            type="success"
            size="small"
            icon="el-icon-s-promotion"
          >{{$t('common.publish')}}</el-button>
          <!-- é‡ç½® -->
          <el-button
            type="info"
            size="small"
@@ -184,16 +191,37 @@
            align="center"
          />
          <el-table-column
            prop="layer"
            :label="$t('common.publishAddress')"
            align="center"
          />
          <el-table-column
            prop="uname"
            :label="$t('dataManage.vmobj.createonuser')"
            :label="$t('common.releaseTime')"
            align="center"
          />
          <el-table-column
            prop="createTime"
            :label="$t('dataManage.vmobj.createontime')"
            :label="$t('common.rublisher')"
            :formatter="formatData"
            align="center"
          />
          <el-table-column
            min-width="150"
            :label="$t('common.operate')"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.layer"
                size="small"
                type="success"
                plain
                @click="setPreviewLayer(scope.row)"
              >{{$t('common.preview')}}

              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
@@ -204,7 +232,7 @@
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listData.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-sizes="[100, 200, 500, 1000]"
          :page-size="listData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listData.count"
@@ -212,15 +240,29 @@
        </el-pagination>
      </div>
    </div>
    <!-- åœ°å€é¢„览 -->
    <el-dialog
      :title="$t('common.preview')"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      top="13vh"
    >
      <div style="width:100%;height:65vh">
        <mapview v-if="showMapView"></mapview>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import mapview from '../../components/preview_map.vue'
import MyBread from "../../components/MyBread.vue"
import { selectdepTab, selectdirTab, meta_selectVerByDirid } from '../../api/api.js'
import { selectdepTab, selectdirTab, meta_selectVerByDirid, publish_selectMetasByPage } from '../../api/api.js'

export default {
  components: { MyBread },
  components: { MyBread, mapview },
  data() {
    return {
      active: 'first',
@@ -235,7 +277,7 @@
      },
      listData: {
        pageIndex: 1,
        pageSize: 10,
        pageSize: 100,
        count: 0
      },
      multipleSelection: [],
@@ -244,19 +286,16 @@
      dirOption: [],
      verOption: [],
      typeOption: [{
        value: 't1',
        label: '全部'
      }, {
        value: 't2',
        value: 'DOM',
        label: '影像数据(.tif, .img)'
      }, {
        value: 't3',
        value: 'MPT',
        label: '场景数据(.mpt)'
      }, {
        value: 't4',
        value: '3DML',
        label: '三维模型(.3dml)'
      }, {
        value: 't5',
        value: 'BIM',
        label: '三维模型(.fbx, .ifc, .rvt)'
      }],
      defaultProps: {
@@ -266,9 +305,27 @@
        checkStrictly: true,
        emitPath: false,
      },
      dialogVisible: false,
      showMapView: false,

    }
  },
  methods: {
    //预览弹窗打开
    setPreviewLayer(res) {
      this.$store.state.previewLayer = res;
      this.dialogVisible = true;
      this.showMapView = true;

    },

    //预览弹窗关闭
    handleClose() {
      this.dialogVisible = false;
      this.showMapView = false;


    },
    // èŽ·å–多选选中的对象
    handleSelectionChange(val) {
      this.multipleSelection = val
@@ -281,6 +338,15 @@
      } else {
        return row.sizes + " MB"
      }
    },
    //格式化地址
    formatLayer(row, column) {
      let data = row.layer
      if (data == null) {
        return data
      }

      return data.replace("{host}", iisHost)
    },
    //格式化时间
    formatData(row, column) {
@@ -328,7 +394,7 @@
      }
      this.listData = {
        pageIndex: 1,
        pageSize: 10,
        pageSize: 100,
        count: 0
      }
      this.formInline.type = this.typeOption[0].value;
@@ -343,7 +409,7 @@
        return
      }
      this.dirOption = this.treeData(data.result);
      this.formInline.dirid = this.dirOption[0].id;
      this.formInline.dirid = this.dirOption[0].code;
      this.formInline.dirName = this.dirOption[0].name;
      this.getVerList()
    },
@@ -370,19 +436,68 @@
    },
    //单位列表切换
    handleDepChange(data, node, nodeData) {
      this.formInline.depid = data.id
      this.formInline.depid = data.code
      this.formInline.depName = data.name
      this.getTableData();
    },
    //单位列表切换
    //目录列表切换
    handleDirChange(data, node, nodeData) {
      this.formInline.dirid = data.id

      this.formInline.dirid = data.code
      this.formInline.dirName = data.name
      this.getVerList()
    },
    //获取Table表格数据
    getTableData() {
    async getTableData() {
      this.listData.depcode = this.formInline.depid;
      this.listData.dircode = this.formInline.dirid;
      this.listData.name = this.formInline.name;
      this.listData.type = this.formInline.type;
      this.listData.verid = this.formInline.verid;
      const data = await publish_selectMetasByPage(this.listData)
      if (data.code != 200) {

      }
      var that = this
      var val = data.result.filter((res) => {
        if (res.createTime) {
          res.createTime = that.format(res.createTime);
        }
        if (res.layer) {
          res.layer = res.layer.replace("{host}", iisHost);
        }
        return res
      })
      this.tableData = val;
      this.listData.count = data.count;
    },
    //格式化时间
    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;
    },
    //获取单位列表
    async getDepTreeList() {
@@ -392,7 +507,7 @@
        return
      }
      this.depOption = this.treeData(data.result);
      this.formInline.depid = this.depOption[0].id
      this.formInline.depid = this.depOption[0].code
      this.formInline.depName = this.depOption[0].name
    },
    //树列表生成