红色移风切换图片或者VR,自动切换列表

src/store/modules/dialog.js

@@ -36,8 +36,8 @@ export default {
     szyfTalents: false,
     viewPdf: false,
     dyfcId: null,
-    yzfcId: null
+    yzfcId: null,
-
+    vrImg:false
   },
   mutations: {
     set_yfcj (state, visible) {
@@ -152,7 +152,10 @@ export default {
     },
     set_hsyf_djType (state, value) {
       state.djType = value
-    }
+    },
+    set_hsyf_vr_img(state, value) {
+      state.vrImg = value
+    },
   },
   actions: {
     SET_YFCJ (context, visible) {
@@ -268,6 +271,9 @@ export default {
     SET_GSXQ_ID (context, val) {
       context.commit('set_gsxq_id', val)
     },
+    SET_HSYF_VR_IMG(context, val){
+      context.commit('set_hsyf_vr_img', val)
+    },
     // 确保当前只能显示最近点击的弹窗
     showGlobalDialog (context, type) {
       context.commit('set_yfcj', false)
@@ -403,6 +409,7 @@ export default {
     dyfcId: state => state.dyfcId,
     yzfcId: state => state.yzfcId,
     szyfTalents: state => state.szyfTalents,
-    gsxq: state => state.gsxq
+    gsxq: state => state.gsxq,
+    vrImg:state => state.vrImg,
   }
 }

src/views/next/screen-content-left/hsyf-left/index.vue

@@ -112,7 +112,7 @@
       <screen-title-red>
         <div slot="left" class="screen-title-left">微网格</div>
       </screen-title-red>
-      <div class="card-item-tag">
+      <div class="card-item-tag" @click="handelClickSwitch">
         <div class="wwgCenter">
           <div class="wwgCenterZhuan"></div>
           <div class="wwgCenterWjx"></div>
@@ -401,7 +401,7 @@ export default {
   },
   beforeDestroy () {},
   methods: {
-    // ...mapGetters(['hsyfCompany']),
+   
     ...mapActions({
       // set_garden: 'SET_GARDEN',
       set_organization: 'SET_ORGANIZATION',
@@ -414,8 +414,12 @@ export default {
       set_dyzxh_committee: 'SET_DYZXH_COMMITTEE',
       set_dangyuan_committee: 'SET_DANGYUAN_COMMITTEE',
       set_hsyf_attractions: 'SET_HSYF_ATTRACTIONS',
-      set_hsyf_jzfw: 'SET_HSYF_JZFW'
+      set_hsyf_jzfw: 'SET_HSYF_JZFW',
+      set_hsyf_vr_img: 'SET_HSYF_VR_IMG'
     }),
+    handelClickSwitch(){
+      this.set_hsyf_vr_img(!this.vrImg)
+    },
     getData () {
       partyOrgCategoryAndQuantity().then((res) => {
         this.zzjsValues = res.data
@@ -516,7 +520,9 @@ export default {
     }
   },
   components: {},
-  computed: {},
+  computed: {
+    ...mapGetters(['vrImg'])
+  },
   watch: {}
 }
 </script>

src/views/next/screen-content-map/cpt/hsyf-iframe.vue

@@ -9,14 +9,15 @@
 -->
 <template>
   <div style="width: 100%; height: 100%;">
-    <div class='bg_img'>
+    <iframe  v-if="vrImg" src="https://quanjingtong.cn/t/h3qde4mz8ly" frameborder="no" width="100%" height="100%" id="myIframe">
-      <iframe src="https://quanjingtong.cn/t/h3qde4mz8ly" frameborder="no" width="100%" height="100%" id="myIframe">
+    </iframe>
-      </iframe>
+    <div class='bg_img' v-else>
     </div>
   </div>
 </template>
 
 <script>
+import { mapGetters} from 'vuex'
 export default {
   data() {
     return {}
@@ -41,15 +42,17 @@ export default {
     }
   },
   components: {},
-  computed: {},
+  computed: {
+    ...mapGetters(['vrImg'])
+  },
   watch: {}
 }
 </script>
 
 <style lang="scss" scoped>
 .bg_img {
-  // background: url('~@/assets/images/map/hsyf.jpg');
+  background: url('~@/assets/images/map/hsyf.jpg');
-  // background-size: 100% 100%;
+  background-size: 100% 100%;
   width: 100%;
   height: 100%;
   display: flex;