vue实现动态等分刻度尺并显示报错点

首先描述一下业务逻辑：要求在一段长度不固定的电缆上面显示故障点（电缆最长10000米）思路：判断电缆长度的位数，根据电缆位数去计算刻度尺的坐标。

第一种：刻度间的距离是10的整数倍

splitCable(num) {// num表示电缆长度let i = parseInt(num);let l = 0;let a = [0,1,2,3,4,5,6,7,8,9,10]while(i >= 1){i=i/10;l++;if(l==1){this.spilt = a.map(function (item,index) {return item})}else if(l==2){this.spilt = a.map(function (item,index) {return item*10})}else if(l==3){this.spilt = a.map(function (item,index) {return item*10*10})}else if(l==4){this.spilt = a.map(function (item,index) {return item*10*10*10})} else if(l==5){this.spilt = a.map(function (item,index) {return item*10*10*10*10})}}
},
splitPercentage(sub,total) {// 计算故障点所在位置的百分比return parseInt((sub/total)*100)
},

第二种：刻度间的距离不是10的整数倍

   splitCable(num) {let i = parseInt(num);let l = 0;let a = [0,1,2,3,4,5,6,7,8,9,10]while(i >= 1){i=i/10;l++;if(l==1){let count = num / 10this.spilt = a.map(function (item,index) {return count*index})}else{let count = num / 10this.spilt = a.map(function (item,index) {return parseInt(count*index)})}}},splitPercentage(sub,total) {return parseInt((sub/total)*100-1)},

html和css没有写到博客中，大家有什么问题可以评论留言哦

vue实现动态等分刻度尺并显示报错点相关推荐

vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
IOS动态库打包导入工程报错Library not loaded: @rpath/SwiftFrame.framework/SwiftFrame
IOS15动态库打包导入工程报错Library not loaded: @rpath/SwiftFrame.framework/SwiftFrame 环境: IOS 15.0 Xcode 13.0 最 ...
.vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...
vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法参考文章: (1)vue项目初始化时npm run dev报错webpack-dev-server解决方法 ( ...
node npm yarn安装使用错误（无法使用，显示报错，不是内部或外部命令，也不是可运行的程序或批处理文件。）
node npm yarn安装后,无法正常使用,显示报错,不是内部或外部命令,也不是可运行的程序或批处理文件. 一.原因分析: 未正确安装环境变量配置不正确注意: 通过npm install [ ...
配置网页登陆虚拟带库显示报错
配置网页登陆虚拟带库显示报错网页报错 Apache提示You don't have permission to access / on this server问题解决测试时遇到将一本地目录设置为一 ...
sql server利用不同语种语言显示报错错误消息的方法示例
这篇文章主要给大家介绍了关于sql server利用不同语种语言显示报错错误消息的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用sql server具有一定的参考学习价值,需要的朋友们下 ...
日志打印显示报错信息
日志打印显示报错信息直接打印e 日志文件不显示详细报错信息 logger.error("内部错误"+ e); 使用下面这句代码,即可解决问题. logger.error(&quo ...

vue实现动态等分刻度尺并显示报错点

vue实现动态等分刻度尺并显示报错点相关推荐

最新文章

热门文章