<template>
|
<div class="page fullpage">
|
<img class="bg" src="@/images/bgc.png" alt="" />
|
<div class="left">
|
<img class="left-bg" src="@/images/left_bg@2x.png" alt="" />
|
<div class="left-title">
|
<div class="left-title-content">
|
数据统计
|
</div>
|
</div>
|
<div class="left-day-account">
|
<div class="left-day-account-title">
|
<div class="left-type-account-title-image1">
|
<img
|
class="left-type-account-title-bg"
|
src="@/images/img_1@2x.png"
|
/>
|
</div>
|
<div class="left-type-account-title-content">
|
日统计
|
</div>
|
<div class="left-type-account-title-image2">
|
<img
|
class="left-type-account-title-bg"
|
src="@/images/img_2@2x.png"
|
/>
|
</div>
|
</div>
|
<div class="left-week-account-content label">
|
<div class="left-week-account-content-left">
|
<div class="left-week-account-kaiji">
|
<div class="left-week-account-kaiji-icon">
|
<img
|
class="left-week-account-kaiji-icon-bg"
|
src="@/images/img_7@2x.png"
|
/>
|
</div>
|
<div class="left-week-account-kaiji-desc">
|
<p>
|
<b>{{ dayObj.runTimeRatio * 100 }}</b
|
>%
|
</p>
|
<p>开机时间占比</p>
|
</div>
|
</div>
|
<div class="left-week-account-oriuse">
|
<div class="left-week-account-oriuse-icon">
|
<img
|
class="left-week-account-oriuse-icon-bg"
|
src="@/images/img_9@2x.png"
|
/>
|
</div>
|
<div class="left-week-account-oriuse-desc">
|
<p>
|
<b>{{ dayObj.switchCount }}</b
|
>次
|
</p>
|
<p>切换次数</p>
|
</div>
|
</div>
|
</div>
|
<div class="left-week-account-content-right">
|
<div class="left-week-account-totaluse">
|
<div class="left-week-account-totaluse-icon">
|
<img
|
class="left-week-account-totaluse-icon-bg"
|
src="@/images/img_8@2x.png"
|
/>
|
</div>
|
<div class="left-week-account-totaluse-desc">
|
<p>
|
<b>{{ dayObj.totalOutput }}</b
|
>件
|
</p>
|
<p>总计产量</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="left-week-account">
|
<div class="left-week-account-title">
|
<div class="left-type-account-title-image1">
|
<img
|
class="left-type-account-title-bg"
|
src="@/images/img_1@2x.png"
|
/>
|
</div>
|
<div class="left-type-account-title-content">
|
周统计
|
</div>
|
<div class="left-type-account-title-image2">
|
<img
|
class="left-type-account-title-bg"
|
src="@/images/img_2@2x.png"
|
/>
|
</div>
|
</div>
|
<div class="left-week-account-content label">
|
<div class="left-week-account-content-left">
|
<div class="left-week-account-kaiji">
|
<div class="left-week-account-kaiji-icon">
|
<img
|
class="left-week-account-kaiji-icon-bg"
|
src="@/images/img_7@2x.png"
|
/>
|
</div>
|
<div class="left-week-account-kaiji-desc">
|
<p>
|
<b>{{ weekObj.runTimeRatio * 100 }}</b
|
>%
|
</p>
|
<p>开机时间占比</p>
|
</div>
|
</div>
|
<div class="left-week-account-oriuse">
|
<div class="left-week-account-oriuse-icon">
|
<img
|
class="left-week-account-oriuse-icon-bg"
|
src="@/images/img_9@2x.png"
|
/>
|
</div>
|
<div class="left-week-account-oriuse-desc">
|
<p>
|
<b>{{ weekObj.switchCount }}</b
|
>次
|
</p>
|
<p>切换次数</p>
|
</div>
|
</div>
|
</div>
|
<div class="left-week-account-content-right">
|
<div class="left-week-account-totaluse">
|
<div class="left-week-account-totaluse-icon">
|
<img
|
class="left-week-account-totaluse-icon-bg"
|
src="@/images/img_8@2x.png"
|
/>
|
</div>
|
<div class="left-week-account-totaluse-desc">
|
<p>
|
<b>{{ weekObj.totalOutput }}</b
|
>件
|
</p>
|
<p>总计产量</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="left-month-account label">
|
<div class="left-month-account-title">
|
<div class="left-type-account-title-image1">
|
<img
|
class="left-type-account-title-bg"
|
src="@/images/img_1@2x.png"
|
/>
|
</div>
|
<div class="left-type-account-title-content">
|
月统计
|
</div>
|
<div class="left-type-account-title-image2">
|
<img
|
class="left-type-account-title-bg"
|
src="@/images/img_2@2x.png"
|
/>
|
</div>
|
</div>
|
<div class="left-month-account-content">
|
<div class="left-month-account-content-left">
|
<div class="left-month-account-kaiji">
|
<div class="left-month-account-kaiji-icon">
|
<img
|
class="left-month-account-kaiji-icon-bg"
|
src="@/images/img_11@2x.png"
|
/>
|
</div>
|
<div class="left-month-account-kaiji-desc">
|
<p>
|
<b>{{ monthObj.runTimeRatio * 100 }}</b
|
>%
|
</p>
|
<p>开机时间占比</p>
|
</div>
|
</div>
|
<div class="left-month-account-oriuse">
|
<div class="left-month-account-oriuse-icon">
|
<img
|
class="left-month-account-oriuse-icon-bg"
|
src="@/images/img_13@2x.png"
|
/>
|
</div>
|
<div class="left-month-account-oriuse-desc">
|
<p>
|
<b>{{ monthObj.switchCount }}</b
|
>次
|
</p>
|
<p>切换次数</p>
|
</div>
|
</div>
|
</div>
|
<div class="left-month-account-content-right">
|
<div class="left-month-account-totaluse">
|
<div class="left-month-account-totaluse-icon">
|
<img
|
class="left-month-account-totaluse-icon-bg"
|
src="@/images/img_12@2x.png"
|
/>
|
</div>
|
<div class="left-month-account-totaluse-desc">
|
<p>
|
<b>{{ monthObj.totalOutput }}</b
|
>件
|
</p>
|
<p>总计产量</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<img class="right-bg" src="@/images/right_bg@2x.png" />
|
<div class="right-title">
|
<div class="right-title-content">
|
设备统计
|
</div>
|
</div>
|
<div class="right-main">
|
<div class="right-main-detail">
|
<div class="right-main-detail-top">
|
<div class="right-main-detail-top-left">
|
<div class="right-main-equip-param">
|
<div class="right-main-equip-param-title">
|
<div>
|
<img
|
class="right-main-equip-param-title-bg"
|
src="@/images/title_bg@2x.png"
|
/>
|
</div>
|
<div class="right-main-equip-param-title-content">
|
设备实时参数
|
</div>
|
</div>
|
<div class="right-main-equip-param-table">
|
<table>
|
<tbody>
|
<tr>
|
<td style="width:.328rem;">设备编号</td>
|
<td>{{ deviceName }}</td>
|
</tr>
|
<tr>
|
<td style="width:.328rem;">状态</td>
|
<td>
|
{{
|
realTimeData.autoState === 1
|
? '自动'
|
: realTimeData.manuState === 1
|
? '手动'
|
: '停机'
|
}}
|
</td>
|
</tr>
|
<tr>
|
<td style="width:.328rem;">产量</td>
|
<td>{{ realTimeData.output }}件</td>
|
</tr>
|
<tr>
|
<td style="width:.328rem;">运行时间</td>
|
<td>{{ realTimeData.runTime }}h</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="right-main-history-order">
|
<div class="right-main-history-order-title">
|
<div>
|
<img
|
class="right-main-history-order-title-bg"
|
src="../../images/title_bg@2x.png"
|
/>
|
</div>
|
<div class="right-main-history-order-title-content">
|
设备历史信息
|
</div>
|
</div>
|
<div class="right-main-history-order-table history-table">
|
<table>
|
<thead>
|
<tr>
|
<th>日期</th>
|
<th>加工计数</th>
|
<th>设备警报</th>
|
<th>运行状态</th>
|
</tr>
|
</thead>
|
<tbody ref="tbodyHistory">
|
<tr v-for="(item, i) in historyTable" :key="i">
|
<td>{{ item.time }}</td>
|
<td
|
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
>
|
{{ item.jgjs }}
|
</td>
|
<td
|
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
>
|
{{ item.sbbj === '0' ? '正常' : '报警' }}
|
</td>
|
<td>
|
{{
|
item.zdyx === '1'
|
? '自动'
|
: item.sdyx === '1'
|
? '手动'
|
: '停机'
|
}}
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="right-main-poweron-stamping">
|
<div class="right-main-poweron-stamping-title">
|
<div>
|
<img
|
class="right-main-poweron-stamping-title-bg"
|
src="@/images/title_bg@2x.png"
|
/>
|
</div>
|
<div class="right-main-poweron-stamping-title-content">
|
当月开机时间
|
</div>
|
</div>
|
<div class="right-main-poweron-stamping-report">
|
<div
|
id="line"
|
style="width:4.44rem;height:0.9rem;position:relative;"
|
></div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="right-equip-list"
|
@mouseenter="moveInterval"
|
@mouseleave="addInterval"
|
>
|
<div class="right-equip-list-div">
|
<div>
|
<div
|
v-for="(item, i) in panelData"
|
v-bind:key="i"
|
style="width:.4rem;height:.21rem;"
|
>
|
<div @click="setCurrentDeviceId(item, i)">
|
<img
|
v-show="item.id == currentDeviceId"
|
class="right-equip-list-bg"
|
src="@/images/choose_bg.png"
|
/>
|
<div style="line-height: 0.15rem !important;cursor: pointer;">
|
<span class="right-equip-text-green">{{ item.code }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as echarts from 'echarts'
|
import {
|
bigScreen,
|
totalInfo,
|
deviceInfo,
|
historyInfo,
|
monthRunTime
|
} from '@/api/product/dutyrecord'
|
export default {
|
data() {
|
return {
|
dayObj: {
|
runTimeRatio: 0,
|
switchCount: 0,
|
totalOutput: 0
|
},
|
weekObj: {
|
runTimeRatio: 0,
|
switchCount: 0,
|
totalOutput: 0
|
},
|
monthObj: {
|
runTimeRatio: 0,
|
switchCount: 0,
|
totalOutput: 0
|
},
|
realTimeData: {},
|
deviceName: 'SCX1',
|
tbody: [],
|
interval: undefined,
|
pieData: [],
|
// 水图Ecart实例数组
|
pie: [],
|
lineData: {},
|
line: {},
|
currentDeviceId: '',
|
panelData: [],
|
historyTable: [
|
{
|
date: '2022-06-07',
|
orderNumber: '20210721000BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 73504
|
},
|
{
|
date: '2022-06-07',
|
orderNumber: '202107210002BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 56478
|
},
|
{
|
date: '2022-06-01',
|
orderNumber: '11',
|
productModel: '2015系列',
|
produceQuantity: 0
|
},
|
{
|
date: '2022-06-01',
|
orderNumber: '11',
|
productModel: '2015系列',
|
produceQuantity: 0
|
},
|
{
|
date: '2022-06-01',
|
orderNumber: 'cs',
|
productModel: '2015系列',
|
produceQuantity: 0
|
},
|
{
|
date: '2022-05-27',
|
orderNumber: '202204150011byd+1',
|
productModel: '2015系列',
|
produceQuantity: 1
|
},
|
{
|
date: '2022-05-26',
|
orderNumber: '202204150011byd+1',
|
productModel: '2015系列',
|
produceQuantity: 1755
|
},
|
{
|
date: '2022-05-25',
|
orderNumber: '202204150011byd+1',
|
productModel: '2015系列',
|
produceQuantity: 38964
|
},
|
{
|
date: '2022-05-24',
|
orderNumber: '202204150011BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 84193
|
},
|
{
|
date: '2022-05-24',
|
orderNumber: '20220415011+1',
|
productModel: '2015系列',
|
produceQuantity: 23096
|
},
|
{
|
date: '2022-05-24',
|
orderNumber: '20220415011+1',
|
productModel: '2015系列',
|
produceQuantity: 1703
|
},
|
{
|
date: '2022-05-23',
|
orderNumber: '202204150011BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 59269
|
},
|
{
|
date: '2022-05-22',
|
orderNumber: '202204150011byd+1',
|
productModel: '2015系列',
|
produceQuantity: 104495
|
},
|
{
|
date: '2022-05-22',
|
orderNumber: '202204150011BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 105493
|
},
|
{
|
date: '2022-05-21',
|
orderNumber: '202204150011+1',
|
productModel: '2015系列',
|
produceQuantity: 105314
|
},
|
{
|
date: '2022-05-20',
|
orderNumber: '202204150011BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 69358
|
},
|
{
|
date: '2022-05-19',
|
orderNumber: '202204150011byd+1',
|
productModel: '2015系列',
|
produceQuantity: 20964
|
},
|
{
|
date: '2022-05-18',
|
orderNumber: '202204150011BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 142945
|
},
|
{
|
date: '2022-05-14',
|
orderNumber: '202204150011BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 95267
|
},
|
{
|
date: '2022-03-01',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 11869
|
},
|
{
|
date: '2022-02-28',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 96116
|
},
|
{
|
date: '2022-02-28',
|
orderNumber: '202201130020BYD+3',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 93947
|
},
|
{
|
date: '2022-02-27',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 79638
|
},
|
{
|
date: '2022-02-26',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 22764
|
},
|
{
|
date: '2022-02-26',
|
orderNumber: '202201130020BYD+3',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 91264
|
},
|
{
|
date: '2022-02-24',
|
orderNumber: '20220113002BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 64681
|
},
|
{
|
date: '2022-02-23',
|
orderNumber: '202201120022+23',
|
productModel: '132-4',
|
produceQuantity: 94102
|
},
|
{
|
date: '2022-02-22',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 31828
|
},
|
{
|
date: '2022-02-22',
|
orderNumber: '2022011300201',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 68337
|
},
|
{
|
date: '2022-02-21',
|
orderNumber: '202111230022ND+45',
|
productModel: '160-4',
|
produceQuantity: 66014
|
},
|
{
|
date: '2022-02-20',
|
orderNumber: '202111230022ND+21',
|
productModel: '160-4',
|
produceQuantity: 21164
|
},
|
{
|
date: '2022-02-19',
|
orderNumber: '202111230022nd+20',
|
productModel: '160-4',
|
produceQuantity: 37741
|
},
|
{
|
date: '2022-02-19',
|
orderNumber: '202201130020byd+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 81153
|
},
|
{
|
date: '2022-02-18',
|
orderNumber: '22201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 102988
|
},
|
{
|
date: '2022-02-18',
|
orderNumber: '202201130020BYD+3',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 91384
|
},
|
{
|
date: '2022-02-17',
|
orderNumber: '20221130020byd+3',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 89102
|
},
|
{
|
date: '2022-02-17',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 91804
|
},
|
{
|
date: '2022-02-16',
|
orderNumber: '202201130020+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 103971
|
},
|
{
|
date: '2022-02-16',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 97805
|
},
|
{
|
date: '2022-02-15',
|
orderNumber: '20221130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 92762
|
},
|
{
|
date: '2022-02-15',
|
orderNumber: '202201040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 51391
|
},
|
{
|
date: '2022-02-14',
|
orderNumber: '202201040018byd+1',
|
productModel: '2015系列',
|
produceQuantity: 0
|
},
|
{
|
date: '2022-02-14',
|
orderNumber: '20220113020BYD+3',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 89438
|
},
|
{
|
date: '2022-02-13',
|
orderNumber: '202201130820BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 72204
|
},
|
{
|
date: '2022-02-12',
|
orderNumber: '202201130020bud+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 26800
|
},
|
{
|
date: '2022-02-12',
|
orderNumber: '202201040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 98031
|
},
|
{
|
date: '2022-02-11',
|
orderNumber: '202201040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 58069
|
},
|
{
|
date: '2022-02-11',
|
orderNumber: '202201040018byd+1',
|
productModel: '2015系列',
|
produceQuantity: 5087
|
},
|
{
|
date: '2022-02-11',
|
orderNumber: '202201130020byd+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 35881
|
},
|
{
|
date: '2022-02-10',
|
orderNumber: '202201130020BYD',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 88633
|
},
|
{
|
date: '2022-02-10',
|
orderNumber: '202201130020+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 15918
|
},
|
{
|
date: '2022-02-10',
|
orderNumber: '202201130020',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 26047
|
},
|
{
|
date: '2022-02-09',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 89955
|
},
|
{
|
date: '2022-02-09',
|
orderNumber: '202201130020BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 51786
|
},
|
{
|
date: '2022-02-09',
|
orderNumber: '202201040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 34797
|
},
|
{
|
date: '2022-02-08',
|
orderNumber: '20221040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 88722
|
},
|
{
|
date: '2022-02-08',
|
orderNumber: '20221040018byd+1',
|
productModel: '2015系列',
|
produceQuantity: 35022
|
},
|
{
|
date: '2022-02-07',
|
orderNumber: '202201040018',
|
productModel: '2015系列',
|
produceQuantity: 102871
|
},
|
{
|
date: '2022-02-07',
|
orderNumber: '20220104008ByD+1',
|
productModel: '2015系列',
|
produceQuantity: 28385
|
},
|
{
|
date: '2022-02-04',
|
orderNumber: '202104140015+25',
|
productModel: '132-4',
|
produceQuantity: 16624
|
},
|
{
|
date: '2022-02-04',
|
orderNumber: '202104140015',
|
productModel: '132-4',
|
produceQuantity: 53724
|
},
|
{
|
date: '2022-01-30',
|
orderNumber: '202104140015+25',
|
productModel: '132-4',
|
produceQuantity: 59063
|
},
|
{
|
date: '2022-01-29',
|
orderNumber: '202104140015+25',
|
productModel: '132-4',
|
produceQuantity: 52127
|
},
|
{
|
date: '2022-01-29',
|
orderNumber: '202112240001WXHD+3',
|
productModel: '132-4',
|
produceQuantity: 72792
|
},
|
{
|
date: '2022-01-29',
|
orderNumber: '202112240001WXH D＋3',
|
productModel: '132-4',
|
produceQuantity: 22101
|
},
|
{
|
date: '2022-01-28',
|
orderNumber: '202201040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 2365
|
},
|
{
|
date: '2022-01-28',
|
orderNumber: '2021121600027ND+32',
|
productModel: '160-4',
|
produceQuantity: 22392
|
},
|
{
|
date: '2022-01-28',
|
orderNumber: '2021121600027ND+32',
|
productModel: '160-4',
|
produceQuantity: 74672
|
},
|
{
|
date: '2022-01-27',
|
orderNumber: '202112160027Nd+29',
|
productModel: '160-4',
|
produceQuantity: 84149
|
},
|
{
|
date: '2022-01-27',
|
orderNumber: '2021121600027ND+32',
|
productModel: '160-4',
|
produceQuantity: 73480
|
},
|
{
|
date: '2022-01-26',
|
orderNumber: '202112160027nd+32',
|
productModel: '160-4',
|
produceQuantity: 73177
|
},
|
{
|
date: '2022-01-26',
|
orderNumber: '202112160027+36',
|
productModel: '160-4',
|
produceQuantity: 48287
|
},
|
{
|
date: '2022-01-26',
|
orderNumber: '202112160027ND+32',
|
productModel: '160-4',
|
produceQuantity: 1744
|
},
|
{
|
date: '2022-01-25',
|
orderNumber: '202112160027ND+32',
|
productModel: '160-4',
|
produceQuantity: 27716
|
},
|
{
|
date: '2022-01-25',
|
orderNumber: '20220110029byd+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 16430
|
},
|
{
|
date: '2022-01-24',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'TZ220XYE（单列）',
|
produceQuantity: 1711
|
},
|
{
|
date: '2022-01-24',
|
orderNumber: '202201040018BYD+1',
|
productModel: '2015系列',
|
produceQuantity: 3217
|
},
|
{
|
date: '2022-01-24',
|
orderNumber: '202201100029BYD',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 89605
|
},
|
{
|
date: '2022-01-23',
|
orderNumber: '202201100029byd+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 29795
|
},
|
{
|
date: '2022-01-23',
|
orderNumber: '202201130020byd+22',
|
productModel: 'TZ220XYE（单列）',
|
produceQuantity: 9458
|
},
|
{
|
date: '2022-01-23',
|
orderNumber: '20220100029byd+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 1362
|
},
|
{
|
date: '2022-01-22',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 95230
|
},
|
{
|
date: '2022-01-22',
|
orderNumber: '202201100029+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 96290
|
},
|
{
|
date: '2022-01-21',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 95383
|
},
|
{
|
date: '2022-01-21',
|
orderNumber: '202112240008BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 95043
|
},
|
{
|
date: '2022-01-20',
|
orderNumber: '20211224008BYD+4',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 97861
|
},
|
{
|
date: '2022-01-20',
|
orderNumber: '20211224008byd+4',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 91246
|
},
|
{
|
date: '2022-01-19',
|
orderNumber: '202112240008BYD+4',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 44635
|
},
|
{
|
date: '2022-01-19',
|
orderNumber: '20211224008比亚迪＋4',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 72093
|
},
|
{
|
date: '2022-01-18',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 98221
|
},
|
{
|
date: '2022-01-18',
|
orderNumber: '202201100029BYD+12',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 96325
|
},
|
{
|
date: '2022-01-17',
|
orderNumber: '202201100029byd+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 90352
|
},
|
{
|
date: '2022-01-17',
|
orderNumber: '202201100029byd＋10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 90444
|
},
|
{
|
date: '2022-01-16',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 42282
|
},
|
{
|
date: '2022-01-16',
|
orderNumber: '202201100029BYD+1',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 35448
|
},
|
{
|
date: '2022-01-15',
|
orderNumber: '202201100029+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 91264
|
},
|
{
|
date: '2022-01-15',
|
orderNumber: '202201100029byd+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 88114
|
},
|
{
|
date: '2022-01-15',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 23191
|
},
|
{
|
date: '2022-01-14',
|
orderNumber: '202201100029BYD+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 138373
|
},
|
{
|
date: '2022-01-14',
|
orderNumber: '202201100029BYd+10',
|
productModel: 'DM4.0TZ220XYE（2号模）',
|
produceQuantity: 0
|
}
|
],
|
num: 0,
|
carouselInterval: undefined
|
}
|
},
|
created() {
|
// this.init()
|
},
|
mounted() {
|
var that = this
|
// 自适应设置
|
that.fontSize()
|
window.onresize = function() {
|
that.fontSize()
|
}
|
that.init()
|
that.autoScroll()
|
that.carousel()
|
// that.createCharts()
|
setInterval(() => {
|
// console.info("刷新：" + new Date());
|
// that.init()
|
}, 30000)
|
},
|
methods: {
|
// 获取设备
|
async getbigScreen() {
|
const {
|
data: { result }
|
} = await bigScreen()
|
this.panelData = result
|
this.currentDeviceId = this.panelData[0].id
|
this.getAllDeviceReal()
|
},
|
// 获取日，周，月统计
|
async gettotalInfo() {
|
const {
|
data: { result: dayObj }
|
} = await totalInfo(1)
|
this.dayObj = dayObj
|
const {
|
data: { result: weekObj }
|
} = await totalInfo(2)
|
this.weekObj = weekObj
|
const {
|
data: { result: monthObj }
|
} = await totalInfo(3)
|
this.monthObj = monthObj
|
},
|
// 获取设备实时参数
|
async getdeviceInfo() {
|
const {
|
data: { result }
|
} = await deviceInfo(this.currentDeviceId)
|
this.realTimeData = result
|
},
|
// 获取设备历史信息
|
async gethistoryInfo() {
|
const {
|
data: { result }
|
} = await historyInfo(this.currentDeviceId)
|
this.historyTable = result
|
},
|
// 获取设备一个月内开机时间
|
async getmonthRunTime() {
|
const {
|
data: { result }
|
} = await monthRunTime(this.currentDeviceId)
|
const dateLineData = []
|
const valueLineData = []
|
result.forEach((item) => {
|
const time = item.time.replace(/-/gi, '/')
|
dateLineData.push(time.slice(5, 10))
|
valueLineData.push(item.runTime)
|
})
|
this.lineData = {
|
date: dateLineData,
|
value: valueLineData
|
}
|
this.createCharts()
|
},
|
getAllDeviceReal() {
|
this.getdeviceInfo()
|
this.gethistoryInfo()
|
this.getmonthRunTime()
|
},
|
carousel() {
|
this.carouselInterval = setInterval(() => {
|
this.num++
|
if (this.num === this.panelData.length) {
|
this.num = 0
|
}
|
this.panelData.forEach((item, index) => {
|
if (this.num === index) {
|
this.currentDeviceId = item.id
|
}
|
})
|
this.getAllDeviceReal()
|
}, 10000)
|
},
|
moveInterval() {
|
clearInterval(this.carouselInterval)
|
},
|
addInterval() {
|
this.carousel()
|
},
|
fontSize() {
|
document.getElementsByTagName('html')[0].style.fontSize =
|
(50 *
|
(window.innerWidth ||
|
document.documentElement.clientWidth ||
|
document.body.clientWidth)) /
|
375 +
|
'px'
|
},
|
createCharts() {
|
var that = this
|
|
var option = {
|
color: ['rgba(191,182,26,1)'],
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
},
|
formatter: (params) => {
|
if (params && params.length > 0) {
|
if (params.length === 1) {
|
return (
|
params[0].name +
|
'<br />' +
|
params[0].seriesName +
|
'时间: ' +
|
params[0].value +
|
'h'
|
)
|
} else {
|
return (
|
params[0].name +
|
'<br />' +
|
params[0].seriesName +
|
'时间: ' +
|
params[0].value +
|
'h' +
|
'<br />'
|
)
|
}
|
} else {
|
return ''
|
}
|
}
|
},
|
legend: {
|
align: 'left',
|
right: '1%',
|
top: '2%',
|
type: 'plain',
|
textStyle: {
|
color: '#ffffff',
|
fontSize: '0.0468rem'
|
},
|
// icon:'rect',
|
itemGap: 25,
|
itemWidth: 18,
|
icon:
|
'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
|
data: [
|
{
|
name: '开机'
|
}
|
]
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {
|
show: false
|
}
|
}
|
},
|
grid: {
|
left: '2%',
|
right: '1.48%',
|
top: '20%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
axisLine: {
|
// 坐标轴轴线相关设置。数学上的x轴
|
show: true,
|
lineStyle: {
|
color: '#00A8FF'
|
}
|
},
|
axisLabel: {
|
// 坐标轴刻度标签的相关设置
|
textStyle: {
|
color: '#ffffff',
|
fontSize: '0.0468rem'
|
},
|
formatter: function(data) {
|
return data
|
},
|
showMaxLabel: true
|
// interval:0,//横轴信息全部显示
|
// rotate:30,//-30度角倾斜显示
|
},
|
data: this.lineData.date
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
min: 0,
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: '#00A8FF',
|
opacity: 0.33
|
}
|
},
|
axisLine: {
|
show: false
|
},
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: '#ffffff',
|
fontSize: '0.0468rem'
|
},
|
formatter: function(value) {
|
if (value === 0) {
|
return value
|
}
|
return value
|
}
|
},
|
axisTick: {
|
show: false
|
}
|
}
|
],
|
series: [
|
{
|
name: '开机',
|
type: 'line',
|
smooth: true,
|
lineStyle: {
|
normal: {
|
width: 1,
|
color: 'rgba(191,182,26,1)' // 线条颜色
|
}
|
},
|
showSymbol: false,
|
areaStyle: {
|
opacity: 0.8,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: 'rgba(94, 109, 55)'
|
},
|
{
|
offset: 1,
|
color: 'rgba(54, 85, 79)'
|
}
|
])
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.lineData.value
|
}
|
]
|
}
|
|
// 线图
|
that.line = echarts.init(document.getElementById('line'))
|
that.line.setOption(option)
|
// Echarts自适应
|
window.addEventListener('resize', () => {
|
setTimeout(() => {
|
that.line.resize()
|
}, 1)
|
})
|
},
|
autoScroll() {
|
var that = this
|
// 获取表格对象
|
that.tbody[0] = that.$refs.tbodyHistory
|
// 循环计时器
|
that.interval = setInterval(function() {
|
for (var i = 0; i < that.tbody.length; i++) {
|
var tbody0 = that.tbody[0]
|
var tr = tbody0.children
|
if (tbody0.children.length > 10) {
|
var tr_height = tr[0].offsetHeight
|
// 判断是否到底，如果到底就返回顶部
|
if (
|
tbody0.scrollTop + tbody0.offsetHeight + 2 >
|
tr_height * tr.length - tr_height / 20
|
) {
|
tbody0.scrollTop = 0
|
}
|
// 每次向上滚动5%
|
tbody0.scrollTop = tbody0.scrollTop + 2
|
}
|
}
|
|
// 每隔50ms运行1次
|
}, 50)
|
},
|
// getEquipColor(v) {
|
// if (v == 3) {
|
// return 'right-equip-text-green'
|
// } else if (v == 2) {
|
// return 'right-equip-text-yellow'
|
// } else {
|
// return 'right-equip-text-red'
|
// }
|
// },
|
setCurrentDeviceId(item, i) {
|
this.currentDeviceId = item.id
|
this.deviceName = item.code
|
this.num = i
|
this.getAllDeviceReal()
|
},
|
init() {
|
this.getbigScreen()
|
this.gettotalInfo()
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.label b {
|
padding: 0 0.025rem 0 0;
|
float: none;
|
font-size: 0.1rem;
|
color: #00ebfe;
|
width: 100%;
|
font-weight: normal;
|
}
|
|
.bg {
|
top: 0;
|
left: 0;
|
width: 7.5rem;
|
position: absolute;
|
}
|
|
.left {
|
width: 2.0625rem;
|
height: 3.71rem;
|
z-index: 2;
|
margin: 0.43rem 0 0 0.0035rem;
|
}
|
|
.left-bg {
|
top: 0;
|
left: 0;
|
width: 2.0625rem;
|
position: absolute;
|
}
|
|
.left-title {
|
width: 100%;
|
height: 0.18rem;
|
}
|
|
.left-title-content {
|
margin-top: 0.051rem;
|
margin-left: 0.843rem;
|
width: 0.3125rem;
|
height: 0.082rem;
|
font-size: 0.078rem;
|
line-height: 0.0918rem;
|
font-weight: bold;
|
color: #fff;
|
}
|
|
.left-day-account {
|
width: 100%;
|
height: 1rem;
|
margin-top: 0.125rem;
|
}
|
|
.left-day-account-title {
|
width: 100%;
|
height: 0.0625rem;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.left-type-account-title-image1 {
|
width: 0.6836rem;
|
height: 0.0625rem;
|
}
|
|
.left-type-account-title-image2 {
|
width: 0.6836rem;
|
height: 0.0625rem;
|
}
|
|
.left-type-account-title-bg {
|
top: 0;
|
left: 0;
|
width: 0.6836rem;
|
position: absolute;
|
}
|
|
.left-type-account-title-content {
|
height: 0.0625rem;
|
font-size: 0.0625rem;
|
line-height: 0.0625rem;
|
font-weight: bold;
|
color: #fff;
|
}
|
|
.left-day-account-content {
|
margin-top: 0.1211rem;
|
width: 100%;
|
height: 1.2812rem;
|
}
|
|
.left-day-account-data {
|
margin-left: 0.0625rem;
|
width: 0.7rem;
|
height: 1.2812rem;
|
}
|
|
.left-day-account-data-title {
|
height: 0.0547rem;
|
width: 100%;
|
}
|
|
.left-day-account-data-title-icon {
|
}
|
|
.left-day-account-data-title-desc {
|
height: 0.0469rem;
|
font-size: 0.0547rem;
|
font-weight: 400;
|
color: #2c9cee;
|
line-height: 0.0547rem;
|
}
|
|
.left-day-account-data-content {
|
margin-top: 0.0273rem;
|
height: 1.1406rem;
|
width: 100%;
|
}
|
|
.left-day-account-data-content > div {
|
margin-top: 0.0352rem;
|
height: 0.25rem;
|
width: 100%;
|
display: flex;
|
}
|
|
.left-day-account-data-content-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-day-account-data-content-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-day-account-data-content-desc {
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-day-account-data-content-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-day-account-data-content-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #14c5f2;
|
}
|
|
.left-day-account-duty {
|
float: right;
|
margin-right: 0.07rem;
|
width: 1.1876rem;
|
height: 1.2812rem;
|
}
|
|
.left-day-account-duty-title {
|
height: 0.0547rem;
|
width: 100%;
|
}
|
|
.left-day-account-duty-title-icon {
|
}
|
|
.left-day-account-duty-title-desc {
|
height: 0.0469rem;
|
font-size: 0.0547rem;
|
font-weight: 400;
|
color: #2c9cee;
|
line-height: 0.0547rem;
|
}
|
|
.left-day-account-duty-content {
|
margin-top: 0.0273rem;
|
height: 1.1406rem;
|
width: 100%;
|
}
|
|
.table table {
|
width: 100%;
|
text-align: center;
|
border-spacing: 0;
|
float: left;
|
border: 0.0039rem solid #00a8ff;
|
}
|
|
.table tbody::-webkit-scrollbar {
|
display: none;
|
}
|
|
.table thead,
|
.table tbody {
|
float: left;
|
scrollbar-width: none;
|
}
|
|
.table tbody {
|
height: 0.99rem;
|
overflow-y: scroll;
|
color: #98dbff;
|
}
|
|
.table tr {
|
width: 100%;
|
display: table;
|
table-layout: fixed;
|
}
|
|
.table tr,
|
.table th,
|
.table td {
|
font-size: 0.04687rem;
|
line-height: 0.14rem;
|
word-break: keep-all;
|
white-space: nowrap;
|
}
|
|
.table thead {
|
width: 100%;
|
background: rgba(0, 168, 255, 0.16);
|
color: #00a8ff;
|
border-bottom: 0.0039rem solid #00a8ff;
|
}
|
|
.table tbody tr:nth-child(even) {
|
background: rgba(0, 168, 255, 0.25);
|
}
|
|
.left-week-account {
|
width: 100%;
|
height: 0.9063rem;
|
margin-top: 0.0625rem;
|
}
|
|
.left-week-account-title {
|
width: 100%;
|
height: 0.0625rem;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.left-week-account-content {
|
margin-top: 0.1523rem;
|
width: 100%;
|
height: 0.6915rem;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.left-week-account-content-left {
|
width: 0.95rem;
|
height: 0.6915rem;
|
}
|
|
.left-week-account-kaiji {
|
width: 0.95rem;
|
height: 0.25rem;
|
}
|
|
.left-week-account-kaiji-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-week-account-kaiji-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-week-account-kaiji-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-week-account-kaiji-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-week-account-kaiji-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #08f6d5;
|
}
|
|
.left-week-account-oriuse {
|
width: 0.95rem;
|
height: 0.25rem;
|
margin-top: 0.1093rem;
|
}
|
|
.left-week-account-oriuse-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-week-account-oriuse-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-week-account-oriuse-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-week-account-oriuse-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-week-account-oriuse-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #08f6d5;
|
}
|
|
.left-week-account-content-right {
|
width: 0.95rem;
|
height: 0.6915rem;
|
}
|
|
.left-week-account-totaluse {
|
width: 0.95rem;
|
height: 0.25rem;
|
}
|
|
.left-week-account-totaluse-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-week-account-totaluse-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-week-account-totaluse-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-week-account-totaluse-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-week-account-totaluse-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #08f6d5;
|
}
|
|
.left-week-account-totalya {
|
width: 0.95rem;
|
height: 0.25rem;
|
margin-top: 0.1093rem;
|
}
|
|
.left-week-account-totalya-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-week-account-totalya-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-week-account-totalya-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-week-account-totalya-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-week-account-totalya-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #08f6d5;
|
}
|
|
.left-month-account {
|
width: 100%;
|
height: 0.9063rem;
|
margin-top: 0.0625rem;
|
}
|
|
.left-month-account-title {
|
width: 100%;
|
height: 0.0625rem;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.left-month-account-content {
|
margin-top: 0.1367rem;
|
width: 100%;
|
height: 0.6915rem;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.left-month-account-content-left {
|
width: 0.95rem;
|
height: 0.6915rem;
|
}
|
|
.left-month-account-kaiji {
|
width: 0.95rem;
|
height: 0.25rem;
|
}
|
|
.left-month-account-kaiji-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-month-account-kaiji-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-month-account-kaiji-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-month-account-kaiji-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-month-account-kaiji-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #1ac9ff;
|
}
|
|
.left-month-account-oriuse {
|
width: 0.95rem;
|
height: 0.25rem;
|
margin-top: 0.1093rem;
|
}
|
|
.left-month-account-oriuse-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-month-account-oriuse-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-month-account-oriuse-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-month-account-oriuse-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-month-account-oriuse-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #1ac9ff;
|
}
|
|
.left-month-account-content-right {
|
width: 0.95rem;
|
height: 0.6915rem;
|
}
|
|
.left-month-account-totaluse {
|
width: 0.95rem;
|
height: 0.25rem;
|
}
|
|
.left-month-account-totaluse-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-month-account-totaluse-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-month-account-totaluse-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-month-account-totaluse-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-month-account-totaluse-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #1ac9ff;
|
}
|
|
.left-month-account-totalya {
|
width: 0.95rem;
|
height: 0.25rem;
|
margin-top: 0.1093rem;
|
}
|
|
.left-month-account-totalya-icon {
|
height: 0.25rem;
|
width: 0.25rem;
|
}
|
|
.left-month-account-totalya-icon-bg {
|
top: 0;
|
left: 0;
|
width: 0.25rem;
|
position: absolute;
|
}
|
|
.left-month-account-totalya-desc {
|
width: 0.655rem;
|
height: 0.25rem;
|
margin-left: 0.043rem;
|
}
|
|
.left-month-account-totalya-desc p {
|
width: 100%;
|
height: 0.125rem;
|
font-size: 0.0469rem;
|
font-weight: 400;
|
color: #feffff;
|
line-height: 0.125rem;
|
opacity: 0.7;
|
}
|
|
.left-month-account-totalya-desc b {
|
height: 0.059rem;
|
font-size: 0.0781rem;
|
font-weight: bold;
|
color: #1ac9ff;
|
}
|
|
.right {
|
width: 5.328rem;
|
height: 3.71rem;
|
float: right;
|
margin-top: 0.43rem;
|
}
|
|
.right-bg {
|
top: 0;
|
left: 0;
|
width: 5.328rem;
|
position: absolute;
|
}
|
|
.right-title {
|
width: 100%;
|
height: 0.18rem;
|
}
|
|
.right-title-content {
|
margin-top: 0.051rem;
|
margin-left: 2.5586rem;
|
width: 0.3125rem;
|
height: 0.082rem;
|
font-size: 0.078rem;
|
line-height: 0.0918rem;
|
font-weight: bold;
|
color: #fff;
|
}
|
|
.right-main {
|
width: 100%;
|
height: 3.4023rem;
|
margin-top: 0.125rem;
|
}
|
|
.right-main-detail {
|
width: 4.5508rem;
|
height: 3.4023rem;
|
}
|
|
.right-main-detail-top {
|
width: 100%;
|
height: 2.3046rem;
|
}
|
|
.right-main-detail-top-left {
|
width: 2.05rem;
|
height: 100%;
|
}
|
|
.right-main-equip-param {
|
width: 100%;
|
height: 0.9141rem;
|
}
|
|
.right-main-equip-param-title {
|
width: 100%;
|
height: 0.0899rem;
|
}
|
|
.right-main-equip-param-title div:first-child {
|
width: 0.0625rem;
|
height: 0.0899rem;
|
margin-left: 0.1289rem;
|
}
|
|
.right-main-equip-param-title-bg {
|
top: 0;
|
left: 0;
|
width: 0.0625rem;
|
position: absolute;
|
}
|
|
.right-main-equip-param-title-content {
|
height: 0.0899rem;
|
font-size: 0.0625rem;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 0.0899rem;
|
margin-left: 0.0195rem;
|
}
|
|
.right-main-equip-param-table {
|
margin-top: 0.0742rem;
|
margin-left: 0.1015rem;
|
width: 1.8633rem;
|
height: 0.75rem;
|
}
|
|
.right-main-equip-param-table table {
|
width: 100%;
|
height: 0.75rem;
|
float: left;
|
text-align: center;
|
border-collapse: collapse;
|
font-size: 0.0547rem;
|
border-spacing: 0;
|
border-top: 0.0019rem solid #00a8ff;
|
}
|
|
.right-main-equip-param-table table td {
|
line-height: 0.1835rem;
|
border: none;
|
word-break: keep-all;
|
white-space: nowrap;
|
}
|
|
.right-main-equip-param-table table tr {
|
width: 100%;
|
display: table;
|
table-layout: fixed;
|
word-break: keep-all;
|
white-space: nowrap;
|
border-right: 0.0019rem solid #00a8ff;
|
border-bottom: 0.0019rem solid #00a8ff;
|
border-left: 0.0019rem solid #00a8ff;
|
}
|
|
.right-main-equip-param-table table tr td:nth-child(3) {
|
border-left: 0.0019rem solid #00a8ff;
|
}
|
|
.right-main-equip-param-table table tr td:nth-child(2),
|
.right-main-equip-param-table table tr td:nth-child(4) {
|
background: rgba(0, 58, 91);
|
color: #98dbff;
|
font-weight: 400;
|
}
|
|
.right-main-equip-param-table table tr td:nth-child(1),
|
.right-main-equip-param-table table tr td:nth-child(3) {
|
color: #ffffff;
|
font-weight: 400;
|
background: rgba(0, 168, 255, 0.15);
|
}
|
|
.right-main-powerrate-userate {
|
width: 100%;
|
height: 1.1641rem;
|
margin-top: 0.1328rem;
|
}
|
|
.right-main-powerrate-userate-title {
|
width: 100%;
|
height: 0.0899rem;
|
}
|
|
.right-main-powerrate-userate-title div:first-child {
|
width: 0.0625rem;
|
height: 0.0899rem;
|
margin-left: 0.1289rem;
|
}
|
|
.right-main-powerrate-userate-title-bg {
|
top: 0;
|
left: 0;
|
width: 0.0625rem;
|
position: absolute;
|
}
|
|
.right-main-powerrate-userate-title-content {
|
height: 0.0899rem;
|
font-size: 0.0625rem;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 0.0899rem;
|
margin-left: 0.0195rem;
|
}
|
|
.right-main-powerrate-userate-report {
|
margin-top: 0.1rem;
|
margin-left: 0.1015rem;
|
width: 1.94rem;
|
height: 0.9742rem;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.right-main-history-order {
|
width: 2.3809rem;
|
height: 100%;
|
float: right;
|
}
|
|
.right-main-history-order-title {
|
width: 100%;
|
height: 0.0899rem;
|
}
|
|
.right-main-history-order-title div:first-child {
|
width: 0.0625rem;
|
height: 0.0899rem;
|
}
|
|
.right-main-history-order-title-bg {
|
top: 0;
|
left: 0;
|
width: 0.0625rem;
|
position: absolute;
|
}
|
|
.right-main-history-order-title-content {
|
height: 0.0899rem;
|
font-size: 0.0625rem;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 0.0899rem;
|
margin-left: 0.0195rem;
|
}
|
|
.right-main-history-order-table {
|
margin-top: 0.0742rem;
|
height: 2.0625rem;
|
width: 100%;
|
}
|
|
.history-table table {
|
width: 100%;
|
text-align: center;
|
border-spacing: 0;
|
float: left;
|
border: 0.0039rem solid #00a8ff;
|
}
|
|
.history-table tbody::-webkit-scrollbar {
|
display: none;
|
}
|
|
.history-table thead,
|
.history-table tbody {
|
float: left;
|
scrollbar-width: none;
|
}
|
|
.history-table tbody {
|
height: 1.875rem;
|
overflow-y: scroll;
|
color: #98dbff;
|
}
|
|
.history-table tr {
|
width: 100%;
|
display: table;
|
table-layout: fixed;
|
}
|
|
.history-table tr,
|
.history-table th,
|
.history-table td {
|
font-size: 0.05469rem;
|
line-height: 0.1875rem;
|
word-break: keep-all;
|
white-space: nowrap;
|
}
|
|
.history-table thead {
|
width: 100%;
|
background: rgba(0, 168, 255, 0.16);
|
color: #00a8ff;
|
border-bottom: 0.0039rem solid #00a8ff;
|
}
|
|
.history-table tbody tr:nth-child(even) {
|
background: rgba(0, 168, 255, 0.25);
|
}
|
|
.right-main-poweron-stamping {
|
width: 100%;
|
height: 1.0977rem;
|
}
|
|
.right-main-poweron-stamping-title {
|
width: 100%;
|
height: 0.0899rem;
|
}
|
|
.right-main-poweron-stamping-title div:first-child {
|
width: 0.0625rem;
|
height: 0.0899rem;
|
margin-left: 0.1289rem;
|
}
|
|
.right-main-poweron-stamping-title-bg {
|
top: 0;
|
left: 0;
|
width: 0.0625rem;
|
position: absolute;
|
}
|
|
.right-main-poweron-stamping-title-content {
|
height: 0.0899rem;
|
font-size: 0.0625rem;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 0.0899rem;
|
margin-left: 0.0195rem;
|
}
|
|
.right-main-poweron-stamping-report {
|
margin-top: 0.1rem;
|
margin-left: 0.1015rem;
|
width: 4.4493rem;
|
height: 0.9078rem;
|
}
|
|
.right-equip-list {
|
width: 0.7rem;
|
height: 3.4023rem;
|
/* border: 1px solid red; */
|
float: right;
|
}
|
|
.right-equip-list-div {
|
margin-top: 0.345rem;
|
width: 0.4rem;
|
height: 2.3867rem;
|
/* border: 1px solid red; */
|
float: right;
|
/* overflow-y: scroll; */
|
/* scrollbar-width: none; */
|
display: flex;
|
align-items: center;
|
}
|
|
.right-equip-list-div::-webkit-scrollbar {
|
display: none;
|
}
|
|
.right-equip-list-bg {
|
/* background-image:url('../../images/choose_bg@2x.png'); */
|
top: 0;
|
left: 0;
|
width: 0.384rem;
|
height: 0.1411rem;
|
position: absolute;
|
/* height: 0.1406rem; */
|
}
|
|
.right-equip-text-red {
|
font-size: 0.05648rem !important;
|
color: #ff3c00;
|
margin-left: 0.0625rem;
|
}
|
|
.right-equip-text-green {
|
font-size: 0.05648rem !important;
|
color: #00f04f;
|
margin-left: 0.0625rem;
|
}
|
|
.right-equip-text-yellow {
|
font-size: 0.05648rem !important;
|
color: #ffa800;
|
margin-left: 0.0625rem;
|
}
|
|
html {
|
width: 100%;
|
height: 100%;
|
min-width: 320px;
|
min-height: 100%;
|
background: #f4f5f5;
|
font-size: 50px;
|
scrollbar-width: none;
|
}
|
|
body {
|
position: relative;
|
float: left;
|
margin: 0 auto;
|
padding: 0;
|
width: 7.5rem;
|
max-width: 100%;
|
min-width: 320px;
|
font-family: 'pingfang SC', 'helvetica neue', arial, 'hiragino sans gb',
|
'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
|
word-break: break-all;
|
-webkit-tatext-highlight-color: transparent;
|
scrollbar-width: none;
|
}
|
|
html::-webkit-scrollbar,
|
body::-webkit-scrollbar {
|
display: none;
|
}
|
|
b,
|
button,
|
dd,
|
div,
|
dl,
|
dt,
|
em,
|
form,
|
img,
|
input,
|
label,
|
li,
|
p,
|
span,
|
textarea,
|
ul {
|
float: left;
|
margin: 0;
|
padding: 0;
|
border: 0;
|
list-style: none;
|
font-style: normal;
|
outline: none;
|
position: relative;
|
}
|
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 {
|
float: left;
|
margin: 0;
|
padding: 0;
|
border: 0;
|
font-weight: 400;
|
}
|
|
button,
|
div,
|
p {
|
font-size: 0.24rem;
|
line-height: 0.24rem;
|
position: relative;
|
}
|
|
a {
|
float: left;
|
outline: 0;
|
color: #333230;
|
text-decoration: none;
|
-webkit-tap-highlight-color: transparent;
|
}
|
|
/* a:hover,
|
img:hover,
|
a:active,
|
img:active {
|
opacity: 0.9;
|
} */
|
|
option,
|
select {
|
outline: 0;
|
border: none;
|
background: #fff;
|
appearance: none;
|
-moz-appearance: none;
|
-webkit-appearance: none;
|
}
|
|
select::-ms-expand {
|
display: none;
|
}
|
|
#app,
|
.page {
|
float: left;
|
width: 7.5rem;
|
}
|
</style>
|
