NEZ-2614 fix: 样式修改
This commit is contained in:
@@ -82,7 +82,8 @@
|
||||
padding-top: 0;
|
||||
}
|
||||
.pen-tools{
|
||||
background: $--background-color-1;
|
||||
background: $--background-color-empty;
|
||||
border: 1px solid $--border-color-light;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
@@ -178,4 +179,20 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.image-input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
line-height: 28px;
|
||||
border: 1px solid $--border-color-light;
|
||||
.nz-icon-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.image-input:hover {
|
||||
.nz-icon-close {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "nz-icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "34318397",
|
||||
"name": "矩形",
|
||||
"font_class": "juxing",
|
||||
"unicode": "e7d2",
|
||||
"unicode_decimal": 59346
|
||||
},
|
||||
{
|
||||
"icon_id": "34318411",
|
||||
"name": "线条",
|
||||
"font_class": "xiantiao",
|
||||
"unicode": "e7d3",
|
||||
"unicode_decimal": 59347
|
||||
},
|
||||
{
|
||||
"icon_id": "34168331",
|
||||
"name": "Integration",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -155,7 +155,7 @@ export default {
|
||||
pen.visible = pen.visible || true
|
||||
pen.isNz = true
|
||||
pen.locked = pen.locked || 0
|
||||
pen.isBottom = true
|
||||
pen.isBottom = false
|
||||
},
|
||||
lineInit (pen) { // 初始化连线参数
|
||||
if (pen.data && pen.data.params) {
|
||||
@@ -178,7 +178,7 @@ export default {
|
||||
}
|
||||
}
|
||||
pen.disableInput = pen.disableInput || true
|
||||
pen.lineAnimateType = pen.lineAnimateType || undefined
|
||||
pen.lineAnimateType = pen.lineAnimateType || 0
|
||||
pen.animateSpan = pen.animateSpan || 1
|
||||
pen.animateReverse = pen.animateReverse || false
|
||||
pen.fromArrow = pen.fromArrow || ''
|
||||
@@ -193,8 +193,8 @@ export default {
|
||||
pen.isNz = pen.isNz || true
|
||||
pen.visible = pen.visible || true
|
||||
pen.locked = pen.locked || 0
|
||||
pen.isBottom = true
|
||||
pen.autoPlay = true
|
||||
pen.isBottom = false
|
||||
pen.autoPlay = false
|
||||
},
|
||||
pensActive (pens, e) { // 选中节点
|
||||
this.selectPens = pens
|
||||
|
||||
@@ -142,6 +142,7 @@ export default {
|
||||
data.pens.forEach(pen => {
|
||||
pen.isBottom = false
|
||||
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)
|
||||
if (findItem) {
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<!-- <el-input v-model="pen.image" size="small" @change="change('image')"/>-->
|
||||
<meta2dSelectImage :selectImage="bkImage" @updateImage="updateImage"/>
|
||||
<meta2dSelectImage :selectImage="bkImage" :imgId="bkImageId" @updateImage="updateImage"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,17 +48,13 @@
|
||||
animation: 150,
|
||||
handle: '.drag-sort'
|
||||
}">
|
||||
<div v-for="item in elements" :key="item.id" @click.stop="penActive(item)">
|
||||
<div class="pen-tools" style="">
|
||||
<div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
|
||||
<div class="pen-tools pen-item" style="">
|
||||
<span>
|
||||
<i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
|
||||
<i v-else class="nz-icon nz-icon-compare" />
|
||||
<span v-if="item.data.source!=='legend'" style="margin-left: 5px">
|
||||
{{item.name}}
|
||||
</span>
|
||||
<span v-else style="margin-left: 5px">
|
||||
{{item.name}}
|
||||
</span>
|
||||
<i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" />
|
||||
<i v-else class="nz-icon nz-icon-xiantiao" />
|
||||
<span v-if="item.type !== 1" style="margin-left: 8px">element - {{index}}</span>
|
||||
<span v-else style="margin-left: 5px">element - {{index}}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
|
||||
@@ -75,9 +71,6 @@
|
||||
<span @click.stop="delPen(item)" class="pen-tools-item" :title="$t('overall.delete')">
|
||||
<i class="nz-icon nz-icon-minus"/>
|
||||
</span>
|
||||
<span style="cursor: grab;" class="drag-sort pen-tools-item" :title="$t('dashboard.panel.chartForm.sort')">
|
||||
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,7 +92,8 @@ export default {
|
||||
name: 'meta2dCanvas',
|
||||
props: {
|
||||
canvasProps: {},
|
||||
meta2dId: {}
|
||||
meta2dId: {},
|
||||
params: {}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
@@ -118,6 +112,8 @@ export default {
|
||||
this.elements = getTopology(this.meta2dId).store.data.pens
|
||||
this.background = getTopology(this.meta2dId).store.data.background || '#ffffff00'
|
||||
this.bkImage = getTopology(this.meta2dId).store.data.bkImage || ''
|
||||
this.bkImageId = this.params.bkImageId || ''
|
||||
console.log(this.bkImageId)
|
||||
this.$refs.backgroundNezhaColor.colors = this.background
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -259,7 +259,7 @@
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<!-- <el-input v-model="pen.image" size="small" @change="change('image')"/>-->
|
||||
<meta2dSelectImage :selectImage="pen.image" @updateImage="updateImage"/>
|
||||
<meta2dSelectImage :selectImage="pen.image" :imgId="pen.imageId" @updateImage="updateImage"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
|
||||
@@ -119,12 +119,14 @@ export default {
|
||||
const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
|
||||
const unit = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataUnit
|
||||
const statistic = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataStatistic
|
||||
const bkImageId = this.$parent.$refs.meta2dProps.$refs.meta2dCanvas.bkImageId
|
||||
const params = {
|
||||
topo: getTopology(this.meta2dId).data(),
|
||||
elements: elements,
|
||||
timeType: timeType || 1,
|
||||
unit: unit || 1,
|
||||
statistic: statistic || 'last',
|
||||
bkImageId: bkImageId || ''
|
||||
}
|
||||
|
||||
this.$put('monitor/project/topo', { topo: JSON.stringify(params), projectId: this.project.id }).then(res => {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta2dElement :selectPens.sync="selectPens" @change="change" :elements="elements"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('project.topology.canvas')" name="canvas">
|
||||
<meta2dCanvas :canvasProps="canvasProps" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
|
||||
<meta2dCanvas :canvasProps="canvasProps" :params.sync="params" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('project.topology.data')" name="data">
|
||||
<meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
|
||||
<div @click="selectBoxShow = !selectBoxShow" style="position: relative">
|
||||
<div v-if="selectImage" class="image-box">
|
||||
<img :src="selectImage" class="image-box">
|
||||
<div class="image-input">
|
||||
<span v-if="imageName">{{unit}} / {{imageName}}</span>
|
||||
<i class="nz-icon nz-icon-circle-close" style="position: absolute;top: 2px;right: 10px;font-size: 8px" @click.stop="selectImageChange({image: '', id: ''})"/>
|
||||
</div>
|
||||
<div v-else class="image-box image-box-null" />
|
||||
<i class="nz-icon nz-icon-close" style="position: absolute;top: -7px;left: 25px;font-size: 10px" @click.stop="selectImageChange({image: '', id: ''})"/>
|
||||
</div>
|
||||
<div class="image-select-box" v-if="selectBoxShow">
|
||||
<!-- <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
|
||||
@@ -111,7 +110,8 @@ import { imageTemp } from '@/components/common/project/L5/services/canvas'
|
||||
export default {
|
||||
name: 'meta2dSelectImage',
|
||||
props: {
|
||||
selectImage: {}
|
||||
selectImage: {},
|
||||
imgId: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -129,6 +129,8 @@ export default {
|
||||
name: '',
|
||||
unit: ''
|
||||
},
|
||||
unit: '',
|
||||
imageName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -151,6 +153,13 @@ export default {
|
||||
this.iconArray = [...res.data.list]
|
||||
this.iconArray.forEach((item, index) => {
|
||||
item.image = res2[index].data
|
||||
if (this.imgId == item.id) {
|
||||
this.unit = item.unit
|
||||
this.imageName = item.imageName
|
||||
} else if (this.selectImage === item.image) {
|
||||
this.unit = item.unit
|
||||
this.imageName = item.imageName
|
||||
}
|
||||
const group = this.tools.find(tool => tool.group === item.unit)
|
||||
if (group) {
|
||||
group.children.push({
|
||||
@@ -187,6 +196,8 @@ export default {
|
||||
this.selectBoxShow = false
|
||||
},
|
||||
selectImageChange (item) {
|
||||
this.unit = item.unit
|
||||
this.imageName = item.imageName
|
||||
this.$emit('updateImage', item)
|
||||
},
|
||||
tooltipDelete (item) {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@dragstart.stop="onDragstart($event)">
|
||||
<div
|
||||
>
|
||||
<i class="nz-icon nz-icon-zhengfangxing" />
|
||||
<i class="nz-icon nz-icon-juxing" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="tools-left-draw"
|
||||
@@ -17,7 +17,7 @@
|
||||
:class="drawLineFlag ? 'is-active-meta2d' : ''"
|
||||
@click="changeState('drawLineFlag')"
|
||||
:title="$t('project.topology.addLine')">
|
||||
<i class="nz-icon nz-icon-compare" />
|
||||
<i class="nz-icon nz-icon-xiantiao" />
|
||||
</div>
|
||||
<div id="undo"
|
||||
class="top-tool-item"
|
||||
|
||||
Reference in New Issue
Block a user