yj_vue3/src/components/Cjmsbtm.vue

<template>
	  <div>
	  <div class="btmbuttonbg">
		  <div class="btmbutton">
			  <div class="btmbutton-con">
				  <div class="model-tab">
					  <button @click="goJiaShi">驾驶模式</button>
					  <button class="on"  @click="goChenJin">沉浸模式</button>
				  </div>
				  <!-- 左右滚动  开始 -->
				  <div class="ProgressBoxTool" v-if="progressList && progressList.length">
				        <div class="processBox">
				          <div :class="currentClickNumber > 0 ? 'arrow' : 'arrow arrowOpacity'" @click="fnPrev()">
				            <img :src="arrowL" alt="" />
				          </div>
				          <div class="fixedBox" :ref="`fixedBox`">
				            <div
				              class="centerScroll"
				              :style="
				                `width:${signleWidth *
				                  progressList.length}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
				              "
				            >
				              <div
				                class="signleTab"
				                v-for="(itemP, indexP) in progressList"
				                :key="indexP + 'progress'"
				              >
				                <div class="leftIcon">
				                  <img class="pregressIcon" :src="icons[indexP]" alt="" @click="iconsClick(indexP)"/>
				                </div>
				                <!-- 最后一个不展示箭头 -->
				                <!-- <img
				                  v-if="progressList.length > indexP + 1"
				                  :src="iconArrow"
				                  alt=""
				                  class="arrowSquare"
				                /> -->
				  						   <!--<span>摄像头</span>-->
				  						   <span>{{names[indexP]}}</span>
				              </div>
				            </div>
				          </div>

				          <div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
				            <img :src="arrowR" alt="" />
				          </div>
				        </div>
				      </div>
				  <!-- 左右滚动  结束 -->
			  </div>
			  <div class="cjms-btmbtn">
				  <p class="on"><i class="iconfont yj-icon-wulianwang"></i>物联网</p>
				  <p><i class="iconfont yj-icon-shilianwang"></i>视联网</p>
			  </div>

		  </div>

	  </div>

</div>
</template>
<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_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 {
	props: {
		changeMainPic: {
			type: Function,
			default: null
		}
	},

		name: 'Cjmscon',
  data(){
  	return {
		nowdate : '', //日期
		nowtime : '', //时间
		newTimer : '', //定时器

		progressList: [
		        { type: '1' },
		        { type: '2' },
		        { type: '1' },
		        { type: '2' },
		        { type: '1' },
		        { type: '2' },
		        { type: '1' },
		        { type: '2' },
		        { type: '1' },
		        { type: '2' }
		      ],
		      arrowL,
		      arrowR,
	  	icons:[
				  icon_0, icon_1, icon_2, icon_3, icon_4, icon_1, icon_2, icon_3, icon_1, icon_2
			  ],
		names:[
				  "摄像头1", "摄像头2", "摄像头3", "摄像头4", "摄像头5", "摄像头6", "摄像头7", "摄像头8", "摄像头9", "摄像头10"
			  ],
		      iconArrow,
		      currentProgressId: '',
		      scrollResultWidth: 0, //transform滚动的距离
		      signleWidth: 215, //单个流程的宽度
		      activeName: 0,
		      currentClickNumber: 0,
		      noScrollRight: true
	  }
  },
  created() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.initgoRightArrow();
        });
      });
    },
   mounted () {
         this.timerOneScondRun(); //执行日期函数
                clearInterval(this.newTimer); //清除定时器
                // 定时获取时间
                this.newTimer = setInterval(this.timerOneScondRun, 1000);
            },
            beforeRouteLeave(to,from,next){
            	// 离开组件时停掉定时器，节省内存
                clearInterval(this.newTimer);
                next();
            },

  methods: {
  	//更改轮播图片
	  iconsClick(index){
		  this.changeMainPic(this.icons[index])
	  	// alert(index)
	  },
         //获取时间
                timerOneScondRun() {
                	let date = new Date();
                	// 日期格式  2022年05月31日
        	        this.nowdate =
        	            date.getFullYear() +
        	            "/" +
        	            (date.getMonth() + 1 >= 10
        	            ? date.getMonth() + 1
        	            : "0" + (date.getMonth() + 1)) +
        	            "/" +
        	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
        	        // 时间格式 12:11:27
        	        this.nowtime =
        	            date.getHours() +
        	            ":" +
        	            (date.getMinutes() >= 10
        	            ? date.getMinutes()
        	            : "0" + date.getMinutes()) +
        	            ":" +
        	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
                },

		//初始化判断是否可以向右滚动
		    initgoRightArrow() {
		      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
		      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
		      //如果最后一个流程图标已经展示出来，则停止滚动
		      if (this.currentClickNumber + canNumber >= this.progressList.length) {
		        this.noScrollRight = false;
		        return;
		      }
		    },
		    //点击上一个
		    fnPrev() {
		      //如果右点击的次数大于0，才可以左滚
		      if (this.currentClickNumber > 0) {
		        this.currentClickNumber -= 1;
		        this.noScrollRight = true;
		        this.fnScrollWidth('reduce');
		      } else {
		        return false;
		      }
		    },
		    //点击下一个
		    fnNext() {
		      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
		      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
		      //如果最后一个流程图标已经展示出来，则停止滚动
		      if (this.currentClickNumber + canNumber >= this.progressList.length) {
		        return;
		      }
		      //说明放不下有滚动条
		      if (this.progressList.length > canNumber) {
		        this.currentClickNumber += 1;
		        if (this.currentClickNumber + canNumber >= this.progressList.length) {
		          this.noScrollRight = false;
		        }
		        this.fnScrollWidth('add');
		      }
		    },
		    //translate的宽度
		    fnScrollWidth(type) {
		      let result = 0;
		      if (type === 'reduce') {
		        result = 215;
		      } else if (type === 'add') {
		        result = -215;
		      } else {
		        result = 0;
		      }
		      this.scrollResultWidth += result;
		    },
				// 跳转沉浸模式
		goChenJin(){
			// this.$router.push('/YjCjms');
		},
		goJiaShi(){
			this.$router.push('/index');
		}



  	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.btmbuttonbg{
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 120px;
		background: url("../assets/images/yj-cjmsbtmbg.png") no-repeat center;
		background-size: 100% 100%;
		z-index: 5;
	}
	.btmbutton{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.btmbutton-con{
		width: 1075px;
		height: 100%;
		position: absolute;
		top: -2px;
		left: 50%;
		transform: translateX(-50%);
	}
	.btmbutton-con .model-tab{
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.btmbutton-con .model-tab button{
		background: url("../assets/images/yj-nav.png") no-repeat center;
		display: block;
		width: 165px;
		height: 25px;
		line-height: 25px;
		background-size: 100% 100%;
		margin-top: -15px;
		cursor: pointer;
		color: #8b8b8b;
		font-size: 14px;
		border: 0px;
		outline: 0px;
	}
	.btmbutton-con .model-tab button.on{
		background: url("../assets/images/yj-navon.png") no-repeat center;
		background-size: 100% 100%;
		color: #fff;
	}
	.btmbutton-con .model-tab button:hover{
		background: url("../assets/images/yj-navon.png") no-repeat center;
		background-size: 100% 100%;
		color: #fff;
	}
	.cjms-btmbtn{
		position: absolute;
		left: 250px;
		top:50px;
	}
	.cjms-btmbtn p{
		background: url("../assets/images/yj-cjmsbtnbg4.png") no-repeat center;
		background-size: 100% 100%;
		width: 150px;
		height: 23px;
		line-height: 23px;
		margin-bottom: 10px;
		color: #fff;
		padding-left: 13px;
		font-size: 14px;
		cursor: pointer;
		text-align: left;
	}
	.cjms-btmbtn p.on{
		background: url("../assets/images/yj-cjmsbtnbg4-on.png") no-repeat center;
	}
	.cjms-btmbtn p:hover{
		background: url("../assets/images/yj-cjmsbtnbg4-on.png") no-repeat center;
	}
	.cjms-btmbtn p:hover,.cjms-btmbtn p:hover{
		text-shadow: 0px 0px 5px #1cf4ff;
	}
	.cjms-btmbtn p i{
		font-size: 15px;
		margin-right: 8px;
	}
	.cjms-btmbtn p:nth-child(1){
		margin-left: 15px;
	}
	.cjms-btmbtn p:nth-child(2){
		margin-left: 0px;
	}

	.processBox {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;

	}
	.processBox .arrow {
	  width: 30px;
	  cursor: pointer;
	}
	.processBox .arrowOpacity {
	  cursor: default;
	  opacity: 0.4;
	}
	.processBox .fixedBox {
	  flex: 1;
	  overflow: hidden;
	}
	.processBox .centerScroll {
	  box-sizing: border-box;
	  padding: 12px 0 0px 0px;
	  white-space: nowrap;
	  display:flex;
	  flex-direction: row;
	}
	.processBox .centerScroll .signleTab {
	  width: 120px;
	  position: relative;

	}
	.processBox .centerScroll .signleTab img{
	  width:103px;
	  height:70px;
	}
	.processBox .centerScroll .signleTab span{
	  text-align:center;
	  color:#fff;
	  font-size:14px;
	  display:block;
	  text-align:center;
	}
	.processBox .centerScroll .signleTab .arrowSquare {
	  position: absolute;
	  top: 25px;
	  right: 0;
	}
	.leftIcon {
	  width: 120px;
	  text-align: center;
	  cursor: pointer;
	}
	.leftIcon .pregressIcon {
	  width: 60px;
	  height: 60px;
	}
</style>