2、点击事件业务执行完毕后，调用**this.$CapolLog.pointUpdateHelper（event,operateResultBool）**更新埋点（如果需要）

startTask(event) {

//模拟接口响应时间2s

setTimeout(() => {

this.$CapolLog

.pointUpdateHelper(event, true)

.then((res) => {

console.log(res)

})

.catch((error) => {

console.error(error)

})

}, 2000)

this.getMajorData()

this.showStartTaskDialog = true

},

页面初始埋点详细说明

待后续更新…

主要实现代码

commonLog.js（通用埋点方法）

import API from '../api'

import router from '../router'

import Utils from './utils'

import store from '../store'

import { getDeviceInfo } from './getDeviceInfo'

// 获取功能类型

function getFunctionType(val) {

const List = {

0: '按钮点击',

1: '页面初始',

2: '文件下载',

3: '文件浏览',

4: '文件分享',

5: '文件上传',

6: '选择模板',

7: '进度浏览',

8: '管控事件',

9: '图模关联',

10: '问题导出',

}

return List[val] || ''

}

// 获取日志类型

function getLogType(val) {

const List = {

0: '工具埋点点击',

1: '框架埋点初始',

2: '项目文件下载',

3: '分享文件下载',

4: '管控文件下载',

5: '项目文件浏览',

6: '分享文件浏览',

7: '管控文件浏览',

8: '图纸文件浏览',

9: '项目文件分享',

10: '项目文件上传',

11: '管控文件上传',

12: '选择模板埋点',

13: '进度浏览埋点',

14: '进度管控埋点',

15: '图模关联埋点',

16: '问题导出埋点',

}

return List[val] || ''

}

// 获取来源端

// function getScource(val) {

// const List = {

// 0: 'pc', //WEB端

// 1: 'android', //安卓端

// 2: 'ios', //苹果端

// 3: 'wx', //小程序端

// 4: 'Capol3D', //速建端

// 5: 'Capol2D', //速绘端

// }

// return List[val] || ''

// }

// 获取基本埋点信息

function getBasicInfo() {

const basicInfo = getDeviceInfo(null, router.history.current)

console.log(basicInfo, 'basicInfo')

return basicInfo

}

//获取回话唯一id

function getUUID() {

let uuid = sessionStorage.getItem('capol-log-uuid')

if (!uuid) {

uuid = Utils.uuid()

sessionStorage.setItem('capol-log-uuid', uuid)

}

return uuid

}

//按照后台要求 将对象转成json字符串

function getJSONObj(obj) {

if (typeof obj === 'object' && obj !== null) {

return JSON.stringify(obj).replace(/"/g, "'")

} else {

return ''

}

}

// 扁平化系统菜单数组

function flatterArray(arr, finalArr = []) {

if (arr.length === 0) return finalArr

for (let i = 0; i < arr.length; i++) {

const item = arr[i]

if (item.children && item.children.length) {

flatterArray(item.children, finalArr)

} else {

finalArr.push(item)

}

}

return finalArr

}

//获取菜单code

function getMenuCode() {

//默认取路由名称

let code = router.currentRoute.name || ''

let menuList = store.getters.menuList || []

if (menuList.length === 0) {

const queryObj = Utils.getURLParameters(decodeURIComponent(window.location.href))

const { proId, enterpriseId } = queryObj

menuList = JSON.parse(localStorage.getItem('pro_menu_list_' + proId + '_' + enterpriseId))

}

//从系统菜单列表中取code

if (menuList.length) {

const flatterMenuList = flatterArray(menuList)

const activeMenuText = document.querySelector(

'.sidebar-el-menu .el-menu-item.is-active .item span'

)?.innerHTML

const activeMenu = flatterMenuList.find((el) => el.title === activeMenuText)

if (activeMenu) {

code = activeMenu.code

}

}

return code

}

//埋点方法类

export default class CapolLog {

/**

* 通用添加埋点函数

* @param dynamicInfo 添加埋点的参数 （必填）

* @param dynamicInfo 必填项说明：functionType（功能类型）；logType（日志类型）；privateData（埋点私有参数）；idFlag（是否需要后台返回此次埋点id，用于后续更新）

* @param el dom元素，如果有传，将往dom元素上添加埋点信息 （非必填）

* @returns {Promise} 添加埋点的状态

*/

static pointAdd = (dynamicInfo, el) => {

let { functionType, source, logType, menuCode, buttonName, privateData, idFlag } =

dynamicInfo

const params = {

source: source || 'pc', //来源端

functionType: getFunctionType(functionType), //功能类型

logType: getLogType(logType), //日志类型

info: getJSONObj(getBasicInfo()), //埋点基本信息

uuid: getUUID(), //回话唯一值

menuCode: menuCode || getMenuCode(), //菜单编码 (非必填)

buttonName, //按钮名称

//私有参数json字符串

privateData: getJSONObj(privateData),

idFlag: idFlag || 0, //id值是否需要返回

}

return new Promise((resolve, reject) => {

API.log

.capolAddLog(params)

.then((res) => {

if (res.status === 200) {

if (res.data && el) {

el.classList.add('capol-log-element')

el.setAttribute('data-id', res.data)

el.setAttribute('data-type', getFunctionType(functionType))

}

resolve(res)

} else {

reject(res)

}

})

.catch((error) => {

reject(error)

})

})

}

/**

* 更新埋点通用函数

* @param id 此次需要更新的埋点id (必填)

* @param type 功能类型 eg('按钮点击') (必填)

* @param updateData 更新的私有参数 (必填)

* @returns {Promise} 返回更新埋点的状态

*/

static pointUpdate = (id, type, updateData) => {

const params = {

functionType: type,

updateData: getJSONObj({

id,

...updateData,

}),

}

return new Promise((resolve, reject) => {

API.log

.capolUpdateLog(params)

.then((res) => {

if (res.status === 200) {

resolve(res)

} else {

reject(res)

}

})

.catch((error) => {

reject(error)

})

})

}

/**

* 按钮点击更新埋点辅助函数

* @param event 点击事件的 event 对象 （必填）

* @param operateResultBool 点击事件的操作结果 true || false （必填）

* @returns {updatePromise} 返回更新埋点的状态

*/

static pointUpdateHelper = async (event, operateResultBool) => {

if (!event || operateResultBool === undefined) {

return Promise.reject(new Error('更新埋点参数缺失'))

}

const updateData = {

operateResult: operateResultBool ? '操作成功' : '操作失败',

}

console.log(event?.target.closest('.capol-log-element'))

const targetBtn = event?.target.closest('.capol-log-element')

//返回更新埋点的状态

let updatePromise

if (targetBtn) {

const id = targetBtn.dataset.id

const type = targetBtn.dataset.type

updatePromise = await this.pointUpdate(id, type, updateData)

} else {

updatePromise = Promise.reject(new Error('获取不到更新埋点id'))

}

return updatePromise

}

}