613菜单栏

src/views/model/index.vue

@@ -3,8 +3,12 @@
     <el-header class="custom-header">
       <el-space :size="spacesize" class="spaceclass">
         <template v-for="(item, index) in headerbuttons" :key="index">
-          <el-button v-if="item.type === 'button'" class="custom-icon-button">
-            <img :src="getImgPath(item.img)" style="width: 24px;" />
+          <el-button
+            v-if="item.type === 'button'"
+            class="custom-icon-button"
+            @click="btnfunc(item.name)"
+          >
+            <img :src="getImgPath(item.img)" style="width: 24px" />
           </el-button>
           <el-divider
             v-else-if="item.type === 'divider'"
@@ -16,7 +20,6 @@
     <splitpanes class="default-theme diysplitpanes">
       <pane min-size="10" size="20" max-size="50" class="custom-aside">
         <el-tabs type="border-card" class="full-height-tabs">
-
           <el-tab-pane label="Liberal">
             <el-collapse v-model="colactiveNames">
               <el-collapse-item
@@ -25,29 +28,28 @@
                 :title="item.ftypedesc"
                 :name="String(item.ftypecode)"
               >
-              <div class="coms-container">
-                <div
-                  v-for="com in item.coms"
-                  :key="com.comId"
-                  class="com-item"
-                  @dragstart="onDragStart($event, 'default',com)" 
-                  :draggable="true"
-                >
-                  <img
-                    
-                    :src="getImage(com.image) || getImgPath('temp.png')"
-                    alt="component image"
-                    class="com-image"
-                  />
-                  <div class="com-name">{{ com.name }}</div>
+                <div class="coms-container">
+                  <div
+                    v-for="com in item.coms"
+                    :key="com.comId"
+                    class="com-item"
+                    @dragstart="onDragStart($event, 'default', com)"
+                    :draggable="true"
+                  >
+                    <img
+                      :src="getImage(com.image) || getImgPath('temp.png')"
+                      alt="component image"
+                      class="com-image"
+                    />
+                    <div class="com-name">{{ com.name }}</div>
+                  </div>
                 </div>
-              </div>
               </el-collapse-item>
             </el-collapse>
           </el-tab-pane>
 
           <el-tab-pane label="Project"></el-tab-pane>
-
+          <el-tab-pane label="Result"></el-tab-pane>
         </el-tabs>
       </pane>
       <pane class="custom-main">
@@ -55,133 +57,367 @@
           <el-tabs type="border-card">
             <el-tab-pane label="Topology">
               <el-space :size="spacesize" class="spaceclass">
+                <!-- 放大 -->
+                <el-button
+                  title="放大"
+                  @click="zoomIn"
+                  class="custom-icon-button"
+                >
+                  <el-icon><ZoomIn /></el-icon>
+                </el-button>
+
+                <!-- 缩小 -->
                 <el-button
-                  v-for="(item, index) in mainbuttons"
-                  :key="index"
+                  title="缩小"
+                  @click="zoomOut"
                   class="custom-icon-button"
                 >
-                  <img :src="getImgPath(item.img)" style="width: 24px;" />
+                  <el-icon><ZoomOut /></el-icon>
                 </el-button>
+
+                <!-- 自适应 -->
+                <el-button
+                  title="自适应"
+                  @click="fitView"
+                  class="custom-icon-button"
+                >
+                  <el-icon><FullScreen /></el-icon>
+                </el-button>
+
+                <el-tooltip content="重置" placement="top">
+                  <el-button
+                    title="重置"
+                    @click="resetTransform"
+                    class="custom-icon-button"
+                  >
+                    <changebak name="reset" />
+                  </el-button>
+                </el-tooltip>
+
+                <el-tooltip content="背景切换" placement="top">
+                  <el-button
+                    title="背景切换"
+                    @click="toggleDarkMode"
+                    class="custom-icon-button"
+                  >
+                    <changebak v-if="dark" name="sun" />
+                    <changebak v-else name="moon" />
+                  </el-button>
+                </el-tooltip>
+
+                <el-tooltip content="保存" placement="top">
+                  <el-button @click="saveproject" class="custom-icon-button">
+                    <el-icon class="btn-icon" :color="iconcolor"
+                      ><UploadFilled
+                    /></el-icon>
+                  </el-button>
+                </el-tooltip>
+
+                <el-tooltip content="删除节点" placement="top">
+                  <el-button @click="removeNode" class="custom-icon-button">
+                    <el-icon class="btn-icon" :color="iconcolor"
+                      ><DocumentDelete
+                    /></el-icon>
+                  </el-button>
+                </el-tooltip>
+
+                <el-tooltip content="删除线" placement="top">
+                  <el-button @click="removeEdge" class="custom-icon-button">
+                    <el-icon class="btn-icon" :color="iconcolor"
+                      ><Crop
+                    /></el-icon>
+                  </el-button>
+                </el-tooltip>
+
+                <el-tooltip content="清空全部" placement="top">
+                  <el-button @click="confirmDelete" class="custom-icon-button">
+                    <el-icon class="btn-icon" :color="iconcolor"
+                      ><DeleteFilled
+                    /></el-icon>
+                  </el-button>
+                </el-tooltip>
               </el-space>
             </el-tab-pane>
           </el-tabs>
         </div>
         <div class="flow-content">
-          <vueflow />
+          <vueflow ref="vueflowref" />
         </div>
       </pane>
     </splitpanes>
-  </el-container>
 
+    <el-dialog
+      v-model="SLdatadialog"
+      align-center
+      :append-to-body="true"
+      width="500"
+      class="dialog_class"
+      draggable
+    >
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header">
+          <!-- <el-image :src="icon" fit="contain"></el-image> -->
+          <h4 :id="titleId" :class="titleClass">模拟数据</h4>
+        </div>
+      </template>
+      <el-table :data="tableSLData" border height="300" style="width: 100%">
+        <el-table-column type="index" width="40" label="" />
+        <el-table-column prop="name" label="属性"> </el-table-column>
+        <el-table-column prop="value" label="值">
+          <template #default="{ row }">
+            <el-select
+              v-if="row.valueType === 1"
+              v-model="row.value"
+              placeholder="请选择"
+              class="full-width-select"
+              @change="(val) => handleShapeChange(row, val)"
+            >
+              <el-option
+                v-for="option in row.options"
+                :key="option.val"
+                :label="option.tag"
+                :value="option.val"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-else-if="row.valueType === 2"
+              v-model="row.value"
+              class="full-width-input"
+            />
+            <el-button
+              v-else-if="row.valueType === 3"
+              @click="handleClick(row)"
+            ></el-button>
+            <div v-else>{{ row.valueDef }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="unit" label="单位" width="100">
+          <template #default="{ row }">
+            <el-select
+              v-if="row.unitType !== '无'"
+              v-model="row.unit"
+              placeholder="请选择"
+              class="full-width-select"
+            >
+              <el-option
+                v-for="option in row.unitoptions"
+                :key="option.val"
+                :label="option.tag"
+                :value="option.val"
+              >
+              </el-option>
+            </el-select>
+            <div v-else>{{ row.unitType }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <span class="lastbtn">
+          <el-button @click="SLdatadialog = false">{{
+            $t("dialog.cancel")
+          }}</el-button>
+          <el-button type="primary" @click="saveSLTabelDialog">
+            {{ $t("dialog.ok") }}
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </el-container>
 </template>
 
 <script setup>
-import { Splitpanes, Pane } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-import { request, getImage } from "@/utils/request";
-import { ElMessage} from 'element-plus'
-import { useProjectStore } from '@/store/project'
-import { useI18n } from 'vue-i18n'
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+import { request, getImage } from "@/utils/request"
+import { ElMessage } from "element-plus"
+import { useProjectStore } from "@/store/project"
+import { useI18n } from "vue-i18n"
 import vueflow from "./vueflow/index.vue"
-import useDragAndDrop from './vueflow/useDnD'
+import useDragAndDrop from "./vueflow/useDnD"
+import {
+  ZoomIn,
+  ZoomOut,
+  FullScreen,
+  Lock,
+  Unlock,
+  DocumentDelete,
+  Delete,
+  UploadFilled,
+  Histogram,
+  DeleteFilled,
+  Crop,
+  Close
+} from "@element-plus/icons-vue"
+import changebak from "./vueflow/changebak.vue"
+import { useVueFlow } from "@vue-flow/core"
+
+const { zoomIn, zoomOut, fitView } = useVueFlow()
 
 const { t, locale } = useI18n()
 
 const projectStore = useProjectStore()
 
-const { onDragStart,onDragLeave,treeobj,onDrop} = useDragAndDrop()
+const { onDragStart, onDragLeave, treeobj, onDrop } = useDragAndDrop()
 
 const getImgPath = (url) => {
   return new URL(`../../assets/img/${url}`, import.meta.url).href
 }
 
-let pid = computed(() => projectStore.pid || '')
+let pid = computed(() => projectStore.pid || "")
+
+let spacesize = ref(10)
+let colactiveNames = ref(["1"])
+let collapseData = ref()
+const vueflowref = ref()
+const dark = ref(false)
+let iconcolor = ref("#000")
 
-let spacesize = ref(10);
-let colactiveNames = ref(['1'])
-let collapseData = ref();
+const SLdatadialog = ref(false)
+const tableSLData = ref([])
 
 const headerbuttons = ref([
-  { type: 'button', img: 'newproject.png' },
-  { type: 'button', img: 'save.png' },
-  { type: 'button', img: 'importpro.png' },
-  { type: 'button', img: 'exportpro.png' },
-  { type: 'divider' },
-  { type: 'button', img: 'back.png' },
-  { type: 'button', img: 'goon.png' },
-  { type: 'divider' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'divider' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'divider' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'button', img: 'temp.png' },
-  { type: 'divider' },
-  { type: 'button', img: 'text.png' },
-  { type: 'button', img: 'text2.png' },
-  { type: 'button', img: 'text3.png' },
-  { type: 'divider' },
-  { type: 'button', img: 'temp.png' }
-]);
+  { type: "button", img: "newproject.png", name: "temp" },
+  { type: "button", img: "save.png", name: "temp" },
+  { type: "button", img: "importpro.png", name: "temp" },
+  { type: "button", img: "exportpro.png", name: "temp" },
+  { type: "divider" },
+  { type: "button", img: "back.png", name: "temp" },
+  { type: "button", img: "goon.png", name: "temp" },
+  { type: "divider" },
+  { type: "button", img: "temp.png", name: "temp" },
+  { type: "divider" },
+  { type: "button", img: "monidata.png", name: "SLdata" },
+  { type: "divider" },
+  { type: "button", img: "run.png", name: "run" },
+  { type: "button", img: "stop.png", name: "stop" },
+  { type: "button", img: "monitor.png", name: "monitor" },
+  { type: "button", img: "temp.png", name: "temp" },
+  { type: "button", img: "temp.png", name: "temp" },
+  { type: "button", img: "temp.png", name: "temp" },
+  { type: "button", img: "temp.png", name: "temp" },
+  { type: "divider" },
+  { type: "button", img: "text.png", name: "temp" },
+  { type: "button", img: "text2.png", name: "temp" },
+  { type: "button", img: "text3.png", name: "temp" },
+  { type: "divider" },
+  { type: "button", img: "temp.png", name: "temp" }
+])
 
 let mainbuttons = ref([
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
-  {img: 'temp.png'},
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" },
+  { img: "temp.png" }
 ])
 
 const getComponent = () => {
   const params = {
-    transCode: 'ES1001',
-    pid:pid.value
-  };
+    transCode: "ES1001",
+    pid: pid.value
+  }
   request(params)
     .then((res) => {
-      console.log(res);
-      collapseData.value = res.rows;
-      console.log('zujian:',collapseData.value)
+      console.log(res)
+      collapseData.value = res.rows
+      console.log("zujian:", collapseData.value)
     })
     .catch((err) => {
-      ElMessage.error(err.returnMsg);
-    });
+      ElMessage.error(err.returnMsg)
+    })
 }
 
-onMounted(() => {
-    getComponent();
-});
+const resetTransform = () => {
+  if (vueflowref.value) {
+    vueflowref.value.resetTransform()
+  }
+}
+
+const toggleDarkMode = () => {
+  if (vueflowref.value) {
+    vueflowref.value.toggleDarkMode()
+  }
+}
+
+const saveproject = () => {
+  if (vueflowref.value) {
+    vueflowref.value.saveproject()
+  }
+}
+const removeNode = () => {
+  if (vueflowref.value) {
+    vueflowref.value.removeNode()
+  }
+}
+const removeEdge = () => {
+  if (vueflowref.value) {
+    vueflowref.value.removeEdge()
+  }
+}
+
+const confirmDelete = () => {
+  if (vueflowref.value) {
+    vueflowref.value.confirmDelete()
+  }
+}
+
+const btnfunc = (name) => {
+  if (name === "run") {
+    runProject()
+  }else if(name === "SLdata"){
+    SLdatadialog.value = true;
+  }
+}
 
+const runProject = () => {
+  const params = {
+    transCode: "ES1001",
+    pid: pid.value
+  }
+  request(params)
+    .then((res) => {
+      ElMessage.success("开始运行")
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg)
+    })
+}
+
+const saveSLTabelDialog = () => {
+  
+}
+
+
+onMounted(() => {
+  getComponent()
+})
 </script>
 
 <style scoped>
 .main-header {
-  background: #EEEEEE;
+  background: #eeeeee;
   border-radius: 0px 0px 0px 0px;
-  border: 4px solid #EEEEEE;
+  border: 4px solid #eeeeee;
 }
 
 .diysplitpanes {
   overflow: auto;
 }
 
-.main-header :deep(.el-tabs--border-card>.el-tabs__content) {
+.main-header :deep(.el-tabs--border-card > .el-tabs__content) {
   padding: 5px 15px;
 }
 
 .main-header :deep(.el-tabs__content) {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 0px 0px 0px 0px;
-  border: 1px solid #D8D8D8;
+  border: 1px solid #d8d8d8;
 }
 
 .spaceclass {
@@ -212,6 +448,10 @@ onMounted(() => {
 .flow-content {
   width: 100%;
   flex: 1;
-  background: #FFFFFF;
+  background: #ffffff;
+}
+
+.btn-icon {
+  font-size: 16px;
 }
 </style>