Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit b5a36e86 by zsh
Options

添加utils工具方法

parent 8105105e
Showing with 102 additions and 177 deletions
src/components/echarts/index.vue
......@@ -50,6 +50,14 @@ export default {
}
},
beforeDestroy () {
window.removeEventListener('resize', this.chartResize)
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
methods: {
/**
* @method initChart 初始化图表
......@@ -58,20 +66,29 @@ export default {
const { id = '', option = {} } = this.chartOpt
if (id && option) {
const currChartEl = document.getElementById(id)
// 无需滚动的图表, 初始化时先销毁, 防止重复创建
if (!this.isMove) {
this.echarts.dispose(currChartEl) // 先销毁, 防止重复创建
this.echarts.dispose(currChartEl)
}
if (!this.chart) {
this.chart = this.echarts.init(currChartEl)
}
// 渲染图表
this.chart.setOption(option, true)
setTimeout(() => { // echarts图表自适应屏幕宽度
window.addEventListener('resize', () => {
this.chart.resize()
})
window.addEventListener('resize', this.chartResize)
}, 200)
}
}
},
/**
* @method chartResize 重置图表
*/
chartResize: throttle (function () {
this.chart && this.chart.resize()
}, 2000)
}
}
</script>
src/public/utils/utils.js
......@@ -103,28 +103,17 @@ export default {
return false
}
},
/**
* [replacePunctuation 替换字符串中的所有标点符号]
* @param {String} str 目标字符串
* @return {String} 去除标点符号的字符串
*/
replacePunctuation (str) {
if (typeof str !== 'string') {
str = str.toString()
}
return str.replace(/\+/g, ' ')
// return str.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g, " ");
},
/**
* [currDates 当前日期]
* @return {Object} y - 年, like => 2018
* @returns {Object} y - 年, like => 2021
* m - 月, like => 03
* d - 日, like => 02
* h - 时, like => 09
* M - 分, like => 09
* s - 秒, like => 07
* ym - 年月, like => 201804
* ymd - 年月日, like => 20180402
* ym - 年月, like => 202104
* ymd - 年月日, like => 20210402
*/
currDates () {
let self = this
......@@ -148,6 +137,16 @@ export default {
ymd
}
},
/**
* @method getFirstEndDay 获取指定日期对应月份的第一天和最后一天
* @param {String|Date} assignDay 指定日期, 默认: 当前日期
* @param {Boolean} prevMonth 是否是上一个月, 默认: false
* @returns {Object}
* @param {String} firstDay 指定日期对应月份的第一天, 如: 2021-07-01
* @param {String} lastDay 指定日期对应月份的最后天, 如: 2021-07-31
* @param {String} 指定日期对应月份下个月的第一天, 如: 2021-07-01
*/
getFirstEndDay (assignDay = new Date(), prevMonth = false) {
let self = this
let nowdays = new Date(assignDay)
......@@ -173,8 +172,9 @@ export default {
nextMonthFirstDay
}
},
/**
* [getDateStr 获取指定日期前后的日期]
* @method getDateStr 获取指定日期前后的日期
* @param {String, Date} assignDay 指定日期, default: 当前日期
* @param {Int} addDayCount 指定天数, 0 - 今天, > 0 今天后的日期, < 0 今天前的日期
* @return {String} 指定日期前后的日期字符串
......@@ -189,8 +189,9 @@ export default {
return `${y}-${m}-${d}`
},
/**
* [getScrollBarWidth 获取滚动条实际宽度]
* @method getScrollBarWidth 获取滚动条实际宽度
* @return {Int} 滚动条实际宽度
*/
getScrollBarWidth () {
......@@ -205,171 +206,31 @@ export default {
return noScroll - scroll
},
/**
* [modalOpenEvent Modal显示事件]
* @description Modal显示时禁止浏览器滚动, 同时设置body 'padding-right' 为 '滚动条实际宽度', 防止抖动
* @param {Boolean} bl 是否显示Modal
* true - 显示Modal, 同时禁止浏览器滚动
* false - 隐藏Modal, 同时允许浏览器滚动
*/
modalOpenEvent (bl) {
let self = this
let oBody = document.body
let scrollBarWidth = `${self.getScrollBarWidth()}px`
oBody.className = bl ? 'modal-open' : ''
oBody.style.cssText = bl ? `padding-right: ${scrollBarWidth}` : ''
},
/**
* 获取每月的活动事件
* 按月返回数据，由于有跨天的活动，所以需要处理活动日历数据,按日期展开ajax数据
* @param {*} data :shlib.events.month返回数据 result.datas
* @param {*} date : 日期对象{start: '2018-03-01',end:'2018-04-01'}
*/
getEventsData (data, date) {
if (data.length === 0) {
return []
}
let self = this
date.start = new Date(date.start + ' 00:00:00')
date.end = new Date(date.end + ' 00:00:00')
let tempList = []
// let events = []; // 日历活动提示
// let dates = []; // 保存日期列表
for (let j = 0, k = data.length; j < k; j++) {
tempList = tempList.concat(spreadData(data[j]))
}
tempList.sort(function (a, b) {
return a.date < b.date ? 1 : -1
})
return collectEventsData(tempList)
// 判断活动是否跨天，如果是，则展开数据
function spreadData (data) {
// console.log(data);
let startTime = new Date(data.v3)
let endTime = new Date(data.v4)
let formatStart = ''
let formatEnd = ''
let tempList = []
if (Date.parse(endTime) < Date.parse(startTime)) {
let tempTime = startTime
startTime = endTime
endTime = tempTime
formatStart = self.formatDate(endTime, '-')
formatEnd = self.formatDate(startTime, '-')
} else {
formatStart = self.formatDate(startTime, '-')
formatEnd = self.formatDate(endTime, '-')
}
if (formatStart.timerStr !== formatEnd.timerStr) {
// 活动跨天
let s = 0
let e = 0
if (Date.parse(startTime) < Date.parse(date.start)) {
// 当前活动开始日期小于当前月份的开始日期
s = date.start
} else {
s = startTime
}
if (Date.parse(endTime) > Date.parse(date.end)) {
// 当前活动结束日期大于当前月份的结束日期
e = new Date(date.end)
e.setDate(0)
} else {
e = endTime
}
// 活动跨天，进行展开
for (let j = 0, l = e.getDate() - s.getDate() + 1; j < l; j++) {
tempList.push({
date: Date.parse(s.getFullYear() + '-' + (s.getMonth() + 1) + '-' + (s.getDate() + j) + ' 00:' + j + ':00'),
header: s.getFullYear() + '-' + self.zeroPadding(s.getMonth() + 1) + '-' + self.zeroPadding(s.getDate() + j)
// id: data.id, // 活动详情页id
// cover: data.v7,
// title: data.v1,
// type: data.v5,
// organizers: data.v8 || '', // 实际暂无v8字段
// location: data.v6,
// time: self.timerHandle(data.v3, data.v4)
})
}
// console.log(tempList);
return tempList
} else {
// 同一天
return [{
date: Date.parse(data.v3),
header: startTime.getFullYear() + '-' + self.zeroPadding(startTime.getMonth() + 1) + '-' + self.zeroPadding(startTime.getDate())
// id: data.id, // 活动详情页id
// cover: data.v7,
// title: data.v1,
// type: data.v5,
// organizers: data.v8 || '', // 实际暂无v8字段
// location: data.v6,
// time: self.timerHandle(data.v3, data.v4)
}]
}
}
// 收集日历活动事件
function collectEventsData (data) {
let events = [] // 日历活动提示
let dates = [] // 保存日期列表
for (let j = 0, k = data.length; j < k; j++) {
const element = data[j]
let dname = element.header
// let dname = element.time.split(' ')[0];
if (!findDate(dname)) {
dates.push(dname)
findObj(dname)
}
}
// console.log(events);
return events // 活动日历事件列表
function findDate (dateName) { // 查找日期列表是否已经存储了日期
if (dates.indexOf(dateName) < 0) {
return false
}
return true
}
// 遍历列表找对象
function findObj (dateName) {
let eventitem = {
date: dateName,
eventCount: 0
}
for (let i = 0, l = data.length; i < l; i++) {
const item = data[i]
if (item.header === dateName) {
eventitem.eventCount++
}
}
events.unshift(eventitem)
}
}
},
/**
* 数组转对象
* @method array2obj 数组转对象
* @param {Array} array 源数组
* @param {String} key 指定对象的key值
*/
array2obj (array, key) {
var resObj = {}
for (var i = 0; i < array.length; i++) {
resObj[array[i][key]] = array[i]
const resObj = {}
for (let i = 0; i < array.length; i++) {
const item = array[i]
resObj[item[key]] = item
}
return resObj
},
// 生成随机字符串
/**
* @method randomStr 生成随机字符串
* @param {Int|Number} e 随机字符串长度
* @returns {String} n 生成后的随机字符串
*/
randomStr (e) {
e = e || 6
var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var a = t.length
var n = ''
const t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
const a = t.length
let n = ''
for (let i = 0; i < e; i++) {
n += t.charAt(Math.floor(Math.random() * a))
}
......@@ -435,5 +296,52 @@ export default {
context.font = fontStyle
const elem = context.measureText(text)
return elem
},
/**
* @method debounce 函数防抖
* @param {Function} fn 回调函数
* @param {Int|Number} delay 延迟时间
*/
debounce (fn, delay) {
let timer = null // 声明计时器
return function () {
const context = this
const args = arguments
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
},
/**
* @method throttle 函数节流
* @param {Function} fn 回调函数
* @param {Int|Number} delay 延迟间隔
* @param {Object} ctx 当前函数执行上下文对象
*/
throttle (fn, delay, ctx) {
let isAvail = true
let count = false
let movement = null
return function () {
count = true
let args = arguments
if (isAvail) {
fn.apply(ctx, args)
isAvail = false
count = false
setTimeout(function () {
isAvail = true
}, delay)
}
if (count) {
clearTimeout(movement)
movement = setTimeout(function () {
fn.apply(ctx, args)
}, 2 * delay)
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment