维修进度图例

src/views/repair/tickets/Components/TicketProgress.vue

@@ -1,27 +1,54 @@
 <template>
   <div>
     <el-dialog title="维修项目进度" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
+      <el-row :gutter="1">
+        <el-col :span="24">
+          <div style="display: flex;justify-content: center;margin-bottom: 1rem;">
+            <span style="margin: 0 1rem 0 1rem; display: inline-flex; align-items: center;">
+            <span style="font-size: 20px">- </span>
+            <span>待维修</span>
+          </span>
+            <span style="color: #ffd51c; display: inline-flex; align-items: center;">
+            <span style="font-size: 20px; margin-bottom: -10px;">° </span>
+            <span>维修中</span>
+          </span>
+            <span style="color: #3aff70;margin: 0 1rem 0 1rem;display: inline-flex; align-items: center;">
+            <span style="font-size: 20px">√</span>
+            <span>已完成</span>
+          </span>
+          </div>
+        </el-col>
+      </el-row>
       <el-table :data="list" v-loading="tableLoading" :stripe="true" :show-overflow-tooltip="true">
         <el-table-column label="序号" align="center">
           <template scope="scope">
             <span>{{ scope.$index + 1 }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="维修项目" align="center" prop="itemName" />
+        <el-table-column label="维修项目" align="center" prop="itemName"/>
         <el-table-column label="维修状态" align="center">
           <el-table-column label="待维修" align="center">
             <template slot-scope="scope">
-              <span style="font-size: 20px">{{scope.row.itemStatus === "01" ? getStatus(scope.row.itemStatus) : ""}}</span>
+              <span
+                style="font-size: 20px">{{
+                  scope.row.itemStatus === "01" ? getStatus(scope.row.itemStatus) : ""
+                }}</span>
             </template>
           </el-table-column>
           <el-table-column label="维修中" align="center">
             <template slot-scope="scope">
-              <span style="font-size: 20px;color: #ffd51c">{{scope.row.itemStatus === "02" ? getStatus(scope.row.itemStatus) : ""}}</span>
+              <span
+                style="font-size: 20px;color: #ffd51c;">{{
+                  scope.row.itemStatus === "02" ? getStatus(scope.row.itemStatus) : ""
+                }}</span>
             </template>
           </el-table-column>
           <el-table-column label="已完成" align="center">
             <template slot-scope="scope">
-              <span style="font-size: 20px;color: #3aff70">{{scope.row.itemStatus === "03" ? getStatus(scope.row.itemStatus) : ""}}</span>
+              <span
+                style="font-size: 20px;color: #3aff70">{{
+                  scope.row.itemStatus === "03" ? getStatus(scope.row.itemStatus) : ""
+                }}</span>
             </template>
           </el-table-column>
         </el-table-column>
@@ -32,9 +59,11 @@
 
 <script>
 import {getProjectList} from "@/api/repair/tickets/TicketsItem";
+import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue";
 
 export default {
   name: "TicketProgress",
+  components: {ScrollPane},
   data() {
     return {
       dialogVisible: false,
@@ -53,8 +82,8 @@ export default {
         this.tableLoading = false
       }
     },
-    getStatus(data){
+    getStatus(data) {
-      switch (data){
+      switch (data) {
         case '01':
           return '-'
         case '02':