123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377 |
- <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>
|