折腾啥呢

jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "exclude": ["libs", "node_modules"]
+}

package.json

@@ -9,28 +9,29 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.27.2",
-    "core-js": "^3.6.5",
+    "axios": "^1.1.3",
+    "core-js": "^3.8.3",
     "element-ui": "^2.15.6",
     "html2canvas": "^1.3.3",
     "install": "^0.13.0",
-    "npm": "^8.10.0",
-    "swiper": "^5.3.8",
+    "swiper": "^8.4.4",
     "v-viewer": "^1.6.4",
-    "vue": "^2.6.11",
-    "vue-awesome-swiper": "^4.1.1",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.5.1",
+    "vue": "^2.6.14",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.0.4",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "eslint": "^7.32.0",
     "less-loader": "^5.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "less": "^3.0.4",
+    "vue-template-compiler": "^2.6.14"
   }
 }

src/libs/pano-core/utils.js

@@ -4,54 +4,54 @@ import Vue from 'vue'
 let vue = new Vue()
 
 export default class Utils {
-  constructor(){
-    
+  constructor() {
+
   }
   /**
    * 设置初始视角
    */
-  setInitView(krpano,canvas) {
-      let url = this.setInitAngleImg(canvas);
-      var sceneName = krpano.get('xml.scene');
-      var hlookat = krpano.get("view.hlookat");
-      var vlookat = krpano.get("view.vlookat");
-      console.log(hlookat,vlookat);
-      return {
-        sceneName,
-        hlookat,
-        vlookat,
-        url
-      }
+  setInitView(krpano, canvas) {
+    let url = this.setInitAngleImg(canvas)
+    var sceneName = krpano.get('xml.scene')
+    var hlookat = krpano.get("view.hlookat")
+    var vlookat = krpano.get("view.vlookat")
+    console.log(hlookat, vlookat)
+    return {
+      sceneName,
+      hlookat,
+      vlookat,
+      url
+    }
   }
 
   scaleCanvas (canvas, width, height) {
     let w = canvas.width
-    let h = canvas.height;
-    
+    let h = canvas.height
+
     if (width == undefined) {
-        width = w;
+      width = w
     }
     if (height == undefined) {
-        height = h;
+      height = h
     }
-    var retCanvas = document.createElement('canvas');
-    var retCtx = retCanvas.getContext('2d');
-    retCanvas.width = width;
-    retCanvas.height = height;
-    retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
-    return retCanvas;
+    var retCanvas = document.createElement('canvas')
+    var retCtx = retCanvas.getContext('2d')
+    retCanvas.width = width
+    retCanvas.height = height
+    retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height)
+    return retCanvas
   }
-  
+
   getDataURL (canvas, type, width, height) {
-    let cas = this.scaleCanvas(canvas, width, height);
-    return cas.toDataURL(type, 1);
+    let cas = this.scaleCanvas(canvas, width, height)
+    return cas.toDataURL(type, 1)
   }
 
-  setInitAngleImg(mycanvas){
-      var url = this.getDataURL(mycanvas,"image/jpeg",600,400);
-      return url
+  setInitAngleImg(mycanvas) {
+    var url = this.getDataURL(mycanvas, "image/jpeg", 600, 400)
+    return url
   }
-  radarRotate(){
+  radarRotate() {
     // console.log(sceneName,hlookat);
   }
 
@@ -59,7 +59,7 @@ export default class Utils {
    * 编辑热点
    */
 
-  edithotspot(krpano,param){
+  edithotspot(krpano, param) {
     krpano.call(`editImgTextHotSpot(
       ${param.img},
       ${param.name},
@@ -71,118 +71,118 @@ export default class Utils {
       ${param.link},
       ${true},
       ${param.visible},
-      ${param.size||1},
-      ${param.fontSize})`); 
-   }
+      ${param.size || 1},
+      ${param.fontSize})`)
+  }
 
 
   /**
    * 添加热点
    */
 
-  addhotspot(krpano,param, type){
-    krpano.set("curscreen_x", $('#pano').width() / 2);
-    krpano.set("curscreen_y", $('#pano').height() / 2);
-    krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);");
-    let ath = krpano.get("curscreen_ath");
-    let atv = krpano.get("curscreen_atv");
+  addhotspot(krpano, param, type) {
+    krpano.set("curscreen_x", $('#pano').width() / 2)
+    krpano.set("curscreen_y", $('#pano').height() / 2)
+    krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);")
+    let ath = krpano.get("curscreen_ath")
+    let atv = krpano.get("curscreen_atv")
     // 修改标签图片
     krpano.call(`addImgTextHotSpot(
       
-      static/panoassets/images/hotspot/icon/tab.svg,
+      static-qjkk/panoassets/images/hotspot/icon/tab.svg,
       ${param.name},
       ${param.hotspotTitle},
-      ${param.ath!=''?param.ath:ath},
-      ${param.atv!=''?param.atv:atv},
+      ${param.ath != '' ? param.ath : ath},
+      ${param.atv != '' ? param.atv : atv},
       ${true},
       ${type},
       ${param.link},
       ${true},
       ${param.visible},
       ${(100) || 1},
-      ${Number(param.fontSize)})`); 
-
-
-      // 设置热点图片默认的偏移值
-      let offset = '-130%'
-      if (param.size < 1) {
-        offset = '-200%'
-      }
-      if (param.size > 1) {
-        offset = '-100%'
-      }
-      krpano.set('layer[tooltip_'+param.name+'].y',`${offset}`)
-      
+      ${Number(param.fontSize)})`)
+
+
+    // 设置热点图片默认的偏移值
+    let offset = '-130%'
+    if (param.size < 1) {
+      offset = '-200%'
+    }
+    if (param.size > 1) {
+      offset = '-100%'
+    }
+    krpano.set('layer[tooltip_' + param.name + '].y', `${offset}`)
+
   }
 
   htmlEncode(str) {
-      var s = "";
-      if (str.length == 0) return "";
-      s = str.replace(/\'/g, "&#39;");
-      s = s.replace(/\"/g, "&quot;");
-      s = s.replace(/\(/g, "（");
-      s = s.replace(/\)/g, "）");
-      s = s.replace(/,/g, "，");
-      return s;
+    var s = ""
+    if (str.length == 0) return ""
+    s = str.replace(/\'/g, "&#39;")
+    s = s.replace(/\"/g, "&quot;")
+    s = s.replace(/\(/g, "（")
+    s = s.replace(/\)/g, "）")
+    s = s.replace(/,/g, "，")
+    return s
   }
 
   /**
-   * 
-   * @param {*} 定位热点 
+   *
+   * @param {*} 定位热点
    */
 
-  looktohotspot(krpano, hotspotName){
-      var curFov = krpano.get('view.fov');
-      krpano.call('looktohotspot('+hotspotName+','+curFov+')');
+  looktohotspot(krpano, hotspotName) {
+    var curFov = krpano.get('view.fov')
+    krpano.call('looktohotspot(' + hotspotName + ',' + curFov + ')')
   }
 
 
   /**
-   * 
-   * @param {*} 定位热点 
+   *
+   * @param {*} 定位热点
    */
 
-  getHotspotHV(krpano, hotspotName){
-      var ath = krpano.get(`hotspot[${hotspotName}].ath`);
-      var atv = krpano.get(`hotspot[${hotspotName}].atv`);
-      return {ath,atv}
+  getHotspotHV(krpano, hotspotName) {
+    var ath = krpano.get(`hotspot[${hotspotName}].ath`)
+    var atv = krpano.get(`hotspot[${hotspotName}].atv`)
+    return { ath, atv }
   }
 
-    
+
   /**
    * 打开热点链接
    */
 
-  linkopen(sceneCode, id){
+  linkopen(sceneCode, id) {
     // vue.$bus.emit('clickHotspot', id)
     vue.$msgCenter.publish('clickHotspot', id)
   }
-  
+
   /**
    * 初始化
    */
 
-  initHotspot(krpano,someData,type){
+  initHotspot(krpano, someData, type) {
 
     if (!someData) {
-      return 
+      return
     }
     let mysd = someData
     if (typeof someData == 'string') {
-      mysd =  JSON.parse(someData)
+      mysd = JSON.parse(someData)
     }
     mysd.hotspots.forEach(item => {
-      this.addhotspot(krpano,item,type)
-    });
+      this.addhotspot(krpano, item, type)
+    })
   }
 
   /**
    * 显示隐藏热点
    */
 
-  toggleHotspot(krpano,toggle){
+  toggleHotspot(krpano, toggle) {
     try {
-      krpano.call(`set_hotspot_visible(${toggle})`);
+      krpano.call(`set_hotspot_visible(${toggle})`)
     } catch (e) {
       e
     }
@@ -197,7 +197,7 @@ export default class Utils {
 
 // toggleHotspot(krpano,someData,toggle){
 //   if (!someData) {
-//     return 
+//     return
 //   }
 //   let mysd = JSON.parse(someData)
 //   mysd.hotspots.forEach(item => {

src/mixins/index.js

@@ -4,12 +4,12 @@ import browser from '@/utils/browser'
 Vue.prototype.$bus = new Vue()
 
 Vue.mixin({
-    data() {
-        return {
-          isMobile: browser.mobile
-        }
-    },
-    methods: {
+  data() {
+    return {
+      isMobile: browser.mobile
     }
+  },
+  methods: {
+  }
 })
 

src/pages/Home.vue

@@ -82,11 +82,17 @@
 
     </div>
 
-    <!-- 全景图 -->
-    <div
-      id="pano"
-    />
-
+    <transition>
+      <!-- 全景图 -->
+      <!-- https://zzbbh.4dage.com/SWKK/show.html?id=WK1628651656780496896&vr=fd720_7cJ6ECymB -->
+      <div
+        id="pano"
+      />
+
+      <button class="startup">
+        <img class="" src="@/assets/images/begin-explore.png" alt="" draggable="false">
+      </button>
+    </transition>
   </div>
 </template>
 
@@ -339,5 +345,16 @@ export default {
   top: 0;
   width: 100%;
   height: 100%;
+  z-index: 9999;
+}
+button.startup {
+  position: absolute;
+  bottom: 85px;
+  left:50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  > img {
+    width: 141px;
+  }
 }
 </style>

vue.config.js

@@ -27,7 +27,6 @@ module.exports = {
     ],
   },
   devServer: {
-    inline: false,
     hot: true,
     liveReload: false,
     port: 8081,