Merge branch 'main' of github.com:le5le-com/visualization-design

src/styles/tdesign.css

@@ -411,7 +411,7 @@
   }
 }
 
-.t-popup[data-popper-placement^='top'] .t-popup__arrow::before {
+.t-popup[data-popper-placement^="top"] .t-popup__arrow::before {
   top: -4px;
 }
 
@@ -452,3 +452,14 @@
 .t-divider--horizontal {
   margin: 0;
 }
+
+.t-dialog {
+  label {
+    font-size: 10px;
+    background-color: #ff400030;
+    color: var(--color-bland);
+    padding: 0 6px;
+    margin-left: 4px;
+    border-radius: 2px;
+  }
+}

src/views/components/View.vue

@@ -254,8 +254,76 @@
       :type="contextMenuType"
       @changeVisible="changeContextMenuVisible"
     />
-    <t-dialog v-model:visible="connectVisible">
-      <p>这是通信对话框</p>
+    <t-dialog
+      width="800px"
+      header="数据源管理"
+      v-model:visible="connectVisible"
+      @confirm="comConfirm"
+    >
+      <t-tabs :default-value="1">
+        <t-tab-panel :value="1" label="通信" :destroy-on-hide="false">
+          <template #panel>
+            <t-row class="mt-8" justify="end">
+              <t-space :size="8">
+                <t-input placeholder="搜索我的数据源">
+                  <template #suffixIcon>
+                    <icon name="search"></icon>
+                    <!-- <search-icon :style="{ cursor: 'pointer' }" /> -->
+                  </template>
+                </t-input>
+                <t-button style="height: 30px">添加数据源</t-button>
+              </t-space>
+            </t-row>
+            <t-table
+              class="mt-8"
+              row-key="id"
+              :data="comData"
+              :columns="comColumns"
+            >
+              <template #operation="{ row }">
+                <t-link theme="primary" hover="color" @click="editCom(row)">
+                  编辑
+                </t-link>
+                <t-divider layout="vertical" />
+                <t-link theme="primary" hover="color" @click="deleteCom(row)">
+                  删除
+                </t-link>
+              </template>
+            </t-table>
+            <!-- <p style="padding: 25px">选项卡1的内容，使用 t-tab-panel 渲染</p> -->
+          </template>
+        </t-tab-panel>
+        <t-tab-panel :value="2" :destroy-on-hide="false">
+          <template #label
+            >数据集 <span><label>VIP</label></span></template
+          >
+          <template #panel>
+            <t-row class="mt-8" style="height: 32px; line-height: 32px">
+              <t-col flex="60px"> 网络接口 </t-col>
+              <t-col flex="auto">
+                <t-input class="ml-8" style="width: 200px" />
+              </t-col>
+            </t-row>
+            <t-row class="mt-8">
+              <t-col flex="60px">自定义</t-col>
+              <t-col flex="auto">
+                <t-button class="ml-8" style="height: 30px"
+                  >从Excel导入</t-button
+                >
+                名称（数据点ID 类型 值
+              </t-col>
+            </t-row>
+            <t-table
+              class="mt-8"
+              row-key="id"
+              :data="dsData"
+              :columns="dsColumns"
+            >
+              <template #operation="{ row }"> </template>
+            </t-table>
+          </template>
+        </t-tab-panel>
+      </t-tabs>
     </t-dialog>
   </div>
 </template>
@@ -723,6 +791,65 @@ const canvasClick = () => {
 const changeContextMenuVisible = (e: boolean) => {
   contextMenuVisible.value = e;
 };
+
+const comConfirm = () => {
+  connectVisible.value = false;
+};
+const comData = ref([
+  {
+    name: "连接1",
+    type: "mqtt",
+    addr: "wss://",
+  },
+  {
+    name: "连接2",
+    type: "mqtt",
+    addr: "wss://",
+  },
+  {
+    name: "连接3",
+    type: "mqtt",
+    addr: "wss://",
+  },
+]);
+const comColumns = ref([
+  {
+    colKey: "name",
+    title: "名称",
+    ellipsis: true,
+  },
+  {
+    colKey: "type",
+    title: "类型",
+    ellipsis: true,
+  },
+  {
+    colKey: "addr",
+    title: "接口地址",
+    ellipsis: true,
+  },
+  { colKey: "operation", title: "操作", width: 120, foot: "-" },
+]);
+
+const dsData = ref([]);
+
+const dsColumns = ref([
+  {
+    colKey: "name",
+    title: "名称（数据点ID）",
+    ellipsis: true,
+  },
+  {
+    colKey: "type",
+    title: "类型",
+    ellipsis: true,
+  },
+  {
+    colKey: "value",
+    title: "值",
+    ellipsis: true,
+  },
+]);
 </script>
 <style lang="postcss" scoped>
 .meta2d {