mescloud/src/main/resources/views/modules/mes/mesProductArcWeldingInfo.html

<% layout('/layouts/default.html', {title: '弧焊过程参数管理', libs: ['validate']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box-header with-border">
            <div class="box-title">
                <i class="fa icon-note"></i> ${text(mesProductArcWelding.isNewRecord ? '新增弧焊过程参数管理' : '弧焊过程参数管理详情')}
            </div>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
            </div>
        </div>


        <div id="app">

            <div ref="vChart" style="width: 100%;height: 500px;"></div>
            <br>
            <br>
            <div ref="iChart" style="width: 100%;height:500px;"></div>
            <br>
            <br>
            <div ref="speedChart" style="width: 100%;height:500px;"></div>
            <br>
            <br>
            <div class="col-sm-12">
                <table class="table table-bordered" style="table-layout: fixed;white-space: normal;">
                    <thead>
                        <tr>
                            <template v-for="n in welderCount">
                                <th>电压{{n}}</th>
                                <th>电流{{n}}</th>
                                <th>送丝速度{{n}}</th>
                                <th>错误码{{n}}</th>
                                <th>JOB号{{n}}</th>
                            </template>
                            <th>记录时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in myData" :key="index">
                            <template v-for="n in welderCount">
                                <td>{{ item['V' + n] }}</td>
                                <td>{{ item['I' + n] }}</td>
                                <td>{{ item['speed' + n] }}</td>
                                <td>{{ item['code' + n] }}</td>
                                <td>{{ item['JOB' + n] }}</td>
                            </template>
                            <td>{{ item.createDate }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>


        <div class="box-footer">
            <div class="row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-sm btn-default" id="btnCancel"
                            onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>
<% } %>
<script>
    $("#inputForm").validate({
        submitHandler: function (form) {
            js.ajaxSubmitForm($(form), function (data) {
                js.showMessage(data.message);
                if (data.result == Global.TRUE) {
                    js.closeCurrentTabPage(function (contentWindow) {
                        contentWindow.page();
                    });
                }
            }, "json");
        }
    });
</script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script src="${ctxStatic}/common/elementui2.15.5/vue-2.6.14.js"></script>
<script>
    const convertToArrayOfObjects = (arr, welderCount) => {
        return arr.map(str => {
            const values = str.split('|');
            const obj = {};
            for (let i = 0; i < welderCount; i++) {
                const baseIndex = i * 5;
                if (baseIndex + 4 >= values.length) break;
                obj['V' + (i + 1)] = parseFloat(values[baseIndex]) || 0;
                obj['I' + (i + 1)] = parseFloat(values[baseIndex + 1]) || 0;
                obj['speed' + (i + 1)] = parseFloat(values[baseIndex + 2]) || 0;
                obj['code' + (i + 1)] = parseInt(values[baseIndex + 3], 10) || 0;
                obj['JOB' + (i + 1)] = parseInt(values[baseIndex + 4], 10) || 0;
            }
            obj.createDate = values[welderCount * 5] || '';
            return obj;
        });
    };

    const unescapeHtml = (str) => {
        if (!str) return str;
        return str.replace(/&quot;/g, '"')
                 .replace(/&amp;/g, '&')
                 .replace(/&lt;/g, '<')
                 .replace(/&gt;/g, '>')
                 .replace(/&#39;/g, "'")
                 .replace(/&nbsp;/g, ' ');
    };

    const getWelderCount = (content) => {
        if (!content || content === '' || content === '[]') return 2;
        try {
            content = unescapeHtml(content);
            let strArr;
            if (content.startsWith('[')) {
                strArr = JSON.parse(content);
            } else if (content.startsWith('"')) {
                strArr = JSON.parse(content);
            } else {
                strArr = content.slice(2, -2).split('","');
            }
            if (!strArr || strArr.length === 0 || !strArr[0]) return 2;
            const firstRecord = strArr[0];
            const values = firstRecord.split('|');
            const fieldCount = values.length - 1;
            return Math.floor(fieldCount / 5) || 2;
        } catch (e) {
            console.error('解析焊机数量出错:', e);
            return 2;
        }
    };

    const parseContent = (content) => {
        if (!content || content === '' || content === '[]') return [];
        try {
            content = unescapeHtml(content);
            let strArr;
            if (content.startsWith('[')) {
                strArr = JSON.parse(content);
            } else if (content.startsWith('"')) {
                strArr = JSON.parse(content);
            } else {
                strArr = content.slice(2, -2).split('","');
            }
            if (!strArr || strArr.length === 0) return [];
            const welderCount = getWelderCount(content);
            return convertToArrayOfObjects(strArr, welderCount);
        } catch (e) {
            console.error('解析content出错:', e, content);
            return [];
        }
    };

    new Vue({
        el: '#app',
        data: {
            content: '${mesProductArcWelding.content!\'\'}',
            welderCount: 2,
            vChart: null,
            iChart: null,
            speedChart: null
        },
        computed: {
            myData() {
                return parseContent(this.content);
            },
            timeArr() {
                if (!this.myData || this.myData.length === 0) return [];
                arr = []
                for (let i = 0; i < this.myData.length; i++) {
                    const {createDate} = this.myData[i]
                    if (createDate) {
                        arr.push(createDate.slice(14))
                    }
                }
                return arr
            },
            vOption() {
                const series = [];
                const legendData = [];
                for (let i = 1; i <= this.welderCount; i++) {
                    legendData.push('电压' + i);
                    const arr = [];
                    for (let j = 0; j < this.myData.length; j++) {
                        arr.push(this.myData[j]['V' + i]);
                    }
                    series.push({
                        name: '电压' + i,
                        type: 'line',
                        data: arr,
                        smooth: true
                    });
                }
                let option = {
                    title: {
                        text: '电压变化折线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: '时间',
                        boundaryGap: false,
                        data: this.timeArr
                    },
                    yAxis: {
                        name: "电压",
                        type: 'value'
                    },
                    series: series
                };
                return option
            },
            iOption() {
                const series = [];
                const legendData = [];
                for (let i = 1; i <= this.welderCount; i++) {
                    legendData.push('电流' + i);
                    const arr = [];
                    for (let j = 0; j < this.myData.length; j++) {
                        arr.push(this.myData[j]['I' + i]);
                    }
                    series.push({
                        name: '电流' + i,
                        type: 'line',
                        data: arr,
                        smooth: true
                    });
                }
                let option = {
                    title: {
                        text: '电流变化折线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: '时间',
                        boundaryGap: false,
                        data: this.timeArr,

                    },
                    yAxis: {
                        name: "电流",
                        type: 'value'
                    },
                    series: series
                };
                return option
            },
            speedOption() {
                const series = [];
                const legendData = [];
                for (let i = 1; i <= this.welderCount; i++) {
                    legendData.push('送丝速度' + i);
                    const arr = [];
                    for (let j = 0; j < this.myData.length; j++) {
                        arr.push(this.myData[j]['speed' + i]);
                    }
                    series.push({
                        name: '送丝速度' + i,
                        type: 'line',
                        data: arr,
                        smooth: true
                    });
                }
                let option = {
                    title: {
                        text: '送丝速度变化折线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name: '时间',
                        boundaryGap: false,
                        data: this.timeArr,

                    },
                    yAxis: {
                        name: "速度",
                        type: 'value'
                    },
                    series: series
                };
                return option
            }
        },

        watch: {
            myData: {
                handler() {
                    if (this.vChart) {
                        this.welderCount = getWelderCount(this.content);
                        this.vChart.setOption(this.vOption, true);
                        this.iChart.setOption(this.iOption, true);
                        this.speedChart.setOption(this.speedOption, true);
                    }
                },
                deep: true
            }
        },

        mounted() {
            if (this.content && this.content !== '' && this.content !== '[]') {
                this.welderCount = getWelderCount(this.content);
            }
            this.$nextTick(() => {
                this.vChart = echarts.init(this.$refs.vChart)
                this.iChart = echarts.init(this.$refs.iChart)
                this.speedChart = echarts.init(this.$refs.speedChart)
                this.vChart.setOption(this.vOption);
                this.iChart.setOption(this.iOption);
                this.speedChart.setOption(this.speedOption);
            });
        }
    })
</script>