jingzhuanzhi
/
JZZBigScreen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产供销综合大屏</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/animate.css" />
    <link rel="stylesheet" href="./css/element-ui@2.15.9.css" />

    <script src="./libs/vue.js"></script>
    <script src="./libs/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./libs/element-ui@2.15.9.js"></script>
    <script src="./libs/datav.min.vue.js"></script>
    <script src="./libs/echatrs.js"></script>
    <script src="./libs/echarts-tooltip-carousel.js"></script>
    <script src="./libs/day.js"></script>
    <script src="./libs/tailwindcss.js"></script>

</head>

<body>
    <div id="app">
        <div class="main">
            <div class="top-border">
                <div class="top-title">
                    产供销综合大屏
                </div>
            </div>


            <div class="flex justitfy-between p-5">
                <div>
                    <div class="box-border p-5">
                        <div class="small-top">
                            <div class="pl-12 small-title">综合概况</div>
                        </div>


                        <div class="flex justify-between mt-5" style="flex-wrap: wrap;">
                            <div v-for="(item,index) in comprehensive" :key="index" class="flex items-center w-[285px] h-[128px] mb-5" style="background-color: #126EFE20;">
                                <div>
                                    <img :src="item.image">
                                </div>

                                <div>
                                    <div class="text-[#D0E9FF]">{{item.title}}</div>
                                    <div>
                                        <span class="text-[32px] text-[#E2F1FE]">{{item.number}}</span> <span class="text-[14px] text-[#E2F1FE]">{{item.unit}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="box-border p-5" style="height: 56%;">
                        <div class="small-top relative">
                            <div class="pl-12 small-title">收支情况</div>
                            <div style="position: absolute;right: 10px;top: 10px;">累计当前实际收支：{{incomeOrExpenditure}}</div>
                        </div>
                        
                        <div id="statistics" style="width: 100%;height: 100%;"></div>

                    </div>
                </div>


                <div>
                    <div class="box-right p-5">
                        <div class="right-small-top mb-5">
                            <div style="position: absolute;right: 10px;top: 10px;">当前需交付的订单数量：{{totalCount}}个</div>
                        </div>

                        <div style="overflow: auto;height: 93%;">
                            <div v-for="(item,index) in dataList" class="p-5 mb-3" style="background-color: #126EFE20;">
                                <div class="flex justify-between mb-5">
                                    <div class="text-[#fff]">{{item.orderNo}}</div>
                                    <div class="data-type">{{item.deliveryStatus}}</div>
                                </div>
    
                                <div class="text-[#D0E9FF] mb-3">
                                    客户名称：{{item.customerName}}
                                </div>
    
                                <div class="text-[#D0E9FF] mb-3">
                                    交付日期：{{item.deliveryDate}}
                                </div>
    
                                <div class="text-[#D0E9FF] mb-3">
                                    进展情况：
                                </div>
                               
                                <div class="relative mb-5">
                                    <div class="flex absolute justify-between" style="z-index: 999;width: 92%;top: 3px;">
                                        <div class="text-[#fff]">
                                            <div class="right-line"></div>
                                            <div class="mt-2">下单</div>
                                        </div>

                                        <div class="text-[#fff]">
                                            <div class="right-line"></div>
                                            <div class="mt-2">排产</div>
                                        </div>

                                        <div class="text-[#fff]">
                                            <div class="right-line"></div>
                                            <div class="mt-2">生产</div>
                                        </div>

                                        <div class="text-[#fff]">
                                            <div class="right-line"></div>
                                            <div class="mt-2">质检</div>
                                        </div>

                                        <div class="text-[#fff]">
                                            <div class="right-line"></div>
                                            <div class="mt-2">入库</div>
                                        </div>

                                        <div class="text-[#fff]">
                                            <div class="right-line"></div>
                                            <div class="mt-2">出库</div>
                                        </div>
                                    </div>
                                   
                                    <el-progress :percentage="item.progress" />
                                </div>
                            </div>
                        </div>
                    </div>

                   
                </div>


            </div>
        </div>
    </div>
    

    <script src="./js/index.js"></script>
</body>

</html>