|
|
@@ -62,7 +62,7 @@
|
|
|
<el-table-column prop="batchNo" label="批次号"></el-table-column>
|
|
|
<el-table-column prop="progress" label="生产进度" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
|
|
+ <el-progress :percentage="100" status="success"></el-progress>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="customName" label="客户名称"></el-table-column>
|
|
|
@@ -72,7 +72,30 @@
|
|
|
</div>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
- <el-col :span="6" class="bg1-3"></el-col>
|
|
|
+ <el-col :span="6" class="bg1-3">
|
|
|
+ <el-row :span="24" class="bg1-3-1">
|
|
|
+ <div class="box-custom-ranking">
|
|
|
+ <div class="custom-ranking">客户排名</div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row :span="24" class="bg1-3-2">
|
|
|
+ <div class="box-custom-ranking">
|
|
|
+ <div class="custom-ranking">
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="contractList" height="100%" row-class-name="custom-ranking-table-row" style="width:100%;">
|
|
|
+ <el-table-column prop="productName" label="客户名称"></el-table-column>
|
|
|
+ <el-table-column prop="progress" label="合同金额占比">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="16" :percentage="90" status="success"></el-progress>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="no" label="增长率" width="80" :fixed="right"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
<el-row :span="24" class="sample-bg1">
|
|
|
<el-col :span="6" class="bg2-1"></el-col>
|
|
|
@@ -143,7 +166,7 @@ body,
|
|
|
}
|
|
|
|
|
|
.bg1-3 {
|
|
|
- background-color: orchid;
|
|
|
+ /* background-color: orchid; */
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -306,5 +329,63 @@ body,
|
|
|
justify-content: space-around;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
+.bg1-3-1 {
|
|
|
+ height: 10%;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid black;
|
|
|
+}
|
|
|
+
|
|
|
+.bg1-3-2 {
|
|
|
+ height: 90%;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid black;
|
|
|
+}
|
|
|
+
|
|
|
+/*客户排名*/
|
|
|
+.box-custom-ranking {
|
|
|
+ background-color: forestgreen;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-ranking {
|
|
|
+ font-size: 16px;
|
|
|
+ color: aliceblue;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items:center;
|
|
|
+ justify-content:center;
|
|
|
+ text-align:justify;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-ranking > .title {
|
|
|
+ /* background-color: forestgreen; */
|
|
|
+ height: 100%;
|
|
|
+ min-height: 30px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ display:flex;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-ranking > .title > div {
|
|
|
+ background-color: forestgreen;
|
|
|
+ width: 100%;
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ justify-content:center;
|
|
|
+ text-align:justify;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-ranking > .table {
|
|
|
+ background-color:darkturquoise;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-ranking-table-row {
|
|
|
+ font-size: 8px;
|
|
|
+}
|
|
|
</style>
|
|
|
|
