1

src/components/Cjmsbtm.vue

@@ -27,7 +27,7 @@
 				                :key="indexP + 'progress'"
 				              >
 				                <div class="leftIcon">
-				                  <img class="pregressIcon" :src="icon" alt="" />
+				                  <img class="pregressIcon" :src="icons[indexP]" alt="" @click="iconsClick(indexP)"/>
 				                </div>
 				                <!-- 最后一个不展示箭头 -->
 				                <!-- <img
@@ -36,7 +36,8 @@
 				                  alt=""
 				                  class="arrowSquare"
 				                /> -->
-				  						   <span>摄像头</span>
+				  						   <!--<span>摄像头</span>-->
+				  						   <span>{{names[indexP]}}</span>
 				              </div>
 				            </div>
 				          </div>
@@ -62,11 +63,23 @@
 <script>
 	import arrowL from '@/assets/images/yj-cjmsbtnleft.png';
 	import arrowR from '@/assets/images/yj-cjmsbtnright.png';
-	import icon from '@/assets/images/yj-cjmsimg.png';
+	// import icon from '@/assets/images/yj-cjmsimg.png';
+	import icon_0 from '@/assets/images/cjms_camera/yj-cjmsimg2.png';
+	import icon_1 from '@/assets/images/cjms_camera/water_1.jpg';
+	import icon_2 from '@/assets/images/cjms_camera/water_2.png';
+	import icon_3 from '@/assets/images/cjms_camera/water_3.png';
+	import icon_4 from '@/assets/images/cjms_camera/water_4.png';
 	import iconArrow from '@/assets/images/yj-navimg2.png';
 
 export default {
-  name: 'Cjmscon',
+	props: {
+		changeMainPic: {
+			type: Function,
+			default: null
+		}
+	},
+
+		name: 'Cjmscon',
   data(){
   	return {
 		nowdate : '', //日期
@@ -87,7 +100,12 @@ export default {
 		      ],
 		      arrowL,
 		      arrowR,
-		      icon,
+	  	icons:[
+				  icon_0, icon_1, icon_2, icon_3, icon_4, icon_1, icon_2, icon_3, icon_1, icon_2
+			  ],
+		names:[
+				  "摄像头1", "摄像头2"
+			  ],
 		      iconArrow,
 		      currentProgressId: '',
 		      scrollResultWidth: 0, //transform滚动的距离
@@ -117,6 +135,11 @@ export default {
             },
 
   methods: {
+  	//更改轮播图片
+	  iconsClick(index){
+		  this.changeMainPic(this.icons[index])
+	  	// alert(index)
+	  },
          //获取时间
                 timerOneScondRun() {
                 	let date = new Date();

src/components/Cjmscon.vue

@@ -8,30 +8,39 @@
 			<a><i class="iconfont yj-icon-fengxiantishi"></i>风险&nbsp;1</a>
 		</div>
 		<div class="cjmscon-map">
-			<img src="../assets/images/yj-cjmsimg2.png" />
+			<!--<img src="../assets/images/yj-cjmsimg2.png" />-->
+			<img :src="mainPicSrc" />
 		</div>
 	</div>
 </template>
 <script>
-	
-	
+
+
 export default {
   name: 'Cjmsbtm',
   data(){
   	return {
-		
+		// mainPicSrc:"../assets/images/yj-cjmsimg2.png",
+		mainPicSrc:"/img/yj-cjmsimg2.3c5ccc04.png",
+			// <img data-v-54aa8595="" src="/img/yj-cjmsimg2.3c5ccc04.png">
 		}
-		    
+
   },
   created() {
 
     },
    mounted () {
-       
+
             },
-   
+
   methods: {
-         
+	  changeMainPic(src){
+	  	// alert(src)
+		// /img/yj-cjmsimg2.3c5ccc04.png
+				this.mainPicSrc = src;
+
+	  }
+
 },
 }
 </script>

src/views/YjCjms.vue

@@ -3,8 +3,8 @@
 		 <Cjmsheader></Cjmsheader>
 		 <Cjmsleftnav></Cjmsleftnav>
 		 <Cjmsrightnav></Cjmsrightnav>
-		 <Cjmsbtm></Cjmsbtm>
-		 <Cjmscon></Cjmscon>
+		 <Cjmsbtm :changeMainPic = changeMainPic></Cjmsbtm>
+		 <Cjmscon ref="Cjmscon"></Cjmscon>
 	</div>
 </template>
 
@@ -24,7 +24,12 @@ export default {
 	  Cjmsrightnav,
 	  Cjmsbtm,
 	  Cjmscon
-  }
+  },
+	methods: {
+  		changeMainPic(src){
+			this.$refs.Cjmscon.changeMainPic(src);
+		}
+	}
 }
 </script>
 <style>