shuishen
2022-03-08 368cadf28a912e35bd9d8017588cb0aefffc7b79
src/pcviews/specialmap/welcome.vue
@@ -11,7 +11,7 @@
              @click="panoramaPlay"
              class="panorama-control"
              src="/img/icon/panorama.png"
              alt=""
                            alt
            />
          </a>
          <a href="javascript:void(0);" title="语音介绍">
@@ -19,16 +19,11 @@
              @click="audioPlay"
              class="audio-control"
              src="/img/navicon/audio.png"
              alt=""
                            alt
            />
          </a>
          <a href="javascript:void(0);" title="关闭">
            <img
              @click="closeModel"
              class="close-box"
              src="/img/navicon/close.png"
              alt=""
            />
                        <img @click="closeModel" class="close-box" src="/img/navicon/close.png" alt />
          </a>
        </div>
      </div>
@@ -59,7 +54,7 @@
                @click="(panoramaShow = false), (panoramaUrl = '')"
                class="close-box"
                src="/img/navicon/close.png"
                alt=""
                                alt
              />
            </a>
          </div>
@@ -77,143 +72,138 @@
</template>
<script>
import { getWelcome } from "@/api/pc/public/specialmap";
import { mapGetters } from "vuex";
import { getWelcome } from '@/api/pc/public/specialmap'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      time: "",
      sponsor: "",
      undertake: "",
      title: "",
      introduce: "",
            time: '',
            sponsor: '',
            undertake: '',
            title: '',
            introduce: '',
      list: [],
      pathList: [],
      pointNameList: [],
      pointList: [],
      DC: null,
      pathLayer: null,
      pointLayer: null,
      panoramaUrlOne: "",
      panoramaUrl: "",
      audioSource: "",
            panoramaUrlOne: '',
            panoramaUrl: '',
            audioSource: '',
      audioFlag: false,
      audioCourse: false,
      audioSynth: null,
      audioMsg: null,
      panoramaShow: false,
    };
            panoramaShow: false
        }
  },
  created() {},
  mounted() {
    // console.log("显示", "see1");
        this.audioSynth = window.speechSynthesis
    this.DC = global.DC;
    this.audioSynth = window.speechSynthesis;
    this.audioMsg = new window.SpeechSynthesisUtterance();
        this.audioMsg = new window.SpeechSynthesisUtterance()
    this.audioMsg.onend = function () {
      // this.audioSynth.cancel();
      this.audioFlag = false;
      this.audioCourse = false;
    };
    this.getData();
            this.audioFlag = false
            this.audioCourse = false
        }
        this.getData()
  },
  computed: {
    ...mapGetters([
      "viewer",
            'viewer',
      // 校区内导航的显示关闭
      "campusNavFlag",
      "orgNavBarFlag",
      "arcNavBarFlag",
    ]),
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag'
        ])
  },
  methods: {
    getData() {
      getWelcome({ hdname: "校区迎新" }).then((res) => {
        var result = res.data.data;
        this.title = result.hdname;
        this.time = result.time;
        this.sponsor = result.sponsor;
        this.undertake = result.undertake;
        this.panoramaUrl = result.panoramaurl;
        this.panoramaUrlOne = result.panoramaurl;
        this.introduce = result.context;
        this.audioSource = result.context;
            getWelcome({ hdname: '校区迎新' }).then((res) => {
                var result = res.data.data
                this.title = result.hdname
                this.time = result.time
                this.sponsor = result.sponsor
                this.undertake = result.undertake
                this.panoramaUrl = result.panoramaurl
                this.panoramaUrlOne = result.panoramaurl
                this.introduce = result.context
                this.audioSource = result.context
        this.audioPlay();
                this.audioPlay()
        this.list = result.tpurl.split(",");
        this.pointNameList = result.addressname.split(",");
        this.pointList = result.address.split(";");
                this.list = result.tpurl.split(',')
                this.pointNameList = result.addressname.split(',')
                this.pointList = result.address.split(';')
        var a = result.lx.split(";");
                var a = result.lx.split(';')
        a.forEach((item) => {
          var b = item.split("(");
          var c = b[1].substr(0, b[1].length - 1);
          var d = c.split(",");
          var j = [];
                    var b = item.split('(')
                    var c = b[1].substr(0, b[1].length - 1)
                    var d = c.split(',')
                    var j = []
          d.forEach((it) => {
            var e = it.split(" ");
            var f = e.join(",");
            j.push(f);
          });
          var k = j.join(";");
          this.pathList.push(k);
        });
                        var e = it.split(' ')
                        var f = e.join(',')
                        j.push(f)
                    })
                    var k = j.join(';')
                    this.pathList.push(k)
                })
        this.pathLayer = new this.DC.VectorLayer("pathLayer");
        this.viewer.addLayer(this.pathLayer);
                this.pathLayer = new global.DC.VectorLayer('pathLayer')
                this.viewer.addLayer(this.pathLayer)
        this.pointLayer = new this.DC.HtmlLayer("pointLayer");
        this.viewer.addLayer(this.pointLayer);
                this.pointLayer = new global.DC.HtmlLayer('pointLayer')
                this.viewer.addLayer(this.pointLayer)
        this.pathList.forEach((item) => {
          this.drawPolyline(item);
        });
                    this.drawPolyline(item)
                })
        this.pointList.forEach((item, index) => {
          this.drawPoint(item.split(","), this.pointNameList[index]);
        });
                    this.drawPoint(item.split(','), this.pointNameList[index])
                })
        if (this.pointList.length > 0) {
          this.$store.dispatch("pcMoveView", {
                    this.$store.dispatch('pcMoveView', {
            viewer: this.viewer,
            jd: +this.pointList[0].split(",")[0] - 0.0005,
            wd: this.pointList[0].split(",")[1],
          });
                        jd: +this.pointList[0].split(',')[0] - 0.0005,
                        wd: this.pointList[0].split(',')[1]
                    })
        } else {
          this.$store.dispatch("pcMoveView", {
                    this.$store.dispatch('pcMoveView', {
            viewer: this.viewer,
            jd: +this.pathList[0].split(";")[0].split(",")[0] - 0.0005,
            wd: this.pathList[0].split(";")[0].split(",")[1],
          });
                        jd: +this.pathList[0].split(';')[0].split(',')[0] - 0.0005,
                        wd: this.pathList[0].split(';')[0].split(',')[1]
                    })
        }
      });
            })
    },
    drawPolyline(item) {
      const polyline = new this.DC.Polyline(item);
            const polyline = new global.DC.Polyline(item)
      polyline.setStyle({
        width: 6,
        arcType: true,
        material: new this.DC.PolylineImageTrailMaterialProperty({
          color: new this.DC.Color(255, 0, 0),
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: new global.DC.Color(255, 0, 0),
          speed: 60,
          image: "/img/icon/right.png",
          repeat: { x: 320, y: 1 },
                    image: '/img/icon/right.png',
                    repeat: { x: 320, y: 1 }
        }),
        clampToGround: true,
      });
                clampToGround: true
            })
      this.pathLayer.addOverlay(polyline);
            this.pathLayer.addOverlay(polyline)
    },
    drawPoint(item, name) {
      const divIcon = new this.DC.DivIcon(
        new this.DC.Position(Number(item[0]), Number(item[1]), 0),
            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(Number(item[0]), Number(item[1]), 0),
        `
                    <div class="point-entitys-box">
                        <div class="point-logo">
@@ -224,46 +214,46 @@
                        </div>
                    </div>
                `
      );
      this.pointLayer.addOverlay(divIcon);
            )
            this.pointLayer.addOverlay(divIcon)
    },
    audioPlay() {
      if (this.audioFlag == false) {
        this.audioMsg.text = this.audioSource;
        this.audioSynth.speak(this.audioMsg);
        this.audioFlag = true;
        this.audioCourse = true;
                this.audioMsg.text = this.audioSource
                this.audioSynth.speak(this.audioMsg)
                this.audioFlag = true
                this.audioCourse = true
      } else {
        if (this.audioCourse == true) {
          this.audioSynth.pause();
          this.audioCourse = false;
                    this.audioSynth.pause()
                    this.audioCourse = false
        } else {
          this.audioSynth.resume();
          this.audioCourse = true;
                    this.audioSynth.resume()
                    this.audioCourse = true
        }
      }
    },
    closeModel() {
      this.viewer.removeLayer(this.pathLayer);
      this.viewer.removeLayer(this.pointLayer);
            this.viewer.removeLayer(this.pathLayer)
            this.viewer.removeLayer(this.pointLayer)
      this.audioSynth.cancel();
      this.audioFlag = false;
      this.audioCourse = false;
            this.audioSynth.cancel()
            this.audioFlag = false
            this.audioCourse = false
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push("/pcLayout/default");
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
    },
    panoramaPlay() {
      this.panoramaShow = true;
      this.panoramaUrl = this.panoramaUrlOne;
    },
            this.panoramaShow = true
            this.panoramaUrl = this.panoramaUrlOne
        }
  },
  destroyed() {
    // this.audioPlay();
    // console.log("关闭", "see1");
  },
};
    }
}
</script>
<style lang="scss" scope>
@@ -358,7 +348,7 @@
          box-sizing: border-box;
          box-shadow: 0px 0px 4px 1px #fff;
          border-radius: 50%;
          content: "";
                    content: '';
        }
      }
@@ -395,7 +385,7 @@
        box-sizing: border-box;
        box-shadow: 0px 0px 4px 1px #fff;
        border-radius: 50%;
        content: "";
                content: '';
      }
    }