安东尼奥发货看板显示数据定时刷新，列字段间距修改、每页显示15条数据

yxj

2023-12-27 81805eb1249693619efc9fa4a3efcea26444f8cb

 GlobalSituation3.html

@@ -19,7 +19,7 @@
    <script src="js/jquery.qrcode.min.js"></script>
    <script src="js/webConfig.js"></script>
    <style>
     

        body {
            padding: 0px;
            font-family: KaiTi;
@@ -28,7 +28,7 @@
        }

        .bj {
            background: url(../KanBanUI/img/bj3.jpg) no-repeat center center; /*加载背景图：图片地址 不平铺 */
            background: url(../KanBanUI/img/bj4.jpg) no-repeat center center; /*加载背景图：图片地址 不平铺 */
            background-size: cover; /*让背景图基于容器大小伸缩 */
            background-attachment: fixed;
            height: 100%;
@@ -49,7 +49,7 @@
        }

        .col2-1-p {
           padding-right:2%;
            padding-right: 2%;
            width: 50%;
            height: 100%;
            /*background-color: #0d5974;*/
@@ -92,25 +92,128 @@
                    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
                    text-shadow: 0 0 0px #00c6ff;
                }

        .tr1 {
            height: 1000px;
            /*background-color: #e5b2b26b;*/
            width: 22%;
            float: left;
        }

        .tr1-k {
            height: 1000px;
            /*background-color: #e5b1b26b;*/
            width: 5.5%;
            float: left;
        }
      

        .tr1-1 {
            height: 28%;
            /*background-color: #e5c6b26b;*/
            width: 94.5%;
            float: left;
            color: aqua;
        }

        .tr1-1-k {
            height: 38%;
            width: 100%;
            /*background-color: #cc9393ad;*/
        }

        .tr1-1-cen {
            height: 18%;
            width: 100%;
            /*background-color: #cc9223ad;*/
        }

        .tr1-1-cenk {
            height: 100%;
            width: 10%;
            /*background-color: #9d202099;*/
            float: left;
        }

        .tr1-1-cen-left {
            height: 100%;
            width: 39%;
            /*background-color: #9d909099;*/
            float: left;
        }

            .tr1-1-cen-left p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-1-cen-right {
            height: 100%;
            width: 35%;
            /*background-color: #9d329099;*/
            float: left;
        }

            .tr1-1-cen-right p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-1-cen-k {
            height: 14%;
            width: 100%;
            /*background-color: #cc9393ad;*/
        }

        .tr1-1-btm {
            height: 30%;
            width: 100%;
            /*background-color: #9d909099;*/
            float: left;
        }

        .tr1-1-btm-k {
            height: 100%;
            width: 10%;
            /*background-color: #9d909099;*/
            float: left;
        }

        .tr1-1-btm-left {
            height: 100%;
            width: 37%;
            /*background-color: #9d303099;*/
            float: left;
        }

            .tr1-1-btm-left p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-1-btm-right {
            height: 100%;
            width: 42%;
            /*background-color: #9d909099;*/
            float: left;
        }

            .tr1-1-btm-right p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-2 {
            height: 23%;
            /*background-color: #dd9393ad;*/
@@ -118,39 +221,59 @@
            float: left;
            color: aqua;
        }

        .tr1-2-k {
            height: 34%;
            height: 38%;
            width: 100%;
            /*background-color: #cc9393ad;*/
        }

        .tr1-2-cen {
            height: 20%;
            height: 18%;
            width: 100%;
            /*background-color: #cc9223ad;*/
        }

        .tr1-2-cenk {
            height: 100%;
            width: 10%;
            width: 5%;
            /*background-color: #9d202099;*/
            float: left;
        }

        .tr1-2-cen-left {
            height: 100%;
            width: 39%;
            width: 30%;
            /*background-color: #9d909099;*/
            float: left;
        }

            .tr1-2-cen-left p {
                text-align:center;
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-2-cen-cen {
            height: 100%;
            width: 30%;
            /*background-color: #9d909099;*/
            float: left;
        }

            .tr1-2-cen-cen p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-2-cen-right {
            height: 100%;
            width: 35%;
            width: 30%;
            /*background-color: #9d329099;*/
            float: left;
        }
@@ -162,32 +285,51 @@
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-2-cen-k {
            height: 21%;
            height: 22%;
            width: 100%;
            /*background-color: #cc9393ad;*/
        }

        .tr1-2-btm {
            height: 27%;
            height: 22%;
            width: 100%;
            /*background-color: #9d909099;*/
            float: left;
        }

        .tr1-2-btm-k {
            height: 100%;
            width: 10%;
            width: 5%;
            /*background-color: #9d909099;*/
            float: left;
        }

        .tr1-2-btm-left {
            height: 100%;
            width: 37%;
            width: 30%;
            /*background-color: #9d303099;*/
            float: left;
        }

            .tr1-2-btm-left p {
                text-align:center;
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-2-btm-cen {
            height: 100%;
            width: 30%;
            /*background-color: #9d303099;*/
            float: left;
        }

            .tr1-2-btm-cen p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
@@ -196,18 +338,19 @@

        .tr1-2-btm-right {
            height: 100%;
            width: 42%;
            width: 30%;
            /*background-color: #9d909099;*/
            float: left;
        }

        .tr1-2-btm-right p {
            text-align:center;
            font-size: 30px;
            height: 100%;
            width: 100%;
            /*background-color: #9d909099;*/
        }
            .tr1-2-btm-right p {
                text-align: center;
                font-size: 30px;
                height: 100%;
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr1-3 {
            margin-left: 2%;
            height: 20%;
@@ -215,6 +358,7 @@
            width: 90.5%;
            float: left;
        }

        .tr1-4 {
            margin-left: 2%;
            margin-top: 9%;
@@ -223,58 +367,68 @@
            width: 88%;
            float: left;
        }

        .tr2 {
            height: 966px;
            /*background-color: #7e7474a3;*/
            width: 56%;
            float: left;
        }

        .tr2-k {
            height: 12%;
            /*background-color: #7e3374a3;*/
            width: 100%;
        }

        .tr2-1 {
            height: 14%;
            /*background-color: #7e3323a3;*/
            width: 100%;
        }

        .tr2-1-k {
            height: 100%;
            /*background-color: #7e6623a3;*/
            width: 8%;
            float:left;
            float: left;
        }

        .tr2-1-1 {
            height: 100%;
            /*background-color: #7e8426c3;*/
            width: 9%;
            float: left;
        }

        .tr2-1-1-k {
            height: 100%;
            /*background-color: #7e6623a3;*/
            width: 13.5%;
            float: left;
        }

        .tr2-1-2 {
            height: 100%;
            /*background-color: #7e8426c3;*/
            width: 9%;
            float: left;
        }

        .tr2-1-2-k {
            height: 100%;
            /*background-color: #7e6623a3;*/
            width: 14%;
            float: left;
        }

        .tr2-1-3 {
            height: 100%;
            /*background-color: #7e8426c3;*/
            width: 9%;
            float: left;
        }

        .tr2-1-3-k {
            height: 100%;
            /*background-color: #7e6623a3;*/
@@ -288,39 +442,46 @@
            width: 9%;
            float: left;
        }

        .tr2-k-1 {
            height: 12%;
            /*background-color: #7e3374a3;*/
            width: 100%;
        }

        .tr3 {
            height: 966px;
            /*background-color: #99d7c799;*/
            width: 22%;
            float: left;
        }

        .tr3-1 {
            height: 36%;
            /*background-color: #99d7c799;*/
            width: 100%;
        }

        .tr3-2 {
            height: 26%;
            /*background-color: #99f6a799;*/
            width: 100%;
            color: aqua;
        }

        .tr3-2-k {
            height: 40%;
            /*background-color: #99f6a799;*/
            width: 100%;
        }

        .tr3-2-l-k {
            height: 20%;
            /*background-color: #99f3e399;*/
            width: 6%;
            float: left;
        }

        .tr3-2-l {
            height: 20%;
            /*background-color: #99f3e399;*/
@@ -328,6 +489,7 @@
            float: left;
            padding-top: 1%;
        }

            .tr3-2-l p {
                text-align: center;
                font-size: 22px;
@@ -335,6 +497,7 @@
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr3-2-c {
            height: 20%;
            /*background-color: #99f3e399;*/
@@ -350,6 +513,7 @@
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr3-2-r {
            height: 20%;
            /*background-color: #99f3e399;*/
@@ -365,11 +529,13 @@
                width: 100%;
                /*background-color: #9d909099;*/
            }

        .tr3-2-2-k {
            height: 39%;
            /*background-color: #99f6a799;*/
            width: 100%;
        }

        .tr3-2-2 {
            height: 20%;
            /*background-color: #99f3e399;*/
@@ -384,6 +550,7 @@
                width: 100%;
                /*background-color: #9d332359;*/
            }

        .tr3-2-3 {
            height: 20%;
            /*background-color: #99f3e399;*/
@@ -406,7 +573,6 @@
            /*background-color: #99f6a733;*/
            width: 88%;
        }

    </style>
    <script type="text/javascript">
        $(document).ready(function () {
@@ -434,13 +600,13 @@
            var mychart1 = echarts.init(document.getElementById('mychart1'));
            var mychart2 = echarts.init(document.getElementById('mychart2'));
            var mychart3 = echarts.init(document.getElementById('mychart3'));
            var mychart4 = echarts.init(document.getElementById('mychart4'));
            //var mychart4 = echarts.init(document.getElementById('mychart4'));
            var mychart5 = echarts.init(document.getElementById('mychart5'));

            Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
            Chart(mychart1, mychart2, mychart3, mychart5);

            setInterval(function () {
                Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
                Chart(mychart1, mychart2, mychart3, mychart5);
            }, 60000);


@@ -450,7 +616,7 @@
                mychart1.resize();
                mychart2.resize();
                mychart3.resize();
                mychart4.resize();
                mychart5.resize();
            }

        });
@@ -458,7 +624,7 @@



        function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) {
        function Chart(mychart1, mychart2, mychart3, mychart5) {
            //所有工序在制 生产数量
            get_Proc();
            //当前状态
@@ -468,8 +634,9 @@
            //柱状图
            get_Histogram(mychart2);
            //仪表盘
            get_Dashboard(mychart4);
            get_Dashboard_2(mychart5);
            //在制状态
            get_ZZSate();
        }

        //当前状态
@@ -485,10 +652,29 @@
                    for (var i = 0; i < PubRes.data[0].length; i++) {
                        HQty += PubRes.data[0][i].InHQty;
                    }
                    $("#jh").text(res.data[0][0]["HQty"].toLocaleString());
                    $("#wc").text(res.data[1][0]["HQty"].toLocaleString());
                    $("#zz").text(HQty.toLocaleString());
                    $("#dd").text(res.data[2][0]["HQty"].toLocaleString());
                    $("#jh").text(parseInt(res.data[0][0]["HQty"]).toLocaleString());
                    $("#wc").text(parseInt(res.data[1][0]["HQty"]).toLocaleString());
                    $("#zz").text(parseInt(HQty).toLocaleString());
                    $("#dd").text(parseInt(res.data[2][0]["HQty"]).toLocaleString());
                }
            })
        }

        //在制状态
        function get_ZZSate() {
            $.ajax({
                url: GetWEBURL() + "/loaddata/get_ZZSate",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data: { "LineCode": "1" },
                success: function (res) {
                    $("#lrc").text(res.data[0][0]["lrc"].toLocaleString());
                    $("#lhzyh").text(res.data[1][0]["lhzyh"].toLocaleString());
                    $("#lhzeh").text(res.data[2][0]["lhzeh"].toLocaleString());
                    $("#lhzsh").text(res.data[3][0]["lhzsh"].toLocaleString());
                    $("#ltz").text(res.data[4][0]["ltz"].toLocaleString());
                    $("#lbpwf").text(res.data[5][0]["lbpwf"].toLocaleString());
                }
            })
        }
@@ -546,9 +732,9 @@
                        }
                    }
                    //打包入库
                    $("#cps_12").text(res.data[1][0].HQty.toLocaleString());
                    //$("#cps_12").text(res.data[1][0].HQty.toLocaleString());
                    //染厂在制数量
                    $("#zzp1_2").text((res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString()));
                    //$("#zzp1_2").text((res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString()));
                }
            })
        }
@@ -561,37 +747,37 @@
            var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
            for (var i = 0; i < res.data[0].length; i++) {
                if (res.data[0][i].HProcID == 191) {//缸厂
                    optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                } else if (res.data[0][i].HProcID == 193) {//烘干定型
                    optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 194) {//上浆定型
                    optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 198) {//色坯烫光
                    optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 204) {//预烫剪
                    optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 197) {//补刷
                    optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 201) {//印毛尖
                    optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 200) {//拉幅定型
                    optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 206) {//短线烫
                    optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
                else if (res.data[0][i].HProcID == 205) {//长线烫
                    optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(2);
                    optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(0);
                }
            }
            //打包入库
            optionData[10] = (res.data[1][0].HQty / 1000).toFixed(2);
            optionData[10] = (res.data[1][0].HQty / 1000).toFixed(0);

            var option = {
                xAxis: {
@@ -699,7 +885,7 @@
                success: function (res) {
                    for (var i = 0; i < res.data[0].length; i++) {
                        dateData.push(res.data[0][i]["HDate"]);
                        OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(2));
                        OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(0));
                    }
                }
            })
@@ -804,33 +990,33 @@

                    for (var i = 0; i < res.data[0].length; i++) {
                        if (res.data[0][i].HProcID == 191) {//缸厂
                            optionData[0] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[0] = (res.data[0][i].HQty / 1000).toFixed(0);
                        } else if (res.data[0][i].HProcID == 193) {//烘干定型
                            optionData[1] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[1] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 194) {//上浆定型
                            optionData[2] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[2] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 198) {//色坯烫光
                            optionData[3] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[3] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 204) {//预烫剪
                            optionData[4] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[4] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 197) {//补刷
                            optionData[5] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[5] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 201) {//印毛尖
                            optionData[6] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[6] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 200) {//拉幅定型
                            optionData[7] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[7] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 206) {//短线烫
                            optionData[8] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[8] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                        else if (res.data[0][i].HProcID == 205) {//长线烫
                            optionData[9] = (res.data[0][i].HQty / 1000).toFixed(2);
                            optionData[9] = (res.data[0][i].HQty / 1000).toFixed(0);
                        }
                    }
                }
@@ -898,95 +1084,11 @@
            mychart2.setOption(option);
        }

        //仪表盘 制成率
        function get_Dashboard(mychart4) {
            var zcl = 0;
            //制成率
            $.ajax({
                url: GetWEBURL() + "/loaddata/Dashboard",
                dataType: "JSON",
                async: false,//使用同步的方式,true为异步方式
                type: "Get",
                data: { "LineCode": "1" },
                success: function (res) {
                    zcl = res.data[1][0]["制成率"].toFixed(2);
                }
            })

            var option = {
                series: [
                    {//右仪表盘
                        // name: '业务指标',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}%',
                            offsetCenter: ['10%', '90%']
                        },
                        radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["50%", "60%"],
                        startAngle: 225,//仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
                        endAngle: -45,//仪表盘结束角度
                        clockWise: true,
                        min: 0,
                        max: 100,
                        splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
                        axisTick: {             // 刻度(线)样式。
                            show: true,             // 是否显示刻度(线),默认 true。
                            splitNumber: 5,         // 分隔线之间分割的刻度数,默认 5。
                            length: 15,              // 刻度线长。支持相对半径的百分比,默认 8。
                            lineStyle: {            // 刻度线样式。
                                color: "auto",              //线的颜色,默认 #eee。
                                opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 1,                   //线度,默认 1。
                                type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            },
                        },
                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                            show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                            lineStyle: {            // 仪表盘轴线样式。
                                color: [[0.2, '#fc3333'], [0.8, '#17cee3'], [1, '#01e878']],  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                // opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 10,                  //轴线宽度,默认 30。
                                // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            }
                        },
                        splitLine: {            // 分隔线样式。
                            show: true,             // 是否显示分隔线,默认 true。
                            length: 15,             // 分隔线线长。支持相对半径的百分比,默认 30。
                            lineStyle: {            // 分隔线样式。
                                color: "auto",              //线的颜色,默认 #eee。
                                opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 2,                   //线度,默认 2。
                                type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            }
                        },
                        title: {
                            fontSize: 20,
                            color: '#55bcd5',//标题颜色
                            offsetCenter: ['0', '60%']//设置完成率位置
                        },
                        data: [{
                            value: zcl,
                            name: '制成率',
                        }]
                    }
                ]

            };

            // 使用刚指定的配置项和数据显示图表。
            mychart4.setOption(option);
        }

        //仪表盘 合格率
        //仪表盘 合格率 制成率
        function get_Dashboard_2(mychart5) {
            var hgl = 0;
            //制成率
            var zcl = 0;
            //制成率 合格率
            $.ajax({
                url: GetWEBURL() + "/loaddata/Dashboard",
                dataType: "JSON",
@@ -995,20 +1097,89 @@
                data: { "LineCode": "1" },
                success: function (res) {
                    hgl = res.data[0][0]["合格率"].toFixed(2);
                    zcl = res.data[1][0]["制成率"].toFixed(2);
                }
            })

            var option = {
                series: [
                    {//右仪表盘
                    {//左边仪表盘
                        // name: '业务指标',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}%',
                            offsetCenter: ['10%', '90%']
                            //offsetCenter: ['10', '70%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
                            fontSize: 25, //文字的字体大小
                            offsetCenter: ['10%', '100%']
                        },
                        radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["55%", "55%"],
                        radius: "50%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["26%", "60%"],
                        startAngle: 235,
                        endAngle: 25,
                        clockWise: true,
                        min: 0,
                        max: 100,
                        splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
                        axisTick: {             // 刻度(线)样式。
                            show: true,             // 是否显示刻度(线),默认 true。
                            splitNumber: 5,         // 分隔线之间分割的刻度数,默认 5。
                            length: 15,              // 刻度线长。支持相对半径的百分比,默认 8。
                            lineStyle: {            // 刻度线样式。
                                color: "auto",              //线的颜色,默认 #eee。
                                opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 1,                   //线度,默认 1。
                                type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            },
                        },
                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                            show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                            lineStyle: {            // 仪表盘轴线样式。
                                color: [
                                    [0.2, '#fc3333'],
                                    [0.8, '#17cee3'],
                                    [1, '#01e878']
                                ],  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                // opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 10,                  //轴线宽度,默认 30。
                                // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            }
                        },
                        splitLine: {            // 分隔线样式。
                            show: true,             // 是否显示分隔线,默认 true。
                            length: 15,             // 分隔线线长。支持相对半径的百分比,默认 30。
                            lineStyle: {            // 分隔线样式。
                                color: "auto",              //线的颜色,默认 #eee。
                                opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 2,                   //线度,默认 2。
                                type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                            }
                        },
                        title: {
                            fontSize: 20,
                            color: '#55bcd5',//标题颜色
                            offsetCenter: ['20%', '60%']//设置完成率位置
                        },
                        data: [{
                            value: zcl,
                            name: '制成率',
                        }],

                    },
                    {//右仪表盘
                        // name: '业务指标',
                        type: 'gauge',
                        detail: {
                            fontSize: 25, //文字的字体大小
                            formatter: '{value}%',
                            offsetCenter: ['10%', '110%']
                        },
                        radius: "55%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                        center: ["67%", "55%"],
                        startAngle: 225,//仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
                        endAngle: -45,//仪表盘结束角度
                        clockWise: true,
@@ -1031,7 +1202,11 @@
                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                            show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                            lineStyle: {            // 仪表盘轴线样式。
                                color: [[0.2, '#fc3333'], [0.8, '#17cee3'], [1, '#01e878']], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                color: [
                                    [0.2, '#fc3333'],
                                    [0.8, '#17cee3'],
                                    [1, '#01e878']
                                ],  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                // opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 10,                  //轴线宽度,默认 30。
                                // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
@@ -1053,7 +1228,7 @@
                        title: {
                            fontSize: 20,
                            color: '#55bcd5',//标题颜色
                            offsetCenter: ['0', '60%']//设置完成率位置
                            offsetCenter: ['0', '70%']//设置完成率位置
                        },
                        data: [{
                            value: hgl,
@@ -1092,8 +1267,33 @@
        <div class="tr1">
            <div class="tr1-k">
            </div>
            <div class="tr1-1" id="mychart4">
            <div class="tr1-1">
                <div class="tr1-1-k">

                </div>
                <div class="tr1-1-cen">
                    <div class="tr1-1-cenk">
                    </div>
                    <div class="tr1-1-cen-left">
                        <p id="jh">0</p>
                    </div>
                    <div class="tr1-1-cen-right">
                        <p id="wc">0</p>
                    </div>
                </div>
                <div class="tr1-1-cen-k">

                </div>
                <div class="tr1-1-btm">
                    <div class="tr1-1-btm-k">
                    </div>
                    <div class="tr1-1-btm-left">
                        <p id="zz">0</p>
                    </div>
                    <div class="tr1-1-btm-right">
                        <p id="dd">0</p>
                    </div>
                </div>
            </div>
            <div class="tr1-2">
                <div class="tr1-2-k">
@@ -1103,10 +1303,13 @@
                    <div class="tr1-2-cenk">
                    </div>
                    <div class="tr1-2-cen-left">
                        <p id="jh">0</p>
                        <p id="lrc">0</p>
                    </div>
                    <div class="tr1-2-cen-cen">
                        <p id="lhzyh">0</p>
                    </div>
                    <div class="tr1-2-cen-right">
                        <p id="wc">0</p>
                        <p id="lhzeh">0</p>
                    </div>
                </div>
                <div class="tr1-2-cen-k">
@@ -1116,10 +1319,13 @@
                    <div class="tr1-2-btm-k">
                    </div>
                    <div class="tr1-2-btm-left">
                        <p id="zz">0</p>
                        <p id="lhzsh">0</p>
                    </div>
                    <div class="tr1-2-btm-cen">
                        <p id="ltz">0</p>
                    </div>
                    <div class="tr1-2-btm-right">
                        <p id="dd">0</p>
                        <p id="lbpwf">0</p>
                    </div>
                </div>
            </div>