|
|
|
|
<template>
|
|
|
|
|
<div id="screen-wrapper" class="screen-wrapper">
|
|
|
|
|
<div id="screen" class="screen">
|
|
|
|
|
<div class="title">领秀眼镜智慧工厂</div>
|
|
|
|
|
<!-- // 左侧区域-->
|
|
|
|
|
<div class="left_area left_top_area">
|
|
|
|
|
<div class="left_top_div">
|
|
|
|
|
<div v-show="!loading1" class="alltitle">今日质检数量</div>
|
|
|
|
|
<dv-loading v-show="loading1" style=""></dv-loading>
|
|
|
|
|
<div class="left_cycle">
|
|
|
|
|
<left-top v-show="!loading1" ref="leftTop" :detection-day-num="detectionDayNum" :year="year" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left_area left_mid_area">
|
|
|
|
|
<div class="left_top_div">
|
|
|
|
|
<div class="alltitle">生产工单管理</div>
|
|
|
|
|
<div class="right_select">
|
|
|
|
|
<!-- <div class="active">当日产量</div>
|
|
|
|
|
<div>当月产量</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bot_cycle"></div>
|
|
|
|
|
<div class="bar_area" style="margin-top: 40px">
|
|
|
|
|
<dv-loading v-show="loading2">Loading...</dv-loading>
|
|
|
|
|
<left-middle
|
|
|
|
|
v-show="!loading2"
|
|
|
|
|
ref="leftMiddle"
|
|
|
|
|
:year="year"
|
|
|
|
|
:production-data="productionData"
|
|
|
|
|
width="450px"
|
|
|
|
|
height="210px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="left_area left_bot_area">
|
|
|
|
|
<div class="top_title">
|
|
|
|
|
<span>质检良品率</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bar_area" style="margin-top: 10px">
|
|
|
|
|
<dv-loading v-show="loading3"></dv-loading>
|
|
|
|
|
<left-bot
|
|
|
|
|
v-show="!loading3"
|
|
|
|
|
ref="leftBot"
|
|
|
|
|
:year="year"
|
|
|
|
|
width="480px"
|
|
|
|
|
height="290px"
|
|
|
|
|
:real-data="leftBotData"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="left_allow"></div>
|
|
|
|
|
<div class="right_allow"></div>
|
|
|
|
|
<div class="mid_area mid_top_area">
|
|
|
|
|
<div class="top_title">
|
|
|
|
|
<span>生产计划与进度</span>
|
|
|
|
|
</div>
|
|
|
|
|
<dv-loading v-show="loading2">Loading...</dv-loading>
|
|
|
|
|
<div v-show="!loading2" class="bar_area">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="yxz">
|
|
|
|
|
<div class="bar_title">本周生产总数</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="progress">{{ totalTransport }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tips" style="position: absolute; top: 47px; right: 300px; color: #fff; font-size: 12px">
|
|
|
|
|
本周生产量
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mid" style="width: 700px; display: flex; justify-content: space-around">
|
|
|
|
|
<!-- <div class="area1" v-for="item in productionData.wiredrawingNumWeek">
|
|
|
|
|
<dv-loading v-show="loading8">Loading...</dv-loading>
|
|
|
|
|
<mid-top-first
|
|
|
|
|
v-show="!loading8"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="70px"
|
|
|
|
|
height="215px"
|
|
|
|
|
/>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div v-for="item in productionData.wiredrawingNumWeek" :key="item.date" class="area2">
|
|
|
|
|
<mid-top-other v-show="!loading2" :year="year" :chart-data="item" width="70px" height="215px" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="area3">
|
|
|
|
|
<dv-loading v-show="loading8">Loading...</dv-loading>
|
|
|
|
|
<mid-top-other
|
|
|
|
|
v-show="!loading8"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="70px"
|
|
|
|
|
height="215px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="area4">
|
|
|
|
|
<dv-loading v-show="loading8">Loading...</dv-loading>
|
|
|
|
|
<mid-top-other
|
|
|
|
|
v-show="!loading8"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="70px"
|
|
|
|
|
height="215px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="area5">
|
|
|
|
|
<dv-loading v-show="loading8">Loading...</dv-loading>
|
|
|
|
|
<mid-top-other
|
|
|
|
|
v-show="!loading8"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="70px"
|
|
|
|
|
height="215px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="area5">
|
|
|
|
|
<dv-loading v-show="loading8">Loading...</dv-loading>
|
|
|
|
|
<mid-top-other
|
|
|
|
|
v-show="!loading8"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="70px"
|
|
|
|
|
height="215px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="area5">
|
|
|
|
|
<dv-loading v-show="loading8">Loading...</dv-loading>
|
|
|
|
|
<mid-top-other
|
|
|
|
|
v-show="!loading8"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="70px"
|
|
|
|
|
height="215px"
|
|
|
|
|
/>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="right">
|
|
|
|
|
<div class="yxz2">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<dv-loading v-show="loading9">Loading...</dv-loading>
|
|
|
|
|
<mid-top-right
|
|
|
|
|
v-show="!loading9"
|
|
|
|
|
:year="year"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
width="218px"
|
|
|
|
|
height="210px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-show="!loading2" class="mid_area mid_mid_area">
|
|
|
|
|
<div class="left_area">
|
|
|
|
|
<div class="content_area">
|
|
|
|
|
<div class="ls_content">
|
|
|
|
|
<div class="left-side"></div>
|
|
|
|
|
<div class="right-side">
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">排产单量</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400">
|
|
|
|
|
{{ productionData.schedulingWorkorder }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="bar_area">-->
|
|
|
|
|
<!-- <dv-loading v-show="loading10">Loading...</dv-loading>-->
|
|
|
|
|
<!-- <mid-mid-first v-show="!loading10" :year="year" width="375px" height="250px" @endLoading="endLoading" />-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content_area">
|
|
|
|
|
<div class="ls_content">
|
|
|
|
|
<div class="left-side"></div>
|
|
|
|
|
<div class="right-side">
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">生产单量</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 16px; margin-left: 3px; color: #d6b514; font-weight: 400">
|
|
|
|
|
{{ productionData.productionWorkorder }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="bar_area">-->
|
|
|
|
|
<!-- <dv-loading v-show="loading10">Loading...</dv-loading>-->
|
|
|
|
|
<!-- <mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content_area">
|
|
|
|
|
<div class="ls_content">
|
|
|
|
|
<div class="left-side"></div>
|
|
|
|
|
<div class="right-side">
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">完工单量</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400">
|
|
|
|
|
{{ productionData.completeWorkorder }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="bar_area">-->
|
|
|
|
|
<!-- <dv-loading v-show="loading10">Loading...</dv-loading>-->
|
|
|
|
|
<!-- <mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="midd_area" style=" width: 372px;height: 207px;position: absolute;right: 30px;">
|
|
|
|
|
<dv-loading v-show="loading10">Loading...</dv-loading>
|
|
|
|
|
<mid-mid-first v-if="!loading10" :productionData="productionData" :year="year" width="370px" height="200px" @endLoading="endLoading" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right_area">
|
|
|
|
|
<div class="yxz2">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<dv-loading v-show="loading9">Loading...</dv-loading>
|
|
|
|
|
<mid-top-right
|
|
|
|
|
v-show="!loading9"
|
|
|
|
|
:year="year"
|
|
|
|
|
:production-data="productionData"
|
|
|
|
|
width="268px"
|
|
|
|
|
height="240px"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dv-loading v-show="loading2">Loading...</dv-loading>
|
|
|
|
|
<div class="mid_area mid_bot_area">
|
|
|
|
|
<!-- <dv-loading v-show="loading2">Loading...</dv-loading> -->
|
|
|
|
|
<mid-mid-bot v-show="!loading2" :year="year" :production-data="productionData" width="900px" height="180px" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="mid_area mid_bot_country_area">-->
|
|
|
|
|
<!-- <div class="total_count"></div>-->
|
|
|
|
|
<!-- <div class="cunt_count">0</div>-->
|
|
|
|
|
<!-- <div class="cunt_count">0</div>-->
|
|
|
|
|
|
|
|
|
|
<!-- <div class="cunt_count">0</div>-->
|
|
|
|
|
<!-- <!– <div class="douhao"></div> –>-->
|
|
|
|
|
<!-- <div class="cunt_count">0</div>-->
|
|
|
|
|
<!-- <div class="cunt_count">0</div>-->
|
|
|
|
|
|
|
|
|
|
<!-- <div class="cunt_count">2</div>-->
|
|
|
|
|
<!-- <!– <div class="douhao"></div> –>-->
|
|
|
|
|
<!-- <div class="cunt_count">1</div>-->
|
|
|
|
|
<!-- <div class="cunt_count">6</div>-->
|
|
|
|
|
<!-- <div class="cunt_count">2</div>-->
|
|
|
|
|
<!-- <div class="unit"></div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
<div class="mid_area mid_bot_end_area">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<span style="font-size: 22px; font-weight: bolder; color: #fff">{{ productionData.wiredrawingNumWeek && productionData.wiredrawingNumWeek.length && productionData.wiredrawingNumWeek[productionData.wiredrawingNumWeek.length - 1].carryNum || 0 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="left"></div>
|
|
|
|
|
<div class="bot_text">今日报工</div>
|
|
|
|
|
<div class="right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<span style="font-size: 22px; font-weight: bolder; color: #fff">98%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="left"></div>
|
|
|
|
|
<div class="bot_text">设备在线率</div>
|
|
|
|
|
<div class="right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<dv-loading v-show="loading6">Loading...</dv-loading>
|
|
|
|
|
<span v-show="!loading6" style="font-size: 22px; font-weight: bolder; color: #fff">
|
|
|
|
|
{{ energyConsumptionToday }}kw/H
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="left"></div>
|
|
|
|
|
<div class="bot_text">今日能耗</div>
|
|
|
|
|
<div class="right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- // 右侧区域-->
|
|
|
|
|
|
|
|
|
|
<div class="right_area right_top_area">
|
|
|
|
|
<div class="top_title">
|
|
|
|
|
<span>仓储详情</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right_top_bar">
|
|
|
|
|
<dv-loading v-show="loading4">Loading...</dv-loading>
|
|
|
|
|
<right-top
|
|
|
|
|
v-show="!loading4"
|
|
|
|
|
ref="leftBot"
|
|
|
|
|
:year="year"
|
|
|
|
|
width="650px"
|
|
|
|
|
height="260px"
|
|
|
|
|
:real-data="rightTopData"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right_area right_mid_top_area">
|
|
|
|
|
<div v-show="!loading12" class="box">
|
|
|
|
|
<div class="inner-box">
|
|
|
|
|
<div class="image image1"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<div class="weight">
|
|
|
|
|
{{ wmsData.finishedProductWeight }}
|
|
|
|
|
<span style="font-size: 18px">箱</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product">成品总箱数</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!loading12" class="box">
|
|
|
|
|
<div class="inner-box">
|
|
|
|
|
<div class="image image2"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<div class="weight">
|
|
|
|
|
|
|
|
|
|
{{ wmsData.finishedProductNum }}
|
|
|
|
|
<span style="font-size: 18px">付</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product">成品</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!loading12" class="box">
|
|
|
|
|
<div class="inner-box">
|
|
|
|
|
<div class="image image3"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<div class="weight">
|
|
|
|
|
{{ wmsData.ingredientsNum * 100}}
|
|
|
|
|
<span style="font-size: 18px">个</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product">原料</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!loading12" class="box">
|
|
|
|
|
<div class="inner-box">
|
|
|
|
|
<div class="image image4"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
<div class="weight">
|
|
|
|
|
{{ wmsData.semiFinishedCopperNum }}
|
|
|
|
|
<span style="font-size: 18px">付</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="product">半成品</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dv-loading v-show="loading12"></dv-loading>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right_area right_mid_bot_area">
|
|
|
|
|
<div class="top_title">
|
|
|
|
|
<span>设备状态</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bar_area">
|
|
|
|
|
<div class="yxz">
|
|
|
|
|
<div class="bar_title">运行中</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<dv-loading v-show="loading5">Loading...</dv-loading>
|
|
|
|
|
<right-middle
|
|
|
|
|
v-show="!loading5"
|
|
|
|
|
ref="leftBot"
|
|
|
|
|
:year="year"
|
|
|
|
|
width="200px"
|
|
|
|
|
:device-count="62"
|
|
|
|
|
height="160px"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="djz">
|
|
|
|
|
<div class="bar_title">待机中</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<dv-loading v-show="loading5">Loading...</dv-loading>
|
|
|
|
|
<right-middle
|
|
|
|
|
v-show="!loading5"
|
|
|
|
|
ref="leftBot"
|
|
|
|
|
:device-count="10"
|
|
|
|
|
:year="year"
|
|
|
|
|
width="200px"
|
|
|
|
|
height="160px"
|
|
|
|
|
@endLoading="endLoading"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="gxz">
|
|
|
|
|
<div class="bar_title">设备总数</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<dv-loading v-show="loading5">Loading...</dv-loading>
|
|
|
|
|
<right-middle v-show="!loading5" ref="leftBot" :year="year" @endLoading="endLoading" width="200px" height="160px"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right_area right_bot_area">
|
|
|
|
|
<div class="top_title">
|
|
|
|
|
<span>能耗管理</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bar_area">
|
|
|
|
|
<div class="line_area" style="width: 290px; height: 195px; position: absolute; left: 5px">
|
|
|
|
|
<div class="alltitle" style="font-size: 14px; top: 0px; left: 0px">能耗统计</div>
|
|
|
|
|
<div class="bot_cycle"></div>
|
|
|
|
|
<dv-loading v-show="loading6">Loading...</dv-loading>
|
|
|
|
|
<right-bottom
|
|
|
|
|
v-show="!loading6"
|
|
|
|
|
ref="leftBot"
|
|
|
|
|
:year="year"
|
|
|
|
|
width="320px"
|
|
|
|
|
height="160px"
|
|
|
|
|
:energy-data="energyData"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="cj_area"
|
|
|
|
|
style="
|
|
|
|
|
width: 288px;
|
|
|
|
|
height: 195px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-rows: 1fr 1fr;
|
|
|
|
|
right: 20px;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<dv-loading v-show="loading6">Loading...</dv-loading>
|
|
|
|
|
<div v-show="!loading6" class="ls_area">
|
|
|
|
|
<div class="alltitle" style="font-size: 16px; top: 0px; left: 0px">{{location.location1}}</div>
|
|
|
|
|
<div class="ls_content">
|
|
|
|
|
<div class="left-side"></div>
|
|
|
|
|
<div class="right-side">
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">年用电总量</span>
|
|
|
|
|
<span style="font-size: 14px; margin-left: 3px; color: #00a2cb; font-weight: 400">
|
|
|
|
|
{{ energyData.LSYear }}KWH
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-middle"></div>
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">月用电总量</span>
|
|
|
|
|
<span style="font-size: 14px; margin-left: 3px; color: #00a2cb; font-weight: 400">
|
|
|
|
|
{{ energyData.LSMonth }}KWH
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!loading6" class="qb_area">
|
|
|
|
|
<div class="alltitle" style="font-size: 14px; top: 0px; left: 0px">{{location.location2}}</div>
|
|
|
|
|
<div class="ls_content">
|
|
|
|
|
<div class="left-side"></div>
|
|
|
|
|
<div class="right-side">
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">年用电总量</span>
|
|
|
|
|
<span style="font-size: 14px; margin-left: 3px; color: #00a2cb; font-weight: 400">
|
|
|
|
|
{{ energyData.QBYear }}KWH
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-middle"></div>
|
|
|
|
|
<div class="upper-content">
|
|
|
|
|
<span style="font-size: 12px">月用电总量</span>
|
|
|
|
|
<span style="font-size: 14px; margin-left: 3px; color: #00a2cb; font-weight: 400">
|
|
|
|
|
{{ energyData.QBMoth }}KWH
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { defineComponent } from 'vue';
|
|
|
|
|
import {
|
|
|
|
|
getWmsKanban,
|
|
|
|
|
getQcKanbanPage,
|
|
|
|
|
getEcmElectricityConsumption,
|
|
|
|
|
getMesProductWorkorder
|
|
|
|
|
} from '@/service/api/board/kanBan';
|
|
|
|
|
import leftTop from './compents/leftTop.vue';
|
|
|
|
|
import leftMiddle from './compents/leftMiddle.vue';
|
|
|
|
|
import leftBot from './compents/leftBot.vue';
|
|
|
|
|
import rightMiddle from './compents/rightMiddle.vue';
|
|
|
|
|
import rightTop from './compents/rightTop.vue';
|
|
|
|
|
import leftBottom from './compents/leftBotton.vue';
|
|
|
|
|
import rightBottom from './compents/rightBottom.vue';
|
|
|
|
|
import midTopFirst from './compents/midTopFirst.vue';
|
|
|
|
|
import midTopOther from './compents/midTopOther.vue';
|
|
|
|
|
import midTopRight from './compents/midTopRight.vue';
|
|
|
|
|
import midMidFirst from './compents/midMidFirst.vue';
|
|
|
|
|
import midMidBot from './compents/midMidBot.vue';
|
|
|
|
|
import { debounce } from './compents/dashboard/mixins/resize';
|
|
|
|
|
import { useAppStore } from '@/store';
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'HomeView',
|
|
|
|
|
components: {
|
|
|
|
|
leftTop,
|
|
|
|
|
leftMiddle,
|
|
|
|
|
leftBot,
|
|
|
|
|
rightTop,
|
|
|
|
|
rightMiddle,
|
|
|
|
|
leftBottom,
|
|
|
|
|
rightBottom,
|
|
|
|
|
midTopFirst,
|
|
|
|
|
midTopOther,
|
|
|
|
|
midTopRight,
|
|
|
|
|
midMidFirst,
|
|
|
|
|
midMidBot
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
year: null,
|
|
|
|
|
totalCount: 0,
|
|
|
|
|
totalWeight: 0,
|
|
|
|
|
weightUnit: '',
|
|
|
|
|
loading1: false,
|
|
|
|
|
loading2: false,
|
|
|
|
|
loading3: false,
|
|
|
|
|
loading4: false,
|
|
|
|
|
loading5: false,
|
|
|
|
|
loading6: false,
|
|
|
|
|
loading7: false,
|
|
|
|
|
loading8: false,
|
|
|
|
|
loading9: false,
|
|
|
|
|
loading10: false,
|
|
|
|
|
loading11: false,
|
|
|
|
|
loading12: false,
|
|
|
|
|
loading13: false,
|
|
|
|
|
loading14: false,
|
|
|
|
|
loading15: false,
|
|
|
|
|
dataForCount: [],
|
|
|
|
|
dataForWeight: [],
|
|
|
|
|
rightTopCountIn: [],
|
|
|
|
|
rightTopCountOut: [],
|
|
|
|
|
rightTopWeightIn: [],
|
|
|
|
|
rightTopWeightOut: [],
|
|
|
|
|
dataLegend: [],
|
|
|
|
|
yData: [],
|
|
|
|
|
|
|
|
|
|
lbNames: [],
|
|
|
|
|
lbCount: [],
|
|
|
|
|
lbWeight: [],
|
|
|
|
|
|
|
|
|
|
rbNames: [],
|
|
|
|
|
rbCount: [],
|
|
|
|
|
rbWeight: [],
|
|
|
|
|
|
|
|
|
|
wmsData: {
|
|
|
|
|
ingredientsNum: 0,
|
|
|
|
|
semiFinishedCopperNum: 0,
|
|
|
|
|
finishedProductNum: 0,
|
|
|
|
|
finishedProductWeight: 0
|
|
|
|
|
},
|
|
|
|
|
rightTopData: {
|
|
|
|
|
monthData: [],
|
|
|
|
|
outData: [],
|
|
|
|
|
inData: []
|
|
|
|
|
},
|
|
|
|
|
leftBotData: {
|
|
|
|
|
seriesData: []
|
|
|
|
|
},
|
|
|
|
|
detectionDayNum: 0,
|
|
|
|
|
location:{
|
|
|
|
|
location1: '',
|
|
|
|
|
location2: '',
|
|
|
|
|
},
|
|
|
|
|
debouncedHandleResize: null,
|
|
|
|
|
energyData: {
|
|
|
|
|
LSMonth: 0,
|
|
|
|
|
QBMoth: 0,
|
|
|
|
|
LSYear: 0,
|
|
|
|
|
QBYear: 0,
|
|
|
|
|
xAxisData: [],
|
|
|
|
|
LSSeriesData: [],
|
|
|
|
|
QBSeriesData: [],
|
|
|
|
|
location1: '',
|
|
|
|
|
location2: '',
|
|
|
|
|
},
|
|
|
|
|
productionData: {},
|
|
|
|
|
totalTransport: 0,
|
|
|
|
|
energyConsumptionToday: 0
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
const app = useAppStore();
|
|
|
|
|
app.setContentFull(true);
|
|
|
|
|
this.initData();
|
|
|
|
|
this.handleScreenAuto();
|
|
|
|
|
// 绑定自适应函数 ---防止浏览器栏变化后不再适配
|
|
|
|
|
// window.onresize = () => debounce(this.handleScreenAuto());
|
|
|
|
|
// 使用防抖函数包装 handleScreenAuto
|
|
|
|
|
this.debouncedHandleResize = debounce(this.handleScreenAuto, 200);
|
|
|
|
|
|
|
|
|
|
// 绑定自适应函数
|
|
|
|
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
|
|
|
},
|
|
|
|
|
beforeUnmount() {
|
|
|
|
|
// 页面离开时移除监听
|
|
|
|
|
if (this.debouncedHandleResize) {
|
|
|
|
|
window.removeEventListener('resize', this.debouncedHandleResize);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 防抖函数
|
|
|
|
|
debounce(func, wait = 100) {
|
|
|
|
|
let timeout;
|
|
|
|
|
return function (...args) {
|
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
timeout = setTimeout(() => {
|
|
|
|
|
func.apply(this, args);
|
|
|
|
|
}, wait);
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
handleScreenAuto() {
|
|
|
|
|
const designDraftWidth = 2280; // 设计稿的宽度
|
|
|
|
|
const designDraftHeight = 1080; // 设计稿的高度
|
|
|
|
|
// 根据屏幕的变化适配的比例
|
|
|
|
|
const scale =
|
|
|
|
|
document.documentElement.clientWidth / document.documentElement.clientHeight <
|
|
|
|
|
designDraftWidth / designDraftHeight
|
|
|
|
|
? document.documentElement.clientWidth / designDraftWidth
|
|
|
|
|
: document.documentElement.clientHeight / designDraftHeight;
|
|
|
|
|
// 缩放比例
|
|
|
|
|
document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%,-50%)`;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initData() {
|
|
|
|
|
this.loading12 = true;
|
|
|
|
|
this.loading4 = true;
|
|
|
|
|
getWmsKanban().then(res => {
|
|
|
|
|
this.loading12 = false;
|
|
|
|
|
this.loading4 = false;
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
for (const key in this.wmsData) {
|
|
|
|
|
if (res.data[key] && key !== 'finishedProductNum') {
|
|
|
|
|
res.data[key] = Number(res.data[key]).toFixed(2);
|
|
|
|
|
}
|
|
|
|
|
this.wmsData[key] = res.data[key];
|
|
|
|
|
}
|
|
|
|
|
res.data.wmsIngredientsLog12Vos?.forEach(item => {
|
|
|
|
|
this.rightTopData.monthData.push(`${item.month}月`);
|
|
|
|
|
this.rightTopData.outData.push(item.totalOutboundWeight);
|
|
|
|
|
this.rightTopData.inData.push(item.totalInboundWeight);
|
|
|
|
|
});
|
|
|
|
|
const length = res.data.wmsIngredientsLog12Vos?.length || 0;
|
|
|
|
|
if (length < 12) {
|
|
|
|
|
for (let index = length; index < 12; index++) {
|
|
|
|
|
this.rightTopData.outData.push(0);
|
|
|
|
|
this.rightTopData.inData.push(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.loading3 = true;
|
|
|
|
|
this.loading1 = true;
|
|
|
|
|
getQcKanbanPage().then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.loading3 = false;
|
|
|
|
|
this.loading1 = false;
|
|
|
|
|
this.detectionDayNum = res.data.detectionDayNum || 1;
|
|
|
|
|
const qcPageResults = res.data.qcPageResults || [];
|
|
|
|
|
for (const item of qcPageResults) {
|
|
|
|
|
this.leftBotData.seriesData.push(Number(item.goodRate).toFixed(2));
|
|
|
|
|
}
|
|
|
|
|
const length = res.data.wmsIngredientsLog12Vos?.length || 0;
|
|
|
|
|
if (length < 12) {
|
|
|
|
|
for (let index = length; index < 12; index++) {
|
|
|
|
|
this.leftBotData.seriesData.push(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.loading6 = true;
|
|
|
|
|
getEcmElectricityConsumption().then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.location.location1 = res.data.yearElectricQuantity.find(item => item.workshopType.indexOf("一楼") > -1).workshopType
|
|
|
|
|
this.location.location2 = res.data.yearElectricQuantity.find(item => item.workshopType.indexOf("二楼") > -1).workshopType
|
|
|
|
|
this.energyData.location1 = this.location.location1
|
|
|
|
|
this.energyData.location2 = this.location.location2
|
|
|
|
|
this.loading6 = false;
|
|
|
|
|
this.energyData.LSYear = Number(res.data.yearElectricQuantity.find(item => item.workshopType.indexOf("一楼") > -1).electricQuantity / 1000)?.toFixed(0);
|
|
|
|
|
this.energyData.QBYear = Number(res.data.yearElectricQuantity.find(item => item.workshopType.indexOf("二楼") > -1).electricQuantity / 1000)?.toFixed(0);
|
|
|
|
|
|
|
|
|
|
this.energyData.LSMonth = Number(res.data.monthElectricQuantity[0].electricQuantity / 1000)?.toFixed(0);
|
|
|
|
|
this.energyData.QBMoth = Number(res.data.monthElectricQuantity[1].electricQuantity / 1000)?.toFixed(0);
|
|
|
|
|
const lsData = res.data.weeksElectricQuantity.filter(item => item.workshopType === this.location.location1);
|
|
|
|
|
const qbData = res.data.weeksElectricQuantity.filter(item => item.workshopType === this.location.location2);
|
|
|
|
|
lsData.forEach(item => {
|
|
|
|
|
this.energyData.xAxisData.push(item.week);
|
|
|
|
|
this.energyData.LSSeriesData.push(Number(item.totalUsage / 1000).toFixed(0));
|
|
|
|
|
});
|
|
|
|
|
qbData.forEach(item => {
|
|
|
|
|
this.energyData.QBSeriesData.push(Number(item.totalUsage / 1000).toFixed(0));
|
|
|
|
|
});
|
|
|
|
|
if (lsData.length === 7 && qbData.length === 7) {
|
|
|
|
|
this.energyConsumptionToday = (lsData[6].totalUsage / 1000 + qbData[6].totalUsage / 1000).toFixed(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.loading2 = true;
|
|
|
|
|
getMesProductWorkorder().then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.loading2 = false;
|
|
|
|
|
this.productionData = { ...res.data };
|
|
|
|
|
this.totalTransport = res.data.wiredrawingNumWeek.reduce(
|
|
|
|
|
(sum, item) => sum + (Number(item.carryNum) || 0),
|
|
|
|
|
0
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
endLoading(num) {
|
|
|
|
|
this[`loading${num}`] = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.screen-wrapper {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
.screen {
|
|
|
|
|
width: 2280px;
|
|
|
|
|
height: 1080px;
|
|
|
|
|
transform-origin: 0 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: url(../../../assets/img/pageBg.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
text-align: center;
|
|
|
|
|
letter-spacing: 16px;
|
|
|
|
|
text-indent: 30px;
|
|
|
|
|
font-size: 54px;
|
|
|
|
|
text-indent: 30px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #fffefe, #c0eaff, #7cd0fe, #219ff4);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_area {
|
|
|
|
|
margin-left: 40px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_top_area {
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 230px;
|
|
|
|
|
background: url(../../../assets/img/board/left_top_bg.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
top: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_top_div {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_top_div .bot_cycle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 43px;
|
|
|
|
|
left: 97px;
|
|
|
|
|
width: 320px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
background: url(../../../assets/img/board/produce_line.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_bot_area .bot_cycle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 26px;
|
|
|
|
|
left: -65px;
|
|
|
|
|
width: 350px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
background: url(/src/assets/img/board/produce_line.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_select {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 130px;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_select div {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #91afc8;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_select div.active {
|
|
|
|
|
border: 1px solid #8ecdf2;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
color: #8ecdf2;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_mid_area {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 285px;
|
|
|
|
|
background: url(../../../assets/img/board/left_mid_bg.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
top: 360px;
|
|
|
|
|
}
|
|
|
|
|
.alltitle {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 15px;
|
|
|
|
|
left: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_bot_area {
|
|
|
|
|
width: 505px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
top: 700px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_bot_area .top_title,
|
|
|
|
|
.right_top_area .top_title,
|
|
|
|
|
.right_mid_bot_area .top_title,
|
|
|
|
|
.right_bot_area .top_title {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 45px;
|
|
|
|
|
background: url(../../../assets/img/board/common_text_bg.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .top_title {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 45px;
|
|
|
|
|
background: url(../../../assets/img/board/mid_text_bg.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .top_title span {
|
|
|
|
|
text-align: center;
|
|
|
|
|
letter-spacing: 6px;
|
|
|
|
|
text-indent: 30px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #fffefe, #c0eaff, #7cd0fe, #219ff4);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
font-family:
|
|
|
|
|
Impact,
|
|
|
|
|
Haettenschweiler,
|
|
|
|
|
Arial Narrow Bold,
|
|
|
|
|
sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_bot_area .top_title span,
|
|
|
|
|
.right_top_area .top_title span,
|
|
|
|
|
.right_mid_bot_area .top_title span,
|
|
|
|
|
.right_bot_area .top_title span {
|
|
|
|
|
text-align: center;
|
|
|
|
|
letter-spacing: 6px;
|
|
|
|
|
text-indent: 30px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #fffefe, #c0eaff, #7cd0fe, #219ff4);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
font-family:
|
|
|
|
|
Impact,
|
|
|
|
|
Haettenschweiler,
|
|
|
|
|
Arial Narrow Bold,
|
|
|
|
|
sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_area {
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
}
|
|
|
|
|
.right_top_area {
|
|
|
|
|
width: 525px;
|
|
|
|
|
height: 260px;
|
|
|
|
|
top: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_top_bar {
|
|
|
|
|
width: 610px;
|
|
|
|
|
height: calc(100% - 45px);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0px;
|
|
|
|
|
}
|
|
|
|
|
.right_mid_top_area {
|
|
|
|
|
width: 560px;
|
|
|
|
|
height: 230px;
|
|
|
|
|
top: 345px;
|
|
|
|
|
}
|
|
|
|
|
.right_mid_top_area {
|
|
|
|
|
display: flex; /* 使用 Flexbox 布局 */
|
|
|
|
|
flex-wrap: wrap; /* 允许子元素换行 */
|
|
|
|
|
height: 180px; /* 容器高度，根据需要调整 */
|
|
|
|
|
justify-content: space-between; /* 水平方向平均分配 */
|
|
|
|
|
align-content: space-between; /* 垂直方向平均分配 */
|
|
|
|
|
}
|
|
|
|
|
.right_mid_top_area .box {
|
|
|
|
|
width: 50%; /* 小 div 宽度，占据父容器的一半 */
|
|
|
|
|
height: 50%; /* 小 div 高度，占据父容器的一半 */
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 24px; /* 文字大小，可以根据需要调整 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inner-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inner-box .image {
|
|
|
|
|
width: 66px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
background-color: #ccc; /* 仅为了可视化，实际应使用图片 */
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inner-box .image1 {
|
|
|
|
|
background: url(../../../assets/img/board/cp.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inner-box .image2 {
|
|
|
|
|
background: url(../../../assets/img/board/bcp.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
.inner-box .image3 {
|
|
|
|
|
background: url(../../../assets/img/board/ycl.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
.inner-box .image4 {
|
|
|
|
|
background: url(../../../assets/img/board/qtcl.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
.text div {
|
|
|
|
|
text-align: center;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #fffefe, #c0eaff, #7cd0fe, #219ff4);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
font-family:
|
|
|
|
|
Impact,
|
|
|
|
|
Haettenschweiler,
|
|
|
|
|
Arial Narrow Bold,
|
|
|
|
|
sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text .weight {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.text .product {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_mid_bot_area {
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 230px;
|
|
|
|
|
top: 540px;
|
|
|
|
|
}
|
|
|
|
|
.right_mid_bot_area .bar_area {
|
|
|
|
|
width: 565px;
|
|
|
|
|
height: calc(100% - 23px);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0px;
|
|
|
|
|
top: 45px;
|
|
|
|
|
background: url(../../../assets/img/board/equment_bg.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area .yxz2 {
|
|
|
|
|
top: 0px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.mid_top_area .bar_area .yxz2 .content {
|
|
|
|
|
top: 0px;
|
|
|
|
|
width: 230px;
|
|
|
|
|
height: 210px;
|
|
|
|
|
}
|
|
|
|
|
.right_bot_area .bar_area {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: calc(100% - 12px);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0px;
|
|
|
|
|
top: 35px;
|
|
|
|
|
background: url(../../../assets/img/board/equment_bg.png) no-repeat;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bar_area .yxz,
|
|
|
|
|
.bar_area .djz,
|
|
|
|
|
.bar_area .gxz {
|
|
|
|
|
flex: 1; /* 每个子元素占据相等的空间 */
|
|
|
|
|
display: flex; /* 启用 Flexbox */
|
|
|
|
|
flex-direction: column; /* 子元素垂直排列 */
|
|
|
|
|
justify-content: space-between; /* 子元素垂直分布 */
|
|
|
|
|
align-items: center; /* 水平居中 */
|
|
|
|
|
height: 200px; /* 根据需要调整高度 */
|
|
|
|
|
margin: 5px; /* 根据需要调整间距 */
|
|
|
|
|
padding: 10px; /* 根据需要调整内边距 */
|
|
|
|
|
}
|
|
|
|
|
.right_mid_bot_area .bar_area .bar_title {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 80px;
|
|
|
|
|
font-size: 16px; /* 根据需要调整字体大小 */
|
|
|
|
|
font-weight: bold; /* 标题加粗 */
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: url(../../../assets/img/board/text_bg.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
/* 标题样式 *
|
|
|
|
|
|
|
|
|
|
/* 内容样式 */
|
|
|
|
|
.content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 190px;
|
|
|
|
|
height: 190px;
|
|
|
|
|
top: 39px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_bot_area {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 230px;
|
|
|
|
|
top: 805px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_area {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.mid_bot_end_area {
|
|
|
|
|
width: 932px;
|
|
|
|
|
height: 160px;
|
|
|
|
|
bottom: 32px;
|
|
|
|
|
left: 615px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.mid_bot_end_area .item {
|
|
|
|
|
flex: 1; /* 每个div平均分配空间 */
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_end_area .item .top {
|
|
|
|
|
background: url(../../../assets/img/board/bottom_count.png) no-repeat;
|
|
|
|
|
height: 72px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 30px;
|
|
|
|
|
left: 50px;
|
|
|
|
|
width: 190px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_end_area .item .bottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 90px;
|
|
|
|
|
left: 65px;
|
|
|
|
|
width: 160px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
.mid_bot_end_area .item .bottom .left {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
background: url(../../../assets/img/board/three_left.png) no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.mid_bot_end_area .item .bottom .right {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
background: url(../../../assets/img/board/three_right.png) no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_end_area .item .bottom .bot_text {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.mid_top_area {
|
|
|
|
|
width: 870px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
left: 657px;
|
|
|
|
|
top: 140px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area {
|
|
|
|
|
width: 870px;
|
|
|
|
|
height: calc(100% - 85px);
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.mid_top_area .bar_area .left {
|
|
|
|
|
width: 210px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
.mid_top_area .bar_area .left .bar_title {
|
|
|
|
|
height: 25px;
|
|
|
|
|
width: 125px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: url(/src/assets/img/board/text_bg.png) no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area .left .content {
|
|
|
|
|
background: url(/src/assets/img/board/process.png) no-repeat;
|
|
|
|
|
top: 130px;
|
|
|
|
|
left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area .left .content .progress {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
margin-left: 55px;
|
|
|
|
|
margin-top: -30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area .mid {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area .mid div {
|
|
|
|
|
width: 70px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_top_area .bar_area .right {
|
|
|
|
|
width: 218px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area {
|
|
|
|
|
width: 1030px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
left: 580px;
|
|
|
|
|
top: 355px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area .right_area {
|
|
|
|
|
width: 250px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area .left_area {
|
|
|
|
|
width: 620px;
|
|
|
|
|
height: 220px;
|
|
|
|
|
background: url(/src/assets/img/board/jiagong_bg.png) no-repeat center center;
|
|
|
|
|
top: 45px;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area .left_area .content_area {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_area {
|
|
|
|
|
width: 900px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
left: 630px;
|
|
|
|
|
top: 633px;
|
|
|
|
|
background: url(../../../assets/img/board/left_mid_bg.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_allow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 170px;
|
|
|
|
|
height: 718px;
|
|
|
|
|
left: 500px;
|
|
|
|
|
top: 150px;
|
|
|
|
|
background: url(../../../assets/img/board/mid-left.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
.right_allow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 170px;
|
|
|
|
|
height: 718px;
|
|
|
|
|
left: 1510px;
|
|
|
|
|
top: 150px;
|
|
|
|
|
background: url(../../../assets/img/board/mid-right.png) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ls_content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 65px;
|
|
|
|
|
left: 42px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
background: url(../../../assets/img/board/ls_bg.png) no-repeat center center;
|
|
|
|
|
display: flex; /* 启用 Flexbox */
|
|
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
|
|
}
|
|
|
|
|
.mid_mid_area .left_area .ls_content,
|
|
|
|
|
.mid_mid_area .left_area .content_area .text-middle {
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area .left_area .content_area .left-side {
|
|
|
|
|
background: url(../../../assets/img/board/lighting.png) no-repeat center center; /* 设置背景图片 */
|
|
|
|
|
width: 30%; /* 占据父容器的一半宽度 */
|
|
|
|
|
height: 100%; /* 与父容器等高 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-side {
|
|
|
|
|
background: url(../../../assets/img/board/ls_text_bg.png) no-repeat center center; /* 设置背景图片 */
|
|
|
|
|
width: 30%; /* 占据父容器的一半宽度 */
|
|
|
|
|
height: 100%; /* 与父容器等高 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area .left_area .ls_content .right-side {
|
|
|
|
|
width: 40%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_mid_area .left_area .content_area .bar_area {
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 210px;
|
|
|
|
|
width: 390px;
|
|
|
|
|
top: -7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-side {
|
|
|
|
|
width: 50%;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -5px;
|
|
|
|
|
width: 90%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-side .text-middle {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
background: url(../../../assets/img/board/ls_line.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upper-content,
|
|
|
|
|
.lower-content {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.alltitle:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 12px;
|
|
|
|
|
width: 4px;
|
|
|
|
|
background: #49bcf7;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
content: '';
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_cycle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 135px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_country_area {
|
|
|
|
|
top: 810px;
|
|
|
|
|
left: 650px;
|
|
|
|
|
width: 870px;
|
|
|
|
|
height: 85px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_country_area .cunt_count {
|
|
|
|
|
width: 45px;
|
|
|
|
|
height: 85px;
|
|
|
|
|
background: url(../../../assets/img/board/count_bg.png) no-repeat center center;
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.mid_bot_country_area .douhao {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 135px;
|
|
|
|
|
margin: 0 -20px;
|
|
|
|
|
background: url(../../../assets/img/board/,.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
.mid_bot_country_area .total_count {
|
|
|
|
|
width: 95px;
|
|
|
|
|
height: 85px;
|
|
|
|
|
background: url(../../../assets/img/board/total_count.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mid_bot_country_area .unit {
|
|
|
|
|
width: 95px;
|
|
|
|
|
height: 85px;
|
|
|
|
|
background: url(../../../assets/img/board/unit_bg.png) no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clearfix:after,
|
|
|
|
|
.clearfix:before {
|
|
|
|
|
display: table;
|
|
|
|
|
content: ' ';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row > li {
|
|
|
|
|
float: left;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
}
|
|
|
|
|
.col-6 {
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sqzs {
|
|
|
|
|
margin-right: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sqzs h1 span {
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
font-family:
|
|
|
|
|
Impact,
|
|
|
|
|
Haettenschweiler,
|
|
|
|
|
Arial Narrow Bold,
|
|
|
|
|
sans-serif;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
