+
+
+
+
@@ -145,9 +215,14 @@ import bus from '@/libs/bus.js'
import { SVG } from '@svgdotjs/svg.js'
import { coordinatePoint } from '@/components/common/js/common'
import imageUrl from '@/assets/img/logo-big.png'
+import VueQr from '@/components/common/vueQR/packages/vue-qr'
import { get } from '@/http'
+import SparkMD5 from 'spark-md5'
export default {
name: 'login',
+ components: {
+ VueQr
+ },
data () {
return {
imageUrl,
@@ -185,7 +260,20 @@ export default {
bgImg: '', // 背景图
constellation: [],
requestAnimationFrame: '',
- speed: [-1.3, -1, -0.6, -0.3, 0.3, 0.6, 1, 1.3]
+ speed: [-1.3, -1, -0.6, -0.3, 0.3, 0.6, 1, 1.3],
+ stateItem: '',
+ endItem: '',
+ qrCodeShow: false,
+ qrCodeArr: [],
+ qrCodeNum: [], // 逐个加载 qr
+ totalQrCode: 10,
+ currentPage: 1,
+ qrloading: false,
+ dialogQrType: 'item',
+ boxWidth: '',
+ boxHeight: '',
+ qrWidth: 10,
+ paddingLeft: 0,
}
},
methods: {
@@ -563,6 +651,119 @@ export default {
} else {
return false
}
+ },
+ closeQrCode () {
+ this.qrCodeShow = false
+ },
+ openQrcode () {
+ this.qrCodeArr = []
+ this.qrCodeNum = []
+ this.qrCodeShow = true
+ this.qrloading = true
+ setTimeout(() => {
+ this.$get('/sys/license/token').then(res => {
+ this.totalQrCode = Math.ceil(res.data.length / (1024 + 512))
+ if (this.totalQrCode < 1) {
+ this.totalQrCode = 1
+ }
+ const total = this.totalQrCode < 10 ? ('0' + this.totalQrCode) : this.totalQrCode
+ const totalMD5 = SparkMD5.hashBinary(res.data).slice(0, 8)
+ const arr = []
+ for (let i = 0; i < this.totalQrCode; i++) {
+ const num = (1024 + 512)
+ let str1 = res.data.slice(num * i, num * (i + 1))
+ const index = i < 10 ? ('0' + (i + 1)) : (i + 1)
+ const md5 = SparkMD5.hashBinary(str1).slice(0, 8)
+ str1 = total + '' + index + totalMD5 + md5 + '' + str1
+ arr.push(str1)
+ }
+ this.qrCodeArr = []
+ this.qrCodeNum = arr.map(() => {
+ return true
+ })
+ arr.forEach((item, index) => {
+ setTimeout(() => {
+ this.qrCodeArr.push(item)
+ this.qrCodeNum[index] = false
+ }, index * 100)
+ })
+ this.getLayout(arr)
+ this.qrloading = false
+ }, error => {
+ const $self = this
+ const reader = new FileReader()
+ reader.onload = function (event) {
+ const responseText = reader.result
+ const exception = JSON.parse(responseText)
+ if (exception.message) {
+ $self.$message.error(exception.message)
+ } else {
+ console.error(error)
+ }
+ }
+ reader.readAsText(error.response.data)
+ })
+ }, 100)
+ },
+ getSrc (index) {
+ const cas = document.createElement('canvas')
+ const ctx = cas.getContext('2d')
+
+ cas.width = 100
+ cas.height = 100
+ ctx.font = 'normal bold 40px Roboto-Regular'
+ let text = index + 1 + ''
+ if (text.length < 2) {
+ text = '0' + text
+ }
+ ctx.fillText(text, 25, 65)
+ // 把画布的内容转换为base64编码格式的图片
+ const data = cas.toDataURL('image/png', 1)
+ return data
+ },
+ setActiveItem (currentPage) {
+ this.$refs.carousel.setActiveItem('qr-' + (currentPage - 1))
+ },
+ getLayout () {
+ try {
+ this.boxWidth = document.body.offsetWidth - 30 - 40
+ this.boxHeight = document.body.offsetHeight - 104 - 50
+ } catch (error) {}
+ return new Promise(resolve => {
+ let rateMax = 0
+ let col = 0
+ let row = 0
+ for (let i = 1; i <= this.qrCodeNum.length; i++) {
+ const cols = Math.ceil(this.qrCodeNum.length / i)
+ const w = this.boxWidth / i
+ const h = this.boxHeight / cols
+ const rate = w > h ? h / w : w / h
+ if (rate > rateMax) {
+ rateMax = rate
+ col = cols
+ row = i
+ }
+ }
+ if (this.qrCodeNum.length) {
+ while (col * row >= this.qrCodeNum.length) { // 避免出现空白
+ row--
+ }
+ }
+ row++
+ if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置
+ const temp = col
+ col = row
+ row = temp
+ }
+ this.qrWidth = 10
+ if (this.boxHeight / col < this.boxWidth / row) {
+ this.qrWidth = this.boxHeight / col
+ } else {
+ this.qrWidth = this.boxWidth / row
+ }
+ this.paddingLeft = (this.boxWidth - row * this.qrWidth) / 2
+ resolve({ col, row })
+ })
}
},
watch: {
diff --git a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
new file mode 100644
index 000000000..b744ae17e
--- /dev/null
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -0,0 +1,43 @@
+export default {
+ data () {
+ return {
+ topoData: {},
+ querysArray: [],
+ meta2dType: '',
+ params: {}
+ }
+ },
+ watch: {
+ currentProject: {
+ handler (n) {
+ this.reload()
+ }
+ },
+ chart: {}
+ },
+ methods: {
+ reload () {
+ if (this.currentProject.id) {
+ this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
+ if (res.data && res.data.topo) {
+ this.topoData = res.data.topo.topo || {}
+ this.querysArray = res.data.topo.elements || []
+ this.params = {
+ timeType: res.data.topo.timeType || 5,
+ unit: res.data.topo.unit || 1,
+ statistic: res.data.topo.statistic || 'last',
+ }
+ } else {
+ this.topoData = {}
+ this.querysArray = []
+ this.params = {
+ timeType: 5,
+ unit: 1,
+ statistic: 'last'
+ }
+ }
+ })
+ }
+ }
+ }
+}
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
new file mode 100644
index 000000000..cb5abadff
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
@@ -0,0 +1,297 @@
+import { Meta2d, registerNode } from '@meta2d/core'
+import { flowPens } from '@meta2d/flow-diagram'
+import { activityDiagram } from '@meta2d/activity-diagram'
+import { classPens } from '@meta2d/class-diagram'
+import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram'
+// import { chartsPens } from '@meta2d/le5le-charts'
+import {
+ Tools,
+ canvasRegister,
+ imageTemp,
+ onChangeAnimate,
+ onChangeAnimateLine,
+ myCubec,
+ myCubeAnchors
+} from '../../L5/services/canvas.js'
+import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+import bus from '@/libs/bus'
+import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
+export default {
+ data () {
+ return {
+ selectPens: [],
+ editFlag: false,
+ prevFlag: false,
+ meta2dLoading: true,
+ position: {
+ top: 50,
+ left: 0,
+ show: false
+ },
+ timer3: null,
+ chartParams: {
+ chartType: 'line',
+ content: '',
+ legends: [],
+ title: '',
+ titleShow: true
+ }
+ }
+ },
+ mixins: [topoUtil],
+ methods: {
+ init () {
+ const meta2dOptions = {
+ minScale: 0.25,
+ maxScale: 2
+ }
+ const meta2d = new Meta2d(this.meta2dId, meta2dOptions)
+ meta2d.register(flowPens())
+ meta2d.register(activityDiagram())
+ meta2d.register(classPens())
+ meta2d.register(sequencePens())
+ meta2d.registerCanvasDraw(sequencePensbyCtx())
+ // meta2d.registerCanvasDraw(formPens())
+ // meta2d.registerCanvasDraw(chartsPens())
+ /* 画布绑定事件 */
+ meta2d.beforeAddPens = (pens) => { // 添加画笔前
+ if (pens.length === 1) {
+ if (!pens[0].type) {
+ this.nodeInit(pens[0])
+ } else {
+ this.lineInit(pens[0])
+ }
+ }
+ return true
+ }
+ meta2d.beforeRemovePens = async (pens) => {
+ bus.$emit('changeSelectPens', [])
+ // 返回 true 允许 remove
+ return true
+ }
+ // getTopology(this.topoData)).on('translate', this.topTranslate) // 平移·
+ meta2d.on('active', this.pensActive) // 选中·
+ // meta2d.on('translatePens', () => {}) // 移动画笔结束·
+ // meta2d.on('translatingPens', () => {}) // 移动画笔进行中·
+ meta2d.on('enter', this.penEnter) // 移入画笔·
+ meta2d.on('leave', this.penLeave) // 移出画笔·
+ // meta2d.on('add', this.appPen) // 添加新画笔·
+ meta2d.on('click', this.topoClick) // click画笔·
+
+ setTopology(this.meta2dId, meta2d)
+ },
+ reload () {
+ const endTime = new Date().getTime()
+ const startTime = endTime - 60 * this.params.timeType * 1000
+ console.log(startTime)
+ this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
+ console.log(arr)
+ this.clacTopoData(this.topoData, arr).then((data) => {
+ getTopology(this.meta2dId).resize()
+ getTopology(this.meta2dId).open(data)
+ getTopology(this.meta2dId).centerView()
+ getTopology(this.meta2dId).lock(1)
+ })
+ })
+ },
+ nodeInit (pen) { // 初始化节点参数
+ if (pen.data && pen.data.params) {
+ return
+ }
+ pen.data = {
+ params: { // 用于编辑时 重置为节点初始状态
+ background: pen.background || '#22222200',
+ color: pen.color || '#222222ff',
+ textColor: pen.textColor || '#222222ff'
+ },
+ imageId: '',
+ valueMapping: [],
+ legend: '',
+ statistic: 'last',
+ parent: '',
+ value: '',
+ enable: {
+ valueMapping: true,
+ tooltip: true
+ },
+ tooltip: {
+ title: '',
+ titleShow: true,
+ chartType: 'line',
+ content: '',
+ legends: [] // {legend: '' , alias}
+ }
+ }
+ pen.disableInput = pen.disableInput || true
+ pen.background = pen.background || '#22222200'
+ pen.textAlign = pen.textAlign || 'center'
+ pen.textBaseline = pen.textBaseline || 'middle'
+ pen.color = pen.color || '#222222ff'
+ pen.textColor = pen.textColor || '#222222ff'
+ pen.image = pen.image || ''
+ pen.imageId = pen.imageId || ''
+ pen.imageRatio = pen.imageRatio || false
+ pen.ratio = pen.ratio || false
+ pen.rotate = pen.rotate || 0
+ pen.globalAlpha = pen.globalAlpha || 1
+ pen.borderType = pen.borderType || 0
+ pen.lineWidth = pen.lineWidth || 1
+ pen.lineDash = pen.lineDash || []
+ pen.borderRadius = pen.borderRadius || 0
+ pen.paddingTop = 5
+ pen.paddingBottom = 5
+ pen.paddingLeft = 5
+ pen.paddingRight = 5
+ pen.visible = pen.visible || true
+ pen.isNz = true
+ pen.locked = pen.locked || 0
+ pen.isBottom = true
+ },
+ lineInit (pen) { // 初始化连线参数
+ if (pen.data && pen.data.params) {
+ return
+ }
+ pen.data = {
+ params: {
+ animateColor: pen.animateColor || '#FA901CFF',
+ borderColor: pen.borderColor || '#22222200',
+ color: pen.color || '#222222FF'
+ },
+ valueMapping: [],
+ legend: '',
+ statistic: 'last',
+ parent: '',
+ value: '',
+ enable: {
+ valueMapping: true,
+ tooltip: true
+ }
+ }
+ pen.disableInput = pen.disableInput || true
+ pen.lineAnimateType = pen.lineAnimateType || 0
+ pen.animateSpan = pen.animateSpan || 1
+ pen.animateReverse = pen.animateReverse || false
+ pen.fromArrow = pen.fromArrow || ''
+ pen.animateColor = pen.animateColor || '#FA901CFF'
+ pen.borderColor = pen.borderColor || '#22222200'
+ pen.borderWidth = pen.borderWidth || 0
+ pen.color = pen.color || '#222222ff'
+ pen.toArrow = pen.toArrow || ''
+ pen.borderType = pen.borderType || 0
+ pen.lineWidth = pen.lineWidth || 1
+ pen.lineDash = pen.lineDash || []
+ pen.isNz = pen.isNz || true
+ pen.visible = pen.visible || true
+ pen.locked = pen.locked || 0
+ pen.isBottom = true
+ },
+ pensActive (pens, e) { // 选中节点
+ this.selectPens = pens
+
+ setTimeout(() => {
+ this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true)
+ })
+ },
+ topoClick (params, e) { // 点击节点
+ if (!params.pen && this.$refs.meta2dProps) {
+ this.$refs.meta2dProps.activeName = 'canvas'
+ this.selectPens = []
+ }
+ },
+ penEnter (pen, e) { // 移入节点
+ console.log(pen, e, 'penEnter')
+ console.log(getTopology(this.meta2dId).getPenRect(pen))
+ if (this.timer3) {
+ clearTimeout(this.timer3)
+ this.timer3 = null
+ }
+ this.position.show = false
+ if (!pen.type && pen.data.enable.tooltip) {
+ if (!pen.data.tooltip.legends.length) {
+ return
+ }
+ this.chartParams = {
+ ...pen.data.tooltip,
+ unit: this.params.unit,
+ statistic: this.params.statistic
+ }
+ this.timer3 = setTimeout(() => {
+ let ePosition = window.ePosition
+ console.log(this.meta2dId, ePosition)
+ let boxWidth = this.$refs.meta2dBox.offsetWidth
+ let boxHeight = this.$refs.meta2dBox.offsetHeight
+ this.position.left = ePosition.layerX
+ this.position.top = ePosition.layerY
+ this.$nextTick(() => {
+ if ((boxWidth / 2) > ePosition.layerX) {
+ this.position.left = ePosition.layerX + 20
+ } else {
+ this.position.left = ePosition.layerX - 20 - 400
+ }
+ if (boxHeight > (ePosition.layerY + 300)) {
+ this.position.top = ePosition.layerY + 50
+ } else {
+ this.position.top = ePosition.layerY - 300
+ }
+ ePosition = null
+ boxWidth = null
+ boxHeight = null
+ })
+ this.position.show = true
+ clearTimeout(this.timer3)
+ }, 100)
+ }
+ },
+ penLeave () {
+ if (!this.timer3) {
+ this.timer3 = setTimeout(() => {
+ this.position.show = false
+ this.timer3 = null
+ }, 50)
+ } else {
+ clearTimeout(this.timer3)
+ this.timer3 = null
+ this.timer3 = setTimeout(() => {
+ this.position.show = false
+ this.timer3 = null
+ }, 50)
+ }
+ },
+ tooltipOver () {
+ console.log('tooltipOver')
+ clearTimeout(this.timer3)
+ this.timer3 = null
+ },
+ tooltipOut () {
+ console.log('tooltipOut')
+ this.timer3 = setTimeout(() => {
+ this.position.show = false
+ this.timer3 = null
+ }, 50)
+ },
+ updatePens (pen, key) { // 更新对应的节点
+ // meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });
+ const obj = { id: pen.id }
+ obj[key] = pen[key]
+ if (key === 'lineName') {
+ getTopology(this.meta2dId).updateLineType(pen, pen[key])
+ }
+ getTopology(this.meta2dId).setValue(obj)
+ if (key === 'lineAnimateType') {
+ if (!pen[key]) {
+ getTopology(this.meta2dId).stopAnimate(pen.id)
+ return
+ }
+ getTopology(this.meta2dId).startAnimate(pen.id)
+ }
+ },
+ exitEdit (isRefresh) {
+ this.editFlag = false
+ if (isRefresh) {
+ this.$emit('reload')
+ }
+ }
+ },
+ beforeDestroy () {
+ }
+}
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dStore.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dStore.js
new file mode 100644
index 000000000..49a8fe338
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dStore.js
@@ -0,0 +1,27 @@
+const meta2dStore = {
+ state: {
+ queryValues: []
+ },
+ mutations: {
+ setQueryValues (state, arr) {
+ state.queryValues = arr
+ },
+ delQueryValues (state, obj) {
+ delete state.queryValues[obj.key]
+ }
+ },
+ getters: {
+ getQueryValues (state) {
+ return state.queryValues
+ }
+ },
+ actions: {
+ dispatchSetQueryValues (store, arr) {
+ store.commit('setQueryValues', arr)
+ },
+ dispatchDelQueryValues (store, arr) {
+ store.commit('delQueryValues', arr)
+ }
+ }
+}
+export default meta2dStore
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
new file mode 100644
index 000000000..4d04aa39c
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
@@ -0,0 +1,205 @@
+import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+import bus from '@/libs/bus'
+import axios from 'axios'
+import { getMetricTypeValue } from '@/components/common/js/tools'
+import chartDataFormat from "@/components/chart/chartDataFormat";
+export default {
+ methods: {
+ topoResize (id) {
+ getTopology(id).resize()
+ },
+ initEdit (id) {
+ getTopology(id).lock(0)
+ getTopology(id).stopAnimate()
+ if (getTopology(id).data().pens) {
+ getTopology(id).data().pens.forEach(item => {
+ this.calcNode(item)
+ })
+ }
+ getTopology(id).render()
+ getTopology(id).centerView()
+ },
+ calcNode (node) { // 处理节点数据
+ node = { id: node.id, ...node.data.params }
+ getTopology(this.meta2dId)._setValue(node)
+ },
+ getQueryValues (elements, startTime, endTime) {
+ this.meta2dLoading = true
+ return new Promise(resolve => {
+ const step = bus.getStep(startTime, endTime)
+ endTime = parseInt(endTime / 1000)
+ startTime = parseInt(startTime / 1000)
+ const urlPre = '/prom'
+ elements = elements.filter(item => item.state && item.expression)
+ const requests = elements.map((element) => {
+ // query_range
+ let query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${step}`
+ query += `&nullType=${'null'}`
+ if (element.filter) {
+ query += `&filter=${element.filter}`
+ }
+ query += `&query=${encodeURIComponent(element.expression)}`
+ return this.$get(query)
+ })
+ axios.all(requests).then((res) => {
+ const arr = []
+ res.forEach((request, index) => {
+ arr.push({
+ type: 'title',
+ name: elements[index].name
+ })
+ if (request.code === 200 && request.status === 'success') {
+ request.data.result.forEach((r, rindex) => {
+ let legend = ''
+ if (!r.metric) {
+ r.metric = {}
+ }
+ if (r.metric.__name__) {
+ legend += `${r.metric.__name__}{`
+ }
+ const tagKeysArr = Object.keys(r.metric)
+ tagKeysArr.forEach(tagKey => {
+ if (tagKey !== '__name__' && tagKey !== 'legend' && tagKey !== 'values' && tagKey !== '$value') {
+ legend += `${tagKey}="${r.metric[tagKey]}",`
+ }
+ })
+ if (legend.endsWith(',')) {
+ legend = legend.substr(0, legend.length - 1)
+ }
+ if (r.metric.__name__) {
+ legend += '}'
+ }
+ if (!legend && elements) {
+ legend = elements[index].expression
+ }
+ const obj = {
+ type: 'item',
+ id: rindex + elements[index].name + JSON.stringify(r.metric),
+ name: this.handleLegendAlias(legend, elements[index].legend, r.metric) || legend,
+ values: r.values,
+ metric: r.metric || {},
+ elements: elements[index],
+ parent: elements[index].name
+ }
+ arr.push(obj)
+ })
+ }
+ })
+ this.meta2dLoading = false
+ this.$store.dispatch('dispatchSetQueryValues', arr)
+ resolve(arr)
+ })
+ })
+ },
+ handleLegendAlias (legend, aliasExpression, params) {
+ const self = this
+ const myParams = JSON.parse(JSON.stringify(params))
+ myParams.$labels = JSON.parse(JSON.stringify(params))
+ myParams.$value = myParams.value
+ if (/\{\{.+\}\}/.test(aliasExpression)) {
+ const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
+ const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+ if (!legend) {
+ return label
+ }
+ let value = null
+ if (params && self.$loadsh.get(myParams, label)) {
+ value = self.$loadsh.get(myParams, label)
+ }
+ if (label) {
+ const reg = new RegExp(label + '=".+?"', 'g')
+ if (reg.test(legend)) {
+ const ans = legend.match(reg)
+ let find = ''
+ ans.forEach(item => {
+ const index = legend.indexOf(item)
+ if (legend[index - 1] !== '_') {
+ find = item
+ }
+ })
+ value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+ }
+ }
+ return value || ''
+ })
+ return labelValue
+ } else {
+ if (!aliasExpression) {
+ return legend
+ // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
+ // return result
+ }
+ return aliasExpression
+ }
+ },
+ clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
+ return new Promise(resolve => { // 处理加载数据
+ if (!data.pens) {
+ data.pens = []
+ }
+ data.pens.forEach(pen => {
+ if (pen.isNz) {
+ if (pen.data.legend && pen.data.enable.valueMapping) {
+ const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
+ console.log(findItem)
+ if (findItem) {
+ pen.data.value = getMetricTypeValue(findItem.values, findItem.elements.statistic || 'last')
+ pen.data.showValue = chartDataFormat.getUnit(findItem.elements.unit).compute(pen.data.value, null, 2)
+ this.selectMapping(pen)
+ }
+ }
+ } else {
+ // 处理 le5le的数据
+ }
+ })
+ resolve(data)
+ })
+ },
+ selectMapping (pen) {
+ let mapping = ''
+ const show = pen.data.enable.valueMapping
+ const valueMapping = pen.data.valueMapping
+ const value = pen.data.value
+ const showValue = pen.data.showValue
+ if (show && valueMapping) {
+ valueMapping.forEach(item => {
+ if (item.type === 'value') {
+ if (value == item.value) {
+ mapping = item
+ }
+ }
+ if (item.type === 'range') {
+ if (value >= item.from && value < item.to) {
+ mapping = item
+ }
+ }
+ if (item.type === 'regx') {
+ const reg = new RegExp(item.regx)
+ if (reg.test(showValue)) {
+ mapping = item
+ } else if (reg.test(value)) {
+ mapping = item
+ }
+ }
+ })
+ if (mapping) {
+ this.drawPen(pen, mapping)
+ }
+ }
+ },
+ drawPen (pen, mapping) {
+ if (!pen.type) {
+ pen.background = mapping.color.bac
+ pen.color = mapping.color.border
+ pen.textColor = mapping.color.text
+ } else {
+ pen.animateColor = mapping.color.bac
+ pen.borderColor = mapping.color.border
+ pen.color = mapping.color.text
+ if (pen.lineAnimateType) {
+ pen.autoPlay = true
+ }
+ }
+ }
+ }
+}
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
new file mode 100644
index 000000000..a0bcb5e21
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -0,0 +1,197 @@
+
+
-
+
+
+
+ QR code
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{index+1}} / {{qrCodeNum.length}}
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
new file mode 100644
index 000000000..59ccc7d57
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
@@ -0,0 +1,521 @@
+
+
+
+
+
+ BackGround
+
+
+
+
+
+
+
+ Background
+
+
+
+
+
+
+ Image
+
+
+
+
+
+ Elements
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
new file mode 100644
index 000000000..d79d6dd0a
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -0,0 +1,1215 @@
+
+
+
+
+
+
+ Time Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$t('dashboard.panel.chartForm.legend')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{expressionsShow[index-1].error}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$t('dashboard.panel.chartForm.legendTip')}}
+
+
+
+
+
+ Statistics
+
+
+
+
+
+
+
+
+ Unit
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
new file mode 100644
index 000000000..2a3c3aefe
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -0,0 +1,200 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Position
+
+
+
+
+
+
+
+
+
+ X
+
+
+
+
+
+
+ Y
+
+
+
+
+
+
+ Width
+
+
+
+
+
+
+ Height
+
+
+
+
+
+
+ Lock aspect Ratio
+
+
+
+
+
+
+ Rotate
+
+
+
+
+ Border
+
+
+
+
+
+
+
+
+
+ Type
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Width
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+ Radius
+
+
+
+
+ BackGround
+
+
+
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+ opacity
+
+
+
+
+
+
+ Image
+
+
+
+
+
+
+
+ 是否保留长宽比
+
+
+
+
+ text
+
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+ fontSize
+
+
+
+
+
+
+ Align text
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+ Vertical text
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Line
+
+
+
+
+
+
+
+
+
+
+
+
+ style
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+ width
+
+
+
+
+
+
+ border color
+
+
+
+
+
+
+ borderWidth
+
+
+
+
+ Animate
+
+
+
+
+
+
+
+ Type
+
+
+
+
+
+
+
+
+
+
+ Speed (0 - 10)
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+ Reverse
+
+
+
+
+ Value mappings
+
+
+
+
+
+
+
+
+
+ Legend
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.column}}:
+
+
+ {{item.value}}
+
+
+ [{{item.from}}，{{item.to}})
+
+
+ {{item.regx}}
+
+
+
+
+
+ {{item.display || "T"}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$t('config.assetLabel.display')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$t('overall.addMapping')}}
+
+
+ Tooltip
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+ Type
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+ Legends
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Alias
+
+
+
+ {{$t('overall.addTooltipLegend')}}
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
new file mode 100644
index 000000000..c8e61e492
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
new file mode 100644
index 000000000..3d5b9716d
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -0,0 +1,90 @@
+
+ {{project && project.name}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
new file mode 100644
index 000000000..dad9dd14f
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
new file mode 100644
index 000000000..c63192562
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
@@ -0,0 +1,91 @@
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.group}}
+
+ ![]()
+
+ {{item.imageName}}
+
+
+
+
+ {{ $t('overall.uploadCustomPicture') }}
+
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue b/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
new file mode 100644
index 000000000..4b7810a51
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
@@ -0,0 +1,215 @@
+
+ {{params.title}}
+
+
+ {{params.content}}
+
+
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 97e79326a..bd6590d9d 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -100,7 +100,7 @@
-
-
-
diff --git a/nezha-fronted/src/components/common/project/topologyMixin.js b/nezha-fronted/src/components/common/project/topologyMixin.js
index 97d794b2f..f4b8194b5 100644
--- a/nezha-fronted/src/components/common/project/topologyMixin.js
+++ b/nezha-fronted/src/components/common/project/topologyMixin.js
@@ -170,17 +170,9 @@ export default {
this.getNodesArr()
},
topoScale (num) {
- this.moduleId = ''
- getTopology(this.topologyIndex).centerView()
- this.showNodeTools('')
- this.popDataShowUpdate('', false)
- if (!this.editTopologyFlag) {
- getTopology(this.topologyIndex)
- }
if (this.$refs.topTool) {
this.$refs.topTool.scaleNum = parseInt(num * 100)
}
- this.getNodesArr()
},
topoClick (pointAndPen) {
this.showNodeTools('')
diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
index 9a01eeb10..5df121323 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
@@ -161,7 +161,7 @@ export default {
{ required: true, message: '', trigger: 'blur' }
],
roleIds: [
- { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+ { required: true, message: this.$t('validate.required'), trigger: 'change' }
],
email: [
{ type: 'email', message: this.$t('validate.email') }
@@ -175,7 +175,7 @@ export default {
{ validator: validatePin, trigger: 'blur' }
],
roleIds: [
- { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+ { required: true, message: this.$t('validate.required'), trigger: 'change' }
],
email: [
{ type: 'email', message: this.$t('validate.email') }
diff --git a/nezha-fronted/src/components/common/searchBox/searchBox.vue b/nezha-fronted/src/components/common/searchBox/searchBox.vue
index 08525b007..374550ff2 100644
--- a/nezha-fronted/src/components/common/searchBox/searchBox.vue
+++ b/nezha-fronted/src/components/common/searchBox/searchBox.vue
@@ -373,7 +373,7 @@ export default {
}
},
changeSearchStr () {
- console.log(this.searchStr, 'changeSearchStr')
+ // console.log(this.searchStr, 'changeSearchStr')
const arr = this.searchStr.split(':')
if (arr.length > 1) {
this.setValueList(arr[1])
@@ -475,7 +475,7 @@ export default {
const findItem = this.selectArr.find(item => item.key === this.editTagObj.key)
if (findItem) {
this.selectArr.splice(this.editTagIndex, 1)
- console.log(findItem, this.editDialogObj.value)
+ // console.log(findItem, this.editDialogObj.value)
findItem.value = findItem.value.concat(this.editDialogObj.value)
findItem.value = findItem.value.filter(function (item, index) {
return findItem.value.indexOf(item) === index // 因为indexOf 只能查找到第一个
@@ -487,9 +487,9 @@ export default {
},
querySearch (queryString, cb) {
const restaurants = this.oldSearchList.map(item => { return { value: item.name } })
- console.log(restaurants)
+ // console.log(restaurants)
const results = queryString ? restaurants.filter(name => name.value.indexOf(queryString) !== -1) : restaurants
- console.log(results)
+ // console.log(results)
cb(results)
},
handleSelect () {
@@ -508,7 +508,7 @@ export default {
immediate: true,
deep: true,
handler (n) {
- console.log(n)
+ // console.log(n)
this.searchList = n.searchLabelList || []
this.oldSearchList = n.searchLabelList || []
}
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index bb4e17445..c052812d0 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -86,6 +86,7 @@
+
+
+
+
+
+
+
+
+
+ -
+
+
+ +
+
+
+
+
+ {{scaleNum}}%
+ 缩放级别
+ 50
+ 100
+ 200
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+