import { ElMessageBox, ElMessage } from 'element-plus' import i18n from '@/i18n' import _ from 'lodash' import { storageKey, iso36112 } from '@/utils/constants' import { getIso36112JsonData } from '@/utils/api' import { format } from 'echarts' import router from '@/router' export const tableSort = { // 是否需要排序 sortableShow (prop, from) { switch (prop) { case 'state': { if (from === 'operationlog' || from === 'alertSilence') { return false } break } case 'startAt': { if (from === 'alertSilence') { return false } break } case 'id': case 'alertRule': case 'severity': case 'endAt': case 'ID': case 'HOST': case 'SN': case 'assetType': case 'purchaseDate': case 'pingStatus': case 'dataCenter': case 'cabinet': case 'model': case 'principal': case 'asset': case 'port': case 'project': case 'module': case 'type': case 'name': case 'area': case 'vendor': case 'filename': case 'updateAt': case 'username': case 'ip': case 'operation': case 'createDate': case 'time': case 'host': case 'protocol': case 'user': case 'cmd': case 'alertName': case 'threshold': case 'idc': case 'alertNum': case 'gname': return 'custom' default : return false } }, // prop字段 propTitle (prop, from) { switch (from) { case 'asset': switch (prop) { case 'ID': return 'ass.id' case 'HOST': return 'ass.host' case 'SN': return 'ass.sn' case 'assetType': return 'sdtt.value' case 'purchaseDate': return 'ass.purchase_date' case 'state': return 'ass.state' case 'pingStatus': return 'assp.rtt' case 'dataCenter': return 'idc.name' case 'cabinet': return 'cab.name' case 'model': return 'mo.name' case 'vendor': return 'sdt.value' case 'principal': return 'su.username' default : return prop } case 'alertMessage': switch (prop) { case 'id': return 'am.id' case 'state': return 'am.state' case 'alertRule': return 'ar.alert_name' case 'severity': return 'am.severity' case 'startAt': return 'am.start_at' case 'endAt': return 'am.end_at' default : return prop } case 'project': switch (prop) { case 'id': return 'e.id' case 'asset': return 'a.host' case 'port': return 'e.port' case 'project': return 'p.name' case 'module': return 'm.name' case 'type': return 'm.type' case 'state' :return 'es.state' // case 'path': return'e.path'; default : return prop } case 'dc': switch (prop) { case 'id': return 'i.id' case 'name': return 'i.name' case 'area': return 'sa.name' default : return prop } case 'endpointTab': switch (prop) { case 'id': return 'e.id' case 'asset': return 'a.host' case 'port': return 'e.port' case 'project': return 'p.name' case 'module': return 'm.name' case 'type': return 'm.type' case 'state' :return 'es.state' // case 'path': return'e.path'; default : return prop } case 'model': switch (prop) { case 'id': return 'mo.id' case 'name': return 'mo.name' case 'type': return 'dictt.value' case 'vendor': return 'dict.value' default : return prop } case 'promServer': switch (prop) { case 'id': return 'id' case 'idc': return 'idc_id' case 'host': return 'host' case 'port': return 'port' case 'type': return 'type' default : return prop } case 'mib': switch (prop) { case 'id': return 'sm.id' case 'name': return 'sm.name' case 'filename': return 'sm.file_name' case 'updateAt': return 'sm.update_at' default : return prop } case 'operationlog': switch (prop) { case 'id': return 'sl.id' case 'username': return 'su.username' case 'ip': return 'sl.ip' case 'operation': return 'sl.operation' case 'type': return 'sl.type' case 'createDate': return 'sl.create_date' case 'time': return 'sl.time' default : return prop } case 'temrminallog': switch (prop) { case 'protocol': return 'protocol' case 'startTime': return 'startTime' default : return prop } case 'alertRules': switch (prop) { case 'id': return 'ar.id' case 'alertName': return 'ar.alert_name' case 'threshold': return 'ar.threshold' case 'severity': return 'ar.severity' default : return prop } case 'exprTemp': switch (prop) { case 'id': return 'id' case 'name': return 'name' case 'gname': return 'gname' default : return prop } default: return prop } }, // 本地正序 asce (prop) { return function (obj1, obj2) { const { val1, val2 } = this.format(prop, obj1, obj2) if (val1 < val2) { return -1 } else if (val1 > val2) { return 1 } else { return 0 } } }, // 本地倒序 desc (prop) { return function (obj1, obj2) { const { val1, val2 } = this.format(prop, obj1, obj2) if (val1 < val2) { return 1 } else if (val1 > val2) { return -1 } else { return 0 } } }, format (prop, obj1, obj2) { let val1 = obj1[prop] let val2 = obj2[prop] if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop !== 'time') { val1 = Number(val1) val2 = Number(val2) } if (prop === 'time') { val1 = tableSort.strTodate(val1) val2 = tableSort.strTodate(val2) } if (prop === 'element') { if (val1.alias) { val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g, '') } else { val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g, '') } if (val2.alias) { val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g, '') } else { val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g, '') } } return { val1, val2 } }, // 转化时间字符串为时间戳 strToDate (str) { let date = str.trim() date = date.substring(0, 19) date = date.replace(/-/g, '/') // 必须把日期'-'转为'/' return new Date(date).getTime() } } /* cancel提醒保存指令 */ export const cancelWithChange = { mounted (el, binding) { if (!binding.value || !binding.value.object) return const oldValue = JSON.parse(JSON.stringify(binding.value.object)) function domClick (e) { const newValue = JSON.parse(JSON.stringify(binding.value.object)) if (!isEqual(oldValue, newValue)) { ElMessageBox.confirm(i18n.global.t('tip.confirmCancel'), { confirmButtonText: i18n.global.t('tip.yes'), cancelButtonText: i18n.global.t('tip.no'), type: 'warning' }).then(() => { if (binding.value.func) { binding.value.func() } }) } else { binding.value.func() } } el.__vueDomClick__ = domClick el.addEventListener('click', domClick) }, unmounted (el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueDomClick__) delete el.__vueDomClick__ } } /* clickOutside指令 */ const exceptClassName = ['prevent-click-outside'] // clickOutside排除的class(白名单) export const clickOutside = { // 初始化指令 beforeMount (el, binding) { /* let oldValue try { oldValue = JSON.parse(JSON.stringify(binding.value.object)) } catch (e) { } */ function documentHandler (e) { if (el.contains(e.target)) { return false } else { let flag = true const path = e.path || (e.composedPath && e.composedPath()) // eslint-disable-next-line no-labels top: for (let i = 0; i < path.length; i++) { for (let j = 0; j < exceptClassName.length; j++) { if (path[i].className && path[i].className.indexOf(exceptClassName[j]) !== -1) { flag = false // eslint-disable-next-line no-labels break top } } } if (!flag) { return false } binding.value() /* if (oldValue) { const newValue = JSON.parse(JSON.stringify(binding.value.oldValue)) if (!isEqual(oldValue, newValue)) { ElMessageBox.confirm('Confirm?', { // TODO 国际化 confirmButtonText: 'Yes', // TODO 国际化 cancelButtonText: 'No', // TODO 国际化 type: 'warning' }).then(() => { if (binding.value.func) { binding.value.func() } }) } else { binding.value.func() } } else { if (binding.arg) { binding.value(e, binding.arg) } else { if (binding.value) { binding.value(e) } } } */ } } // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听 el.__vueClickOutside__ = documentHandler document.addEventListener('click', documentHandler) }, unmounted (el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__) delete el.__vueClickOutside__ } } const noDataDom = document.createElement('div') noDataDom.setAttribute('class', 'no-data') noDataDom.innerText = 'No data' export const noData = { updated (el, binding) { if (el && binding.oldValue !== binding.value) { if (binding.value) { setTimeout(() => { el.childNodes.forEach(node => { node.style && (node.style.display = 'none') }) el.insertBefore(noDataDom, el.childNodes[0]) }) } else { setTimeout(() => { for (let i = 0; i < el.childNodes.length; i++) { const node = el.childNodes[i] if (node.innerText === 'No data') { el.removeChild(node) break } } el.childNodes.forEach(node => { node.style && (node.style.display = '') }) }) } } } } export function isEqual (o1, o2) { const isEqualForInner = function (obj1, obj2) { const o1 = obj1 instanceof Object const o2 = obj2 instanceof Object if (!o1 || !o2) { return obj1 === obj2 } if (Object.keys(obj1).length !== Object.keys(obj2).length) { return false } for (const attr of Object.keys(obj1)) { const t1 = obj1[attr] instanceof Object const t2 = obj2[attr] instanceof Object if (t1 && t2) { if (!isEqualForInner(obj1[attr], obj2[attr])) { return false } } else if (obj1[attr] !== obj2[attr]) { return false } } return true } return isEqualForInner(o1, o2) } /* 计算文本的实际width,而不是length */ export function getTextRect (text, fontSize = 14) { return format.getTextRect(text, `${fontSize}`) } /* url占位符处理 */ export function replaceUrlPlaceholder (url, params) { _.forIn(params, (value, key) => { url = url.replace('{{' + key + '}}', value) }) return url } // 双引号替换为单引号 export function doubleQuotationToSingle (content) { return content.replace(/\"/g, "'") } // 双引号加斜杠转义 export function doubleQuotationEscape (content) { return content.replace(/\"/g, '\\\"') } // 下划线转换驼峰 export function lineToHump (name) { return name.replace(/\_(\w)/g, function (all, letter) { return letter.toUpperCase() }) } // 下划线转换空格首位大写 export function lineToSpace (name) { return _.upperFirst(name.replace(/\_(\w)/g, function (all, letter) { return ` ${letter.toUpperCase()}` })) } // 驼峰转换下划线 export function humpToLine (name) { return name.replace(/([A-Z])/g, '_$1').toLowerCase() } // 加载geo数据 export function loadGeoData (key) { const keys = [] if (key) { keys.push(key) } else { keys.push(storageKey.iso36112Capital) keys.push(storageKey.iso36112WorldLow) } keys.forEach(async k => { if (!localStorage.getItem(k)) { const data = await getIso36112JsonData(iso36112[k]) if (data) { localStorage.setItem(k, JSON.stringify(data)) } } }) return localStorage.getItem(key) } /* 返回geodata对象 */ export function getGeoData (key) { const data = localStorage.getItem(key) if (data) { return JSONParse(data) } else { return JSONParse(loadGeoData(key)) } } export function getCapitalGeo (countryId) { const data = getGeoData(storageKey.iso36112Capital) return data[countryId] } function JSONParse (data) { const firstParse = JSON.parse(data) if (typeof firstParse === 'string') { return JSON.parse(firstParse) } else { return firstParse } } export function copyValue (item) { const str = item const domUrl = document.createElement('input') domUrl.value = JSON.stringify(str) domUrl.id = 'creatDom' document.body.appendChild(domUrl) domUrl.select() // 选择对象 document.execCommand('Copy') // 执行浏览器复制命令 const creatDom = document.getElementById('creatDom') creatDom.parentNode.removeChild(creatDom) ElMessage.success(i18n.global.t('tip.copySuccess')) } export function getCurrentRoute () { return router.currentRoute && router.currentRoute.path }