{"remainingRequest":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\yhxt-web\\src\\views\\bigScreen\\components\\VueSeamlessScroll.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\yhxt-web\\src\\views\\bigScreen\\components\\VueSeamlessScroll.vue","mtime":1736619210963},{"path":"D:\\jenkins\\workspace\\yhxt-web\\babel.config.js","mtime":1667326389982},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/es6.number.constructor\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport vueSeamlessScroll from 'vue-seamless-scroll';\nexport default {\n  name: 'Example01Basic',\n  props: {\n    titleList: {\n      type: Array,\n      default: function _default() {\n        return [{\n          key: 'type',\n          name: '类型'\n        }, {\n          key: 'num',\n          name: '数量'\n        }, {\n          key: 'online',\n          name: '在线'\n        }, {\n          key: 'offine',\n          name: '离线',\n          color: 'red'\n        }, {\n          key: 'fault',\n          name: '故障',\n          color: 'green'\n        }];\n      }\n    },\n    data: {\n      type: Array,\n      // default: () => [\n      //     {\n      //         type: '车辆载荷',\n      //         num: '50',\n      //         online: '20',\n      //         offine: '20',\n      //         fault: '10',\n      //     },\n      //     {\n      //         type: '风速/风向',\n      //         num: '50',\n      //         online: '20',\n      //         offine: '20',\n      //         fault: '10',\n      //     },\n      //     {\n      //         type: '地震',\n      //         num: '50',\n      //         online: '20',\n      //         offine: '20',\n      //         fault: '10',\n      //     },\n      //     {\n      //         type: '结构温度',\n      //         num: '50',\n      //         online: '20',\n      //         offine: '20',\n      //         fault: '10',\n      //     },\n      //     {\n      //         type: '钢结构件温度',\n      //         num: '50',\n      //         online: '20',\n      //         offine: '20',\n      //         fault: '10',\n      //     },\n      //     {\n      //         type: '地震',\n      //         num: '50',\n      //         online: '20',\n      //         offine: '20',\n      //         fault: '10',\n      //     },\n      // ],\n      default: function _default() {\n        return [];\n      }\n    },\n    limitMoveNum: {\n      type: Number,\n      default: 5\n    },\n    classOption: {\n      type: Object,\n      default: function _default() {\n        return {\n          step: 0.2,\n          // 数值越大速度滚动越快\n          // limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length\n          hoverStop: true,\n          // 是否开启鼠标悬停stop\n          direction: 1,\n          // 0向下 1向上 2向左 3向右\n          openWatch: true,\n          // 开启数据实时监控刷新dom\n          singleHeight: 0,\n          // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1\n          singleWidth: 0,\n          // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3\n          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)\n        };\n      }\n    }\n  },\n\n  components: {\n    vueSeamlessScroll: vueSeamlessScroll\n  },\n  data: function data() {\n    return {\n      xPos: 0,\n      yPos: 0,\n      delay: 0,\n      copyHtml: '',\n      height: 0,\n      width: 0,\n      // 外容器宽度\n      realBoxWidth: 0,\n      // 内容实际宽度\n      isMousewheel: false //是否在执行滑动才做。加这个是为了阻止 滑动到底部的时候直接回到顶部\n    };\n  },\n\n  computed: {\n    // optionSingleHeightTime() {\n    //     return {\n    //         step: 0.2,\n    //         // loop: false,\n    //         limitMoveNum: 5,\n    //         // waitTime: 2000,\n    //         // singleHeight: 1,\n    //         // pause: false,\n    //     }\n    // },\n    float: function float() {\n      return this.isHorizontal ? {\n        float: 'left',\n        overflow: 'hidden'\n      } : {\n        overflow: 'hidden'\n      };\n    },\n    pos: function pos() {\n      return {\n        transform: \"translate(\".concat(this.xPos, \"px,\").concat(this.yPos, \"px)\"),\n        transition: \"all \".concat(this.ease, \" \").concat(this.delay, \"ms\"),\n        overflow: 'hidden'\n      };\n    },\n    defaultOption: function defaultOption() {\n      return {\n        step: 1,\n        //步长\n        limitMoveNum: 5,\n        //启动无缝滚动最小数据数\n        hoverStop: true,\n        //是否启用鼠标hover控制\n        direction: 1,\n        // 0 往下 1 往上 2向左 3向右\n        openTouch: true,\n        //开启移动端touch\n        singleHeight: 0,\n        //单条数据高度有值hoverStop关闭\n        singleWidth: 0,\n        //单条数据宽度有值hoverStop关闭\n        waitTime: 1000,\n        //单步停止等待时间\n        switchOffset: 30,\n        autoPlay: true,\n        navigation: false,\n        switchSingleStep: 134,\n        switchDelay: 400,\n        switchDisabledClass: 'disabled',\n        isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量\n      };\n    },\n    options: function options() {\n      this.defaultOption.limitMoveNum = this.limitMoveNum;\n      return Object.assign({}, this.defaultOption, this.classOption);\n      // return copyObj({}, this.defaultOption, this.classOption)\n    },\n    navigation: function navigation() {\n      return this.options.navigation;\n    },\n    autoPlay: function autoPlay() {\n      if (this.navigation) return false;\n      return this.options.autoPlay;\n    },\n    scrollSwitch: function scrollSwitch() {\n      return this.data.length >= this.options.limitMoveNum;\n    },\n    hoverStopSwitch: function hoverStopSwitch() {\n      return this.options.hoverStop && this.autoPlay && this.scrollSwitch;\n    },\n    canTouchScroll: function canTouchScroll() {\n      return this.options.openTouch;\n    },\n    isHorizontal: function isHorizontal() {\n      return this.options.direction > 1;\n    },\n    baseFontSize: function baseFontSize() {\n      return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1;\n    },\n    realSingleStopWidth: function realSingleStopWidth() {\n      return this.options.singleWidth * this.baseFontSize;\n    },\n    realSingleStopHeight: function realSingleStopHeight() {\n      return this.options.singleHeight * this.baseFontSize;\n    },\n    step: function step() {\n      var singleStep;\n      var step = this.options.step;\n      if (this.isHorizontal) {\n        singleStep = this.realSingleStopWidth;\n      } else {\n        singleStep = this.realSingleStopHeight;\n      }\n      if (singleStep > 0 && singleStep % step > 0) {\n        console.error('如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~');\n      }\n      return step;\n    }\n  },\n  mounted: function mounted() {\n    this._initMove();\n  },\n  methods: {\n    // myToString(val) {\n    //     if (typeof val == 'String') return val\n    //     if (val == 0) val = '0'\n    //     return val && val.toString()\n    // },\n    handleItem: function handleItem(key, type) {\n      var item = this.data.filter(function (item) {\n        return item[type] == key;\n      })[0];\n      this.$emit('handleScollItem', item);\n    },\n    handleSectionClick: function handleSectionClick(e) {\n      var target = e.target;\n      if (target.tagName == 'SPAN') {\n        // 根据事件捕获  捕获目标元素节点，执行点击事件\n        if (target.dataset.id) {\n          this.handleItem(target.dataset.id, 'id');\n        } else {\n          this.handleItem(target.dataset.name, 'name');\n        }\n      }\n    },\n    handleScrolls: function handleScrolls(e) {\n      // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n      // console.log(this.$refs.wrapbox.scrollTop);\n      // console.log(\"高度\" + e.target.scrollHeight);\n      // console.log(\"距离上面\" + e.target.scrollTop);\n      // console.log(\"元素高度\" + e.target.clientHeight);\n      // 距离底部 let scrollBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;\n      this.yPos = -e.target.scrollTop;\n      // this.$refs.wrapbox.scrollTop = e.target.scrollTop;\n    },\n    wrapboxWheel: function wrapboxWheel(e) {\n      var scrollTop = this.$refs.wrapbox.scrollTop;\n      if (scrollTop < 1 && e.wheelDeltaY > 0) {\n        this.$refs.wrapbox.scrollTop = Math.abs(this.yPos);\n      }\n    },\n    arrayEqual: function arrayEqual(arr1, arr2) {\n      if (arr1 === arr2) return true;\n      if (arr1.length !== arr2.length) return false;\n      for (var i = 0; i < arr1.length; ++i) {\n        if (arr1[i] !== arr2[i]) return false;\n      }\n      return true;\n    },\n    reset: function reset() {\n      this._cancle();\n      this._initMove();\n    },\n    leftSwitchClick: function leftSwitchClick() {\n      if (!this.leftSwitchState) return;\n      // 小于单步距离\n      if (Math.abs(this.xPos) < this.options.switchSingleStep) {\n        this.xPos = 0;\n        return;\n      }\n      this.xPos += this.options.switchSingleStep;\n    },\n    rightSwitchClick: function rightSwitchClick() {\n      if (!this.rightSwitchState) return;\n      // 小于单步距离\n      if (this.realBoxWidth - this.width + this.xPos < this.options.switchSingleStep) {\n        this.xPos = this.width - this.realBoxWidth;\n        return;\n      }\n      this.xPos -= this.options.switchSingleStep;\n    },\n    _cancle: function _cancle() {\n      cancelAnimationFrame(this.reqFrame || '');\n    },\n    touchStart: function touchStart(e) {\n      var _this = this;\n      if (!this.canTouchScroll) return;\n      var timer;\n      var touch = e.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch\n      var _this$options = this.options,\n        waitTime = _this$options.waitTime,\n        singleHeight = _this$options.singleHeight,\n        singleWidth = _this$options.singleWidth;\n      this.startPos = {\n        x: touch.pageX,\n        y: touch.pageY\n      }; //取第一个touch的坐标值\n      this.startPosY = this.yPos; //记录touchStart时候的posY\n      this.startPosX = this.xPos; //记录touchStart时候的posX\n      if (!!singleHeight && !!singleWidth) {\n        if (timer) clearTimeout(timer);\n        timer = setTimeout(function () {\n          _this._cancle();\n        }, waitTime + 20);\n      } else {\n        this._cancle();\n      }\n    },\n    touchMove: function touchMove(e) {\n      //当屏幕有多个touch或者页面被缩放过，就不执行move操作\n      if (!this.canTouchScroll || e.targetTouches.length > 1 || e.scale && e.scale !== 1) return;\n      var touch = e.targetTouches[0];\n      var direction = this.options.direction;\n      this.endPos = {\n        x: touch.pageX - this.startPos.x,\n        y: touch.pageY - this.startPos.y\n      };\n      event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏\n      var dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0; //dir，1表示纵向滑动，0为横向滑动\n      if (dir === 1 && direction < 2) {\n        // 表示纵向滑动 && 运动方向为上下\n        this.yPos = this.startPosY + this.endPos.y;\n      } else if (dir === 0 && direction > 1) {\n        // 为横向滑动 && 运动方向为左右\n        this.xPos = this.startPosX + this.endPos.x;\n      }\n    },\n    touchEnd: function touchEnd() {\n      var _this2 = this;\n      if (!this.canTouchScroll) return;\n      var timer;\n      var direction = this.options.direction;\n      this.delay = 50;\n      if (direction === 1) {\n        if (this.yPos > 0) this.yPos = 0;\n      } else if (direction === 0) {\n        var h = this.realBoxHeight / 2 * -1;\n        if (this.yPos < h) this.yPos = h;\n      } else if (direction === 2) {\n        if (this.xPos > 0) this.xPos = 0;\n      } else if (direction === 3) {\n        var w = this.realBoxWidth * -1;\n        if (this.xPos < w) this.xPos = w;\n      }\n      if (timer) clearTimeout(timer);\n      timer = setTimeout(function () {\n        _this2.delay = 0;\n        _this2._move();\n      }, this.delay);\n    },\n    enter: function enter() {\n      if (this.hoverStopSwitch) this._stopMove();\n    },\n    leave: function leave() {\n      this.isMousewheel = false;\n      if (this.hoverStopSwitch) this._startMove();\n    },\n    wheel: function wheel(envent) {\n      if (this.data.length < this.options.limitMoveNum) {\n        return false;\n      }\n      this.isMousewheel = true;\n      var h = this.realBoxHeight / 2;\n      var tranh = h * -1 - 120;\n      if (envent.wheelDeltaY > 0) {\n        this.yPos += 120;\n        //向上滑动 数值应该更大\n        var ys = this.yPos + 120;\n        if (ys > 20) {\n          this.yPos = 20;\n        } else {\n          this.yPos += 120;\n        }\n      } else {\n        //向下滑动  数值应该更小\n        var _ys = this.yPos - 120;\n        if (Math.abs(_ys) < h) {\n          this.yPos -= 120;\n        }\n      }\n    },\n    _move: function _move() {\n      // 鼠标移入时拦截_move()\n      if (this.isHover) return;\n      if (this.isMousewheel) {\n        this._cancle();\n        return;\n      }\n      this._cancle(); //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行\n      this.reqFrame = requestAnimationFrame(function () {\n        var _this3 = this;\n        var h = this.realBoxHeight / 2; //实际高度\n        var w = this.realBoxWidth / 2; //宽度\n        var _this$options2 = this.options,\n          direction = _this$options2.direction,\n          waitTime = _this$options2.waitTime;\n        var step = this.step;\n        // console.log('还是水水水水')\n        // console.log(this.yPos)\n        // console.log(h)\n        if (direction === 1) {\n          // 上\n          if (Math.abs(this.yPos) >= h) {\n            this.$emit('ScrollEnd');\n            this.$refs.wrapbox && (this.$refs.wrapbox.scrollTop = 0);\n            this.yPos = 0;\n          }\n          this.yPos -= step;\n        } else if (direction === 0) {\n          // 下\n          if (this.yPos >= 0) {\n            this.$emit('ScrollEnd');\n            this.yPos = h * -1;\n          }\n          this.yPos += step;\n        } else if (direction === 2) {\n          // 左\n          if (Math.abs(this.xPos) >= w) {\n            this.$emit('ScrollEnd');\n            this.xPos = 0;\n          }\n          this.xPos -= step;\n        } else if (direction === 3) {\n          // 右\n          if (this.xPos >= 0) {\n            this.$emit('ScrollEnd');\n            this.xPos = w * -1;\n          }\n          this.xPos += step;\n        }\n        if (this.singleWaitTime) clearTimeout(this.singleWaitTime);\n        if (!!this.realSingleStopHeight) {\n          //是否启动了单行暂停配置\n          if (Math.abs(this.yPos) % this.realSingleStopHeight < step) {\n            // 符合条件暂停waitTime\n            this.singleWaitTime = setTimeout(function () {\n              _this3._move();\n            }, waitTime);\n          } else {\n            this._move();\n          }\n        } else if (!!this.realSingleStopWidth) {\n          if (Math.abs(this.xPos) % this.realSingleStopWidth < step) {\n            // 符合条件暂停waitTime\n            this.singleWaitTime = setTimeout(function () {\n              _this3._move();\n            }, waitTime);\n          } else {\n            this._move();\n          }\n        } else {\n          this._move();\n        }\n      }.bind(this));\n    },\n    _initMove: function _initMove() {\n      var _this4 = this;\n      this.$nextTick(function () {\n        var switchDelay = _this4.options.switchDelay;\n        var autoPlay = _this4.autoPlay,\n          isHorizontal = _this4.isHorizontal;\n        _this4._dataWarm(_this4.data);\n        _this4.copyHtml = ''; //清空copy\n        if (isHorizontal) {\n          _this4.height = _this4.$refs.wrap.offsetHeight;\n          _this4.width = _this4.$refs.wrap.offsetWidth;\n          var slotListWidth = _this4.$refs.slotList.offsetWidth;\n          // 水平滚动设置warp width\n          if (autoPlay) {\n            // 修正offsetWidth四舍五入\n            slotListWidth = slotListWidth * 2 + 1;\n          }\n          _this4.$refs.realBox.style.width = slotListWidth + 'px';\n          _this4.realBoxWidth = slotListWidth;\n        }\n        if (autoPlay) {\n          _this4.ease = 'ease-in';\n          _this4.delay = 0;\n        } else {\n          _this4.ease = 'linear';\n          _this4.delay = switchDelay;\n          return;\n        }\n\n        // 是否可以滚动判断\n        if (_this4.scrollSwitch) {\n          var timer;\n          if (timer) clearTimeout(timer);\n          _this4.copyHtml = _this4.$refs.slotList.innerHTML;\n          setTimeout(function () {\n            _this4.realBoxHeight = _this4.$refs.realBox.offsetHeight;\n            _this4._move();\n          }, 0);\n        } else {\n          _this4._cancle();\n          _this4.yPos = _this4.xPos = 0;\n        }\n      });\n    },\n    _dataWarm: function _dataWarm(data) {\n      if (data.length > 100) {\n        console.warn(\"\\u6570\\u636E\\u8FBE\\u5230\\u4E86\".concat(data.length, \"\\u6761\\u6709\\u70B9\\u591A\\u54E6~,\\u53EF\\u80FD\\u4F1A\\u9020\\u6210\\u90E8\\u5206\\u8001\\u65E7\\u6D4F\\u89C8\\u5668\\u5361\\u987F\\u3002\"));\n      }\n    },\n    _startMove: function _startMove() {\n      this.isHover = false; //开启_move\n      this._move();\n    },\n    _stopMove: function _stopMove() {\n      this.isHover = true; //关闭_move\n      // 防止频频hover进出单步滚动,导致定时器乱掉\n      if (this.singleWaitTime) clearTimeout(this.singleWaitTime);\n      this._cancle();\n    }\n  },\n  watch: {\n    data: function data(newData, oldData) {\n      this._dataWarm(newData);\n      //监听data是否有变更\n      if (!this.arrayEqual(newData, oldData)) {\n        this.reset();\n      }\n    },\n    autoPlay: function autoPlay(bol) {\n      if (bol) {\n        this.reset();\n      } else {\n        this._stopMove();\n      }\n    }\n  },\n  beforeCreate: function beforeCreate() {\n    this.reqFrame = null; // move动画的animationFrame定时器\n    this.singleWaitTime = null; // single 单步滚动的定时器\n    this.isHover = false; // mouseenter mouseleave 控制this._move()的开关\n    this.ease = 'ease-in';\n  },\n  beforeDestroy: function beforeDestroy() {\n    this._cancle();\n    clearTimeout(this.singleWaitTime);\n    // window.addEventListener(\"scroll\", this.handleScrolls, false);\n  }\n};",null]}