yuansh
/
FBS_VIEW


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <title>E-SOP看板</title>

    <link href="/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/css/dashboard.css" rel="stylesheet" />

    <script type="text/javascript" src="/js/service.js"></script>
    <script type="text/javascript" src="/js/session.js"></script>
    <script type="text/javascript" src="/js/getService.js"></script>

    <script type="text/javascript" src="/js/service/method-get-service.js"></script>
    <script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/lib/jquery-3.4.1.min.js"></script>

</head>

<body id="container" class="container-fluid">
    <div class="row no-padding head-bar" style="height:81px">
        <div class="col-lg-1 col-md-1">

        </div>
        <div class="col-lg-4 col-md-4 page-title">
            E-SOP看板
        </div>
        <!-- <div class="col-lg-3 col-md-3 block-padding">
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/warehouse.html');">仓库看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/produce.html');">制造看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/line.html');">产线看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/quality.html');">品质看板</button>
        </div> -->
        <div class="col-lg-4 col-md-4">
        </div>
    </div>
    <div class="my-container" id="div-main">
        <div class="row block-padding">
            <div class="col-lg-4 col-md-4">
                <h2>任务（{{num}}）</h2>
                <div style="height: 270px;">
                    <div class="row">
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 19%;">订单号</div>
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 19%;">物料号</div>
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 35%;">物料名称</div>
                        <!-- <div class="col-lg-2 col-md-2 center no-padding" style="width: 20%;">规格</div> -->
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 12%;">数量</div>
                        <div class="col-lg-1 col-md-2 center no-padding" style="width: 10%;">操作</div>
                    </div>
                    <div class="row" v-for="task in taskList2" style="margin-bottom: 2px;">
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 19%;">{{task.orderSheetCode}}</div>
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 19%;">{{task.materialCode}}</div>
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 35%;">{{task.materialName}}</div>
                        <!-- <div class="col-lg-2 col-md-2 center no-padding" style="width: 20%;">{{task.specs}}</div> -->
                        <div class="col-lg-2 col-md-2 center no-padding" style="width: 12%;">{{task.qty}}</div>
                        <div class="col-lg-1 col-md-2 center no-padding" style="width: 10%;">
                            <button type="button" class="btn btn-xs btn-warning" @click="selectFile(task.materialCode)">文件</button>
                    </div>
                    </div>
                </div>
                <br/> <br/>
                <h2>文件<span id="marText"></span></h2>
                <div class="row">
                    <div class="col-lg-2 col-md-2 center no-padding" style="width: 48%;">文件名</div>
                    <div class="col-lg-2 col-md-2 center no-padding" style="width: 25%;">文件类型</div>
                    <div class="col-lg-1 col-md-2 center no-padding" style="width: 25%;">操作</div>
                </div>
                <div class="row" v-for="task in taskList" style="margin-bottom: 2px;">
                    <div class="col-lg-2 col-md-2 center no-padding" style="width: 48%;">{{task.fileName}}</div>
                    <div class="col-lg-2 col-md-2 center no-padding" style="width: 25%;">{{task.fileType}}</div>
                    <div class="col-lg-1 col-md-2 center no-padding" style="width: 25%;">
                            <button type="button" class="btn btn-xs btn-warning" @click="showfile(task.fileName,task.fileType)">查看</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-8" >
                <img id="imgInfo" src="/files/imgInfo.jpg" width="100%" height="100%"/> 
                <iframe id="frameMain" width="98%" border="0" frameborder="0" v-bind:src="filepath" style="background-color:#ffffff"></iframe>
                <img id="imgType" src="" width="auto" /> 
                <video id="videoType" src="" controls width="auto" > </video>
                <div id="textType" width="auto" ></div>
            </div>
        </div>
    </div>

    <!-- jQuery  -->
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/echarts/echarts.min.js"></script>
    <script src="/lib/echarts/theme/macarons.js"></script>
    <script src="/js/service/produce-task.js"></script>
    <script type="text/javascript">

        $(function () {
            hideAll();
            $("#imgInfo").show();
        })
        function hideAll(){
            $("#frameMain").hide();
            $("#imgType").hide();
            $("#videoType").hide();
            $("#imgInfo").hide();
        }


        var marCode = "";
        // const taskList1 = [];//ServiceProduceTask.getEsopFileList();
        // const taskList2 = [];//ServiceProduceTask.getEsopTaskList();
        $("#frameMain").height($(window).height()-110);
        $("#imgType").height($(window).height()-110);
        $("#videoType").height($(window).height()-110);

        var vm = new Vue({
            el: '#div-main',
            data: {
                taskList: [],
                taskList2: [],
                filepath:"",
                num:0
            },
            methods: {
                showfile: function (name,file) {
                    if(file=='pdf'){
                        hideAll();
                        $("#frameMain").show();
                        this.filepath = "/lib/pdfjs/web/viewer.html?file=/upFiles/"+marCode+"/"+name;
                        $("#videoType").attr('src',"");
                    }else if(file=='jpg' || file=='jpeg' || file=='png'){
                        hideAll();
                        $("#imgType").show();
                        $("#imgType").attr('src',"/upFiles/"+marCode+"/"+name);
                        $("#videoType").attr('src',"");
                    }else if(file=='avi' || file=='mov' || file=='rmvb' || file=='rm' || file=='flv' || file=='mp4' || file=='3gp'){
                        hideAll();
                        $("#videoType").show();
                        $("#videoType").attr('src',"/upFiles/"+marCode+"/"+name);
                    }else{
                        alert("暂时不支持该类型文件的展示");
                    }
                    
                },
                selectFile: function(code){
                    marCode = code;
                    $("#marText").text("（"+code+"）");
                    this.taskList = ServiceProduceTask.getEsopFileList(code);
                },
                loadData:function(){
                    this.cacheDataObject = {};
                    // 
                    const taskList2 = ServiceProduceTask.getEsopTaskList();
                    this.num = taskList2.length;
                    this.cacheDataObject.taskList2 = {
                        data: taskList2,
                        pagesize: 11,
                        pageindex: 0
                    }
                    this.taskList2 = taskList2.slice(0, this.cacheDataObject.taskList2.pagesize);
                },
                // 从服务器加载数据并显示
                refreshData: function () {
                    // 关闭定时器
                    clearInterval(this.timer_short);
                    this.loadData();
                    // 开启定时器
                    this.timer_short = setInterval(this.scrollData, 30000);
                },
                // 轮播数据
                scrollData: function () {
                    for (var key in this.cacheDataObject) {
                        const dataList = this.cacheDataObject[key].data;
                        const pagesize = this.cacheDataObject[key].pagesize;
                        var pageindex = this.cacheDataObject[key].pageindex + 1;
                        if (dataList.length > pagesize) {
                            const pagesum = (dataList.length / pagesize).toFixed(0) * 1 + (dataList.length %
                                pagesize > 0 ? 1 : 0);
                            if (pageindex >= pagesum)
                                pageindex = 0;
                            this.cacheDataObject[key].pageindex = pageindex;
                            const startIndex = pageindex * pagesize;
                            const remainSum = dataList.length - startIndex;
                            const recordSum = remainSum >= pagesize ? pagesize : remainSum;

                            const keyPar = dataList.slice(startIndex, startIndex + pagesize);
                            if(keyPar.length < 1){
                                continue;
                            }
                            this[key] = dataList.slice(startIndex, startIndex + pagesize);
                        }
                    }

                }
            },
            mounted() {
                this.timer_long = setInterval(this.refreshData, 60000);
                this.refreshData();

            },
            beforeDestroy() {
                clearInterval(this.timer_long);
                clearInterval(this.timer_short);
            }
        });
    </script>

</body>

</html>