综合展示点击模型显示详细信息

Surpriseplus

2023-03-09 6fe940335b9ca7f4640983929b070c00e401dc61

 src/components/mapsdk.vue

@@ -351,9 +351,14 @@
      >
        <el-card class="box-card">
          <div slot="header">
            <span>{{$store.state.propertiesName.tabDesc || '属性信息'}}</span>
            <span>属性信息</span>
            <div style="float: right; cursor: pointer">
              <el-link type="primary" :underline="false" @click="getAttatchList" style="margin-right: 10px">查看附件</el-link>
              <el-link
                type="primary"
                :underline="false"
                @click="getAttatchList"
                style="margin-right: 10px"
              >查看附件</el-link>
              <i
                class="el-icon-close"
                @click="closeBufferBox(6)"
@@ -369,49 +374,82 @@
              v-for="(value, key) in $store.state.propertiesInfo"
              :key="key"
            >
              <span v-if="key != 'eventid'" style="font-size: 14px;font-weight: bold;margin-right: 5px">{{key}}:</span>
              <span
                v-if="key != 'eventid'"
                style="font-size: 14px;font-weight: bold;margin-right: 5px"
              >{{key}}:</span>
              <span v-if="key != 'eventid'">{{value}}</span>
            </div>
          </div>
        </el-card>
      </div>

      <div
        class="propertiesPop"
        v-if="$store.state.propertiesFlag == '2'"
      >
        <el-card class="box-card">
          <div slot="header">
            <span>{{ $store.state.propertiesInfo.title }}</span>
          </div>
          <div
            class="pointInfoBoxContext"
            style="height:250px;overflow-y: auto"
          >
            <div style="line-height: 20px">岩土名称： {{ $store.state.propertiesInfo.name }}</div>
            <div style="line-height: 20px">岩土类型： {{ $store.state.propertiesInfo.type }}</div>
            <div style="line-height: 20px">层底深度： {{ $store.state.propertiesInfo.botdepth }} 米</div>
            <div style="line-height: 20px">描述： {{ $store.state.propertiesInfo.describe }}</div>
          </div>

        </el-card>
      </div>

      <!--附件列表弹窗-->
      <el-dialog
          title="附件列表"
          :append-to-body="false"
          :visible.sync="showAttach"
          width="35%"
          :close-on-click-modal="false"
        title="附件列表"
        :append-to-body="false"
        :visible.sync="showAttach"
        width="35%"
        :close-on-click-modal="false"
      >
        <div>
          <el-table
              :data="attachList"
              height="100%"
              style="width: 100%"
              border
            :data="attachList"
            height="100%"
            style="width: 100%"
            border
          >
            <el-table-column
                align="center"
                type="index"
                label="序号"
                width="50"
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
                prop="name"
                label="名称">
              prop="name"
              label="名称"
            >
            </el-table-column>
            <el-table-column
                label="时间"
                width="180">
              label="时间"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{format(scope.row.createTime)}}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100">
              label="操作"
              width="100"
            >
              <template slot-scope="scope">
                <el-button v-if="showAttachDetailBtn(scope.row)" @click="showAttachDetail(scope.row)" type="text" size="small">查看</el-button>
                <el-button
                  v-if="showAttachDetailBtn(scope.row)"
                  @click="showAttachDetail(scope.row)"
                  type="text"
                  size="small"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -419,32 +457,32 @@
      </el-dialog>
      <!--附件弹窗-->
      <el-dialog
          title="预览"
          :append-to-body="false"
          :visible.sync="dialog.dialogVisible"
          width="70%"
          :close-on-click-modal="false"
        title="预览"
        :append-to-body="false"
        :visible.sync="dialog.dialogVisible"
        width="70%"
        :close-on-click-modal="false"
      >
        <div
            v-if="dialog.isPdf"
            class="pdfClass"
          v-if="dialog.isPdf"
          class="pdfClass"
        >
          <iframe
              :src="dialog.src"
              type="application/x-google-chrome-pdf"
              width="100%"
              height="100%"
            :src="dialog.src"
            type="application/x-google-chrome-pdf"
            width="100%"
            height="100%"
          >
          </iframe>
        </div>
        <div
            v-if="dialog.isJpg"
            class="pdfClass"
          v-if="dialog.isJpg"
          class="pdfClass"
        >
          <img
              style="width:100%; height:100%;"
              :src="dialog.src"
              alt=""
            style="width:100%; height:100%;"
            :src="dialog.src"
            alt=""
          />
        </div>
      </el-dialog>
@@ -472,7 +510,7 @@
  comprehensive_selectRoute,
  dataLib_selectFiles
} from "../api/api";
import {getToken} from '@/utils/auth'
import { getToken } from '@/utils/auth'

export default {
  name: "",
@@ -567,8 +605,8 @@
        height: '10'
      },
      showLengendDialog: false,
      showAttach:false,
      attachList:[],
      showAttach: false,
      attachList: [],
      dialog: {
        dialogVisible: false,
        isPdf: false,
@@ -585,8 +623,37 @@
    this.$bus.$on('changemapType', (e) => {
      this.show2DMap = e;
    });
    //模型捕捉
    this.catchmodel()
  },
  methods: {

    catchmodel() {
      var that = this;
      window.pickedFeature;
      window.pickedColor;
      window.modeCatchHandler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      window.modeCatchHandler.setInputAction((event) => {
        window.pickedFeature && (window.pickedFeature.color = window.pickedColor);
        window.pickedFeature = sgworld.Viewer.scene.pick(event.position);
        if (Cesium.defined(window.pickedFeature)) {
          if (window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
            if (window.pickedFeature && window.pickedFeature.getProperty) {
              window.pickedColor = window.pickedFeature.color
              window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);

              this.$store.state.catModel = true;
              this.$store.state.catModelInfo = {
                id: pickedFeature.getProperty("id"),
                name: pickedFeature.getProperty("name"),
                layerId: pickedFeature.primitive.layerId,
                layerName: pickedFeature.primitive.id
              };
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    drawTerrainLevel() {
      this.clearTerrainLevel()
      var deep = parseFloat(this.terrainFrom.height)
@@ -643,13 +710,13 @@
          url: gaoDeBaseUrl[1].url,
        })
      );
      this.layer3 = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[2].url,
        })
      );
      // this.layer3 = Viewer.imageryLayers.addImageryProvider(
      //   new Cesium.UrlTemplateImageryProvider({
      //     url: gaoDeBaseUrl[2].url,
      //   })
      // );

      window.ImageLayer3 = this.layer3;
      // window.ImageLayer3 = this.layer3;

      // for (var i in gaoDeBaseUrl) {
      //   sgworld.Creator.createUrlTemplateImageryProvider(
@@ -718,18 +785,18 @@
    },
    setLayerVisible() {
      if (this.isActive == true) {
        // Viewer.imageryLayers._layers[1].show = true
        // Viewer.imageryLayers._layers[2].show = false
        Viewer.imageryLayers._layers[1].show = true
        Viewer.imageryLayers._layers[2].show = false
        // Viewer.imageryLayers._layers[3].show = false

        Viewer.imageryLayers.lower(this.layer2);
        Viewer.imageryLayers.lower(this.layer3);
        // Viewer.imageryLayers.lower(this.layer2);
        // Viewer.imageryLayers.lower(this.layer3);
      } else {
        Viewer.imageryLayers.raise(this.layer3);
        Viewer.imageryLayers.raise(this.layer2);
        // Viewer.imageryLayers.raise(this.layer3);
        // Viewer.imageryLayers.raise(this.layer2);

        // Viewer.imageryLayers._layers[1].show = false
        // Viewer.imageryLayers._layers[2].show = true
        Viewer.imageryLayers._layers[1].show = false
        Viewer.imageryLayers._layers[2].show = true
        // Viewer.imageryLayers._layers[3].show = true
      }
    },
@@ -1163,11 +1230,15 @@
    },
    //获取附件列表
    async getAttatchList() {
      let tabName = this.$store.state.propertiesName.ns+'.'+this.$store.state.propertiesName.tab;
      if (this.$store.state.propertiesName == null) {
        return
      }
      let tabName = this.$store.state.propertiesName.ns + '.' + this.$store.state.propertiesName.tab;
      let eventid = this.$store.state.propertiesInfo.eventid;

      var obj = {
        eventid:eventid,
        tabName:tabName,
        eventid: eventid,
        tabName: tabName,
      };
      const res = await dataLib_selectFiles(obj);
      if (res.code != 200) {
@@ -1182,7 +1253,7 @@
      this.showAttach = true;
    },
    //是否显示查看按钮
    showAttachDetailBtn(row){
    showAttachDetailBtn(row) {
      var name = row.name;
      if (name.indexOf('.pdf') != -1 || name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
        return true;
@@ -1197,19 +1268,19 @@
      this.dialog.isJpg = false;
    },
    //查看附件
    showAttachDetail(row){
    showAttachDetail(row) {
      this.refreshAttatchDetail();
      var name = row.name;
      if (name.indexOf('.pdf') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isPdf = true;
        var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
        var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      }
      else if (name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isJpg = true;
        var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
        var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      }
    },
@@ -1224,17 +1295,17 @@
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
          y +
          '-' +
          this.add0(m) +
          '-' +
          this.add0(d) +
          ' ' +
          h +
          ':' +
          mm +
          ':' +
          s
        y +
        '-' +
        this.add0(m) +
        '-' +
        this.add0(d) +
        ' ' +
        h +
        ':' +
        mm +
        ':' +
        s
      );
    },
    //格式化时间
@@ -1295,6 +1366,7 @@
        padding: 10px 20px;
      }
    }

    .terrainLevelBox {
      width: 350px;
      height: 370px;
@@ -1302,14 +1374,6 @@
      position: absolute;
      right: 8%;
      bottom: -11%;
    }
    .pathAnalysisBox {
      width: 412px;

      z-index: 40;
      position: absolute;
      right: 8%;
      bottom: 1%;
    }

    .box-card {