报工平台前端页面交互优化

YL

2021-07-12 49a0e726f3b50da8a65f2d66ed4d3de7574dd3ab

 WebTM/views/IpadIndex.html

@@ -10,6 +10,8 @@
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <link href="../layuiadmin/layui/css/global.css" rel="stylesheet" />
    <!--自定义样式-->
    <link href="../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
    <!--引用layui js文件-->
    <script src="../layuiadmin/Scripts/jquery-1.4.1.js"></script>
    <script src="../layuiadmin/layui/layui.js"></script>
@@ -17,169 +19,8 @@
    <script src="../layuiadmin/Scripts/json2.js"></script>
    <script src="../layuiadmin/Scripts/webConfig.js"></script>
    <script src="../layuiadmin/zgqCustom/zgqCustom.js"></script>
    <!--自定义样式-->
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-tab-card > .layui-tab-title {
            background-color: #ffffff;
        }

        .layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
            border-color: #eee;
        }

        .layui-content {
            height: 150px;
        }

        .content3 {
            height: 595px;
        }

        .content4 {
            height: 640px;
        }

        .cnt {
            border: 1px solid #5FB878;
            height: 150px;
            border-radius: 5px;
        }

        .cns {
            border: 1px solid #5FB878;
            height: 140px;
            border-radius: 5px;
        }

        .topright dt img {
            display: block;
            height: 145px;
            width: 100%;
        }

        dt {
            height: 145px;
            width: 20%;
            border: 1px solid rgb(0 0 0 / 10%);
        }

        dl {
            overflow: hidden;
            margin: 2px 0px;
        }

        .topright > dd {
            padding: 0px 10px;
            width: 50%;
        }

        dt, dd {
            float: left;
        }

        .cnt h1, .cns h1 {
            line-height: 30px;
            margin: 0 10px;
        }

        h1 span {
            font-family: "微软雅黑";
            font-weight: bold;
        }

        .cnt, .cns dl dd {
            margin: 0 auto;
            /*text-align:center;*/
        }

        .layui-show {
            padding: 5px 10px;
        }

        .color_border1 {
            border: 0.4em solid #ffd800;
            background-color: #ffd800;
        }

        .color_border2 {
            border: 0.4em solid #09d1ea;
            background-color: #09d1ea;
        }

        .color_border3 {
            border: 0.4em solid #808080;
            background-color: #808080;
        }

        .gj_icon {
            border-radius: 0.4em;
            width: 1px;
            height: 1px;
            display: inline-block;
            vertical-align: 0px;
            margin-right: 14px;
        }

        .imgicon {
            height: 100px;
            display: block;
            text-align: center;
        }

        .imgtitle {
            text-align: center;
            display: block;
            font-size: 30px;
        }

        .layui-icon {
            font-size: 90px;
        }

        .imgicon0 {
            height: 100px;
            display: block;
            text-align: center;
            margin: 0.2em auto;
            width: 100px;
        }
        .imgicon0:hover {
            cursor: pointer; /*鼠标变成手指样式*/
            background: #5FB878;
         }

        .bottomright {
            cursor: pointer; /*鼠标变成手指样式*/
            transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
        }

        .bottomright:hover {
            transform: scale(1.3); /*鼠标放上之后元素变成1.4倍大小*/
        }

        #mychart1, #mychart2 {
            width: 100%;
            height: 320px;
        }

        .delete {
            width: 20px;
            height: 20px;
            border-radius: 60%;
            position: absolute;
            top: 5px;
            right: 15px;
            font-size: 30px;
        }

         .delete:hover {
                cursor: pointer; /*鼠标变成手指样式*/
         }
    </style>
    <script>

        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
@@ -213,49 +54,87 @@
                            aSearch = aSearch.concat(ele); // 将符合要求的数组合并到aSearch;
                        }
                    });
                   
                    for (var i = 1; i <= 4; i++) {

                    for (var i = 1; i <= aSearch.length + 1; i++) {
                        if (i <= aSearch.length) {
                            var html1 = "";
                            html1 += "<dl>";
                            html1 += "<dd>";
                            html1 += "<h1><span>设备编号：</span><span id=\"eqp" + i + "\">SB000001</span></h1>";
                            html1 += "<h1><span>当前工单：</span><span>PO2021063000001</span></h1>";
                            html1 += "<h1><span>负责人：</span><span>张三</span></h1>";
                            html1 += "</dd>";
                            html1 += "</dl>";
                            $("#ts" + i + "").append(html1);
                            $("#ts" + i + "").append("<span class=\"layui-icon layui-icon-delete delete\"  onclick=\"Delete(this," +i + ")\"></span>"); //在当前div后追加加一个span删除
                            var html1 = '';
                            html1 += '<div class="layui-col-sm12 layui-col-md3">';
                            html1 += '<div class="cnt ctop" id="ts' + i + '" onclick="Check(this,' + i + ')">';
                            html1 += '<dl>';
                            html1 += '<dd>';
                            html1 += '<h1><span>设备编号：</span><span id="eqp' + i + '">SB000001</span></h1>';
                            html1 += '<h1><span>当前工单：</span><span id="po' + i + '">PO2021063000001</span></h1>';
                            html1 += '<h1><span>负责人：</span><span id="us' + i + '">张三</span></h1>';
                            html1 += '</dd>';
                            html1 += '</dl>';
                            html1 += '</div>';
                            html1 += '</div>';
                            $("#topleft").append(html1);
                            $("#ts" + i + "").append('<span class="layui-icon layui-icon-delete delete"  onclick="Delete(event,this,' + i + ')"></span>'); //在当前div后追加加一个span删除
                        }
                        else
                        {
                            var html1 = "";
                            html1 += "<span class=\"layui-icon layui-icon-addition imgicon0\" onclick=\"Add(this)\"></span>";
                            $("#ts" + i + "").append(html1);
                        else {
                            var html1 = '';
                            html1 += '<div class="layui-col-sm12 layui-col-md3">';
                            html1 += '<div class="cnt ctop" id="ts' + i + '" onclick="Check(this,' + i + ')">';
                            html1 += '<span class="layui-icon layui-icon-addition imgicon0" onclick="Add(event,this,' + i + ')"></span>';
                            html1 += '</div>';
                            html1 += '</div>';
                            $("#topleft").append(html1);

                        }
                    }

                   

                }
            });
        }
        function Add(obj)
        {

        //选中资源
        function Check(obj, i) {
            var partid = $(obj).parent().attr("id");   //获取父级id
            var eqpid = "eqp" + i;                     //获取指定设备ID的编号
            var eqpvalue = $("#" + eqpid + "").html(); //通过样式ID获取html内容(设备编号)
            var po = "po" + i;                         //获取指定工单编号
            var povalue = $("#" + po + "").html();     //通过样式ID获取html内容(设备编号)

            if (eqpvalue != "" && eqpvalue != null) {
                $('.ctop').removeClass('check');  //删除不同父级clss样式相同的所有元素
                $("#ts" + i + "").addClass('check'); // 添加当前元素的样式
                console.log(eqpvalue, povalue);

                //执行联动事件
            }
        }

        //添加资源
        function Add(event, obj, i) {
            event.stopPropagation();  //阻止冒泡
            //获取父级id
            var partid = $(obj).parent().attr("id");
            var html1 = "";
            html1 += "<dl>";
            html1 += "<dd>";
            html1 += "<h1><span>设备编号：</span><span>SB000001</span></h1>";
            html1 += "<h1><span>当前工单：</span><span>PO2021063000001</span></h1>";
            html1 += "<h1><span>负责人：</span><span>张三</span></h1>";
            html1 += "</dd>";
            html1 += "</dl>";
            console.log(partid);
            var html1 = '';
            html1 += '<dl>';
            html1 += '<dd>';
            html1 += '<h1><span>设备编号：</span><span id="eqp' + i + '">SB000002</span></h1>';
            html1 += '<h1><span>当前工单：</span><span id="po' + i + '">PO2021063000002</span></h1>';
            html1 += '<h1><span>负责人：</span><span id="us' + i + '">张三</span></h1>';
            html1 += '</dd>';
            html1 += '</dl>';
            $("#" + partid + "").empty();   //清除添加图标
            $("#" + partid+"").append(html1); //填充添加的数据
            $("#" + partid + "").append(html1); //填充添加的数据
            $("#ts" + i + "").append('<span class="layui-icon layui-icon-delete delete"  onclick="Delete(event,this,' + i + ')"></span>'); //在当前div后追加加一个span删除
            var html1 = '';
            html1 += '<div class="layui-col-sm12 layui-col-md3">';
            html1 += '<div class="cnt ctop" id="ts' + (i+1) + '" onclick="Check(this,' + (i+1) + ')">';
            html1 += '<span class="layui-icon layui-icon-addition imgicon0" onclick="Add(event,this,' + (i+1) + ')"></span>';
            html1 += '</div>';
            html1 += '</div>';
            $("#topleft").append(html1);
        }
        function Delete(obj,i)
        {

        //删除资源
        function Delete(event, obj, i) {
            event.stopPropagation();  //阻止冒泡
            //获取父级id
            var partid = $(obj).parent().attr("id");
            //获取指定设备ID的编号
@@ -265,7 +144,7 @@
            //逻辑删除方法
            layer.confirm("确认要删除吗，删除后不能恢复", { title: "删除确认" }, function (index) {
                layer.msg(value, { time: 1 * 1000, icon: 1 }, function () {
                    

                    //修改为功后刷新界面
                    window.location.reload();
                });
@@ -373,27 +252,27 @@
                <fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
                    <legend style="color: #5FB878">生产资源</legend>
                    <div class="layui-content">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-sm12 layui-col-md3">
                        <div class="layui-row layui-col-space10" id="topleft">
                            <!--<div class="layui-col-sm12 layui-col-md3">
                                <div class="cnt" id="ts1">

                                </div>
                            </div>
                            <div class="layui-col-sm12 layui-col-md3">
                                <div class="cnt" id="ts2">
                                    <!--<span class="layui-icon layui-icon-addition imgicon0"></span>-->

                                </div>
                            </div>
                            <div class="layui-col-sm12 layui-col-md3">
                                <div class="cnt" id="ts3">
                                    <!--<span class="layui-icon layui-icon-addition imgicon0"></span>-->

                                </div>
                            </div>
                            <div class="layui-col-sm12 layui-col-md3">
                                <div class="cnt" id="ts4">
                                   

                                </div>
                            </div>
                            </div>-->
                        </div>
                    </div>
                </fieldset>
@@ -437,10 +316,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border1'></span><span>执行中</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -448,10 +330,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -459,10 +344,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -470,10 +358,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -483,10 +374,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border3'></span><span>已关闭</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -494,10 +388,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -505,10 +402,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -516,10 +416,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -529,10 +432,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -540,10 +446,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -551,10 +460,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -562,10 +474,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -575,10 +490,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -586,10 +504,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -597,10 +518,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>
@@ -608,10 +532,13 @@
                                <div class="layui-col-sm12 layui-col-md3">
                                    <div class="cns">
                                        <dl>
                                            <dd>
                                            <dd class="tcenter">
                                                <h1><span>工单号：</span><span>PO2021063000001</span></h1>
                                                <h1><span>当前状态：</span><span class='gj_icon color_border2'></span><span>未开始</span></h1>
                                                <h1><span>生产进度：</span><span>张三</span></h1>
                                                <span class="prs">生产进度：</span>
                                                <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                                                </div>
                                            </dd>
                                        </dl>
                                    </div>