摆片看板前端代码更新

wu

2025-04-11 f4631f8b19f30fb6c334aefe2bceab52e2e9a63c

 gmms/WebContent/bigScreen/twoglassCut.jsp

@@ -151,10 +151,7 @@
        <div class="search-bar">
            <!-- 产业下拉框 -->
            <select id="industry-select">
                <option value="">选择产业</option>
                <option value="产业1">产业1</option>
                <option value="产业2">产业2</option>
                <option value="产业3">产业3</option>
                <option value="">莱阳厨电</option>
            </select>

            <!-- 产品大类下拉框 -->
@@ -167,10 +164,8 @@

            <!-- 工程下拉框 -->
            <select id="project-select">
                <option value="">选择工厂</option>
                <option value="">莱阳厨电</option>
                <option value="工程1">工程1</option>
                <option value="工程2">工程2</option>
                <option value="工程3">工程3</option>
            </select>

            <!-- 开始日期 -->
@@ -298,6 +293,181 @@
<script src="../js/mixins.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
    Vue.prototype.$echarts = echarts;
    Vue.prototype.$http= axios;
    let app = new Vue({
        el:'#app',
        mixins:[mixin],
        data:{
            shuzu:[{}],
            shuzu1:[{}],
            shuzu2:[{}],
            machineElectric:[{}],
            machineWater:[{}],





            val1: {
                borderColor:'#082352',
                title: {
                    // text: '成品库存',
                    // left: '290px',
                    // top: '0px'
                    text:'合格率',//主标题文本
                    left:'center',
                    top:'45%',
                    left:'50%',
                    textStyle:{
                        color:'#454c5c',
                        align:'center'
                    },
                    subtextStyle:{
                        fontFamily : "微软雅黑",
                        color:'#6c7a89',
                    }

                },

                tooltip: {
                    trigger: 'item',
                    textStyle:{
                    }
                },
                legend: {
                    // orient: 'vertical',
                    left: 'left',
                    textStyle:{

                    }
                },
                textStyle:{

                },
                series: [
                    {

                        type: 'pie',
                        radius : ['40%','70%'],
                        center: ['50%', '50%'],
                        minAngle:'15',
                        label: {
                            // position: 'inside',
                            show: true,
                            formatter(param) {
                                // correct the percentage
                                return param.name + ' (' + param.percent + '%)';
                            }
                        },
                        data: [
                            { value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
                            { value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
                        ],
                        itemStyle: {
                            normal:{
                                label:{
                                    show:true,
                                    //formatter: "{b} :\n  {c} \n ({d}%)",
                                    formatter: "{b} :\n   ({d}%)",
                                    position:"inner"
                                }
                            }
                        }

                    }
                ]
            },

        },
        methods:{

            dingdanxiangqing(){
                let HisArr="";
                // HisArr = this.$echarts.init(document.getElementById('main2'));
                let a = {
                    value: this.shuzu1[0]['6_qualified'],

                    name: "成品",
                    itemStyle: { color: '#53a2ff' },
                    label:{fontSize:30}

                }
                let b = {
                    value: this.shuzu1[0]['7_qualified_not'],
                    name: "次品",
                    itemStyle: { color: 'darkseagreen' },
                    label:{fontSize:30}

                }
                this.val1.title.text="合格率"
                this.val1.title.top="45%"
                this.val1.title.left="45%"
                this.val1.title.textStyle.fontSize=30
                this.val1.series[0].data[0]=a
                this.val1.series[0].data[1]=b


                HisArr.setOption(this.val1);
                this.loading=false
            },
            dingdanxiangqing1(){
                let HisArr="";
                // HisArr = this.$echarts.init(document.getElementById('main4'));
                let a = {
                    value: this.shuzu1[0]['2_smallglass_completed'],

                    name: "已完成",
                    itemStyle: { color: '#53a2ff' },
                    label:{fontSize:30}


                }
                let b = {
                    value: this.shuzu1[0]['3_smallglass_processing'],
                    name: "未完成",
                    itemStyle: { color: 'darkseagreen' },
                    label:{fontSize:30}

                }
                this.val1.title.text="订单加工"
                this.val1.title.top="45%"
                this.val1.title.left="45%"
                this.val1.title.textStyle.fontSize=30
                this.val1.series[0].data[0]=a
                this.val1.series[0].data[1]=b
                HisArr.setOption(this.val1);
                this.loading=false
            },

        },
        watch:{

            shuzu1(){
                // this.dingdanxiangqing(),
                //     this.dingdanxiangqing1()
            }

        },
        async mounted(){

            let sql=""
            let flag=2
            sql="{call AXJ_dapingxianshi_dingdanshuju2('下片')}"
            this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")

            await setInterval(()=>{

                sql="{call AXJ_dapingxianshi_dingdanshuju2('下片')}"
                this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
            },5000)




        }

    })
    // 初始化数据
    const initialData = {
        labels: ['2025-03-30', '2025-03-31', '2025-04-01'],