工程配置页面。数据类型。

src/styles/variables.scss

@@ -35,13 +35,14 @@
 
   --hj-white-1: #ffffff;
   --hj-white-2: #f0f0f0;
+  --hj-white-4: #696969;
 
   --hj-black-1: #1a1a1a;
   --hj-black-2: #303030;
   --hj-black-3: #404040;
+  --hj-black-4::#505050
 
-
-  --hj-bg: #fff;
+--hj-bg: #fff;
 
   //字体颜色
   --fc-color-default: #000000;
@@ -118,6 +119,9 @@ $hj-blue-3: var(--hj-blue-3);
 $hj-purple-3: var(--hj-purple-3);
 $hj-white-3: var(--hj-white-3);
 $hj-black-3: var(--hj-black-3);
+$hj-black-4: var(--hj-black-4);
+
+$hj-white-4: var(--hj-white-4);
 
 //T:标题 FT:副标题 A:注解 B:正文 S:缩略显示 N：数字 尾号：大号到小号 1=>1++
 $font-T1: (

src/views/main/components/menu.vue

@@ -85,7 +85,7 @@ const handleMenuClick = (menu: MenuItem) => {
   justify-content: start;
   align-items: center;
   padding: 12px 6px;
-  background-color: $hj-black-3;
+  background-color: $hj-black-1;
 
   .menu-box {
     width: 64px;

src/views/modules/project-config/com/function-col.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { propertyData } from "../configs/properites";
+</script>
+
+<template>
+  <div class="function-col">
+    {{ propertyData }}
+  </div>
+</template>
+
+<style scoped lang="scss">
+.function-col {
+  width: 200px;
+  height: calc(100vh - $main-header-height);
+  background-color: $hj-black-2;
+}
+</style>

src/views/modules/project-config/com/project-message.vue

@@ -0,0 +1,21 @@
+<script setup>
+const emits = defineEmits(["onClickItem"]);
+
+// 当点击了项目
+const handleClickItem = (item) => {
+  emits("onClickItem", item);
+};
+</script>
+
+<template>
+  <div class="project-message-col"></div>
+</template>
+
+<style scoped lang="scss">
+.project-message-col {
+  width: 200px;
+  height: calc(100vh - $main-header-height);
+  background-color: $hj-black-2;
+  border-right: 1px solid $hj-white-4;
+}
+</style>

src/views/modules/project-config/configs/properites.ts

@@ -0,0 +1,52 @@
+import { Node } from "@vue-flow/core";
+import type {
+  HJHandle,
+  HJNodeData,
+  HJNodeDataModel,
+} from "jxq-ui/dist/components/flow/src/types/comTypes";
+
+// 功能块名称	属性名称	初始值	数值类型	下限	上限	输入/输出
+
+// 功能块类别
+interface FunctionTypeModel {
+  id: string;
+  name: string;
+  functions: AutoTestNodeData[]; //指的是功能模块 不是函数
+}
+// 功能块类
+interface InformationModel {
+  // 保留类型的信息以便展示
+  functionType: string;
+  functionTypeId: string;
+
+  functionName: string;
+}
+
+type HJNodeData2 = Omit<HJNodeDataModel, "information"> & {
+  information: InformationModel;
+};
+
+// 这个类型里面的label 展示的是对应的FunctionTypeModel的名称， 以便在Node.vue中的header中展示
+export interface AutoTestNodeData extends Partial<Node> {
+  data: HJNodeData2;
+}
+
+export const propertyData: FunctionTypeModel[] = [
+  {
+    id: "1",
+    name: "信号源",
+    functions: [
+      {
+        type: "universal",
+        data: {
+          label: "",
+          information: {
+            functionType: "功能块类别",
+            functionTypeId: "功能块类别ID",
+            functionName: "功能块名称",
+          },
+        },
+      },
+    ],
+  },
+];

src/views/modules/project-config/project-config.vue

@@ -1,25 +1,24 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ProjectMessage from "./com/project-message.vue";
+import FunctionModule from "./com/function-col.vue";
+</script>
 
 <template>
-  <div>
-    <HJFlow
-      class="hjflow-box"
-      :showPanel="true"
-      :panelBtns="[
-        'addNode',
-        'reset',
-        'layoutLR',
-        'layoutTB',
-        'toSnake',
-        'back',
-      ]"
-    />
+  <div class="project-config-container">
+    <ProjectMessage />
+    <FunctionModule />
+    <HJFlow class="hjflow-box" />
   </div>
 </template>
 
 <style scoped lang="scss">
+.project-config-container {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - $main-header-height);
+}
 .hjflow-box {
   width: 800px;
-  height: 400px;
+  height: 100%;
 }
 </style>