Merge branch 'new' of http://www.beijingsoft.cn:9090/r/smart-web into new

yangys

2025-11-18 831cfa4c439c6d073d706a82d2a439f8b1818498

 src/views/mdc/components/process-charts.vue

@@ -1,67 +1,109 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-20 23:37:09
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-12-20 14:56:14
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
    <div ref="processCharts" style="width: 100%;height:32px;" id="record"></div>
    <div ref="processCharts" style="width: 100%;height:80px;" id="record"></div>
</template>

<script>
import * as echarts from 'echarts';
import T from '@/components/scEcharts/echarts-theme-T.js';
import moment from 'moment'
export default {
    data() {
        return {
            option: {
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     }
                // },
                tooltip: {
                    trigger: 'axis',
                    position: 'bottom',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: 20,
                    left: 0,
                    right: 0,
                    width: "100%"
                },
                xAxis: {
                    type: 'value',
                    min: 0,
                    max: 24, // 根据需要调整最大值
                    boundaryGap: [0, 0.01], // 留出一点空间
                    interval: 0.05,
                    axisLabel: {
                        show: false,
                        margin: 0
                    },
                    splitLine: {
                        show: false
                    },
                    minorSplitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                    // "type": "value",
                    // "interval": 0.05,
                    // "axisLabel": {

                    // }
                },
                yAxis: {
                    type: 'category',
                    data: ['柱子'],
                    data: [''],
                    show: false
                },
                series: []
            }
        }
    },
    props: ['index','tableData'],
    methods: {

        getTableData(id) {
            this.$HTTP.get(`/api/workinghour/working-process`, {id}).then(res => {
                if (res.code === 200) {
                    if(res.data.length == 0) return;
                    var timeRange = {};
                    timeRange.startTime = res.data[0].startTime;
                    timeRange.endTime = res.data[res.data.length - 1].endTime;
                    var total = Math.abs(moment(timeRange.startTime).diff(moment(timeRange.endTime)));
                    var start = timeRange.startTime;
                    var arr = [];
                    res.data.map((item, i) => {
                        var current = Math.abs(moment(start).diff(moment(item.endTime)))
                        start = item.endTime;
                        //console.log(current / total,'百分比')
                        if(item.deviceStatus == "2") {
                            item.deviceStatusName = "运行";
                            item.color = "#307f45";
                        }else {
                            item.deviceStatusName = "待机";
                            item.color = "#fdff85";
                        }
                        var obj = {name: item.deviceStatusName,type: 'bar',stack: 'total',barWidth: "20px",data: [current / total],itemStyle: {color: item.color},"tooltip": {
                                "trigger": "item",
                                formatter: (value, ticket) => {
                                    return `${item.deviceStatusName}: ${item.startTime} - ${item.endTime}<br />程序名称: ${item.progName}`;
                                }
                        }};
                        arr.push(obj);
                    })
                    this.option.series = arr;
                    var recordDom = this.$refs.processCharts;
                    var myChart = echarts.init(recordDom);
                    myChart.setOption(this.option);
                }
            })
        }
    },
    mounted() {
        // this.option.series = [
        //     {name: '空闲时间',type: 'bar',stack: 'total',itemStyle: {color: '#fdff85'},data: [2]},
        //     {name: '工作时间',type: 'bar',stack: 'total',itemStyle: {color: '#307f45'},data: [3]}
        // ]
        var arr = [];
        for(var i=0;i<24;i++) {
            var obj = {name: '空闲时间',type: 'bar',stack: 'total',itemStyle: {color: '#fdff85'},data: [1]};
            if(Math.random() >= 0.5) {
                obj.itemStyle.color = "#fdff85";
            }else {
                obj.itemStyle.color = "#307f45";
            }
            arr.push(obj)
        }
        this.option.series = arr;
        console.log(this.option.series)
        var recordDom = this.$refs.processCharts;
        var myChart = echarts.init(recordDom);
        myChart.setOption(this.option);
        var id = this.tableData[this.index - 1].id;
        this.getTableData(id);
    },
}
</script>