Cjmsbtm.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <div>
  3. <div class="btmbuttonbg">
  4. <div class="btmbutton">
  5. <div class="btmbutton-con">
  6. <div class="model-tab">
  7. <button @click="goJiaShi">驾驶模式</button>
  8. <button class="on" @click="goChenJin">沉浸模式</button>
  9. </div>
  10. <!-- 左右滚动 开始 -->
  11. <div class="ProgressBoxTool" v-if="progressList && progressList.length">
  12. <div class="processBox">
  13. <div :class="currentClickNumber > 0 ? 'arrow' : 'arrow arrowOpacity'" @click="fnPrev()">
  14. <img :src="arrowL" alt="" />
  15. </div>
  16. <div class="fixedBox" :ref="`fixedBox`">
  17. <div
  18. class="centerScroll"
  19. :style="
  20. `width:${signleWidth *
  21. progressList.length}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
  22. "
  23. >
  24. <div
  25. class="signleTab"
  26. v-for="(itemP, indexP) in progressList"
  27. :key="indexP + 'progress'"
  28. >
  29. <div class="leftIcon">
  30. <img class="pregressIcon" :src="icons[indexP]" alt="" @click="iconsClick(indexP)"/>
  31. </div>
  32. <!-- 最后一个不展示箭头 -->
  33. <!-- <img
  34. v-if="progressList.length > indexP + 1"
  35. :src="iconArrow"
  36. alt=""
  37. class="arrowSquare"
  38. /> -->
  39. <!--<span>摄像头</span>-->
  40. <span>{{names[indexP]}}</span>
  41. </div>
  42. </div>
  43. </div>
  44. <div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
  45. <img :src="arrowR" alt="" />
  46. </div>
  47. </div>
  48. </div>
  49. <!-- 左右滚动 结束 -->
  50. </div>
  51. <div class="cjms-btmbtn">
  52. <p class="on"><i class="iconfont yj-icon-wulianwang"></i>物联网</p>
  53. <p><i class="iconfont yj-icon-shilianwang"></i>视联网</p>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import arrowL from '@/assets/images/yj-cjmsbtnleft.png';
  61. import arrowR from '@/assets/images/yj-cjmsbtnright.png';
  62. // import icon from '@/assets/images/yj-cjmsimg.png';
  63. import icon_0 from '@/assets/images/cjms_camera/yj-cjmsimg2.png';
  64. import icon_1 from '@/assets/images/cjms_camera/water_1.jpg';
  65. import icon_2 from '@/assets/images/cjms_camera/water_2.png';
  66. import icon_3 from '@/assets/images/cjms_camera/water_3.png';
  67. import icon_4 from '@/assets/images/cjms_camera/water_4.png';
  68. import iconArrow from '@/assets/images/yj-navimg2.png';
  69. export default {
  70. props: {
  71. changeMainPic: {
  72. type: Function,
  73. default: null
  74. }
  75. },
  76. name: 'Cjmscon',
  77. data(){
  78. return {
  79. nowdate : '', //日期
  80. nowtime : '', //时间
  81. newTimer : '', //定时器
  82. progressList: [
  83. { type: '1' },
  84. { type: '2' },
  85. { type: '1' },
  86. { type: '2' },
  87. { type: '1' },
  88. { type: '2' },
  89. { type: '1' },
  90. { type: '2' },
  91. { type: '1' },
  92. { type: '2' }
  93. ],
  94. arrowL,
  95. arrowR,
  96. icons:[
  97. icon_0, icon_1, icon_2, icon_3, icon_4, icon_1, icon_2, icon_3, icon_1, icon_2
  98. ],
  99. names:[
  100. "摄像头1", "摄像头2", "摄像头3", "摄像头4", "摄像头5", "摄像头6", "摄像头7", "摄像头8", "摄像头9", "摄像头10"
  101. ],
  102. iconArrow,
  103. currentProgressId: '',
  104. scrollResultWidth: 0, //transform滚动的距离
  105. signleWidth: 215, //单个流程的宽度
  106. activeName: 0,
  107. currentClickNumber: 0,
  108. noScrollRight: true
  109. }
  110. },
  111. created() {
  112. this.$nextTick(() => {
  113. setTimeout(() => {
  114. this.initgoRightArrow();
  115. });
  116. });
  117. },
  118. mounted () {
  119. this.timerOneScondRun(); //执行日期函数
  120. clearInterval(this.newTimer); //清除定时器
  121. // 定时获取时间
  122. this.newTimer = setInterval(this.timerOneScondRun, 1000);
  123. },
  124. beforeRouteLeave(to,from,next){
  125. // 离开组件时停掉定时器,节省内存
  126. clearInterval(this.newTimer);
  127. next();
  128. },
  129. methods: {
  130. //更改轮播图片
  131. iconsClick(index){
  132. this.changeMainPic(this.icons[index])
  133. // alert(index)
  134. },
  135. //获取时间
  136. timerOneScondRun() {
  137. let date = new Date();
  138. // 日期格式 2022年05月31日
  139. this.nowdate =
  140. date.getFullYear() +
  141. "/" +
  142. (date.getMonth() + 1 >= 10
  143. ? date.getMonth() + 1
  144. : "0" + (date.getMonth() + 1)) +
  145. "/" +
  146. (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
  147. // 时间格式 12:11:27
  148. this.nowtime =
  149. date.getHours() +
  150. ":" +
  151. (date.getMinutes() >= 10
  152. ? date.getMinutes()
  153. : "0" + date.getMinutes()) +
  154. ":" +
  155. (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
  156. },
  157. //初始化判断是否可以向右滚动
  158. initgoRightArrow() {
  159. const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
  160. const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
  161. //如果最后一个流程图标已经展示出来,则停止滚动
  162. if (this.currentClickNumber + canNumber >= this.progressList.length) {
  163. this.noScrollRight = false;
  164. return;
  165. }
  166. },
  167. //点击上一个
  168. fnPrev() {
  169. //如果右点击的次数大于0,才可以左滚
  170. if (this.currentClickNumber > 0) {
  171. this.currentClickNumber -= 1;
  172. this.noScrollRight = true;
  173. this.fnScrollWidth('reduce');
  174. } else {
  175. return false;
  176. }
  177. },
  178. //点击下一个
  179. fnNext() {
  180. const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
  181. const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
  182. //如果最后一个流程图标已经展示出来,则停止滚动
  183. if (this.currentClickNumber + canNumber >= this.progressList.length) {
  184. return;
  185. }
  186. //说明放不下有滚动条
  187. if (this.progressList.length > canNumber) {
  188. this.currentClickNumber += 1;
  189. if (this.currentClickNumber + canNumber >= this.progressList.length) {
  190. this.noScrollRight = false;
  191. }
  192. this.fnScrollWidth('add');
  193. }
  194. },
  195. //translate的宽度
  196. fnScrollWidth(type) {
  197. let result = 0;
  198. if (type === 'reduce') {
  199. result = 215;
  200. } else if (type === 'add') {
  201. result = -215;
  202. } else {
  203. result = 0;
  204. }
  205. this.scrollResultWidth += result;
  206. },
  207. // 跳转沉浸模式
  208. goChenJin(){
  209. // this.$router.push('/YjCjms');
  210. },
  211. goJiaShi(){
  212. this.$router.push('/index');
  213. }
  214. }
  215. }
  216. </script>
  217. <!-- Add "scoped" attribute to limit CSS to this component only -->
  218. <style scoped>
  219. .btmbuttonbg{
  220. position: absolute;
  221. bottom: 0px;
  222. width: 100%;
  223. height: 120px;
  224. background: url("../assets/images/yj-cjmsbtmbg.png") no-repeat center;
  225. background-size: 100% 100%;
  226. z-index: 5;
  227. }
  228. .btmbutton{
  229. width: 100%;
  230. height: 100%;
  231. position: relative;
  232. }
  233. .btmbutton-con{
  234. width: 1075px;
  235. height: 100%;
  236. position: absolute;
  237. top: -2px;
  238. left: 50%;
  239. transform: translateX(-50%);
  240. }
  241. .btmbutton-con .model-tab{
  242. text-align: center;
  243. display: flex;
  244. flex-direction: row;
  245. justify-content: center;
  246. }
  247. .btmbutton-con .model-tab button{
  248. background: url("../assets/images/yj-nav.png") no-repeat center;
  249. display: block;
  250. width: 165px;
  251. height: 25px;
  252. line-height: 25px;
  253. background-size: 100% 100%;
  254. margin-top: -15px;
  255. cursor: pointer;
  256. color: #8b8b8b;
  257. font-size: 14px;
  258. border: 0px;
  259. outline: 0px;
  260. }
  261. .btmbutton-con .model-tab button.on{
  262. background: url("../assets/images/yj-navon.png") no-repeat center;
  263. background-size: 100% 100%;
  264. color: #fff;
  265. }
  266. .btmbutton-con .model-tab button:hover{
  267. background: url("../assets/images/yj-navon.png") no-repeat center;
  268. background-size: 100% 100%;
  269. color: #fff;
  270. }
  271. .cjms-btmbtn{
  272. position: absolute;
  273. left: 250px;
  274. top:50px;
  275. }
  276. .cjms-btmbtn p{
  277. background: url("../assets/images/yj-cjmsbtnbg4.png") no-repeat center;
  278. background-size: 100% 100%;
  279. width: 150px;
  280. height: 23px;
  281. line-height: 23px;
  282. margin-bottom: 10px;
  283. color: #fff;
  284. padding-left: 13px;
  285. font-size: 14px;
  286. cursor: pointer;
  287. text-align: left;
  288. }
  289. .cjms-btmbtn p.on{
  290. background: url("../assets/images/yj-cjmsbtnbg4-on.png") no-repeat center;
  291. }
  292. .cjms-btmbtn p:hover{
  293. background: url("../assets/images/yj-cjmsbtnbg4-on.png") no-repeat center;
  294. }
  295. .cjms-btmbtn p:hover,.cjms-btmbtn p:hover{
  296. text-shadow: 0px 0px 5px #1cf4ff;
  297. }
  298. .cjms-btmbtn p i{
  299. font-size: 15px;
  300. margin-right: 8px;
  301. }
  302. .cjms-btmbtn p:nth-child(1){
  303. margin-left: 15px;
  304. }
  305. .cjms-btmbtn p:nth-child(2){
  306. margin-left: 0px;
  307. }
  308. .processBox {
  309. display: flex;
  310. align-items: center;
  311. justify-content: space-between;
  312. }
  313. .processBox .arrow {
  314. width: 30px;
  315. cursor: pointer;
  316. }
  317. .processBox .arrowOpacity {
  318. cursor: default;
  319. opacity: 0.4;
  320. }
  321. .processBox .fixedBox {
  322. flex: 1;
  323. overflow: hidden;
  324. }
  325. .processBox .centerScroll {
  326. box-sizing: border-box;
  327. padding: 12px 0 0px 0px;
  328. white-space: nowrap;
  329. display:flex;
  330. flex-direction: row;
  331. }
  332. .processBox .centerScroll .signleTab {
  333. width: 120px;
  334. position: relative;
  335. }
  336. .processBox .centerScroll .signleTab img{
  337. width:103px;
  338. height:70px;
  339. }
  340. .processBox .centerScroll .signleTab span{
  341. text-align:center;
  342. color:#fff;
  343. font-size:14px;
  344. display:block;
  345. text-align:center;
  346. }
  347. .processBox .centerScroll .signleTab .arrowSquare {
  348. position: absolute;
  349. top: 25px;
  350. right: 0;
  351. }
  352. .leftIcon {
  353. width: 120px;
  354. text-align: center;
  355. cursor: pointer;
  356. }
  357. .leftIcon .pregressIcon {
  358. width: 60px;
  359. height: 60px;
  360. }
  361. </style>