xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
master
夜笙歌 2 weeks ago
parent 758d64015d
commit 2792b63ae2
3 changed files with 177 additions and 23 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape Escape View File

@ -37,7 +37,7 @@
"didi": "9.0.2",
"echarts": "5.5.0",
"echarts-liquidfill": "^3.1.0",
"element-plus": "2.9.1",
"element-plus": "2.9.11",
"file-saver": "2.0.5",
"fuse.js": "7.0.0",
"highlight.js": "11.9.0",

170
src/views/boardGenerate/index1.vue
Unescape Escape View File

@ -481,6 +481,47 @@
</div>
<div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
<el-collapse-item title="Consistency" name="1">
<el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
<el-input v-model="nodeAttrForm.xName" style="width: 100%" />
</el-form-item>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>
Simplify the process: keep operating process simple and intuitive;
</div>
<div>
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
</div>
<div>
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
</div>
<div>
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
</div>
</el-collapse-item>
</el-collapse>
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
<el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
</el-form-item>
@ -490,9 +531,6 @@
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('number')">
<el-input-number :controls="false" autocomplete="off" v-model="nodeAttrForm.number" style="width: 100%" />
</el-form-item>
<el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
<el-input v-model="nodeAttrForm.xName" style="width: 100%" />
</el-form-item>
<el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
<el-input v-model="nodeAttrForm.yName" style="width: 100%" />
</el-form-item>
@ -613,7 +651,13 @@
<template #reference>
<el-input readonly v-model="nodeAttrForm.icon" style="width: 100%" placeholder="选择图标">
<template #prepend>
<el-button :icon="icon[nodeAttrForm.icon]" />
<el-button style="background-color: #0000">
<template #icon>
<el-icon class="el-icon--right" color="#fff">
<component :is="icon[nodeAttrForm.icon]" />
</el-icon>
</template>
</el-button>
</template>
</el-input>
</template>
@ -665,12 +709,13 @@
<el-switch v-model="nodeAttrForm.label" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-form-item label="轮播设置" v-if="Object.keys(nodeAttrForm).includes('swiperOptions')">
<el-button plain @click="swiperOptionsVisible = true">
<el-button class="optionsBtn" plain @click="swiperOptionsVisible = true">
配置轮播图
</el-button>
</el-form-item>
<el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
<el-select
effect="dark"
v-model="nodeAttrForm.imageFit"
style="width: 100%"
>
@ -688,12 +733,12 @@
<el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
</el-form-item>
<el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
<el-button plain @click="tableOptionsVisible = true">
<el-button class="optionsBtn" plain @click="tableOptionsVisible = true">
配置表格
</el-button>
</el-form-item>
<el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
<el-button plain @click="tableClassOptionsVisible = true">
<el-button class="optionsBtn" plain @click="tableClassOptionsVisible = true">
配置动画
</el-button>
</el-form-item>
@ -742,7 +787,6 @@
</div>
</div>
</div>
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
<el-form :model="pageSettingForm">
<el-form-item label="页面大小" label-width="80px">
@ -923,7 +967,16 @@
<script setup>
import FlowRuler from './FlowRuler.vue';
import { ArrowDown, View, DocumentChecked } from '@element-plus/icons-vue';
import {
ArrowDown,
View,
DocumentChecked,
Close,
Plus,
Setting,
StarFilled,
Delete
} from '@element-plus/icons-vue';
import * as icon from '@element-plus/icons-vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import tool, { options } from '@/views/boardGenerate/tool.js';
@ -1056,6 +1109,7 @@ onMounted(async () => {
});
const icons = ref([]);
const selectIconInput = ref('');
const collapseActiveName = ref('1');
const loading = ref(false);
const pageSettingVisible = ref(false);
const tableOptionsVisible = ref(false);
@ -1396,6 +1450,7 @@ const pitchOnNode = (e) => {
&::-webkit-scrollbar {
display: none;
}
.level {
display: flex;
@ -1483,7 +1538,104 @@ const pitchOnNode = (e) => {
width: 100%;
height: calc(100% - 50px);
background-color: #222;
.tabItem {
.el-collapse {
border: none;
:deep(.el-collapse-item) {
.el-collapse-item__header {
background-color: #0000;
color: #ccc;
border: none;
}
.el-collapse-item__wrap {
background-color: #0000;
border: none;
}
}
}
:deep(.el-form-item__label) {
color: #ccc;
}
:deep(.el-input__wrapper) {
background: #222;
border-color: #333;
box-shadow: 0 0 0 1px #666 inset;
.el-input__inner {
color: #ccc;
}
}
:deep(.el-input-number__decrease) {
background-color: #666;
border: none;
color: #ccc;
}
:deep(.el-input-number__increase) {
background-color: #666;
border: none;
color: #ccc;
}
:deep(.el-input-tag) {
background: #222;
border-color: #333;
box-shadow: 0 0 0 1px #666 inset;
.el-input-tag__inner {
.el-tag {
background-color: #666;
color: #ccc;
}
}
}
:deep(.el-switch__label) {
color: #ccc;
&.is-active {
color: var(--el-color-primary);
}
}
:deep(.el-input-group__prepend) {
background-color: #0000;
border: 1px solid #666;
box-shadow: none;
}
.optionsBtn {
background-color: #0000;
border-color: #ccc;
color: #ccc;
}
:deep(.el-select__wrapper) {
background-color: #666;
border: none;
color: #ccc;
.el-select__placeholder {
color: #ccc;
}
}
:deep(.el-textarea__inner) {
background-color: #0000;
border: none;
color: #ccc;
box-shadow: 0 0 0 1px #666 inset;
}
}
}
}
}

28
src/views/boardGenerate/nodes/board/backgroundBarNode.vue
Unescape Escape View File

@ -187,45 +187,47 @@ const defaultOption = {
]
};
const getOption = () => {
const options = props?.data?.options || {};
const data = props?.inputData || { x1: [], y1: [] };
const chartOption = {
title: {
text: props.data.options.title || ''
text: options.title || ''
},
legend: {
show: props.data?.options?.legend || false
show: options?.legend || false
},
tooltip: {
show: props.data?.options?.tooltip || false
show: options?.tooltip || false
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
top: options?.gridTop + '%' || '20%',
left: options?.gridLeft + '%' || '20%',
bottom: options?.gridBottom + '%' || '20%',
right: options?.gridRight + '%' || '20%'
},
xAxis: [
{
name: props.data?.options?.xName || ''
name: options?.xName || ''
}
],
yAxis: [
{
name: props.data?.options?.yName || ''
name: options?.yName || ''
}
],
series: [
{
backgroundStyle: {
color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
}
}
]
}
;
let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []];
let xData = [data?.x1 || []];
let yData = [data?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
let source = [['product', ...[options?.yNames?.[0] || '']]];
Array(length).fill(0).forEach((_, i) => {
let item = [];
xData.forEach(e => {

Write Preview
Loading…
Cancel
Save