From daf973c416b5acbf2d6b04641a2e3821d0ff083e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Thu, 8 May 2025 15:10:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E6=80=81=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/views/boardGenerate/construction.vue | 28 +- src/views/boardGenerate/index.vue | 913 +++++++----------- .../boardGenerate/nodes/board/barNode.vue | 224 +++++ .../boardGenerate/nodes/board/curveNode.vue | 231 +++++ .../nodes/board/customBoardNode.vue | 2 +- .../boardGenerate/nodes/board/lineNode.vue | 263 ++--- .../nodes/board/multiBarsNode.vue | 234 +++++ .../nodes/board/multiCurvesNode.vue | 241 +++++ .../nodes/board/multiLinesNode.vue | 241 +++++ .../nodes/data/customDataNode.vue | 9 +- .../boardGenerate/nodes/data/dataNode.vue | 8 +- .../boardGenerate/nodes/form/imgNode.vue | 62 ++ .../boardGenerate/nodes/form/inputNode.vue | 2 +- .../boardGenerate/nodes/form/mapNode.vue | 7 +- .../boardGenerate/nodes/form/textNode.vue | 62 ++ .../boardGenerate/nodes/form/timeNode.vue | 2 +- .../boardGenerate/nodes/other/areaNode.vue | 15 +- src/views/boardGenerate/tool.js | 14 +- src/views/boardGenerate/view.vue | 538 +---------- src/views/dms/dmsBillsFaultInstance/copy.vue | 2 +- src/views/dms/dmsBillsFaultInstance/index.vue | 2 +- 22 files changed, 1886 insertions(+), 1216 deletions(-) create mode 100644 src/views/boardGenerate/nodes/board/barNode.vue create mode 100644 src/views/boardGenerate/nodes/board/curveNode.vue create mode 100644 src/views/boardGenerate/nodes/board/multiBarsNode.vue create mode 100644 src/views/boardGenerate/nodes/board/multiCurvesNode.vue create mode 100644 src/views/boardGenerate/nodes/board/multiLinesNode.vue create mode 100644 src/views/boardGenerate/nodes/form/imgNode.vue create mode 100644 src/views/boardGenerate/nodes/form/textNode.vue diff --git a/package.json b/package.json index 1e58e74..f50e11b 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "diagram-js": "12.3.0", "didi": "9.0.2", "echarts": "5.5.0", - "element-plus": "2.7.8", + "element-plus": "2.9.0", "file-saver": "2.0.5", "fuse.js": "7.0.0", "highlight.js": "11.9.0", diff --git a/src/views/boardGenerate/construction.vue b/src/views/boardGenerate/construction.vue index deb5d29..e1e474e 100644 --- a/src/views/boardGenerate/construction.vue +++ b/src/views/boardGenerate/construction.vue @@ -197,18 +197,18 @@ const findTier = () => { params[item.name] = item.test; }); - axios.request({ - method: constructionDataForm.value.method, - url: constructionDataForm.value.url, - params: constructionDataForm.value.method === 'get' ? params : '', - data: constructionDataForm.value.method === 'post' ? params : '' - }).then(res => { - // request({ - // method: constructionDataForm.value.method, - // url: constructionDataForm.value.url, - // params: constructionDataForm.value.method === 'get' ? params : '', - // data: constructionDataForm.value.method === 'post' ? params : '' - // }).then(res => { + // axios.request({ + // method: constructionDataForm.value.method, + // url: constructionDataForm.value.url, + // params: constructionDataForm.value.method === 'get' ? params : '', + // data: constructionDataForm.value.method === 'post' ? params : '' + // }).then(res => { + request({ + method: constructionDataForm.value.method, + url: constructionDataForm.value.url, + params: constructionDataForm.value.method === 'get' ? params : '', + data: constructionDataForm.value.method === 'post' ? params : '' + }).then(res => { let data = res.data; if (data.data) { Object.keys(data.data?.[0]).forEach(key => { @@ -223,7 +223,7 @@ const findTier = () => { constructionDataForm.value.outputData.push({ name: key, remark: comparisonTable[key], - tier: `data,map%${key}` + tier: `rows,map%${key}` }); }); } else { @@ -234,7 +234,7 @@ const findTier = () => { constructionDataForm.value.outputData.push({ name: key, remark: comparisonTable[key], - tier: `data,${key}` + tier: `${key}` }); } } diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue index 338dfbd..65db562 100644 --- a/src/views/boardGenerate/index.vue +++ b/src/views/boardGenerate/index.vue @@ -10,6 +10,46 @@ 折线 + + + 多折线 + + + + 曲线 + + + + 多曲线 + + + + 柱状图 + + + + 多柱状图 + @@ -49,6 +89,14 @@ 映射 + + + 文字 + @@ -65,51 +113,97 @@ 时间 + + + 图片 +
- - +
+ {{ pageTitle }} +
+ 页面配置 + 保存 + 清空 +
+
+
+ + - - - - - - - - - + + + + + + + + + + + + + + + + +
@@ -146,26 +240,100 @@ 添加映射 + + + + + + + + + + + + + + + + + + + + + + - {{ nodes }} -
- --- -
- {{ edges }}
+ + + + + + X + + + + + + + + + + + + + + diff --git a/src/views/boardGenerate/nodes/board/barNode.vue b/src/views/boardGenerate/nodes/board/barNode.vue new file mode 100644 index 0000000..27856c2 --- /dev/null +++ b/src/views/boardGenerate/nodes/board/barNode.vue @@ -0,0 +1,224 @@ + + + diff --git a/src/views/boardGenerate/nodes/board/curveNode.vue b/src/views/boardGenerate/nodes/board/curveNode.vue new file mode 100644 index 0000000..5ba4369 --- /dev/null +++ b/src/views/boardGenerate/nodes/board/curveNode.vue @@ -0,0 +1,231 @@ + + + diff --git a/src/views/boardGenerate/nodes/board/customBoardNode.vue b/src/views/boardGenerate/nodes/board/customBoardNode.vue index 8fe49c2..87728dd 100644 --- a/src/views/boardGenerate/nodes/board/customBoardNode.vue +++ b/src/views/boardGenerate/nodes/board/customBoardNode.vue @@ -220,7 +220,7 @@ onMounted(() => { chart = echarts.init(chartRef.value, 'macarons'); chart.setOption(getOption(), true); }); -watch(() => props.inputData, () => { +watch(() => JSON.parse(JSON.stringify(props.inputData)), () => { chart.setOption(getOption(), true); }, { deep: true }); diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue index 15b23aa..0c23b55 100644 --- a/src/views/boardGenerate/nodes/board/lineNode.vue +++ b/src/views/boardGenerate/nodes/board/lineNode.vue @@ -49,145 +49,145 @@ const props = defineProps({ const chartRef = ref(); let chart = null; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; -const chartOption = { - title: { - text: '设备运行数量', - textStyle: { - fontSize: 12, - fontWeight: 400, - color: '#fff' - }, - left: '0', - top: '5%' - }, - legend: { - icon: 'circle', - top: '5%', - right: '5%', - itemWidth: 6, - itemGap: 20, - textStyle: { - color: '#fff' - } - }, - tooltip: { - trigger: 'axis', - axisPointer: { - label: { - show: true, - backgroundColor: '#fff', - color: '#000', - borderColor: 'rgba(0,0,0,0)', - shadowColor: 'rgba(0,0,0,0)', - shadowOffsetY: 0 +const getOption = () => { + const chartOption = { + title: { + text: props.data.options.title || '设备运行数量', + textStyle: { + fontSize: 12, + fontWeight: 400, + color: '#fff' }, - lineStyle: { - width: 0 + left: '0', + top: '5%' + }, + legend: { + icon: 'circle', + top: '5%', + right: '5%', + itemWidth: 6, + itemGap: 20, + textStyle: { + color: '#fff' } }, - 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%' - }, - xAxis: [ - { - type: 'category', - axisLine: { - lineStyle: { - color: '#DCE2E8' - } - }, - axisTick: { - show: true - }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff' - }, - // 默认x轴字体大小 - fontSize: 12, - // margin:文字到x轴的距离 - margin: 3 - }, + tooltip: { + trigger: 'axis', axisPointer: { label: { - padding: [0, 0, 0, 0], - margin: 0, - // 移入时的字体大小 - fontSize: 12 - } - }, - boundaryGap: true - } - ], - yAxis: [ - { - type: 'value', - axisTick: { - show: false - }, - axisLine: { - show: true, + show: true, + backgroundColor: '#fff', + color: '#000', + borderColor: 'rgba(0,0,0,0)', + shadowColor: 'rgba(0,0,0,0)', + shadowOffsetY: 0 + }, lineStyle: { - color: '#fff' + width: 0 } }, - axisLabel: { - textStyle: { - color: '#fff' - } + backgroundColor: '#fff', + textStyle: { + color: '#000' }, - splitLine: { - show: false - } - } - ], - series: [ - { - type: 'line', - symbolSize: 1, - symbol: 'circle', - smooth: true, - yAxisIndex: 0, - showSymbol: false, - lineStyle: { - width: 1, - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ - { - offset: 0, - color: '#9effff' - }, - { - offset: 1, - color: '#9E87FF' + padding: [10, 10], + extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)' + }, + grid: { + top: '30%', + bottom: '10%' + }, + xAxis: [ + { + type: 'category', + axisLine: { + lineStyle: { + color: '#DCE2E8' } - ]), - shadowColor: 'rgba(158,135,255, 0.3)', - shadowBlur: 10, - shadowOffsetY: 20 - }, - itemStyle: { - normal: { - color: colorList[0], - borderColor: colorList[0] + }, + axisTick: { + show: true + }, + axisLabel: { + interval: 0, + textStyle: { + color: '#fff' + }, + // 默认x轴字体大小 + fontSize: 12, + // margin:文字到x轴的距离 + margin: 3 + }, + axisPointer: { + label: { + padding: [0, 0, 0, 0], + margin: 0, + // 移入时的字体大小 + fontSize: 12 + } + }, + boundaryGap: true + } + ], + yAxis: [ + { + type: 'value', + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff' + } + }, + axisLabel: { + textStyle: { + color: '#fff' + } + }, + splitLine: { + show: false } } - } - ] -}; -const getOption = () => { + ], + series: [ + { + 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] + } + } + } + ] + }; let xData = [props.inputData?.x1 || []]; let yData = [props.inputData?.y1 || []]; let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length)); - let source = [['product', '数量']]; + let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]]; Array(length).fill(0).forEach((_, i) => { let item = []; xData.forEach(e => { @@ -199,18 +199,23 @@ const getOption = () => { source.push(item); }); return { + ...chartOption, dataset: { source } }; }; onMounted(() => { - chart = echarts.init(chartRef.value, 'macarons'); - chart.setOption(chartOption, true); + chart = echarts.init(chartRef.value, 'macarons', { + renderer: 'svg' // 使用 SVG 渲染器 + }); + chart.setOption(getOption(), true); }); -watch(() => props.inputData, () => { - chart && chart.setOption(getOption(), false); -}, { deep: 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 }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize(); diff --git a/src/views/boardGenerate/nodes/board/multiBarsNode.vue b/src/views/boardGenerate/nodes/board/multiBarsNode.vue new file mode 100644 index 0000000..8086462 --- /dev/null +++ b/src/views/boardGenerate/nodes/board/multiBarsNode.vue @@ -0,0 +1,234 @@ + + + diff --git a/src/views/boardGenerate/nodes/board/multiCurvesNode.vue b/src/views/boardGenerate/nodes/board/multiCurvesNode.vue new file mode 100644 index 0000000..3a693be --- /dev/null +++ b/src/views/boardGenerate/nodes/board/multiCurvesNode.vue @@ -0,0 +1,241 @@ + + + diff --git a/src/views/boardGenerate/nodes/board/multiLinesNode.vue b/src/views/boardGenerate/nodes/board/multiLinesNode.vue new file mode 100644 index 0000000..3faa5e8 --- /dev/null +++ b/src/views/boardGenerate/nodes/board/multiLinesNode.vue @@ -0,0 +1,241 @@ + + + diff --git a/src/views/boardGenerate/nodes/data/customDataNode.vue b/src/views/boardGenerate/nodes/data/customDataNode.vue index 9c97619..cdbcdc1 100644 --- a/src/views/boardGenerate/nodes/data/customDataNode.vue +++ b/src/views/boardGenerate/nodes/data/customDataNode.vue @@ -21,6 +21,7 @@ import { NodeResizer } from '@vue-flow/node-resizer'; import { Connection } from '@element-plus/icons-vue'; import { Handle, Position } from '@vue-flow/core'; import axios from 'axios'; +import request from '@/utils/request.js'; const props = defineProps({ isView: { @@ -82,12 +83,18 @@ const getOutputData = () => { (props.data.customData.inputData || []).forEach((item) => { params[item.name] = props.inputData[item.name]; }); - axios.request({ + request({ method: props.data.customData.method, url: props.data.customData.url, params: props.data.customData.method === 'get' ? params : '', data: props.data.customData.method === 'post' ? params : '' }).then(res => { + // axios.request({ + // method: props.data.customData.method, + // url: props.data.customData.url, + // params: props.data.customData.method === 'get' ? params : '', + // data: props.data.customData.method === 'post' ? params : '' + // }).then(res => { let output = {}; props.data.customData.outputData.forEach(item => { output[item.name] = parseData(res.data, item.tier); diff --git a/src/views/boardGenerate/nodes/data/dataNode.vue b/src/views/boardGenerate/nodes/data/dataNode.vue index 0ed5f9b..30bcab0 100644 --- a/src/views/boardGenerate/nodes/data/dataNode.vue +++ b/src/views/boardGenerate/nodes/data/dataNode.vue @@ -21,6 +21,7 @@ import { NodeResizer } from '@vue-flow/node-resizer'; import { Connection } from '@element-plus/icons-vue'; import { Handle, Position } from '@vue-flow/core'; import axios from 'axios'; +import request from '@/utils/request.js'; const props = defineProps({ isView: { @@ -57,11 +58,16 @@ const service = axios.create({ timeout: 10000 }); const getOutputData = () => { - service({ + request({ method: 'post', url: '/test/getDevice', data: props.inputData }).then(res => { + // service({ + // method: 'post', + // url: '/test/getDevice', + // data: props.inputData + // }).then(res => { props.data.outputData = { time: res.data?.data?.map(e => e.time), value: res.data?.data?.map(e => e.value) diff --git a/src/views/boardGenerate/nodes/form/imgNode.vue b/src/views/boardGenerate/nodes/form/imgNode.vue new file mode 100644 index 0000000..2ff78f5 --- /dev/null +++ b/src/views/boardGenerate/nodes/form/imgNode.vue @@ -0,0 +1,62 @@ + + + + diff --git a/src/views/boardGenerate/nodes/form/inputNode.vue b/src/views/boardGenerate/nodes/form/inputNode.vue index f4704bc..3e876e8 100644 --- a/src/views/boardGenerate/nodes/form/inputNode.vue +++ b/src/views/boardGenerate/nodes/form/inputNode.vue @@ -47,7 +47,7 @@ const props = defineProps({ } }); -watch(() => input.value, () => { +watch(() => JSON.parse(JSON.stringify(input.value)), () => { if (props.data?.options?.field) { props.data.outputData[props.data.options.field] = input.value; } diff --git a/src/views/boardGenerate/nodes/form/mapNode.vue b/src/views/boardGenerate/nodes/form/mapNode.vue index 17c5f5a..dbc61f7 100644 --- a/src/views/boardGenerate/nodes/form/mapNode.vue +++ b/src/views/boardGenerate/nodes/form/mapNode.vue @@ -65,7 +65,12 @@ const convertData = () => { }); props.data.outputData = res; }; -watch(() => props.inputData, (obj1, obj2) => { +watch(() => JSON.parse(JSON.stringify(props.inputData)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + convertData(); + } +}, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.data.options.dataMap)), (obj1, obj2) => { if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { convertData(); } diff --git a/src/views/boardGenerate/nodes/form/textNode.vue b/src/views/boardGenerate/nodes/form/textNode.vue new file mode 100644 index 0000000..48ee684 --- /dev/null +++ b/src/views/boardGenerate/nodes/form/textNode.vue @@ -0,0 +1,62 @@ + + + + diff --git a/src/views/boardGenerate/nodes/form/timeNode.vue b/src/views/boardGenerate/nodes/form/timeNode.vue index 8c3bce6..2898c01 100644 --- a/src/views/boardGenerate/nodes/form/timeNode.vue +++ b/src/views/boardGenerate/nodes/form/timeNode.vue @@ -56,7 +56,7 @@ const props = defineProps({ } }); -watch(() => value.value, () => { +watch(() => JSON.parse(JSON.stringify(value.value)), () => { if (props.data?.options?.startTimeId) { props.data.outputData[props.data.options.startTimeId || 'startTime'] = value.value?.[0]; } diff --git a/src/views/boardGenerate/nodes/other/areaNode.vue b/src/views/boardGenerate/nodes/other/areaNode.vue index 8010033..54c6ed8 100644 --- a/src/views/boardGenerate/nodes/other/areaNode.vue +++ b/src/views/boardGenerate/nodes/other/areaNode.vue @@ -1,7 +1,8 @@ @@ -9,8 +10,16 @@ diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js index f5d57c4..b789091 100644 --- a/src/views/boardGenerate/tool.js +++ b/src/views/boardGenerate/tool.js @@ -9,8 +9,12 @@ const getId = (type) => { const getOption = (e) => { - if (e === 'line') { - return {}; + if (e === 'line' || e === 'multiLines') { + return { title: '', yNames: [] }; + } else if (e === 'bar' || e === 'multiBars') { + return { title: '', yNames: [] }; + } else if (e === 'curve' || e === 'multiCurves') { + return { title: '', yNames: [] }; } else if (e === 'data') { return {}; } else if (e === 'map') { @@ -21,6 +25,10 @@ const getOption = (e) => { return { startTimeId: 'startTime', endTimeId: 'endTime' }; } else if (e === 'customBoard') { return { option: '', xData: [], yData: [], yName: [] }; + } else if (e === 'text') { + return { text: '文字', align: '', color: '#fff' }; + } else if (e === 'img') { + return { imgSrc: '' }; } else { return {}; } @@ -71,7 +79,7 @@ const tool = () => { type: nodeType.value, dimensions, position, - data: { label: nodeId, options: getOption(nodeType.value), outputData: {}, customData: customData.value } + data: { options: getOption(nodeType.value), outputData: {}, customData: customData.value } }; diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue index 3a13fc5..0070528 100644 --- a/src/views/boardGenerate/view.vue +++ b/src/views/boardGenerate/view.vue @@ -1,5 +1,6 @@