1

lzhe

2024-04-26 84a124a49844f2e8185acf6491861e4b43fa83c0

1

 src/views/mdc/add-station-status.vue

@@ -164,7 +164,6 @@
                this.getfeedBackStatusList();  //获取状态list
                this.$HTTP.get(`/api/blade-cps/workstation-wcs-feedback/latest?workstationId=${lastLevelId}`).then(res=> {
                    if(res.code == 200) {
                        console.log(res.data);
                        if(res.data == null) {
                            this.isShow = false;
                        }else {

 src/views/mdc/components/recordChartsByDate.vue

ÎļþÃû´Ó src/views/mdc/components/recordCharts.vue ÐÞ¸Ä
@@ -2,37 +2,49 @@
    <div>
        <div id="record" style="width: 100%;height:500px;"></div>
        <div class="pagination">
            <el-pagination layout="prev, pager, next" :total="total" :default-page-size="6"/>
            <el-pagination layout="prev, pager, next" @current-change="recordChange" :total="total" :default-page-size="6"/>
        </div>
        <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
    </div>
</template>

<script>
import saveDialog from '../add-station-status'
import moment from 'moment';
import * as echarts from 'echarts';
export default {
    components: {},
    components: {saveDialog},
    props: ['collectionstatus','date','workstationInfoList'],
    watch: {
        date(val) {
            this.current = "1";
            this.getCharts();
        },
        workstationInfoList(val) {
            this.current = "1";
            this.getCharts();
        }
    },
    data() {
        return {
            dialog: {
                save: false
            },
            current: "1",
            size: "6",
            total: 0,
            records: []
            records: [],
            lastLevelId: ""
        }
    },
    mounted() {
        this.getCharts();
    },
    methods: {
        addfeedbackSuccess() {
            this.current = "1";
            this.getCharts();
        },
        renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
@@ -100,6 +112,7 @@
                        })
                        newData.push(...item.statusRecordList);
                    })
                    this.total = res.data.total;
                    //渲染图表
                    this.setCharts(yAxisData,newData);
                    // æ£€æŸ¥æ˜¯å¦å­˜åœ¨id为'parentNodeDom'的DOM元素,有就先删除
@@ -258,13 +271,22 @@
                    }
                }
                dom.style.left = recordDom.offsetLeft  + "px";  //定位left
                var that = this;
                dom.addEventListener('click', function (event) {
                    console.log(event.target.dataset.code);
                   that.lastLevelId = event.target.dataset.id;
                   that.dialog.save = true
                    that.$nextTick(() => {
                        that.$refs.saveDialog.open('edit').setData(that.lastLevelId);
                    })
                    
                })
                parentNodeDom.appendChild(dom);
            }
        }
        },
        recordChange(current) {
            this.current = current;
            this.getCharts();
        },
    }
}
</script>
@@ -272,7 +294,6 @@
<style scoped>
    #record {
        position: relative;
        margin-bottom: 120px;
    }
    #record /deep/ .domSpan {
        display: inline-block;
@@ -286,4 +307,12 @@
        display: inline-block;
        width: 80px;
    }
    .pagination {
        text-align: right;
        display: flex;
        justify-content: end;
        margin-top: -60px;
        position: relative;
        z-index: 99;
    }
</style>

 src/views/mdc/components/recordChartsByWorkstation.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,211 @@
<template>
    <div>
        <div id="recordwork" style="width: 1000px;height:500px;"></div>
        <div class="paginationwork">
            <el-pagination layout="prev, pager, next" @current-change="recordChange" :total="total" :default-page-size="6"/>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import * as echarts from 'echarts';
export default {
    props: ['collectionstatus','date','workstationInfoList'],
    watch: {
        date(val) {
            this.current = "1";
            this.getCharts();
        },
        workstationInfoList(val) {
            this.current = "1";
            this.getCharts();
        }
    },
    data() {
        return {
            dialog: {
                save: false
            },
            current: "1",
            size: "6",
            total: 0,
            records: []
        }
    },
    mounted() {
        this.getCharts();
    },
    methods: {
        renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            var rectShape = echarts.graphic.clipRectByRect(
                {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                },
                {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }
            );
            return (
                    rectShape && {
                    type: 'rect',
                    transition: ['shape'],
                    shape: rectShape,
                    style: api.style()
                }
            );
        },
        getColor(name) {
            var color = '';
            this.collectionstatus.forEach(item=> {
                if(item.name == name) {
                    color = item.color;
                }
            })
            return color;
        },
        getCharts() {
            var obj = {
                date: this.date,
                humanFeedback: true,
                machineFeedback: true,
                workstationInfoList: this.workstationInfoList
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).then(res => {
                if (res.code === 200) {
                    var yAxisData = [];
                    var newData = [];
                    this.records = res.data.records;
                    res.data.records.reverse();
                    res.data.records.forEach((item,index)=> {
                        yAxisData.push(item.workstationInfo.name);
                        //计算开始时间，显示时间
                        item.statusRecordList.forEach(item1=> {
                            var initstart = item1.startTime.split(" ")[0];  //根据日期计算差值
                            var startTime = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes');
                            var endTime = moment(item1.endTime).diff(moment(initstart + " 00:00:00"), 'minutes');
                            var diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
                            var color = this.getColor(item1.wcsDesc);
                            item1.value = [index,startTime,endTime,diff];
                            item1.itemStyle = {"normal": {"color": color}};
                            item1.code = item.workstationInfo.code;
                            item1.name = item.workstationInfo.name;
                            item1.id = item.workstationInfo.id;
                        })
                        newData.push(...item.statusRecordList);
                    })
                    this.total = res.data.total;
                    //渲染图表
                    this.setCharts(yAxisData,newData);
                }
            })
        },
        setCharts(yAxisData,data) {
            var option = {
                tooltip: {
                    formatter: function (params) {
                        console.log(params)
                    return `<span class="tipdesc">工位</span>${params.data.name}</br>
                            <span class="tipdesc">状态</span>${params.data.wcsDesc}</br>
                            <span class="tipdesc">描述</span>${params.data.feedbackDesc}</br>
                            <span class="tipdesc">状态时间</span>${params.data.startTime} ï½ž ${params.data.endTime}</br>
                            <span class="tipdesc">反馈时间</span>${params.data.feedbackTime}</br>
                            <span class="tipdesc">反馈人</span>${params.data.feedUser}</br>`;
                    }
                },
                grid: {
                    top: 10,
                    left: 70,
                    bottom: 130,
                    right: 0
                },
                xAxis: {
                    min: 0,
                    max: 1440,  // å•ä½åˆ†é’Ÿ
                    interval: 1440/6,  //每隔多少分钟显示一个刻度
                    axisLabel: {
                        formatter: (value)=> {
                            if(value == 0) {
                                return "00:00:00";
                            }else if(value == 240) {
                                return "04:00:00";
                            }else if(value == 480) {
                                return "08:00:00";
                            }else if(value == 720) {
                                return "12:00:00";
                            }else if(value == 960) {
                                return "16:00:00";
                            }else if(value == 1200) {
                                return "18:00:00";
                            }else if(value == 1440) {
                                return "00:00:00";
                            }
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: yAxisData
                },
                series: [
                    {
                    type: 'custom',
                    renderItem: this.renderItem,
                    itemStyle: {
                        opacity: 0.8
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data: data
                    }
                ]
            };
            var recordDom = document.getElementById('recordwork');
            var myChart = echarts.init(recordDom);
            myChart.setOption(option);
        },
        recordChange(current) {
            this.current = current;
            this.getCharts();
        },
    }
}
</script>

<style scoped>
    #recordwork {
        position: relative;
    }
    #recordwork /deep/ .domSpan {
        display: inline-block;
        width: 70px;
        height: 20px;
        /* background: green; */
        position: absolute;
        cursor: pointer;
    }
    #recordwork /deep/ .tipdesc {
        display: inline-block;
        width: 80px;
    }
    .paginationwork {
        text-align: right;
        display: flex;
        justify-content: end;
        margin-top: -60px;
        position: relative;
        z-index: 99;
    }
</style>

 src/views/mdc/status-record.vue

@@ -18,11 +18,11 @@
            </div>
            <div class="footer">
                <el-button @click="query" type="primary">查询</el-button>
                <el-button>导出</el-button>
                <el-button @click="exportData">导出</el-button>
            </div>
        </div>
        <div class="aposcope-right">
            <el-tabs tab-position="top" v-model="activeName" type="card">
            <el-tabs tab-position="top" v-model="activeName" type="card" @tab-change="tabChange">
                <el-tab-pane label="按日期查看" name="shift">
                    <el-button-group>
                        <el-button @click="changeTab(item)" :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id" size="small">{{item.title }}</el-button>
@@ -42,10 +42,40 @@
                    <!-- collectionstatus åé¦ˆçŠ¶æ€
                    date æ—¥æœŸ
                    workstationInfoList å·¥ä½list -->
                    <record-charts :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts>
                    <record-charts-by-date :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts-by-date>
                </el-tab-pane>
                <el-tab-pane label="按工位查看" name="time">
                    æŒ‰å·¥ä½æŸ¥çœ‹
                    <div class="fact-analysis-realtim">
                        <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-show="isshowempty">
                            <div class="wimi-empty-img" style="width: 150px; height: 150px;">
                                <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;">
                            </div>
                            <div class="empty-description">
                                <div>暂无数据</div>
                            </div>
                        </div>
                        <div v-show="!isshowempty">
                            <el-button-group>
                                <el-button @click="changeTabGongwei(item)" :type="btnGongweiListActive == item.id ? 'primary' : ''" v-for="item in btnGongweiList" :key="item.id" size="small">{{item.name }}</el-button>
                            </el-button-group>
                            <div class="status">
                                <div class="status-wrap align-left">
                                    <div class="collect-status">采集状态</div>
                                    <div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
                                </div>
                                <div class="status-wrap">
                                    <el-checkbox v-model="checked1" label="人工反馈状态" size="large" />
                                    <div class="status-con">
                                        <div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- collectionstatus åé¦ˆçŠ¶æ€
                            date æ—¥æœŸ
                            workstationInfoList å·¥ä½list -->
                            <record-charts-by-workstation :collectionstatus="collectionstatus" :date="date" :workstationInfoList="workstationInfoList" v-if="collectionstatus.length != 0"></record-charts-by-workstation>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
@@ -55,12 +85,14 @@
<script>
import moment from 'moment';
import MYTree from './MYTree.vue';
import recordCharts from './components/recordCharts.vue';
import recordChartsByDate from './components/recordChartsByDate.vue';
import recordChartsByWorkstation from './components/recordChartsByWorkstation.vue';
export default {
    components: {
        time: "",
        MYTree,
        recordCharts
        recordChartsByDate,
        recordChartsByWorkstation
    },
    watch: {
        treeChecked(select) {
@@ -73,12 +105,15 @@
    },
    data() {
        return {
            isshowempty: true,
            select: [],
            workstationInfoList: [],
            date: "",
            checked1: true,
            btnListActive: '',
            btnGongweiListActive: "",
            btnList: [],
            btnGongweiList: [],
            timeBtn: "",
            shortcuts: [
                {
@@ -124,9 +159,31 @@
        this.init();
    },
    methods: {
        tabChange(val) {
            if(val == "time") {  //按工位查看

            }else if(val == "shift") {  //按日期查看

            }
        },
        exportData() {  //导出
            var obj = {
                endTime: this.time[1],
                startTime: this.time[0],
                workstationInfoList: this.workstationInfoList
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/excel/export`,obj).then(res=> {
                if(res.code == 200) {
                    window.open(res.data.link);
                }
            })
        },
        changeTab(item) {
            this.btnListActive = item.id;
            this.date = item.id;
        },
        changeTabGongwei(item) {  //按工位查询

        },
        getachievements() { //班次状态记录采集状态
            this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
@@ -177,6 +234,11 @@
        query() {
            this.getTime({endDate: this.time[1],startDate: this.time[0],statisticalMethod: 'SHIFT'});
            this.workstationInfoList = this.select;
            if(this.select.length != 0) {  //选了值显示工位
                this.btnGongweiList = this.select;
                this.btnGongweiListActive = this.btnGongweiList[0].id;
                this.isshowempty = false;
            }
        }
    }
}
@@ -284,9 +346,32 @@
    .status-wrap /deep/ .el-checkbox.el-checkbox--large {
        color: #3b8e8e;
    }
    .pagination {
        text-align: right;
    .fact-analysis-realtim {
        display: flex;
        justify-content: end;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        box-sizing: border-box;
        background: #fff;
        height: 500px;
    }
    .wimi-empty {
        height: 100%;
        width: 100%;
        display: flex;
        border-radius: 2px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .empty-description {
        margin-bottom: 20px;
        font-size: 14px;
        color: #5e6d82;
        margin-top: -16px;
        line-height: 28px;
    }
</style>