NEZ-3157 feat：时间选择器 支持选择今天 （00:00:00 - now）
This commit is contained in:
zhangyu
@@ -267,6 +267,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.date-range-item {
|
||||
height: 353px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
ul {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
@@ -312,9 +316,11 @@
|
||||
@media (max-height: 900px) {
|
||||
.date-range-panel {
|
||||
.date-range-panel-content-right {
|
||||
.date-range-item {
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.date-range-panel-content-left {
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -203,6 +203,7 @@ export default {
|
||||
// TODO assetInfo、endpointInfo、echarts等进行不同的处理
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
// todo 刷新 需要判断是否是相对时间
|
||||
if (isRefresh) { // 刷新则视情况更新时间范围
|
||||
const now = new Date(bus.computeTimezone(new Date().getTime()))
|
||||
const origin = new Date(bus.timeFormate(bus.formateTimeToTime(this.timeRange[1]), 'YYYY-MM-DD HH:mm:ss'))
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -621,7 +621,7 @@ export default {
|
||||
if (this.$refs.pickTime) {
|
||||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||||
this.setSearchTime('searchTime', this.storeDispatchPanelTime)
|
||||
this.filter.dashboardId = this.showPanel.id
|
||||
this.getData(this.filter)
|
||||
this.$store.dispatch('dispatchPanelTime', {
|
||||
@@ -635,27 +635,7 @@ export default {
|
||||
}
|
||||
},
|
||||
/* 时间条件查询--end */
|
||||
setSearchTime (type, val) { // 设置searchTime
|
||||
if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'm')
|
||||
} else if (type === 'hour') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'h')
|
||||
} else if (type === 'date') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'd')
|
||||
}
|
||||
this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
|
||||
storeDispatchPanelTime () { // 设置searchTime
|
||||
this.$store.dispatch('dispatchPanelTime', {
|
||||
time: this.searchTime,
|
||||
nowTimeType: this.nowTimeType
|
||||
@@ -908,7 +888,7 @@ export default {
|
||||
this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
|
||||
// 刷新时间范围
|
||||
this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('searchTime', this.storeDispatchPanelTime)
|
||||
this.$store.dispatch('dispatchPanelTime', {
|
||||
time: this.searchTime,
|
||||
nowTimeType: this.nowTimeType
|
||||
@@ -927,7 +907,7 @@ export default {
|
||||
const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
|
||||
this.searchTime = this.timePickerRange.time
|
||||
this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('searchTime', this.storeDispatchPanelTime)
|
||||
})
|
||||
},
|
||||
// 设置默认刷新
|
||||
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
},
|
||||
getData () {
|
||||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||||
this.setSearchTime('filterTime')
|
||||
this.$store.dispatch('dispatchTimePickerRange', {
|
||||
time: this.searchTime,
|
||||
nowTimeType: this.nowTimeType
|
||||
@@ -144,31 +144,9 @@ export default {
|
||||
const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
|
||||
this.filterTime = this.timePickerRange.time
|
||||
this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.filterTime)
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('filterTime')
|
||||
})
|
||||
},
|
||||
setSearchTime (type, val) { // 设置searchTime
|
||||
if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.filterTime, 0, startTime)
|
||||
this.$set(this.filterTime, 1, endTime)
|
||||
this.$set(this.filterTime, 2, val + 'm')
|
||||
} else if (type === 'hour') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.filterTime, 0, startTime)
|
||||
this.$set(this.filterTime, 1, endTime)
|
||||
this.$set(this.filterTime, 2, val + 'h')
|
||||
} else if (type === 'date') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.filterTime, 0, startTime)
|
||||
this.$set(this.filterTime, 1, endTime)
|
||||
this.$set(this.filterTime, 2, val + 'd')
|
||||
}
|
||||
this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
|
||||
},
|
||||
queryLogData (limit) { // log的chart和table是一个请求
|
||||
this.loading = true
|
||||
if (limit) {
|
||||
|
||||
@@ -160,7 +160,22 @@ export default {
|
||||
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
const type = nowTimeType.type
|
||||
const val = nowTimeType.value
|
||||
if (type === 'minute') {
|
||||
if (type === 'relative') {
|
||||
const now = new Date(bus.computeTimezone(new Date().getTime()))
|
||||
let start = bus.timeFormate(now, 'YYYY-MM-DD')
|
||||
let end = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
|
||||
let unit = ''
|
||||
if (nowTimeType.id === 13) { // today
|
||||
unit = 't'
|
||||
start += '00:00:00'
|
||||
end += ''
|
||||
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
|
||||
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
|
||||
}
|
||||
this.$set(this[key], 0, start)
|
||||
this.$set(this[key], 1, end)
|
||||
this.$set(this[key], 2, val + unit)
|
||||
} else if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this[key], 0, startTime)
|
||||
@@ -179,6 +194,7 @@ export default {
|
||||
this.$set(this[key], 1, endTime)
|
||||
this.$set(this[key], 2, val + 'd')
|
||||
}
|
||||
console.log(this[key], 'mainMixin')
|
||||
this.$refs.pickTime.$refs.timePicker.searchTime = this[key]
|
||||
}
|
||||
if (cb) {
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div class="menus">
|
||||
<div>
|
||||
<a :class="{disabled:!props.pen && !props.pens}" @click="onTop()">{{$t('project.topology.top')}}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a :class="{disabled:!props.pen && !props.pens}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div>
|
||||
<a :class="{disabled:!props.pen && !props.pens && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div>
|
||||
<a @click="canvascut()" class="flex">
|
||||
<span class="full">{{$t('project.topology.cut')}}</span>
|
||||
<span class="ml50">Ctrl + X</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="canvascopy()" class="flex">
|
||||
<span class="full">{{$t('overall.duplicate')}}</span>
|
||||
<span class="ml50">Ctrl + C</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="canvaspaste()" class="flex">
|
||||
<span class="full">{{$t('project.topology.paste')}}</span>
|
||||
<span class="ml50">Ctrl + V</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { getTopology } from '../../js/common'
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
index: {
|
||||
require: true
|
||||
},
|
||||
props: {
|
||||
type: Object,
|
||||
require: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTop () {
|
||||
if (this.props.pens) {
|
||||
for (const item of this.props.pens) {
|
||||
getTopology(this.index).top(item)
|
||||
}
|
||||
} else if (this.props.pen) {
|
||||
getTopology(this.index).top(this.props.pen)
|
||||
}
|
||||
|
||||
getTopology(this.index).render()
|
||||
},
|
||||
|
||||
onBottom () {
|
||||
if (this.props.pens) {
|
||||
for (const item of this.props.pens) {
|
||||
getTopology(this.index).bottom(item)
|
||||
}
|
||||
} else if (this.props.pen) {
|
||||
getTopology(this.index).bottom(this.props.pen)
|
||||
}
|
||||
|
||||
getTopology(this.index).render()
|
||||
},
|
||||
|
||||
onCombine (stand) {
|
||||
if (!this.props.pens) {
|
||||
return
|
||||
}
|
||||
getTopology(this.index).combine(this.props.pens, stand)
|
||||
getTopology(this.index).render()
|
||||
},
|
||||
|
||||
onUncombine () {
|
||||
if (!this.props.pen) {
|
||||
return
|
||||
}
|
||||
getTopology(this.index).uncombine(this.props.pen)
|
||||
getTopology(this.index).render()
|
||||
},
|
||||
|
||||
onLock () {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
this.props.locked = !this.props.locked
|
||||
if (this.props.pen) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
this.props.pen.locked = this.props.locked
|
||||
}
|
||||
if (this.props.pens) {
|
||||
for (const item of this.props.pens) {
|
||||
item.locked = this.props.locked
|
||||
}
|
||||
}
|
||||
if (this.props.lines) {
|
||||
for (const item of this.props.lines) {
|
||||
item.locked = this.props.locked
|
||||
}
|
||||
}
|
||||
getTopology(this.index).render(true)
|
||||
},
|
||||
|
||||
onDel () {
|
||||
getTopology(this.index).delete(this.props.pens || [this.props.pen])
|
||||
},
|
||||
canvascut () {
|
||||
getTopology(this.index).cut(this.props.pens || [this.props.pen])
|
||||
},
|
||||
canvascopy () {
|
||||
getTopology(this.index).copy(this.props.pens || [this.props.pen])
|
||||
},
|
||||
canvaspaste () {
|
||||
getTopology(this.index).paste()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,941 +0,0 @@
|
||||
import { s16, s8 } from '@topology/core'
|
||||
export let canvas
|
||||
|
||||
export const Tools = [
|
||||
{
|
||||
group: 'General',
|
||||
children: [
|
||||
// {
|
||||
// name: 'rectangle',
|
||||
// icon: 'icon-cube',
|
||||
// data: {
|
||||
// rect: {
|
||||
// width: 100,
|
||||
// height: 100
|
||||
// },
|
||||
// is3D: true,
|
||||
// z: 20,
|
||||
// zRotate: 15,
|
||||
// name: 'myCube',
|
||||
// iconFamily: 'topology',
|
||||
// iconColor: '#777',
|
||||
// iconSize: 30
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'rectangle',
|
||||
icon: 'icon-rect',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'rect',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
name: 'rectangle'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'rectangle',
|
||||
icon: 'icon-rectangle',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'rectangle',
|
||||
type: 0,
|
||||
width: 200,
|
||||
height: 50,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
borderRadius: 0.1,
|
||||
name: 'rectangle'
|
||||
// icon: '\ue680',
|
||||
// iconFamily: 'nz-icon',
|
||||
// iconColor: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'circle',
|
||||
icon: 'icon-circle',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'circle',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
name: 'circle',
|
||||
textMaxLine: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'triangle',
|
||||
icon: 'icon-triangle',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'triangle',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
name: 'triangle'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'diamond',
|
||||
icon: 'icon-diamond',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'diamond',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
name: 'diamond'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pentagon',
|
||||
icon: 'icon-pentagon',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'pentagon',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
name: 'pentagon'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'hexagon',
|
||||
icon: 'icon-hexagon',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'hexagon',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
name: 'hexagon'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pentagram',
|
||||
icon: 'icon-pentagram',
|
||||
type: 0,
|
||||
data: {
|
||||
text: 'pentagram',
|
||||
type: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
name: 'pentagram'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export const imageTemp = {
|
||||
name: 'rectangleImg',
|
||||
icon: 'icon-image',
|
||||
data: {
|
||||
type: 0,
|
||||
x: 922,
|
||||
y: 406,
|
||||
width: 100,
|
||||
height: 100,
|
||||
imageRatio: false,
|
||||
lineWidth: 0,
|
||||
rotate: 0,
|
||||
offsetRotate: 0,
|
||||
globalAlpha: 1,
|
||||
lineDash: [],
|
||||
color: '#000000',
|
||||
background: '#ffffff00',
|
||||
animatePos: 0,
|
||||
name: 'rectangleImg',
|
||||
lineDashOffset: 0,
|
||||
text: '',
|
||||
textOffsetX: 0,
|
||||
textOffsetY: 0,
|
||||
visible: true,
|
||||
zRotate: 0,
|
||||
animateDuration: 0,
|
||||
animateFrames: [],
|
||||
animateFrame: 0,
|
||||
borderRadius: 0,
|
||||
icon: '',
|
||||
image: '',
|
||||
imageAlign: 'center',
|
||||
bkType: 0,
|
||||
gradientAngle: 0,
|
||||
gradientRadius: 0.01,
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
paddingLeftNum: 5,
|
||||
paddingRightNum: 5,
|
||||
paddingTopNum: 5,
|
||||
paddingBottomNum: 5,
|
||||
fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
}
|
||||
}
|
||||
export const imageTemp2 = {
|
||||
name: 'rectangleImg2',
|
||||
icon: 'icon-image',
|
||||
data: {
|
||||
type: 0,
|
||||
x: 922,
|
||||
y: 406,
|
||||
width: 100,
|
||||
height: 100,
|
||||
imageRatio: false,
|
||||
lineWidth: 0,
|
||||
rotate: 0,
|
||||
offsetRotate: 0,
|
||||
globalAlpha: 1,
|
||||
lineDash: [],
|
||||
color: '#000000',
|
||||
background: '#ffffff00',
|
||||
animatePos: 0,
|
||||
name: 'rectangleImg2',
|
||||
lineDashOffset: 0,
|
||||
text: '',
|
||||
textOffsetX: 0,
|
||||
textOffsetY: 0,
|
||||
visible: true,
|
||||
zRotate: 0,
|
||||
animateDuration: 0,
|
||||
animateFrames: [],
|
||||
animateFrame: 0,
|
||||
borderRadius: 0,
|
||||
icon: '',
|
||||
image: '',
|
||||
imageAlign: 'center',
|
||||
bkType: 0,
|
||||
gradientAngle: 0,
|
||||
gradientRadius: 0.01,
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
paddingLeftNum: 5,
|
||||
paddingRightNum: 5,
|
||||
paddingTopNum: 5,
|
||||
paddingBottomNum: 5,
|
||||
fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
}
|
||||
}
|
||||
export function rectangleImg (ctx, pen) {
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.rect(pen.x, pen.y, pen.width, pen.height)
|
||||
if (pen.data && !pen.data.animateNeedLine) {
|
||||
if (pen.data && pen.data.lineWidth <= 0) {
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)'
|
||||
}
|
||||
}
|
||||
// 必须判空再填充
|
||||
(pen.background || pen.bkType) && ctx.fill()
|
||||
pen.calculative.worldIconRect = {
|
||||
height: pen.height - 10 - 20,
|
||||
rotate: 0,
|
||||
width: pen.width - 10,
|
||||
x: pen.x + 5,
|
||||
y: pen.y + 5
|
||||
}
|
||||
pen.calculative.worldTextRect = {
|
||||
height: 20,
|
||||
width: pen.width - 10,
|
||||
x: pen.x + 5,
|
||||
y: pen.y + pen.height - 5 - 20
|
||||
}
|
||||
// pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
|
||||
// pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
ctx.stroke()
|
||||
}
|
||||
export function rectangleImgAnchors (pen) {
|
||||
const anchors = []
|
||||
anchors.push({
|
||||
id: '0',
|
||||
penId: pen.id,
|
||||
x: pen.x,
|
||||
y: pen.y + pen.height / 2
|
||||
})
|
||||
anchors.push({
|
||||
id: '1',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width / 2,
|
||||
y: pen.y
|
||||
})
|
||||
anchors.push({
|
||||
id: '2',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width,
|
||||
y: pen.y + pen.height / 2
|
||||
})
|
||||
anchors.push({
|
||||
id: '3',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width / 2,
|
||||
y: pen.y + pen.height
|
||||
})
|
||||
anchors.push({
|
||||
id: '4',
|
||||
penId: pen.id,
|
||||
x: pen.x,
|
||||
y: pen.y + pen.height / 8
|
||||
})
|
||||
return anchors
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
}
|
||||
export function rectangleImg2 (ctx, pen) {
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.rect(pen.x, pen.y, pen.width, pen.height)
|
||||
if (pen.data && !pen.data.animateNeedLine) {
|
||||
if (pen.data && pen.data.lineWidth <= 0) {
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)'
|
||||
}
|
||||
}
|
||||
// 必须判空再填充
|
||||
(pen.background || pen.bkType) && ctx.fill()
|
||||
pen.calculative.worldIconRect = {
|
||||
height: pen.height - 10,
|
||||
rotate: 0,
|
||||
width: pen.width - 10,
|
||||
x: pen.x + 5,
|
||||
y: pen.y + 5
|
||||
}
|
||||
pen.calculative.worldTextRect = {
|
||||
height: 20,
|
||||
width: pen.width - 10,
|
||||
x: pen.x + 5,
|
||||
y: pen.y + pen.height
|
||||
}
|
||||
// pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
|
||||
// pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
|
||||
ctx.stroke()
|
||||
}
|
||||
export function rectangleImgAnchors2 (pen) {
|
||||
const anchors = []
|
||||
anchors.push({
|
||||
id: '0',
|
||||
penId: pen.id,
|
||||
x: pen.x,
|
||||
y: pen.y + pen.height / 2
|
||||
})
|
||||
anchors.push({
|
||||
id: '1',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width / 2,
|
||||
y: pen.y
|
||||
})
|
||||
anchors.push({
|
||||
id: '2',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width,
|
||||
y: pen.y + pen.height / 2
|
||||
})
|
||||
anchors.push({
|
||||
id: '3',
|
||||
penId: pen.id,
|
||||
x: pen.x + pen.width / 2,
|
||||
y: pen.y + pen.height
|
||||
})
|
||||
anchors.push({
|
||||
id: '4',
|
||||
penId: pen.id,
|
||||
x: pen.x,
|
||||
y: pen.y + pen.height / 8
|
||||
})
|
||||
return anchors
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
}
|
||||
export function disposeTopoOldData (pen, allPen) { // 处理旧数据
|
||||
let obj = {}
|
||||
if (pen.type === 0) {
|
||||
obj = {
|
||||
id: pen.id,
|
||||
data: pen.data,
|
||||
keepDecimal: 2,
|
||||
scale: 1,
|
||||
valueMapping: pen.valueMapping,
|
||||
tags: [
|
||||
|
||||
],
|
||||
type: 0,
|
||||
name: pen.name,
|
||||
icon: pen.icon,
|
||||
iconColor: pen.iconColor,
|
||||
iconFamily: pen.iconFamily,
|
||||
iconName: pen.iconName,
|
||||
iconSize: pen.iconSize ? pen.iconSize : 12,
|
||||
x: pen.rect.x,
|
||||
y: pen.rect.y,
|
||||
ex: pen.rect.ex,
|
||||
ey: pen.rect.ey,
|
||||
width: pen.rect.width,
|
||||
height: pen.rect.height,
|
||||
paddingLeft: pen.paddingLeft,
|
||||
paddingRight: pen.paddingRight,
|
||||
paddingTop: pen.paddingTop,
|
||||
paddingBottom: pen.paddingBottom,
|
||||
color: pen.strokeStyle,
|
||||
lineWidth: pen.lineWidth,
|
||||
borderWidth: null,
|
||||
borderColor: pen.strokeStyle,
|
||||
rotate: pen.rotate,
|
||||
visible: true,
|
||||
background: pen.fillStyle,
|
||||
lineHeight: pen.lineHeight,
|
||||
fontSize: pen.fontSize,
|
||||
fontFamily: pen.fontFamily,
|
||||
fontStyle: pen.fontStyle,
|
||||
fontWeight: pen.fontWeight,
|
||||
text: pen.text,
|
||||
textColor: pen.fontColor,
|
||||
textAlign: pen.textAlign,
|
||||
textBaseline: pen.textBaseline,
|
||||
textBackground: pen.textBackground,
|
||||
lineAnimateType: pen.lineAnimateType,
|
||||
textLeft: pen.textOffsetX,
|
||||
textTop: pen.textOffsetY,
|
||||
animateType: '',
|
||||
frames: [
|
||||
|
||||
],
|
||||
autoPlay: pen.autoPlay,
|
||||
globalAlpha: pen.globalAlpha,
|
||||
bkType: pen.bkType,
|
||||
gradientAngle: pen.gradientAngle,
|
||||
gradientRadius: pen.gradientRadius,
|
||||
borderRadius: pen.borderRadius,
|
||||
events: [
|
||||
|
||||
],
|
||||
anchors: [
|
||||
{
|
||||
id: '0',
|
||||
penId: pen.id,
|
||||
x: 0,
|
||||
y: 0.5
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
penId: pen.id,
|
||||
x: 0.5,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
penId: pen.id,
|
||||
x: 1,
|
||||
y: 0.5
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
penId: pen.id,
|
||||
x: 0.5,
|
||||
y: 1
|
||||
}
|
||||
],
|
||||
// connectedLines: [
|
||||
// {
|
||||
// anchor: '1',
|
||||
// lineAnchor: '9a5fccf',
|
||||
// lineId: '3e3a3d'
|
||||
// }
|
||||
// ]
|
||||
connectedLines: pen.connectedLines || [],
|
||||
image: pen.image
|
||||
}
|
||||
} else {
|
||||
const width = pen.from.x - pen.to.x
|
||||
const height = pen.from.y - pen.to.y
|
||||
obj = {
|
||||
id: pen.id,
|
||||
keepDecimal: 2,
|
||||
tags: [
|
||||
|
||||
],
|
||||
name: 'line',
|
||||
scale: 1,
|
||||
lineName: pen.name,
|
||||
type: pen.type,
|
||||
autoPolyline: true,
|
||||
fromArrow: pen.fromArrow,
|
||||
toArrow: pen.toArrow,
|
||||
x: width > 0 ? pen.to.x : pen.from.x,
|
||||
y: height > 0 ? pen.to.y : pen.from.y,
|
||||
width: Math.abs(pen.to.x - pen.from.x),
|
||||
height: Math.abs(pen.to.y - pen.from.y),
|
||||
data: pen.data,
|
||||
valueMapping: pen.valueMapping,
|
||||
anchors: [
|
||||
{
|
||||
anchorId: pen.from.anchorIndex + '',
|
||||
id: pen.id + '-0',
|
||||
penId: pen.id,
|
||||
connectTo: pen.from.id,
|
||||
prevNextType: undefined,
|
||||
x: 0,
|
||||
y: 0,
|
||||
prev: {
|
||||
penId: pen.id,
|
||||
connectTo: pen.from.id,
|
||||
x: -0.2,
|
||||
y: 0
|
||||
},
|
||||
next: {
|
||||
penId: pen.id,
|
||||
connectTo: pen.from.id,
|
||||
x: 0.2,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
anchorId: pen.to.anchorIndex + '',
|
||||
id: pen.id + '-1',
|
||||
penId: pen.id,
|
||||
connectTo: pen.to.id,
|
||||
prevNextType: undefined,
|
||||
hidden: undefined,
|
||||
x: 1,
|
||||
y: 1,
|
||||
prev: {
|
||||
penId: pen.id,
|
||||
connectTo: pen.to.id,
|
||||
x: 0.8,
|
||||
y: 1
|
||||
},
|
||||
next: {
|
||||
penId: pen.id,
|
||||
connectTo: pen.to.id,
|
||||
x: 1.2,
|
||||
y: 1
|
||||
}
|
||||
}
|
||||
],
|
||||
color: pen.strokeStyle,
|
||||
lineWidth: pen.lineWidth,
|
||||
lineDashOffset: pen.lineDashOffset,
|
||||
lineDash: pen.dash ? (pen.dash == 1 ? [5, 5] : ((pen.dash == 2 ? [10, 10] : [10, 10, 2, 10]))) : [],
|
||||
borderColor: pen.borderColor,
|
||||
borderWidth: pen.borderWidth,
|
||||
rotate: pen.rotate,
|
||||
visible: true,
|
||||
background: '',
|
||||
lineHeight: pen.lineHeight,
|
||||
fontSize: pen.fontSize,
|
||||
fontFamily: pen.fontFamily,
|
||||
fontStyle: pen.fontStyle,
|
||||
fontWeight: pen.fontWeight,
|
||||
textColor: '',
|
||||
textAlign: pen.textAlign,
|
||||
textBaseline: pen.textBaseline,
|
||||
textBackground: pen.textBackground,
|
||||
textLeft: pen.textOffsetX,
|
||||
textTop: pen.textOffsetY,
|
||||
animateSpan: pen.animateSpan,
|
||||
animateColor: pen.animateColor,
|
||||
lineAnimateType: 0,
|
||||
animateDotSize: pen.animateDotSize,
|
||||
frames: [
|
||||
|
||||
],
|
||||
autoPlay: false,
|
||||
globalAlpha: 1,
|
||||
events: [
|
||||
|
||||
]
|
||||
}
|
||||
if (width > 0 && height > 0) {
|
||||
obj.anchors[0].x = 1
|
||||
obj.anchors[0].y = 1
|
||||
obj.anchors[1].x = 0
|
||||
obj.anchors[1].y = 0
|
||||
} else if (width > 0 && height < 0) {
|
||||
obj.anchors[0].x = 1
|
||||
obj.anchors[0].y = 0
|
||||
obj.anchors[1].x = 0
|
||||
obj.anchors[1].y = 1
|
||||
} else if (width < 0 && height > 0) {
|
||||
obj.anchors[0].x = 0
|
||||
obj.anchors[0].y = 1
|
||||
obj.anchors[1].x = 1
|
||||
obj.anchors[1].y = 0
|
||||
} else if (width < 0 && height < 0) {
|
||||
obj.anchors[0].x = 0
|
||||
obj.anchors[0].y = 0
|
||||
obj.anchors[1].x = 1
|
||||
obj.anchors[1].y = 1
|
||||
}
|
||||
if (pen.name === 'polyline') {
|
||||
obj.anchors.splice(1, 0, {
|
||||
id: s8(),
|
||||
penId: pen.id,
|
||||
x: 0.1,
|
||||
y: 0
|
||||
}, {
|
||||
id: s8(),
|
||||
penId: pen.id,
|
||||
x: 0.5,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: s8(),
|
||||
penId: pen.id,
|
||||
x: 0.5,
|
||||
y: 1
|
||||
},
|
||||
{
|
||||
id: s8(),
|
||||
penId: pen.id,
|
||||
x: 0.9,
|
||||
y: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
pen.data.valueMapping.forEach(item => {
|
||||
if (item.animateType == 1) {
|
||||
item.animateType = 'flow'
|
||||
} else if (item.animateType == 'comet') {
|
||||
item.animateType = 'dot'
|
||||
}
|
||||
})
|
||||
}
|
||||
return obj
|
||||
}
|
||||
/* 自定义图片组件 */
|
||||
// export function myShape (ctx, node) { // 自定义图片组件
|
||||
// ctx.beginPath()
|
||||
//
|
||||
// ctx.rect(pen.x, pen.y, pen.width, pen.height)
|
||||
// if (pen.data && pen.data.lineWidth <= 0) {
|
||||
// ctx.strokeStyle = 'rgba(0,0,0,0)'
|
||||
// }
|
||||
// // 必须判空再填充
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
// ctx.stroke()
|
||||
// }
|
||||
// export function myAnchors (node) {
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
// }
|
||||
// export function myIconRect (node) {
|
||||
// pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
|
||||
// pen.fullIconRect = pen.rect
|
||||
// }
|
||||
// export function myTextRect (node) {
|
||||
// pen.textRect = new Rect(
|
||||
// pen.x + pen.paddingLeft,
|
||||
// pen.y + pen.height - 20 - pen.paddingBottom,
|
||||
// pen.width - (pen.paddingLeft + pen.paddingRight),
|
||||
// 20
|
||||
// )
|
||||
// pen.fullTextRect = pen.rect
|
||||
// }
|
||||
// export function myIconRect2 (node) {
|
||||
// pen.iconRect = pen.rect
|
||||
// pen.fullIconRect = pen.rect
|
||||
// }
|
||||
// export function myTextRect2 (node) {
|
||||
// pen.textRect = new Rect(
|
||||
// pen.x + pen.paddingLeft,
|
||||
// pen.y + pen.height + 10,
|
||||
// pen.width - (pen.paddingLeft + pen.paddingRight),
|
||||
// 20
|
||||
// )
|
||||
// pen.fullTextRect = pen.rect
|
||||
// }
|
||||
// /* 自定义图片组件 */
|
||||
//
|
||||
// /* 自定义立方体 */
|
||||
// export function myCubec (ctx, node) {
|
||||
// // 立方体
|
||||
// // ctx.rect(pen.x,pen.y,pen.width,pen.height);
|
||||
// const x = pen.x + 10; const y = pen.y + 10; const w = pen.width - 20; const h = pen.height - 20
|
||||
//
|
||||
// // LINE MODE
|
||||
// ctx.lineJoin = 'round'
|
||||
//
|
||||
// // center face
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(x, y + h / 3)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
// ctx.lineTo(x, y + h)
|
||||
// ctx.closePath()
|
||||
// ctx.fillStyle = pen.fillStyle
|
||||
// ctx.strokeStyle = pen.strokeStyle
|
||||
// ctx.stroke();
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
//
|
||||
// // top face
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(x, y + h / 3)
|
||||
// ctx.lineTo(x + w / 3, y)
|
||||
// ctx.lineTo(x + w, y)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h / 3)
|
||||
// ctx.closePath()
|
||||
// ctx.fillStyle = pen.fillStyle
|
||||
// ctx.strokeStyle = pen.strokeStyle
|
||||
// ctx.stroke();
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
//
|
||||
// // right face
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(x + w * 2 / 3, y + h / 3)
|
||||
// ctx.lineTo(x + w, y)
|
||||
// ctx.lineTo(x + w, y + h * 2 / 3)
|
||||
// ctx.lineTo(x + w * 2 / 3, y + h)
|
||||
// ctx.closePath()
|
||||
// ctx.fillStyle = pen.fillStyle
|
||||
// ctx.strokeStyle = pen.strokeStyle
|
||||
// ctx.stroke();
|
||||
// (pen.fillStyle || pen.bkType) && ctx.fill()
|
||||
//
|
||||
// // 必须判空再填充
|
||||
// }
|
||||
// export function myCubeAnchors (node) { // 立方体锚点
|
||||
// pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
|
||||
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
|
||||
// }
|
||||
// /* 自定义立方体 */
|
||||
//
|
||||
export function onChangeAnimate (pen, animateType, fillStyle, strokeStyle) {
|
||||
pen.animateType = animateType
|
||||
if (pen.animateType === 'custom') {
|
||||
return
|
||||
}
|
||||
|
||||
pen.animateFrames = []
|
||||
// const state = Node.cloneState(pen)
|
||||
const state = {}
|
||||
switch (animateType) {
|
||||
case 'upDown':
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 200,
|
||||
y: 20
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
y: -20
|
||||
}
|
||||
]
|
||||
break
|
||||
case 'leftRight':
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 200,
|
||||
x: 20
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
x: 0
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
x: -20
|
||||
}
|
||||
]
|
||||
break
|
||||
case 'heart':
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 300,
|
||||
scale: 1.2
|
||||
},
|
||||
// {
|
||||
// duration: 300,
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// width: 0,
|
||||
// height: 0
|
||||
// },
|
||||
{
|
||||
duration: 300,
|
||||
scale: 0.8
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
scale: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
case 'success':
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 200,
|
||||
color: strokeStyle || '#237804'
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
color: strokeStyle || '#237804',
|
||||
backGround: fillStyle || '#389e0d22'
|
||||
}
|
||||
]
|
||||
break
|
||||
case 'warning':
|
||||
pen.data.animateNeedLine = true
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 500,
|
||||
color: strokeStyle || '#fa8c16',
|
||||
background: fillStyle || '#fa8c16',
|
||||
lineWidth: 5,
|
||||
lineDash: [5, 5]
|
||||
},
|
||||
{
|
||||
duration: 500,
|
||||
color: strokeStyle || '#fa8c16',
|
||||
background: '#ffffff',
|
||||
lineWidth: 1,
|
||||
lineDash: []
|
||||
}
|
||||
]
|
||||
break
|
||||
case 'error':
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = fillStyle || '#cf132222'
|
||||
state.lineWidth = 5
|
||||
state.dash = 2
|
||||
pen.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = '#ffffff'
|
||||
state.dash = 0
|
||||
state.lineWidth = 1
|
||||
pen.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
state.strokeStyle = strokeStyle || '#cf1322'
|
||||
state.fillStyle = fillStyle || '#cf132222'
|
||||
state.dash = 2
|
||||
state.lineWidth = 5
|
||||
pen.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
})
|
||||
break
|
||||
case 'show':
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 100,
|
||||
rotate: -5
|
||||
},
|
||||
{
|
||||
duration: 100,
|
||||
rotate: 0
|
||||
},
|
||||
{
|
||||
duration: 100,
|
||||
rotate: 5
|
||||
},
|
||||
{
|
||||
duration: 100,
|
||||
rotate: 0
|
||||
}
|
||||
]
|
||||
break
|
||||
case 'fade':
|
||||
state.globalAlpha = 0.3
|
||||
pen.frames = [
|
||||
{
|
||||
duration: 500,
|
||||
globalAlpha: 0.3
|
||||
},
|
||||
{
|
||||
duration: 500,
|
||||
globalAlpha: 1
|
||||
}
|
||||
]
|
||||
break
|
||||
}
|
||||
pen.animatePlay = true
|
||||
}
|
||||
export function onChangeAnimateLine (line, type, isOldData) {
|
||||
// { id: 'flow', name: this.$t('project.topology.flow') },
|
||||
// { id: 'beads', name: this.$t('project.topology.beads') },
|
||||
// { id: 'dot', name: this.$t('project.topology.dot') },
|
||||
let animateType = type
|
||||
if (type === 'dot') {
|
||||
animateType = 2
|
||||
}
|
||||
if (type === 'beads') {
|
||||
animateType = 1
|
||||
}
|
||||
if (type === 'custom') {
|
||||
delete line.lineAnimateType
|
||||
return
|
||||
}
|
||||
line.lineAnimateType = animateType
|
||||
line.animatePlay = true
|
||||
}
|
||||
// export function changeImage (dataImg, callback) {
|
||||
// // const base64Img = document.createElement('base64Img')
|
||||
// const canvas = document.createElement('canvas')
|
||||
// const context = canvas.getContext('2d')
|
||||
// // 创建新图片
|
||||
// const img = new Image()
|
||||
// img.src = dataImg
|
||||
// img.addEventListener(
|
||||
// 'load',
|
||||
// function () {
|
||||
// // 绘制图片到canvas上
|
||||
// canvas.width = img.width
|
||||
// canvas.height = img.height
|
||||
// context.drawImage(img, 0, 0)
|
||||
//
|
||||
// // 将canvas的透明背景设置成白色
|
||||
// const imageData = context.getImageData(
|
||||
// 0,
|
||||
// 0,
|
||||
// canvas.width,
|
||||
// canvas.height
|
||||
// )
|
||||
// for (let i = 0; i < imageData.data.length; i += 4) {
|
||||
// // rgb大于250的透明度y均设置成0
|
||||
// if (
|
||||
// imageData.data[i] > 0 &&
|
||||
// imageData.data[i + 1] > 0 &&
|
||||
// imageData.data[i + 2] > 0
|
||||
// ) {
|
||||
// imageData.data[i + 3] = 200
|
||||
// }
|
||||
// }
|
||||
// context.putImageData(imageData, 0, 0)
|
||||
// const baseImg = canvas.toDataURL('image/png')// 返回base64
|
||||
// if (typeof callback !== 'undefined') {
|
||||
// if (callback) callback(baseImg)
|
||||
// }
|
||||
// img.remove()
|
||||
// },
|
||||
// false
|
||||
// )
|
||||
// }
|
||||
File diff suppressed because one or more lines are too long
@@ -1,446 +0,0 @@
|
||||
<template>
|
||||
<div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressAllArr&&chartData.expressAllArr.length">
|
||||
<div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressAllArr&&chartData.expressAllArr.length)">
|
||||
<line-chart-block v-show="isChart || chartData.type !== 'table'"
|
||||
:key="'inner' + chartData.id"
|
||||
:class="isPanel? 'topology-tool-tip line-chart' : 'line-chart'"
|
||||
id="listContainer"
|
||||
:from="'topology'"
|
||||
:ref="chartData.type !== 'table'?'editChart' + chartData.type:'editChart'"
|
||||
:temp-dom="tempDom"
|
||||
:panel-id="-1"
|
||||
:is-lock="true"
|
||||
:chart-index="-2"
|
||||
:fromTopo="true"
|
||||
:chartTitleShow="false"
|
||||
:chart-data="chartData">
|
||||
</line-chart-block>
|
||||
<div v-if="chartData.remark" class="chart-remark">{{chartData.remark}}</div>
|
||||
<chart-table v-show="isChart || chartData.type === 'table'"
|
||||
:key="'inner' + 1"
|
||||
:from="'project'"
|
||||
ref="editCharttable"
|
||||
:is-lock="true"
|
||||
:panel-id="-1"
|
||||
:chart-data="chartData"
|
||||
:chart-index="0"></chart-table>
|
||||
</div>
|
||||
<!-- <div class="tooltip-box-info" v-if="!isChart">-->
|
||||
<!-- <expression-info :chart-data="chartData" :filterTime="filterTime"/>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineChartBlock from '@/components/chart/chart/line-chart-block'
|
||||
import chartTable from '@/components/chart/chart/chart-table'
|
||||
import bus from '../../../../libs/bus'
|
||||
import ExpressionInfo from '../popData/expressionInfo'
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
import chartTempData from '@/components/chart/chartTempData'
|
||||
import axios from 'axios'
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { dealLegendAlias } from '@/components/common/js/tools'
|
||||
export default {
|
||||
name: 'topoTooltip',
|
||||
components: {
|
||||
ExpressionInfo,
|
||||
lineChartBlock,
|
||||
chartTable
|
||||
},
|
||||
props: {
|
||||
chartDataParent: {
|
||||
type: Object
|
||||
},
|
||||
filterTime: {},
|
||||
isChart: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isPanel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartDataParent: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.process(n)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tempDom: { height: 250, width: '' },
|
||||
chartDataTemp: { id: 8832, prev: null, next: null, dashboardId: 0, title: '123', span: 12, height: 0, createAt: '2021-01-27 07:36:19', unit: 2, weight: 0, pid: null, buildIn: null, seq: null, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, threshold: '', url: '', nullType: 'null' }, sync: null, asset: null, isLoaded: true, from: '__vue_devtool_undefined__', draggable: true, resizable: true, editable: true },
|
||||
chartData: {},
|
||||
filter: {
|
||||
end_time: bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss'),
|
||||
dashboardId: 0,
|
||||
searchName: '',
|
||||
start_time: bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.tempDomInit()
|
||||
},
|
||||
methods: {
|
||||
tempDomInit () {
|
||||
this.tempDom.width = 250
|
||||
},
|
||||
process (item) {
|
||||
const chartData = { ...this.chartDataTemp, ...item, name: item.chartTitle }
|
||||
chartData.elements = []
|
||||
chartData.expressAllArr && chartData.expressAllArr.forEach((item1, index) => {
|
||||
chartData.elements.push({
|
||||
expression: item1,
|
||||
legend: chartData.legendsAll[index],
|
||||
type: 'expert',
|
||||
id: index,
|
||||
buildIn: null,
|
||||
seq: null
|
||||
})
|
||||
})
|
||||
chartData.id = 0
|
||||
chartData.param = {
|
||||
legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' },
|
||||
last: 0,
|
||||
nullType: 'null',
|
||||
threshold: '',
|
||||
url: '',
|
||||
valueMapping: { mapping: [{ color: { bac: '#fff', text: '#000' }, text: '', value: '' }], type: 'text' },
|
||||
statistics: chartData.aggregation
|
||||
}
|
||||
chartData.span = 12
|
||||
this.chartData = chartData
|
||||
this.getChartData(chartData, 0)
|
||||
},
|
||||
// 获取一个图表具体数据,图表信息，图表位置index
|
||||
getChartData (chartInfo, pos, filterType) {
|
||||
const chartItem = chartInfo
|
||||
// 没有数据的设置提示信息暂无数据-针对每一个图
|
||||
const len = chartItem.elements.length
|
||||
if (len === 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['editChart' + chartItem.type]) {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId, this.filter, [])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const dashboardTime = localStorage.getItem('dashboardTime') ? JSON.parse(localStorage.getItem('dashboardTime')) : ['', '']
|
||||
const endTime = dashboardTime[1] || bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
|
||||
const startTime = dashboardTime[0] || bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss')
|
||||
const step = bus.getStep(startTime, endTime)
|
||||
this.$nextTick(() => {
|
||||
const axiosArr = chartItem.elements.map((ele) => {
|
||||
const filterItem = ele
|
||||
let query = encodeURIComponent(filterItem.expression)
|
||||
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
|
||||
chartInfo.param.nullType = chartInfo.param.nullType || 'null'
|
||||
query += '&nullType=' + chartInfo.param.nullType
|
||||
}
|
||||
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
|
||||
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
// }
|
||||
if (this.from === fromRoute.chartTemp) {
|
||||
return chartTempData
|
||||
}
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
|
||||
})
|
||||
// 一个图表的所有element单独获取数据
|
||||
axios.all(axiosArr).then((res) => {
|
||||
if (res.length > 0) {
|
||||
const series = []
|
||||
let singleStatRlt = ''
|
||||
const legend = []
|
||||
const tableData = []
|
||||
/* let sumData = {
|
||||
name: 'sum',
|
||||
data: [],
|
||||
visible: true,
|
||||
threshold: null,
|
||||
}; */
|
||||
let errorMsg = ''
|
||||
let pieSeries
|
||||
if (chartInfo.type === 'pie') {
|
||||
pieSeries = {
|
||||
type: 'pie',
|
||||
radius: '100%',
|
||||
center: ['50%', '50%'],
|
||||
top: '20%',
|
||||
bottom: '20%',
|
||||
// roseType: 'radius',
|
||||
minAngle: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}
|
||||
if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
|
||||
pieSeries = {
|
||||
type: 'bar',
|
||||
// roseType: 'radius',
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}
|
||||
res.forEach((response, innerPos) => {
|
||||
if (response.status === 'success') {
|
||||
errorMsg = ''
|
||||
if (response.data.result) {
|
||||
// 循环处理每个elements下获取的数据列
|
||||
if (chartItem.type === 'singleStat') {
|
||||
if (response.data.result.length === 1) {
|
||||
const statistics = chartItem.param.statistics || 'null'
|
||||
if (response.data.result[0].values) {
|
||||
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
|
||||
}
|
||||
} else if (response.data.result.length > 1) {
|
||||
singleStatRlt = this.$t('dashboard.dashboard.singleStatErrorTip')
|
||||
}
|
||||
} else {
|
||||
response.data.result.forEach((queryItem, resIndex) => {
|
||||
let seriesItem = {
|
||||
theData: {
|
||||
name: '',
|
||||
symbol: 'emptyCircle', // 去掉点
|
||||
symbolSize: [2, 2],
|
||||
smooth: 0.2, // 曲线变平滑
|
||||
showSymbol: false,
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
animation: false,
|
||||
type: chartInfo.type
|
||||
},
|
||||
metric_name: ''
|
||||
}
|
||||
|
||||
if (chartInfo.type === 'stackArea') {
|
||||
seriesItem.theData.type = 'line'
|
||||
seriesItem.theData.stack = chartInfo.name
|
||||
seriesItem.theData.areaStyle = { opacity: 0.3 }
|
||||
}
|
||||
if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
|
||||
seriesItem.theData.markLine = {
|
||||
silent: true,
|
||||
symbol: ['circle', 'circle'],
|
||||
label: {
|
||||
distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
|
||||
formatter (params) {
|
||||
return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#d64f40',
|
||||
width: 2,
|
||||
type: 'dotted'
|
||||
},
|
||||
data: [{
|
||||
yAxis: Number(chartInfo.param.threshold)
|
||||
}]
|
||||
}
|
||||
}
|
||||
// 图表中每条线的名字,后半部分
|
||||
let host = ''// up,
|
||||
if (queryItem.metric.__name__) {
|
||||
host = `${queryItem.metric.__name__}{`// up,
|
||||
}
|
||||
const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
|
||||
// 设置时间-数据格式对
|
||||
let tempArr = []
|
||||
let dpsArr = []
|
||||
tempArr = queryItem.values
|
||||
dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
|
||||
dpsArr = dpsArr.map(item => {
|
||||
return [item[0], [item[1][0], Number(item[1][1])]]
|
||||
})
|
||||
// 判断是否有数据, && tagsArr.length > 0
|
||||
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
|
||||
tagsArr.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${queryItem.metric[tag]}",`
|
||||
}
|
||||
})
|
||||
if (host.endsWith(',')) {
|
||||
host = host.substr(0, host.length - 1)
|
||||
}
|
||||
if (queryItem.metric.__name__) {
|
||||
host += '}'
|
||||
}
|
||||
if (!host || host === '') {
|
||||
host = chartItem.elements[innerPos].expression
|
||||
}
|
||||
// 处理legend别名
|
||||
let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend)
|
||||
if (!alias || alias === '') {
|
||||
alias = host
|
||||
}
|
||||
legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
|
||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
||||
|
||||
seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
|
||||
// alert(seriesItem.theData.name);
|
||||
seriesItem.metric_name = seriesItem.theData.name
|
||||
// 将秒改为毫秒
|
||||
// alert('table=='+JSON.stringify(queryItem))
|
||||
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
|
||||
/* 曲线汇总暂不需要
|
||||
if (sumData.data[dpsIndex]) {
|
||||
const sumNum = sumData.data[dpsIndex][1] || 0;
|
||||
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
|
||||
} else {
|
||||
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
|
||||
}
|
||||
*/
|
||||
// let t_date = new Date(dpsItem[0] * 1000);
|
||||
// let timeTmp = bus.timeFormate(t_date, 'YYYY-MM-DD HH:mm:ss');
|
||||
tableData.push({ // 表格数据
|
||||
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
|
||||
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
|
||||
element: { element: host, alias: alias },
|
||||
// time: timeTmp,//采集时间
|
||||
// value: dpsItem[1],//数值
|
||||
data: [dpsItem[0] * 1000, dpsItem[1]]
|
||||
})
|
||||
return [dpsItem[0] * 1000, dpsItem[1]]
|
||||
})
|
||||
if (chartInfo.type === 'pie') {
|
||||
pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
|
||||
} else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
|
||||
pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
|
||||
} else {
|
||||
series.push(seriesItem.theData)
|
||||
seriesItem = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (response.msg) {
|
||||
errorMsg = response.msg
|
||||
} else if (response.error) {
|
||||
errorMsg = response.error
|
||||
} else {
|
||||
errorMsg = response
|
||||
}
|
||||
}
|
||||
})
|
||||
if (this.$refs['editChart' + chartItem.type]) {
|
||||
if (chartInfo.type === 'pie') {
|
||||
series.push(pieSeries)
|
||||
}
|
||||
if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
|
||||
series.push(pieSeries)
|
||||
}
|
||||
const chartData = {
|
||||
chartItem: chartItem,
|
||||
series: series,
|
||||
singleStatRlt: singleStatRlt,
|
||||
legend: legend,
|
||||
tableData: tableData,
|
||||
dashboardId: this.filter.dashboardId,
|
||||
filter: this.filter,
|
||||
filterType: filterType,
|
||||
errorMsg: errorMsg
|
||||
}
|
||||
if (chartItem.type === 'table') { // 表格
|
||||
if (filterType === 'showFullScreen') { // 全屏查询
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
|
||||
this.filter.dashboardId, this.filter, filterType, errorMsg)
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
|
||||
this.filter.dashboardId, this.filter, '', errorMsg)
|
||||
}
|
||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
|
||||
if (series.length && chartItem.type === 4) { // 曲线汇总
|
||||
// series.push(sumData);//后续需要
|
||||
}
|
||||
if (filterType === 'showFullScreen') { // 全屏查询
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, series,
|
||||
this.filter.dashboardId, this.filter, legend, filterType, errorMsg)
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, series,
|
||||
this.filter.dashboardId, this.filter, legend, '', errorMsg)
|
||||
}
|
||||
} else if (chartItem.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') { // 全屏查询
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
|
||||
this.filter.dashboardId, this.filter, filterType, errorMsg)
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
|
||||
this.filter.dashboardId, this.filter, '', errorMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const type = chartItem.type
|
||||
if (this.$refs['editChart' + chartItem.type]) {
|
||||
if (type === 'table') {
|
||||
if (filterType === 'showFullScreen') { // table的全屏查询
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
|
||||
this.filter, filterType)
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
|
||||
this.filter)
|
||||
}
|
||||
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
|
||||
if (filterType === 'showFullScreen') { // table的全屏查询
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
|
||||
this.filter, filterType)
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.dashboardId,
|
||||
this.filter)
|
||||
}
|
||||
} else if (chartItem.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') { // 全屏查询
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, '',
|
||||
this.filter.dashboardId, this.filter, filterType)
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, '',
|
||||
this.filter.dashboardId, this.filter)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
this.$message.error(error.toString())
|
||||
console.error(error)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,165 +0,0 @@
|
||||
<template>
|
||||
<div class="tool-top" id="tool-top">
|
||||
<div id="undo" :class="['top-tool-item',]" @click="undo"> <i class="nz-icon nz-icon-revoke" :title="$t('overall.revocation')"/> </div>
|
||||
<div id="redo" :class="['top-tool-item',]" @click="redo"> <i class="nz-icon nz-icon-revoke1" :title="$t('overall.redo')"/> </div>
|
||||
<!--<div> 保存为图片 </div>-->
|
||||
<div class="top-tool-item" @click="del" :title="$t('overall.delete')"> <i class="nz-icon nz-icon-delete"/> </div>
|
||||
<div class="top-tool-item top-tool-item-scale">
|
||||
<span class="scale-number">
|
||||
<span class="scale-number-minus scale-number-symbol" @click="changeScale(-25)">-</span>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="111"
|
||||
trigger="hover"
|
||||
class="scale-number-box"
|
||||
popper-class="scale-number-popover no-style-class"
|
||||
>
|
||||
<div class="scale-num-pop" style=" width: 91px;min-width: 91px">
|
||||
<div>缩放级别</div>
|
||||
<div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
|
||||
<div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
|
||||
<div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
|
||||
</div>
|
||||
<span class="scale-number-content" slot="reference">{{scaleNum}}%</span>
|
||||
</el-popover>
|
||||
<span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="top-tool-item top-tool-item-switch">
|
||||
<label>{{$t('project.topology.grids')}}</label>
|
||||
<el-switch
|
||||
v-model="option.grid"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="changeOption('grid')">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div class="top-tool-item top-tool-item-switch">
|
||||
<label>{{$t('project.topology.rule')}}</label>
|
||||
<el-switch
|
||||
v-model="option.rule"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="changeOption('rule')">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTopology } from '../../js/common'
|
||||
|
||||
export default {
|
||||
name: 'topologyTopTool',
|
||||
data () {
|
||||
return {
|
||||
option: {
|
||||
lineName: 'curve',
|
||||
lineWidth: 1,
|
||||
fromArrow: '',
|
||||
toArrow: 'triangleSolid',
|
||||
scale: 100,
|
||||
grid: false,
|
||||
rule: false
|
||||
},
|
||||
scaleNum: 100,
|
||||
penLineType: [
|
||||
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
|
||||
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
|
||||
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' },
|
||||
{ d: 'M5 20 C0,8 50,0 85,0', 'stroke-dasharray': '', name: 'mind' }
|
||||
],
|
||||
penLineFromTOArrow: [
|
||||
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
|
||||
{ d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#000000', stroke: '', 'stroke-width': '', name: 'triangleSolid' },
|
||||
{ d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', name: 'triangle' },
|
||||
{ d: 'M5 14 l85 0', fill: '#000000', stroke: '', 'stroke-width': '', cx: '10', cy: '14', r: '5', name: 'circleSolid' },
|
||||
{ d: 'M5 14 l85 0', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', cx: '10', cy: '14', r: '5', name: 'circle' }
|
||||
],
|
||||
redoFlag: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
selection: {
|
||||
type: Object,
|
||||
require: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
require: true
|
||||
},
|
||||
toolShow: {
|
||||
type: Object,
|
||||
require: true
|
||||
},
|
||||
cachesIndex: {
|
||||
type: Number,
|
||||
require: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const dataOption = getTopology(this.index).store.data
|
||||
Object.keys(this.option).forEach(key => {
|
||||
if (key === 'scale') {
|
||||
this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)
|
||||
} else {
|
||||
this.option[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.option[key])
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changeOption (key) {
|
||||
// getTopology(this.index).data[key] = this.option[key]
|
||||
const obj = {}
|
||||
obj[key] = this.option[key]
|
||||
if (key === 'grid') {
|
||||
getTopology(this.index).setGrid(obj)
|
||||
} else {
|
||||
getTopology(this.index).setRule(obj)
|
||||
}
|
||||
getTopology(this.index).render()
|
||||
},
|
||||
undo () { // 撤销
|
||||
getTopology(this.index).undo()
|
||||
},
|
||||
redo () { // 重做
|
||||
getTopology(this.index).redo()
|
||||
},
|
||||
centerView () { // 居中显示
|
||||
getTopology(this.index).centerView()
|
||||
},
|
||||
fitView () { // 自适应画布大小
|
||||
getTopology(this.index).fitView()
|
||||
},
|
||||
changeScale (num) {
|
||||
this.scaleNum += num
|
||||
if (this.scaleNum < 25) {
|
||||
this.scaleNum = 25
|
||||
}
|
||||
if (this.scaleNum > 400) {
|
||||
this.scaleNum = 400
|
||||
}
|
||||
this.scale(this.scaleNum)
|
||||
},
|
||||
scale (val) {
|
||||
this.scaleNum = val
|
||||
getTopology(this.index).scale(val / 100)
|
||||
},
|
||||
del () {
|
||||
const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens
|
||||
this.$emit('del', delObj)
|
||||
},
|
||||
clear () {
|
||||
const data = { ...getTopology(this.index).data }
|
||||
data.pens = []
|
||||
getTopology(this.index).open({})
|
||||
},
|
||||
toolShowChange (attr) {
|
||||
this.$emit('toolShowChange', attr)
|
||||
},
|
||||
changeOpt (key, val) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -4,9 +4,6 @@ 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 {
|
||||
disposeTopoOldData
|
||||
} 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'
|
||||
|
||||
@@ -1113,9 +1113,7 @@
|
||||
<script>
|
||||
import nezhaColor from '@/components/common/nezhaColor'
|
||||
import meta2dSelectImage from '@/components/common/project/meta2d/meta2dSelectImage'
|
||||
import { imageTemp } from '@/components/common/project/L5/services/canvas'
|
||||
import { dealImg, getUUID, topologyImg } from '@/components/common/js/common'
|
||||
import imgDefault from '@/components/common/project/L5/services/img'
|
||||
import { ColorReverse, randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||
import lodash from 'lodash'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -56,6 +56,11 @@
|
||||
<i v-if="scope.row.asset&&scope.row.asset.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.asset.name)" :title="$t('overall.copyText')"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'category'">
|
||||
<div>
|
||||
{{scope.row.type ? scope.row.type.category : '-'}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'project'">
|
||||
<div class="document-copy-block">
|
||||
<span class="document-copy-text"
|
||||
|
||||
@@ -204,6 +204,12 @@ export default {
|
||||
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
|
||||
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
|
||||
],
|
||||
relativeData: [
|
||||
{ id: 13, text: 'today', type: 'relative', value: 0 },
|
||||
{ id: 14, text: 'Yesterday ', type: 'relative', value: 1 },
|
||||
{ id: 15, text: 'The day before yesterday', type: 'relative', value: 2 },
|
||||
{ id: 16, text: 'This day last week', type: 'relative', value: 7 }
|
||||
],
|
||||
timeShowData: [],
|
||||
nowTimeType: {
|
||||
id: 4,
|
||||
@@ -232,6 +238,7 @@ export default {
|
||||
mounted () {
|
||||
this.timePickerLocked = localStorage.getItem('nz-time-picker-locked') ? JSON.parse(localStorage.getItem('nz-time-picker-locked')) : false
|
||||
this.timeShowData = JSON.parse(JSON.stringify(this.timeData))
|
||||
this.timeShowData.push(...this.relativeData)
|
||||
this.timeShowData.shift()
|
||||
this.getItem()
|
||||
this.getUtcStr()
|
||||
@@ -322,6 +329,7 @@ export default {
|
||||
this.showTime = this.nowTimeType = {
|
||||
id: 0,
|
||||
text: this.searchTime[0] + ' ' + this.$t('dashboard.dashboard.to') + ' ' + this.searchTime[1],
|
||||
type: 'custom',
|
||||
value: -1
|
||||
}
|
||||
this.isCustom = true
|
||||
@@ -527,7 +535,22 @@ export default {
|
||||
// }
|
||||
},
|
||||
setSearchTime (type, val, time) {
|
||||
if (type === 'minute') {
|
||||
if (type === 'relative') {
|
||||
const now = new Date(bus.computeTimezone(new Date().getTime()))
|
||||
let start = bus.timeFormate(now, 'YYYY-MM-DD')
|
||||
let end = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
|
||||
console.log(start, end, val)
|
||||
if (this.nowTimeType.id === 13) { // today
|
||||
start += '00:00:00'
|
||||
end += ''
|
||||
start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
|
||||
end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
|
||||
}
|
||||
console.log(start, end)
|
||||
this.$set(this.searchTime, 0, start)
|
||||
this.$set(this.searchTime, 1, end)
|
||||
this.$set(this.searchTime, 2, this.nowTimeType.id)
|
||||
} else if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(
|
||||
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(
|
||||
new Date(bus.computeTimezone(new Date().getTime())).getMinutes() -
|
||||
|
||||
@@ -852,7 +852,7 @@ export default {
|
||||
clearTopology()
|
||||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('searchTime')
|
||||
this.getData(this.filter)
|
||||
this.$store.dispatch('dispatchPanelTime', {
|
||||
time: this.searchTime,
|
||||
@@ -871,27 +871,7 @@ export default {
|
||||
this.updatePath(param, path)
|
||||
}
|
||||
},
|
||||
setSearchTime (type, val, nowTimeType) { // 设置searchTime
|
||||
if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), this.panelDateFormatTime)
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'm')
|
||||
} else if (type === 'hour') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), this.panelDateFormatTime)
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'h')
|
||||
} else if (type === 'date') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), this.panelDateFormatTime)
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'd')
|
||||
}
|
||||
this.$refs.pickTime && (this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime)
|
||||
storeDispatchPanelTime () { // 设置searchTime
|
||||
this.$store.dispatch('dispatchPanelTime', {
|
||||
time: this.searchTime,
|
||||
nowTimeType: this.nowTimeType
|
||||
@@ -1199,7 +1179,7 @@ export default {
|
||||
this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
|
||||
// 刷新时间范围
|
||||
this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('searchTime')
|
||||
this.$store.dispatch('dispatchPanelTime', {
|
||||
time: this.searchTime,
|
||||
nowTimeType: this.nowTimeType
|
||||
@@ -1219,7 +1199,7 @@ export default {
|
||||
const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
|
||||
this.searchTime = this.timePickerRange.time
|
||||
this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('searchTime')
|
||||
})
|
||||
},
|
||||
// 设置默认刷新
|
||||
@@ -1257,7 +1237,7 @@ export default {
|
||||
this.$store.commit('setMode', this.mode)
|
||||
await this.getTableData()
|
||||
if (this.nowTimeType.type) {
|
||||
this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
|
||||
this.setSearchTime('searchTime')
|
||||
}
|
||||
if (this.nowTimeType) {
|
||||
this.nowTimeType.start_time = this.searchTime[0]
|
||||
|
||||
@@ -3682,7 +3682,7 @@ export default {
|
||||
const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
|
||||
this.filterTime = this.timePickerRange.time
|
||||
this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.filterTime)
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('filterTime')
|
||||
})
|
||||
},
|
||||
selectMetricsLogs (val, icon, label) {
|
||||
@@ -4116,7 +4116,7 @@ export default {
|
||||
if (this.$refs.pickTime) {
|
||||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||||
this.setSearchTime('filterTime')
|
||||
}
|
||||
if (this.expressions && this.expressions.length >= 1) {
|
||||
let error = false
|
||||
@@ -4155,7 +4155,7 @@ export default {
|
||||
const nowTimeType = data.nowTimeType
|
||||
this.filterTime = data.searchTime
|
||||
if (nowTimeType && nowTimeType.type) {
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
|
||||
this.setSearchTime('filterTime')
|
||||
}
|
||||
if (nowTimeType) {
|
||||
nowTimeType.start_time = this.filterTime[0]
|
||||
@@ -4214,28 +4214,6 @@ export default {
|
||||
}
|
||||
this.$router.replace({ query: param })
|
||||
},
|
||||
setSearchTime (type, val) { // 设置searchTime
|
||||
if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.filterTime, 0, startTime)
|
||||
this.$set(this.filterTime, 1, endTime)
|
||||
this.$set(this.filterTime, 2, val + 'm')
|
||||
} else if (type === 'hour') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.filterTime, 0, startTime)
|
||||
this.$set(this.filterTime, 1, endTime)
|
||||
this.$set(this.filterTime, 2, val + 'h')
|
||||
} else if (type === 'date') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
||||
this.$set(this.filterTime, 0, startTime)
|
||||
this.$set(this.filterTime, 1, endTime)
|
||||
this.$set(this.filterTime, 2, val + 'd')
|
||||
}
|
||||
this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
|
||||
},
|
||||
storeHistory () {
|
||||
const expire = 24
|
||||
const historyJson = localStorage.getItem(this.historyParam.key)
|
||||
|
||||
@@ -67,7 +67,6 @@
|
||||
|
||||
<script>
|
||||
import bus from '@/libs/bus'
|
||||
import topologyL5 from '@/components/common/project/topologyL5'
|
||||
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
|
||||
import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
|
||||
import { clearTopology } from '@/components/common/js/common'
|
||||
@@ -76,7 +75,6 @@ export default {
|
||||
name: 'project2',
|
||||
mixins: [beforeMeta2d],
|
||||
components: {
|
||||
topologyL5,
|
||||
meta2dMain
|
||||
},
|
||||
data () {
|
||||
|
||||
Reference in New Issue
Block a user