NEZ-2614 fix: 样式修改

This commit is contained in:
zhangyu
2023-03-07 10:32:02 +08:00
parent 7efa29fcbf
commit 5fa1b817b6
16 changed files with 109 additions and 37 deletions

View File

@@ -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

View File

@@ -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",

File diff suppressed because one or more lines are too long

View File

@@ -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

View File

@@ -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) {

View File

@@ -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: {

View File

@@ -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">

View File

@@ -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 => {

View File

@@ -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"/>

View File

@@ -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) {

View File

@@ -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"