0822

ruoyi-ui/src/views/standardization/modeling/index.vue

@@ -4,6 +4,15 @@
     <!-- <div style="margin-left: 1%;padding-top: 1%;position: absolute;z-index: 1000;cursor: pointer;" @click="back"> 
       <el-icon size="large"><Back /></el-icon>
     </div> -->
+    <div style="height: 85vh;width: 20vw;position: absolute;float: right;z-index: 1000;right: 1%;top: 1%;border: 0.1px solid #dedfe0;border-radius: 6px;background-color: white;">
+      <div style="display: flex;margin-left: 3%;margin-top: 3%;align-items: center;justify-content: space-between;width: 95%;">
+        <el-tag class="ml-2" style="" type="warning">服务</el-tag>
+        <div style="margin-left: 4%;">
+          获取台风信息列表
+        </div>
+        <el-icon style="margin-left: auto;"><Close /></el-icon>
+      </div>
+    </div>
     <div style="display: flex;height: 85vh;width: 100%;padding-top: 1%;">
       <div style="width: 20%;margin-left: 1%;overflow-y: auto;">
         <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" :data="dataTree" @node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
@@ -25,26 +34,59 @@
         </el-tree>
       </div>
       <VueFlow :nodes="nodes" :edges="edges" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave"
-        @node-click="onNodeClick"       @connect="onConnect" fit-view-on-init>
+        @node-click="onNodeClick"   @connect="onConnect" fit-view-on-init>
         <template #node-special="specialNodeProps">
-          <div v-if="specialNodeProps.data.label=='开始'" class="vue-flow__node-default" style="border: 0.5px solid #c8c9cc;border-radius: 6px;">
-              <div>
-                <img style="width: 4%;height: 4%;border-radius: 12px;" src="@/assets/images/touxiang.png" alt="">
-                开始
+          <div v-if="specialNodeProps.data.label=='开始'" class="vue-flow__node-default" style="border: 0.2px solid #c8c9cc;border-radius: 6px;min-height: 6vh;min-width: 11vw">
+              <div style='width:100%;font-size:10px;display:flex;align-items:flex-end;height: 10px;margin-top: 2%;'>
+                <img style="width: 15px;height:15px;border-radius: 12px;" src="@/assets/images/icon-Start-v2.jpg" alt="">
+                <div style="margin-left: 3%;font-weight: 500;">
+                  开始
+                </div>
+                <el-tag class="ml-2" style="width: 30px;height: 15px;font-size: 7px;margin-left: 6%;" type="info">触发器</el-tag>
               </div>
                 <Handle type="source" :position="Position.Right"/>
             </div>
-            <div v-if="specialNodeProps.data.label=='结束'" class="vue-flow__node-default" style="border: 0.5px solid #c8c9cc;border-radius: 6px;">
-              <div>
-                <img style="width: 4%;height: 4%;border-radius: 12px;" src="@/assets/images/touxiang.png" alt="">
-                结束
+            <div v-if="specialNodeProps.data.label=='结束'" class="vue-flow__node-default" style="border: 0.2px solid #c8c9cc;border-radius: 6px;min-height: 6vh;min-width: 11vw">
+              <div style='width:100%;font-size:10px;display:flex;align-items:flex-end;height: 10px;margin-top: 2%;'>
+                <img style="width: 15px;height:15px;border-radius: 12px;" src="@/assets/images/icon-Start-v2.jpg" alt="">
+                <div style="margin-left: 3%;font-weight: 500;">
+                  结束
+                </div>
+                <div>
+
+                </div>
               </div>
                 <Handle type="target" :position="Position.Left"/>
             </div>
-            <div v-if="specialNodeProps.data.label!=='结束'&&specialNodeProps.data.label!=='开始'" class="vue-flow__node-default" style="border: 0.5px solid #c8c9cc;border-radius: 6px;">
-            <div>
-                <img style="width: 4%;height: 4%;border-radius: 12px;" src="@/assets/images/touxiang.png" alt="">
-                {{ specialNodeProps.data.label }}
+            <div v-if="specialNodeProps.data.label!=='结束'&&specialNodeProps.data.label!=='开始'" class="vue-flow__node-default" 
+            style="border: 0.5px solid #c8c9cc;border-radius: 6px;border-radius: 6px;min-height: 8vh;min-width: 13vw">
+              <div style='width:100%;font-size:10px;display:flex;align-items:flex-end;height: 10px;margin-top: 2%;justify-content: space-between;'>
+                <img style="width: 15px;height:15px;border-radius: 12px;" src="@/assets/images/icon-HTTP.png" alt="">
+                <div style="margin-left:3%;font-weight: 500;width: 40%;">
+                  {{ specialNodeProps.data.label }}
+                </div>
+                <el-icon style="cursor: pointer;margin-left: auto;"><CaretRight /></el-icon>
+                 <el-icon style="cursor: pointer;color: #F56C6C;margin-left: 2%;"><Delete /></el-icon>
+                
+              </div>
+              <div style="display: flex;margin-top: 3%;">
+                <el-tag class="ml-2" style="width: 35px;height: 20px;font-size: 10px;" type="warning">服务</el-tag>
+              </div>
+              <div style="display: flex;margin-top: 3%;font-size: 9px;color: #b1b3b8;align-items: center;">
+                <div>
+                  GET:
+                </div>
+                <div>
+                  https://www.zhihu.com/
+                </div>
+              </div>
+              <div style="display: flex;margin-top: 3%;font-size: 9px;color: #b1b3b8;align-items: center;">
+                <div>
+                  输出:
+                </div>
+                <div>
+                  https://www.zhihu.com/
+                </div>
               </div>
                 <Handle type="source" :position="Position.Right"/>
                 <Handle type="target" :position="Position.Left"/>
@@ -190,7 +232,7 @@ const isDragging = ref(false);
 const isDragOver = ref(false);
 const nodes = ref([
   { id: '1', position: { x: -600, y: -300 }, data: { label: '开始' }, type: 'special' },
-  { id: '2', position: { x: 200, y: 100 }, data: { label: '结束' }, type: 'special' },
+  { id: '2', position: { x: 150, y: 100 }, data: { label: '结束' }, type: 'special' },
 ]);
 const edges =  ref([]);
 
@@ -220,10 +262,11 @@ function handleModelClick(mid) {
 
 
 onNodeClick(({event, node}) => {
-  form.value = node.data
+  console.log(node)
+  // form.value = node.data
   open.value = true
-  title.value = node.data.label
-  nodeId.value = node.id
+  // title.value = node.data.label
+  // nodeId.value = node.id
 });