状态样式

src/components/Task.vue

@@ -66,47 +66,109 @@ export default {
         {
           colKey: 'operatorName',
           title: '操作员',
+          width: 80,
         },
         {
           colKey: 'publishTime',
           title: '发布时间',
-          cell: (h, { row }) => moment(row.publishTime).format('YYYY-MM-DD'),
+          width: 190,
+          cell: (h, { row }) =>
+            moment(row.publishTime).format('YYYY-MM-DD HH:mm'),
         },
         {
           colKey: 'nuclearStationName',
           title: '核电站名称',
           ellipsis: true,
+          width: 300,
         },
         {
           colKey: 'nuclearCoreName',
           title: '核反应堆',
+          width: 120,
         },
         {
           colKey: 'status',
           title: '任务状态',
+          width: 120,
           cell: (h, { row }) => {
             if (row.status == 0) {
               return (
-                <t-tag theme="success" onClick={() => this.startTask(row.id)}>
-                  开始任务
-                </t-tag>
+                // <div
+                //   class="start_table_btn"
+                //   onClick={() => this.startTask(row.id)}
+                // >
+                //   开始任务
+                // </div>
+                <div class="not_start_table_btn">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    fill="none"
+                    version="1.1"
+                    width="24"
+                    height="23.999755859375"
+                    viewBox="0 0 24 23.999755859375"
+                  >
+                    <g>
+                      <path
+                        d="M12,0C18.6275,0,24,5.37245,24,11.9999C24,18.6273,18.6275,23.9998,12,23.9998C5.3725,23.9998,0,18.6273,0,11.9999C0,5.37245,5.3725,0,12,0ZM12,16.1103C10.9964,16.1103,10.1827,16.9238,10.1827,17.9276C10.1827,18.9312,10.9964,19.7449,12,19.7449C13.0036,19.7449,13.8173,18.9312,13.8173,17.9276C13.8173,16.9238,13.0036,16.1103,12,16.1103ZM11.9477,14.6896C12.8122,14.6896,13.5129,13.9887,13.5129,13.1245L13.5129,5.82005C13.5129,4.95557,12.8122,4.25489,11.9477,4.25489C11.0833,4.25489,10.3826,4.95581,10.3826,5.82005L10.3826,13.1245C10.3826,13.9889,11.0833,14.6896,11.9477,14.6896Z"
+                        fill="#FFFFFF"
+                        fill-opacity="1"
+                      />
+                    </g>
+                  </svg>
+                  <span>未开始</span>
+                </div>
               )
             } else if (row.status == 1) {
-              return <t-tag theme="warning">进行中</t-tag>
+              return <div class="process_table_btn">进行中</div>
             } else if (row.status == 2) {
-              return <t-tag theme="primary">继续任务</t-tag>
+              return <div class="continue_table_btn">继续任务</div>
             } else {
-              return <t-tag theme="success">已完成</t-tag>
+              return (
+                <div class="finished_table_btn">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    fill="none"
+                    version="1.1"
+                    width="23.99990463256836"
+                    height="24"
+                    viewBox="0 0 23.99990463256836 24"
+                  >
+                    <g>
+                      <path
+                        d="M12,24C5.37298,24,0,18.627,0,12C0,5.373,5.37298,0,12,0C18.6269,0,23.9999,5.373,23.9999,12C23.9999,18.627,18.6269,24,12,24ZM9.32396,16.712C9.81214,17.2003,10.6038,17.2003,11.092,16.712L18.6699,9.134C19.1581,8.64578,19.1581,7.85422,18.6699,7.366C18.1817,6.87778,17.3902,6.87778,16.9019,7.366L10.154,14.006L7.13397,10.986C6.64586,10.4971,5.85378,10.4968,5.3653,10.9853C4.87681,11.4738,4.87712,12.2659,5.36598,12.754L9.32396,16.712Z"
+                        fill="#FFFFFF"
+                        fill-opacity="1"
+                      />
+                    </g>
+                  </svg>
+                  <span>已完成</span>
+                </div>
+              )
             }
           },
         },
         {
           colKey: 'startTime',
           title: '开始时间',
+          width: 190,
+          cell: (h, { row }) => {
+            return row.startTime
+              ? moment(row.startTime).format('YYYY-MM-DD HH:mm')
+              : '---'
+          },
         },
         {
           colKey: 'endTime',
           title: '完成时间',
+          width: 190,
+          cell: (h, { row }) => {
+            return row.endTime
+              ? moment(row.endTime).format('YYYY-MM-DD HH:mm')
+              : '---'
+          },
         },
         {
           title: '操作',
@@ -219,7 +281,88 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.task_component {
+<style lang="scss">
+.process_table_btn {
+  width: 93.18px;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  padding: 6px 25px;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: normal;
+  box-sizing: border-box;
+  white-space: nowrap;
+  letter-spacing: 0.07em;
+  color: #ffffff;
+  background: #ed7b2f;
+  cursor: pointer;
+}
+.start_table_btn {
+  cursor: pointer;
+  width: 93.18px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  padding: 6px 25px;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: normal;
+  letter-spacing: 0.07em;
+  color: #ffffff;
+  background: #00a870;
+}
+.continue_table_btn {
+  cursor: pointer;
+  width: 93.18px;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  padding: 6px 25px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: normal;
+  letter-spacing: 0.07em;
+  color: #ffffff;
+  background: #0052d9;
+}
+.finished_table_btn {
+  width: 93.18px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: normal;
+  letter-spacing: 0.07em;
+  color: #ffffff;
+  padding: 0 13px 0 5px;
+  background: #00a870;
+}
+.not_start_table_btn {
+  width: 93.18px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  height: 32px;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: normal;
+  letter-spacing: 0.07em;
+  color: #ffffff;
+  padding: 0 13px 0 5px;
+  background: #d8d8d8;
 }
 </style>