代码片段
# 代码片段
# POST 文件流下载文件
// urlencode编码解码
// 编码函数：encodeURIComponent()
// 解码函数：decodeURIComponent()
this.api
.post(
'record/export',
{ ...params },
{
responseType: 'blob',
}
)
.then((response) => {
// 下载excel
let str = response.headers['content-disposition']
let search = 'filename='
var start = str.indexOf(search) //获得字符串的开始位置
const URInfo = str.substring(start + search.length) //截取字符串获取url格式文件名
const fileName = decodeURIComponent(URInfo) //url解码获取文件名
const content = response.data
const blob = new Blob([content])
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
# 地图坐标转换
国内各地图 API 坐标系统比较
// 火星坐标转百度坐标
function gcj02_to_bd09(lng, lat) {
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * Math.PI)
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * Math.PI)
return { lng: z * Math.cos(theta) + 0.0065, lat: z * Math.sin(theta) + 0.006 }
}
// 百度坐标转火星坐标
function bd09_to_gcj02(lng, lat) {
var x = lng - 0.0065,
y = lat - 0.006
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI)
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI)
return { lng: z * Math.cos(theta), lat: z * Math.sin(theta) }
}
// 获取两个坐标之间的距离
function GetDistance(lng1, lat1, lng2, lat2) {
var radLat1 = (lat1 * Math.PI) / 180.0
var radLat2 = (lat2 * Math.PI) / 180.0
var a = radLat1 - radLat2
var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
var s =
2 *
Math.asin(
Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))
)
s = s * 6378.137 // 地球半径;
s = Math.round(s * 10000) / 10000
return s // 单位为km
}
# 文字超出隐藏
/*1. 单行超出隐藏 */
.xxx {
width: 100%; /*宽度*/
white-space: nowrap; /*超出的空白区域不换行*/
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*文本超出显示省略号*/
}
/*2. 多行溢出隐藏显示...(在文字的容器上设置) 只兼容webkit内核的浏览器*/
.xxx {
display: -webkit-box; /*将对象转为弹性盒模型展示*/
-webkit-box-orient: vertical; /*设置弹性盒模型子元素的排列方式*/
-webkit-line-clamp: 2; /*限制文本行数*/
overflow: hidden; /*超出隐藏*/
}
/*3.多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)*/
.xxx {
position: relative;
line-height: 1.4em; /*行高和height成倍数，这里以三行文本超出隐藏举例*/
height: 4.2em;
overflow: hidden;
}
.xxx::after {
/*若要兼容IE8需用:after*/
content: '...'; /*替换内容比较灵活*/
position: absolute;
bottom: 2px;
right: 5px;
padding: 0 3px;
background: #fff; /*颜色和文字背景保持一致*/
box-shadow: 0 0 10px #fff; /*边缘处理*/
}
# 禁止文本选中
/* pc */
.not-select{
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
}
/* wap */
.no-touch {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* js 禁止文本选中 */
ontouchstart="return false;"
# CSS 初始化
# web
@charset 'utf-8';
/* ===== 初始化样式 ===== */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #555;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size: 14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-size: 100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
}
ol,
ul,
li {
list-style: none;
}
input,
textarea,
select,
button {
font: 14px Verdana, Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
/* ===== 公共样式 ===== */
/* 浮动 */
.fl {
float: left;
}
.fr {
float: right;
}
/* 清除浮动 */
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/* 吸顶效果 */
.sticky {
position: sticky;
top: 0;
}
/* 单行文字超出显示... */
.ellipsis1 {
/* 强制不换行 */
white-space: nowrap;
/* 文本超出省略 */
text-overflow: ellipsis;
overflow: hidden;
}
/* 多行文本超出隐藏 */
.ellipsis2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
}
# wap
@charset 'utf-8';
/* ===== 初始化样式 ===== */
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font: 12px/1.5 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;
color: #555;
background-color: #ffffff;
}
em,
i,
strong {
font-style: normal;
}
a {
text-decoration: none;
color: #555;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,
a:active,
a:visited,
a:hover {
background: none;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
ul,
ol {
list-style: none;
}
li {
list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-family: 'Microsoft YaHei';
}
input {
font-family: 'Microsoft YaHei';
}
/* 设置HTML5元素为块 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
/* 图片自适应 */
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
display: block;
border: none;
-ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/
}
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling: touch;
}
/* 禁止缩放表单 */
input[type='“submit”'],
input[type='“reset”'],
input[type='“button”'],
input {
resize: none;
border: none;
}
/* ===== 公共样式 ===== */
/* 浮动 */
.fl {
float: left;
}
.fr {
float: right;
}
/* 清除浮动 */
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/* 吸顶效果 */
.sticky {
position: sticky;
top: 0;
}
/* 单行文字超出显示... */
.ellipsis1 {
/* 强制不换行 */
white-space: nowrap;
/* 文本超出省略 */
text-overflow: ellipsis;
overflow: hidden;
}
/* 多行文本超出隐藏 */
.ellipsis2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
}
.db {
display: block !important;
}
.dn {
display: none;
}
# 一行背景代码
{
background: repeating-conic-gradient(#fff, #000, #fff 0.5deg);
}
# 修改全局滚动条样式
/* 修改全局滚动条样式 */
::-webkit-scrollbar {
width: 5px; /* 纵向滚动条*/
height: 5px; /* 横向滚动条 */
background-color: #fff;
}
/*定义滚动条轨道 内阴影*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #ccc;
}
/*定义滑块 内阴影*/
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #1890ff; /* 配置为主色调 */
border-radius: 10px;
}
# node获取本机ip
const os = require('os');
///获取本机ip///
function getIPAdress() {
var interfaces = os.networkInterfaces();
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
return alias.address;
}
}
}
}
const myHost = getIPAdress();
# 修改placeholder颜色
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
# pre标签样式美化
pre {
color:#444;
margin:15px auto;
padding:20px 15px;
border:3px dashed #ddd;
border-left:8px solid #bbb;
background:#fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAmCAIAAACphTeFAAAAJElEQVRIx2N4RS5gGNU5qnNU56hOZJ2fyQWjOkd1juoc1YkMAKDL4lkok3p7AAAAAElFTkSuQmCC') repeat;
white-space:pre-wrap;
word-wrap:break-word;
letter-spacing:1.5px;
font:14px/25px '宋体', '新宋体', 'Comic Sans MS','courier new';
line-height:22px;
background-size:100% 44px;
}
# 清除所有cookies
const clearCookie = () => {
var keys = document.cookie.match(/[^ =;]+(?==)/g);
if (keys) {
for (var i = keys.length; i--; ) {
document.cookie =
keys[i] +
"=0;expires=" +
new Date(0).toUTCString() +
";max-age=0";
}
}
};
# js小数运算处理
解决js小数运算出现精度丢失问题
function floatMul(arg1, arg2) {
let m = 0;
const s1 = arg1.toString();
const s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch (e) {}
try {
m += s2.split(".")[1].length;
} catch (e) {}
return (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);
}
/**
* 加法运算
* @param a
* @param b
* @returns {Number}
*/
export function numberAdd(a, b) {
let c, d, e
if (undefined == a || a == null || a == '' || isNaN(a)) {
a = 0
}
if (undefined == b || b == null || b == '' || isNaN(b)) {
b = 0
}
try {
c = a.toString().split('.')[1].length
} catch (f) {
c = 0
}
try {
d = b.toString().split('.')[1].length
} catch (f) {
d = 0
}
e = Math.pow(10, Math.max(c, d))
return (floatMul(a, e) + floatMul(b, e)) / e
}
/**
* 减法运算
* @param a
* @param b
* @returns {Number}
*/
export function numberSub(a, b) {
let c, d, e
if (undefined == a || a == null || a == '' || isNaN(a)) {
a = 0
}
if (undefined == b || b == null || b == '' || isNaN(b)) {
b = 0
}
try {
c = a.toString().split('.')[1].length
} catch (f) {
c = 0
}
try {
d = b.toString().split('.')[1].length
} catch (f) {
d = 0
}
e = Math.pow(10, Math.max(c, d))
return (floatMul(a, e) - floatMul(b, e)) / e
}
/**
* 乘法运算
* @param a
* @param b
* @returns {Number}
*/
export function numberMul(a, b) {
let c = 0
let d = a.toString()
let e = b.toString()
try {
c += d.split('.')[1].length
} catch (f) {}
try {
c += e.split('.')[1].length
} catch (f) {}
return (Number(d.replace('.', '')) * Number(e.replace('.', ''))) / Math.pow(10, c)
}
/**
* 除法运算
* @param a
* @param b
* @returns
*/
export function numberDiv(a, b) {
let c, d
let e = 0
let f = 0
try {
e = a.toString().split('.')[1].length
} catch (g) {}
try {
f = b.toString().split('.')[1].length
} catch (g) {}
// eslint-disable-next-line no-sequences
return (c = Number(a.toString().replace('.', ''))), (d = Number(b.toString().replace('.', ''))), floatMul(c / d, Math.pow(10, f - e))
}
# 金额
// 数字金额转中文金额
function changeNumMoneyToChinese(money) {
var cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
var cnInteger = "整"; //整数金额时后面跟的字符
var cnIntLast = "元"; //整型完以后的单位
var maxNum = 999999999999999.9999; //最大处理的数字
var IntegerNum; //金额整数部分
var DecimalNum; //金额小数部分
var ChineseStr = ""; //输出的中文金额字符串
var parts; //分离金额后用的数组，预定义
var Symbol = ""; //正负值标记
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
alert("超出最大处理数字");
return "";
}
if (money == 0) {
ChineseStr = cnNums[0] + cnIntLast + cnInteger;
return ChineseStr;
}
if (money < 0) {
money = -money;
Symbol = "负 ";
}
money = money.toString(); //转换为字符串
if (money.indexOf(".") == -1) {
IntegerNum = money;
DecimalNum = "";
} else {
parts = money.split(".");
IntegerNum = parts[0];
DecimalNum = parts[1].substr(0, 4);
}
if (parseInt(IntegerNum, 10) > 0) {
//获取整型部分转换
var zeroCount = 0;
var IntLen = IntegerNum.length;
for (var i = 0; i < IntLen; i++) {
var n = IntegerNum.substr(i, 1);
var p = IntLen - i - 1;
var q = p / 4;
var m = p % 4;
if (n == "0") {
zeroCount++;
} else {
if (zeroCount > 0) {
ChineseStr += cnNums[0];
}
zeroCount = 0; //归零
ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if (m == 0 && zeroCount < 4) {
ChineseStr += cnIntUnits[q];
}
}
ChineseStr += cnIntLast;
//整型部分处理完毕
}
if (DecimalNum != "") {
//小数部分
var decLen = DecimalNum.length;
for (var i = 0; i < decLen; i++) {
var n = DecimalNum.substr(i, 1);
if (n != "0") {
ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
}
}
}
if (ChineseStr == "") {
ChineseStr += cnNums[0] + cnIntLast + cnInteger;
} else if (DecimalNum == "") {
ChineseStr += cnInteger;
}
ChineseStr = Symbol + ChineseStr;
return ChineseStr;
}
// 千分位显示金额 sub是否加万
function formatPrice(price, sub) {
price = price * 1.0 || 0;
let fix = "";
if (sub && price > 10000) {
price = (price / 10000).toFixed(2);
price = price * 1;
fix = "万";
}
return (
price.toLocaleString("zh-CN", {
style: "currency",
currency: "CNY",
}) + fix
); //¥999,999.00
return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
# 日期时间格式化
/**
* 日期时间格式化
* @param type y:年；ym:年月；ymd:年月日；ymdh:年月日时；ymdhf:年月日时分；ymdhfs:年月日时分秒
* @param style 1：y-m-d h:m:s 2:y年m月。。。
* @returns {string}
*/
function getDateFormat(date, type, style) {
type = type || "ymdhfs";
style = style || 1;
var now = date ? new Date(date) : new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
var day = now.getDay(); //得到周几
var hour = now.getHours(); //得到小时
var minu = now.getMinutes(); //得到分钟
var sec = now.getSeconds(); //得到秒
var MS = now.getMilliseconds(); //获取毫秒
var week;
month = month + 1;
if (month < 10) month = "0" + month;
if (date < 10) date = "0" + date;
if (hour < 10) hour = "0" + hour;
if (minu < 10) minu = "0" + minu;
if (sec < 10) sec = "0" + sec;
// if (MS < 10) MS = "0" + MS;
// var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
// week = arr_week[day];
var time = [];
type.indexOf("y") != -1 ? time.push(year + (style == 1 ? "-" : "年")) : null;
type.indexOf("m") != -1 ? time.push(month + (style == 1 ? "-" : "月")) : null;
type.indexOf("d") != -1 ? time.push(date + (style == 1 ? " " : "日")) : null;
type.indexOf("h") != -1 ? time.push(hour + (style == 1 ? ":" : "时")) : null;
type.indexOf("f") != -1 ? time.push(minu + (style == 1 ? (type.indexOf("s") != -1 ? ":" : "") : "分")) : null;
type.indexOf("s") != -1 ? time.push(sec + (style == 1 ? "" : "秒")) : null;
// time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
return time.join("").trim().replace(/-+$/g, "");
}
# 数组转树形
/**
* 转树形数组
* @param {*} arr
* @param {*} pid 父级数据id
* @param {*} id 当前数据id
* @returns
*/
async function arrToTreeArr(arr = [], pid = "pId", id = "id") {
var treeArr = [];
arr.forEach(async (val, i) => {
var _val = getObjByField(arr, id, val[pid]);
if (!_val) {
//无上级
val.children = await getChildren(getObjArrByField(arr, pid, val[id]), true);
treeArr.push(val);
}
});
function getChildren(children = [], first) {
children.forEach((val, i) => {
val.children = getObjArrByField(arr, pid, val[id]);
if (val.children.length) getChildren(val.children);
});
if (first) return children;
}
return treeArr;
}