| | |
|---|
| | | <template> |
|---|
| | | <div class="page-container"> |
|---|
| | | <!--<div class="page-title">--> |
|---|
| | | <!--<slot name="index_signage_nav"></slot>--> |
|---|
| | | <!--<!–<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">–>--> |
|---|
| | | <!--<!–{{item.workshopName}}–>--> |
|---|
| | | <!--<!–</dv-decoration-11>–>--> |
|---|
| | | <!--</div>--> |
|---|
| | | <div class="content-container"> |
|---|
| | | <div style="width: 25%" class="left-col"> |
|---|
| | | <dv-border-box-9 style="padding: 30px 20px 0"> |
|---|
| | | <!--<div class="first-title">M D C 入 网 总 数 : 6 0 3 台</div>--> |
|---|
| | | <div id="running_state_chart" style="width:100%;height: 300px"></div> |
|---|
| | | <div id="efficiency_chart" style="width: 100%;height: 465px"></div> |
|---|
| | | </dv-border-box-9> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div style="width: 42%" class="middle-col"> |
|---|
| | | <dv-border-box-9 style="padding: 30px 20px 0"> |
|---|
| | | <!--<div class="first-title">设 备 台 账 总 数 : 1 0 2 2 台</div>--> |
|---|
| | | <div style="display: flex"> |
|---|
| | | <div id="tech_condition_chart" style="width:50%;height: 340px;"></div> |
|---|
| | | <div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </dv-border-box-9> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div style="width: 32%"> |
|---|
| | | <dv-border-box-9 style="padding: 30px 0 20px"> |
|---|
| | | <div id="bar_chart" style="width:100%;height: 280px"></div> |
|---|
| | |
|---|
| | | flex-wrap: wrap; |
|---|
| | | color: #fff; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | |
|---|
| | | .workshop-nav { |
|---|
| | | width: 120px; |
|---|
| | | height: 40px; |
|---|
| | | font-size: 12px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-container { |
|---|
| | |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .left-col { |
|---|
| | | .first-title { |
|---|
| | | color: #00A8AC; |
|---|
| | | font-size: 20px; |
|---|
| | | text-align: center; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .middle-col { |
|---|
| | | .first-title { |
|---|
| | | color: #00A8AC; |
|---|
| | | font-size: 20px; |
|---|
| | | text-align: center; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .support-plan-container { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
