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 class="alert alert-info" style="margin-bottom: 10px;">{{ weldingTypeText }}，已解析 {{ myData.length }} 条参数记录</div>

            <div ref="vChart" style="width: 100%;height: 500px;"></div>
            <br>
            <br>
            <div ref="iChart" style="width: 100%;height:500px;"></div>
            <br>
            <br>
            <div v-if="showThirdChart" 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>{{ firstMetricName }}{{n}}</th>
                                <th>{{ secondMetricName }}{{n}}</th>
                                <th v-if="showThirdChart">{{ thirdMetricName }}{{n}}</th>
                                <th v-if="!isNewJson">错误码{{n}}</th>
                                <th v-if="!isNewJson">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 v-if="showThirdChart">{{ item['speed' + n] }}</td>
                                <td v-if="!isNewJson">{{ item['code' + n] }}</td>
                                <td v-if="!isNewJson">{{ 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 normalizeContent = (content) => {
        if (!content) return '';
        let text = unescapeHtml(content).trim();
        for (let i = 0; i < 2; i++) {
            if (!text.startsWith('"')) break;
            try {
                const parsed = JSON.parse(text);
                if (typeof parsed !== 'string') break;
                text = parsed.trim();
            } catch (e) {
                break;
            }
        }
        if (text.startsWith('{\\') || text.startsWith('[\\')) {
            text = text.replace(/\\"/g, '"')
                       .replace(/\\\\/g, '\\');
        }
        return text;
    };

    const parseJsonContent = (content) => {
        const text = normalizeContent(content);
        if (!text.startsWith('{')) return null;
        try {
            return JSON.parse(text);
        } catch (e) {
            console.error('解析JSON格式content出错:', e, text);
            return null;
        }
    };

    const getWelderCount = (content) => {
        if (!content || content === '' || content === '[]') return 2;
        try {
            content = normalizeContent(content);
            const json = parseJsonContent(content);
            if (json) {
                const first = json.samples && json.samples.length > 0 ? json.samples[0] : {};
                let count = 0;
                if (first.robot1Current !== undefined || first.robot1Voltage !== undefined || first.robot1Pressure !== undefined) count++;
                if (first.robot2Current !== undefined || first.robot2Voltage !== undefined || first.robot2Pressure !== undefined) count++;
                return count || 2;
            }
            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 convertNewJsonContent = (content) => {
        const json = parseJsonContent(content);
        if (!json) return [];
        const samples = json.samples || [];
        return samples.map(sample => {
            const obj = {};
            obj.V1 = parseFloat(sample.robot1Voltage || 0) || 0;
            obj.I1 = parseFloat(sample.robot1Current || 0) || 0;
            obj.speed1 = parseFloat(sample.robot1Pressure || sample.robot1WeldTime || 0) || 0;
            obj.code1 = 0;
            obj.JOB1 = '';
            obj.V2 = parseFloat(sample.robot2Voltage || 0) || 0;
            obj.I2 = parseFloat(sample.robot2Current || 0) || 0;
            obj.speed2 = parseFloat(sample.robot2Pressure || sample.robot2WeldTime || 0) || 0;
            obj.code2 = 0;
            obj.JOB2 = '';
            obj.createDate = sample.time || '';
            return obj;
        });
    };

    const parseContent = (content) => {
        if (!content || content === '' || content === '[]') return [];
        try {
            content = normalizeContent(content);
            if (parseJsonContent(content)) {
                return convertNewJsonContent(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: ${toJson(mesProductArcWelding.content!'')},
            welderCount: 2,
            vChart: null,
            iChart: null,
            speedChart: null
        },
        computed: {
            myData() {
                return parseContent(this.content);
            },
            contentJson() {
                return parseJsonContent(this.content);
            },
            isNewJson() {
                return !!this.contentJson;
            },
            weldingType() {
                return this.contentJson && this.contentJson.weldingType ? this.contentJson.weldingType : 'old';
            },
            weldingTypeText() {
                if (this.weldingType === 'spot') return '点焊过程参数';
                if (this.weldingType === 'arc') return '弧焊过程参数';
                return '焊接过程参数';
            },
            firstMetricName() {
                return this.weldingType === 'spot' ? '电流' : '电压';
            },
            secondMetricName() {
                return this.weldingType === 'spot' ? '压力' : '电流';
            },
            thirdMetricName() {
                return this.weldingType === 'spot' ? '焊接时间' : '送丝速度';
            },
            showThirdChart() {
                return this.weldingType === 'spot';
            },
            timeArr() {
                if (!this.myData || this.myData.length === 0) return [];
                const arr = [];
                for (let i = 0; i < this.myData.length; i++) {
                    const createDate = this.myData[i].createDate;
                    if (createDate) {
                        arr.push(createDate.length > 14 ? createDate.slice(11) : createDate);
                    }
                }
                return arr;
            },
            vOption() {
                const series = [];
                const legendData = [];
                for (let i = 1; i <= this.welderCount; i++) {
                    legendData.push(this.firstMetricName + i);
                    const arr = [];
                    for (let j = 0; j < this.myData.length; j++) {
                        arr.push(this.myData[j]['V' + i]);
                    }
                    series.push({
                        name: this.firstMetricName + i,
                        type: 'line',
                        data: arr,
                        smooth: true,
                        showSymbol: true,
                        symbolSize: 8
                    });
                }
                return {
                    title: { text: this.firstMetricName + '变化折线图' },
                    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: this.firstMetricName, type: 'value' },
                    series: series
                };
            },
            iOption() {
                const series = [];
                const legendData = [];
                for (let i = 1; i <= this.welderCount; i++) {
                    legendData.push(this.secondMetricName + i);
                    const arr = [];
                    for (let j = 0; j < this.myData.length; j++) {
                        arr.push(this.myData[j]['I' + i]);
                    }
                    series.push({
                        name: this.secondMetricName + i,
                        type: 'line',
                        data: arr,
                        smooth: true,
                        showSymbol: true,
                        symbolSize: 8
                    });
                }
                return {
                    title: { text: this.secondMetricName + '变化折线图' },
                    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: this.secondMetricName, type: 'value' },
                    series: series
                };
            },
            speedOption() {
                const series = [];
                const legendData = [];
                for (let i = 1; i <= this.welderCount; i++) {
                    legendData.push(this.thirdMetricName + i);
                    const arr = [];
                    for (let j = 0; j < this.myData.length; j++) {
                        arr.push(this.myData[j]['speed' + i]);
                    }
                    series.push({
                        name: this.thirdMetricName + i,
                        type: 'line',
                        data: arr,
                        smooth: true,
                        showSymbol: true,
                        symbolSize: 8
                    });
                }
                return {
                    title: { text: this.thirdMetricName + '变化折线图' },
                    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: this.thirdMetricName, type: 'value' },
                    series: series
                };
            }
        },
        watch: {
            myData: {
                handler() {
                    if (this.vChart) {
                        this.welderCount = getWelderCount(this.content);
                        this.vChart.setOption(this.vOption, true);
                        this.iChart.setOption(this.iOption, true);
                        if (this.speedChart) { 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)
                if (this.$refs.speedChart) {
                    this.speedChart = echarts.init(this.$refs.speedChart)
                }
                this.vChart.setOption(this.vOption);
                this.iChart.setOption(this.iOption);
                if (this.speedChart) {
                    this.speedChart.setOption(this.speedOption);
                }
            });
        }
    })
</script>