修改看板
夜笙歌
7 months ago
parent
7459d457bd
commit
2a564258c2
@ -0,0 +1,71 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询数据库连接信息列表
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const listDatabaseLink = (query) => {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink/list', method: 'get', params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询数据库连接信息详细
|
||||||
|
* @param linkId
|
||||||
|
*/
|
||||||
|
export const getDatabaseLink = (linkId) => {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink/tables/' + linkId, method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getFieldList = (linkId, tableName) => {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink/columns/' + linkId + '/' + tableName, method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增数据库连接信息
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export const addDatabaseLink = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink', method: 'post', data: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改数据库连接信息
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export const updateDatabaseLink = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink', method: 'put', data: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除数据库连接信息
|
||||||
|
* @param linkId
|
||||||
|
*/
|
||||||
|
export const delDatabaseLink = (linkId) => {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink/' + linkId, method: 'delete'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下拉框查询数据库连接信息列表
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
export function getSysDatabaseLinkList(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/databaseLink/getSysDatabaseLinkList', method: 'get', params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref();
|
||||||
|
let chart = null;
|
||||||
|
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
||||||
|
const getOption = () => {
|
||||||
|
const chartOption = {
|
||||||
|
title: {
|
||||||
|
text: props.data.options.title || '设备运行数量',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
left: '0',
|
||||||
|
top: '5%'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: props.data?.options?.legend || false,
|
||||||
|
icon: 'circle',
|
||||||
|
top: '5%',
|
||||||
|
right: '5%',
|
||||||
|
itemWidth: 6,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: props.data?.options?.tooltip || false,
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#000',
|
||||||
|
borderColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
padding: [10, 10],
|
||||||
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '30%',
|
||||||
|
bottom: '10%'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['42%', '50%'],
|
||||||
|
label: {
|
||||||
|
show: props.data?.options?.label || false,
|
||||||
|
formatter: '{b}: {d}%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
let xData = [props.inputData?.x1 || []];
|
||||||
|
let yData = [props.inputData?.y1 || []];
|
||||||
|
console.log(chartOption);
|
||||||
|
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
|
||||||
|
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
|
||||||
|
Array(length).fill(0).forEach((_, i) => {
|
||||||
|
let item = [];
|
||||||
|
xData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
yData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
source.push(item);
|
||||||
|
});
|
||||||
|
console.log(source);
|
||||||
|
return {
|
||||||
|
...chartOption,
|
||||||
|
dataset: {
|
||||||
|
source
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons', {
|
||||||
|
renderer: 'svg'
|
||||||
|
});
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
});
|
||||||
|
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart && chart.setOption(getOption(), true);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart?.resize();
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref();
|
||||||
|
let chart = null;
|
||||||
|
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
||||||
|
const getOption = () => {
|
||||||
|
const chartOption = {
|
||||||
|
title: {
|
||||||
|
text: props.data.options.title || '设备运行数量',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
left: '0',
|
||||||
|
top: '5%'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '30%',
|
||||||
|
bottom: '10%'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: props.dimensions.width / 30
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: props.dimensions.width / 30
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: props.dimensions.width / 30,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: props.dimensions.width / 30 + 10,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: props.dimensions.width / 30
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: true,
|
||||||
|
showAbove: true,
|
||||||
|
size: 25,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
fontSize: props.dimensions.width / 10,
|
||||||
|
offsetCenter: [0, '70%']
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 70
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...chartOption
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons', {
|
||||||
|
renderer: 'svg'
|
||||||
|
});
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
});
|
||||||
|
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart && chart.setOption(getOption(), true);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart?.resize();
|
||||||
|
chart && chart.setOption(getOption(), true);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref();
|
||||||
|
let chart = null;
|
||||||
|
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
||||||
|
const defaultOption = {
|
||||||
|
title: {
|
||||||
|
text: props.data.options.title || '',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
left: '0',
|
||||||
|
top: '5%'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: props.data?.options?.legend || false,
|
||||||
|
icon: 'circle',
|
||||||
|
top: '5%',
|
||||||
|
right: '5%',
|
||||||
|
itemWidth: 6,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: props.data?.options?.tooltip || false,
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#000',
|
||||||
|
borderColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
padding: [10, 10],
|
||||||
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
||||||
|
},
|
||||||
|
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%'
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
name: props.data?.options?.xName || '',
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#DCE2E8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
fontSize: 12,
|
||||||
|
margin: 3
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
padding: [0, 0, 0, 0],
|
||||||
|
margin: 0,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boundaryGap: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: props.data?.options?.yName || '',
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0372FF'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#75ECFF'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barMaxWidth: 50,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 1,
|
||||||
|
symbol: 'circle',
|
||||||
|
smooth: false,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9effff'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#9E87FF'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
shadowColor: 'rgba(158,135,255, 0.3)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetY: 20
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList[0],
|
||||||
|
borderColor: colorList[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
const getOption = () => {
|
||||||
|
const chartOption = {
|
||||||
|
title: {
|
||||||
|
text: props.data.options.title || ''
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: props.data?.options?.legend || false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: props.data?.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%'
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
name: props.data?.options?.xName || ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: props.data?.options?.yName || ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
let xData = [props.inputData?.x1 || []];
|
||||||
|
let yData = [props.inputData?.y1 || []];
|
||||||
|
let yData1 = [props.inputData?.y2 || []];
|
||||||
|
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
|
||||||
|
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
|
||||||
|
Array(length).fill(0).forEach((_, i) => {
|
||||||
|
let item = [];
|
||||||
|
xData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
yData.forEach(e => {
|
||||||
|
item.push(parseFloat(e[i]));
|
||||||
|
});
|
||||||
|
yData1.forEach(e => {
|
||||||
|
item.push(parseFloat(e[i]));
|
||||||
|
});
|
||||||
|
source.push(item);
|
||||||
|
});
|
||||||
|
console.log(xData);
|
||||||
|
console.log(yData);
|
||||||
|
console.log(yData1);
|
||||||
|
return {
|
||||||
|
...chartOption,
|
||||||
|
dataset: {
|
||||||
|
source
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons', {
|
||||||
|
renderer: 'svg'
|
||||||
|
});
|
||||||
|
chart.setOption(defaultOption, true);
|
||||||
|
});
|
||||||
|
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart && chart.setOption(getOption(), false);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart?.resize();
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,268 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref();
|
||||||
|
let chart = null;
|
||||||
|
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
||||||
|
const getOption = () => {
|
||||||
|
const chartOption = {
|
||||||
|
title: {
|
||||||
|
text: props.data.options.title || '',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
left: '0',
|
||||||
|
top: '5%'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: props.data?.options?.legend || false,
|
||||||
|
icon: 'circle',
|
||||||
|
top: '5%',
|
||||||
|
right: '5%',
|
||||||
|
itemWidth: 6,
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: props.data?.options?.tooltip || false,
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#000',
|
||||||
|
borderColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowColor: 'rgba(0,0,0,0)',
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
padding: [10, 10],
|
||||||
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: '70%',
|
||||||
|
startAngle: 90,
|
||||||
|
splitNumber: 4,
|
||||||
|
shape: 'circle',
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: ['transparent']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 18,
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
fontWeight: 'normal'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'white' //
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'white' //
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: [
|
||||||
|
{
|
||||||
|
name: '数据1',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据2',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据3',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据4',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据5',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据6',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据7',
|
||||||
|
max: 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据8',
|
||||||
|
max: 88
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '高一(1)班',
|
||||||
|
type: 'radar',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 10,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(245, 166, 35, 0.4)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(245, 166, 35, 1)',
|
||||||
|
borderColor: 'rgba(245, 166, 35, 0.3)',
|
||||||
|
borderWidth: 10
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
type: 'dashed',
|
||||||
|
|
||||||
|
color: 'rgba(245, 166, 35, 1)',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [[80, 50, 55, 80, 50, 80, 48, 43]]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '高一(2)班',
|
||||||
|
type: 'radar',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(19, 173, 255, 1)',
|
||||||
|
borderColor: 'rgba(19, 173, 255, 0.4)',
|
||||||
|
borderWidth: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(19, 173, 255, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(19, 173, 255, 1)',
|
||||||
|
width: 2,
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [[60, 60, 65, 60, 70, 40, 80, 63]]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
let xData = [props.inputData?.x1 || []];
|
||||||
|
let yData = [props.inputData?.y1 || []];
|
||||||
|
console.log(chartOption);
|
||||||
|
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
|
||||||
|
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
|
||||||
|
Array(length).fill(0).forEach((_, i) => {
|
||||||
|
let item = [];
|
||||||
|
xData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
yData.forEach(e => {
|
||||||
|
item.push(e[i]);
|
||||||
|
});
|
||||||
|
source.push(item);
|
||||||
|
});
|
||||||
|
console.log(source);
|
||||||
|
return {
|
||||||
|
...chartOption,
|
||||||
|
dataset: {
|
||||||
|
source
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons', {
|
||||||
|
renderer: 'svg'
|
||||||
|
});
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
});
|
||||||
|
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart && chart.setOption(getOption(), true);
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
chart?.resize();
|
||||||
|
}
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
|
||||||
|
@resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
|
||||||
|
<div style="width: 100%; height: 100%;"
|
||||||
|
:style="{backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder? ` 1px solid ${props.data.options.borderColor}` :''}">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue