任务监视

src/designer/viewWidgets/task/TaskView.vue

@@ -11,26 +11,82 @@
     </span>
   </div>
   <div class="calc-bottom-panel">
-    TaskView1<br />
-    TaskView2<br />
-    TaskView3<br />
-    TaskView4<br />
-    TaskView5<br />
-    TaskView6<br />
-    TaskView7<br />
-    TaskView8<br />
-    TaskView9<br />
-    TaskView10<br />
-    TaskView11<br />
-    TaskView12<br />
-    TaskView13<br />
-    TaskView14<br />
-    TaskView15<br />
-    TaskView16<br />
-    TaskView17<br />
-    TaskView18<br />
-    TaskView19<br />
-    TaskView20<br />
+    <el-tabs type="border-card" class="task-view-tabs">
+      <el-tab-pane>
+        <template #label>
+        <span class="tabs-title-label">
+          <component :is="renderIcon('element Lightning')"></component>
+          <span>执行中</span>
+        </span>
+        </template>
+        <div class="task-tab-wrap">
+          <div class="tab-row">
+            <div class="tab-row-icon">
+              <component :is="renderIcon('antd NodeIndexOutlined')"></component>
+            </div>
+            <div class="tab-row-content">
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd AppstoreOutlined')"></component>
+                [结束]导航到目的点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd FireFilled')"></component>
+                [结束]按照导航路径移动到目标点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('element AlarmClock')"></component>
+                23日 16:10:09:103 - 23日  16:40:39:103
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('fa LuggageCart')"></component>
+                <span class="blue">Agv-1 30 32 当前目标点 32</span>
+              </div>
+            </div>
+          </div>
+          <div class="tab-row selected">
+            <div class="tab-row-icon">
+              <component :is="renderIcon('antd NodeIndexOutlined')"></component>
+            </div>
+            <div class="tab-row-content">
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd AppstoreOutlined')"></component>
+                [结束]导航到目的点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd FireFilled')"></component>
+                [结束]按照导航路径移动到目标点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('element AlarmClock')"></component>
+                23日 16:10:09:103 - 23日  16:40:39:103
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('fa LuggageCart')"></component>
+                <span class="blue">Agv-1 30 32 当前目标点 32</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane>
+        <template #label>
+        <span class="tabs-title-label">
+          <component :is="renderIcon('element CircleCheck')"></component>
+          <span>执行中</span>
+        </span>
+        </template>
+        <div class=""></div>
+      </el-tab-pane>
+      <el-tab-pane>
+        <template #label>
+        <span class="tabs-title-label">
+          <component :is="renderIcon('element Warning')"></component>
+          <span>执行中</span>
+        </span>
+        </template>
+        <div class=""></div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -46,4 +102,82 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style lang="less">
+.task-view-wrap{
+  height: 100%;
+}
+.task-view-tabs {
+  height: 100%;
+  &.el-tabs--border-card{
+    border: none;
+    &>.el-tabs__header{
+      background: #efefef;
+      .tabs-title-label span {
+        vertical-align: middle;
+        margin-left: 4px;
+        color: #333;
+      }
+     .tabs-title-label .el-icon {
+        vertical-align: middle;
+      }
+      .el-tabs__item{
+        height: 30px;
+        &.is-active{
+          .tabs-title-label span {;
+            color: var(--el-color-primary);
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    &> .el-tabs__content {
+      padding:2px 5px;
+      color: #6b778c;
+      font-size: 32px;
+      font-weight: 600;
+      overflow: auto;
+      .task-tab-wrap{
+        .tab-row{
+          display: flex;
+          flex-direction: row;
+          margin:3px 0;
+          padding:10px;
+          background: #e5e4e4;
+          &.selected{
+            background: #f5eed8;
+          }
+          .tab-row-icon{
+            flex-shrink: 0;
+            width: 75px;
+            height: 75px;
+            background: #747a80;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color:#fff
+          }
+          .tab-row-content{
+            flex: 1;
+            margin-left:10px;
+            .tab-row-infor{
+              font-size: 13px;
+              margin-bottom: 5px;
+              color:#222;
+              .el-icon {
+                font-size: 14px;
+                position: relative;
+                top:3px;
+                margin-right: 5px;
+              }
+              .blue{
+                color:#00beff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>