feat: 按UI图调整设备点位交互

src/components/Action/src/isAction.tsx

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-20 15:31:30
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-22 17:42:58
+ * @LastEditTime: 2024-08-23 16:59:59
  * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isAction.tsx
  * @Description: 是否操作行为
  */
@@ -10,7 +10,6 @@ import { defineComponent, PropType } from "vue";
 import { ElDialog, ElButton } from "element-plus";
 import warnIcon from "@/assets/modelSetting/warn_icon.png";
 import "./isAction.scss";
-// TODO 完善操作交互
 export default defineComponent({
   name: "IsDelete",
   props: {

src/components/Action/src/isDelete.tsx

@@ -1,81 +0,0 @@
-/*
- * @Author: donghao donghao@supervision.ltd
- * @Date: 2024-02-22 13:38:04
- * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-22 17:46:27
- * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isDelete.tsx
- * @Description: 是否删除
- */
-import { defineComponent, PropType } from "vue";
-import { ElDialog, ElButton } from "element-plus";
-// TODO 完善删除交互
-export default defineComponent({
-  name: "IsDelete",
-  props: {
-    title: {
-      type: String as PropType<string>,
-      default: "提示"
-    },
-    message: {
-      type: String as PropType<string>,
-      default: "确定要删除吗？"
-    },
-    visible: {
-      type: Boolean as PropType<boolean>,
-      required: true
-    }
-  },
-  emits: ["update:visible", "confirm"],
-  setup(props, { emit }) {
-    // const visible = ref(props.visible);
-
-    const handleConfirm = () => {
-      emit("confirm");
-      // visible.value = false;
-      // emit("update:visible", false);
-    };
-
-    const handleCancel = () => {
-      // visible.value = false;
-      emit("update:visible", false);
-    };
-
-    const handleClose = () => {
-      // visible.value = false;
-      emit("update:visible", false);
-      // done();
-    };
-
-    watch(
-      () => props.visible,
-      val => {
-        visible.value = val;
-      }
-    );
-
-    return () => (
-      <ElDialog
-        visible={props.visible}
-        width="30%"
-        before-close={handleClose}
-        show-close={false}
-        header={false}
-        v-slots={{
-          header: () => <>123</>
-        }}
-        v-slots={{
-          footer: () => (
-            <>
-              <ElButton onClick={handleCancel}>取消</ElButton>
-              <ElButton type="danger" onClick={handleConfirm}>
-                删除
-              </ElButton>
-            </>
-          )
-        }}
-      >
-        <span>{props.message}</span>
-      </ElDialog>
-    );
-  }
-});

src/style/element-plus.scss

@@ -48,7 +48,7 @@
 
 /* 自定义 tooltip 的类名 */
 .pure-tooltip {
-  // 右侧操作面板right-panel类名的z-index为40000，tooltip需要大于它才能显示
+  /* 右侧操作面板right-panel类名的z-index为40000，tooltip需要大于它才能显示 */
   z-index: 41000 !important;
 }
 
@@ -193,8 +193,6 @@
 }
 
 /* table */
-
-// 列表操作栏
 .table_action_box {
   .el-button {
     padding: 0;
@@ -207,3 +205,9 @@
 .el-table__inner-wrapper::before {
   background-color: transparent !important;
 }
+
+/* 气泡框 */
+
+.el-popover.el-popper {
+  padding: 16px !important;
+}

src/views/deviceSetting/components/deviceAttr.vue

@@ -25,11 +25,12 @@ const { mixinState, canvasEditor } = useSelect();
 const { fetchViewsBoundaries, isMoveDevice } = useDeviceObject();
 /**业务属性 */
 const formData = ref({
+  name: "",
   icon: 1
 });
 
 const rules = {
-  icon: [{ required: true, message: "请选择图标类型", trigger: "change" }]
+  icon: [{ required: false, message: "请选择图标类型", trigger: "change" }]
 };
 
 const iconOptions = ref([
@@ -307,6 +308,10 @@ onBeforeUnmount(() => {
 </script>
 <template>
   <div class="deviceAtrr_toolbar" v-if="mixinState.mSelectMode === 'one'">
+    <div class="hf-1 text-[#000]">
+      <!-- 设备待选列表是name, 新增后返回是device_name -->
+      {{ formData?.device_name || formData?.name }}
+    </div>
     <el-form
       ref="formRef"
       :rules="rules"
@@ -315,7 +320,8 @@ onBeforeUnmount(() => {
       class="demo-form-inline"
       label-position="top"
     >
-      <el-form-item label="选择图标" class="w-full" prop="icon">
+      <!-- // TODO 交互与UI图保持一致 -->
+      <el-form-item label="选择图标" class="w-full pt-[12px]" prop="icon">
         <el-radio-group
           v-model="formData.icon"
           @change="changeCommon('icon', formData.icon)"
@@ -328,7 +334,7 @@ onBeforeUnmount(() => {
             <el-image
               :src="option?.url || ''"
               :fit="'contain'"
-              class="w-[24px]"
+              class="w-[32px]"
             />
           </el-radio>
         </el-radio-group>

src/views/deviceSetting/components/deviceSelect.vue

@@ -7,6 +7,8 @@ import useSelect from "@/hooks/select";
 // import { useI18n } from "vue-i18n";
 import { useDeviceObject } from "../hooks/useDeviceObject";
 import { IsAction } from "@/components/Action";
+import { InfoFilled } from "@element-plus/icons-vue";
+
 const props = defineProps({
   deviceList: {
     type: Array as Record<string, any>[]
@@ -174,6 +176,7 @@ const dragItem = (event, deviceItem) => {
         resData => {
           // 新增完成处理
           item.set({
+            name: resData?.device_name,
             deviceInfo: resData
           }); // 作为无刷新时的标识
           canvasEditor.dragAddItem(event, item);
@@ -265,20 +268,69 @@ defineExpose({ renderDeviceToCanvas });
       <div>
         <h4 class="hf-1 py-[12px]">设备列表</h4>
         <p class="pf-2">
-          可直接点击拖拽设备名称至图中目标位置，鼠标悬停可查看设备详情
+          <span>可直接点击</span>
+          <span class="text-[#154DDD]">拖拽设备名称</span>
+          <span>至图中目标位置，鼠标悬停可查看设备详情</span>
         </p>
-        <ul class="mt-[8px] deviceSelect_list">
+        <ul class="mt-[8px] deviceSelect_list cursor-move">
           <li
-            class="flex items-center px-[16px] mb-[12px]"
+            class="flex items-center px-[12px] mb-[12px] justify-between"
             :class="currDetailInfo?.id === info.id ? 'active' : ''"
             v-for="(info, i) in allDeviceList"
             :key="`${i}-logo1-button`"
             :draggable="true"
             @dragend="event => dragItem(event, info)"
           >
-            <span>
-              {{ info.name }}
-            </span>
+            <div class="flex items-center">
+              <span
+                class="truncate overflow-hidden whitespace-nowrap max-w-[120px]"
+              >
+                {{ info.name }}
+              </span>
+              <span
+                class="flex justify-center bind_tag ml-[8px]"
+                v-if="info?.is_binding"
+              >
+                已绑定
+              </span>
+            </div>
+            <el-popover placement="left" :width="230" trigger="click">
+              <template #reference>
+                <div class="flex items-center cursor-pointer device_info_btn">
+                  <el-icon
+                    style="
+                      width: 14px;
+                      height: 14px;
+                      color: #154ddd;
+                      margin-right: 2px;
+                    "
+                    ><InfoFilled
+                  /></el-icon>
+                  <span>详情</span>
+                </div>
+              </template>
+              <div class="device_info_box">
+                <div class="pf-1 pb-[8px]">设备信息</div>
+                <ul class="text-[16px] text-web-font1 device_info_items">
+                  <li>
+                    <span>设备名称：</span>
+                    <span>{{ info?.name }}</span>
+                  </li>
+                  <li>
+                    <span>设备ID：</span>
+                    <span>{{ info?.entity_suid }}</span>
+                  </li>
+                  <li>
+                    <span>设备类型：</span>
+                    <span>{{ info?.classification }}</span>
+                  </li>
+                  <li>
+                    <span>设备型号：</span>
+                    <span>{{ info?.device_model }}</span>
+                  </li>
+                </ul>
+              </div>
+            </el-popover>
           </li>
         </ul>
       </div>
@@ -292,29 +344,3 @@ defineExpose({ renderDeviceToCanvas });
     @confirm="updateConfirmBind"
   />
 </template>
-
-<style scoped lang="scss">
-.search-box {
-  padding-top: 10px;
-  display: flex;
-  .input {
-    margin-left: 10px;
-  }
-}
-.tmpl-img {
-  display: inline-block;
-  width: 53px;
-  margin-left: 2px;
-  margin-bottom: 2px;
-  background: #f5f5f5;
-  padding: 6px;
-  cursor: pointer;
-}
-
-.form-wrap {
-  display: flex;
-  justify-content: space-around;
-  align-content: center;
-  margin-bottom: 10px;
-}
-</style>

src/views/deviceSetting/index.scss

@@ -66,7 +66,7 @@
     .point_detail_wrap {
       .deviceOfPoint_wrap {
         border: 1px dashed #ddd;
-        height: calc(100vh - 290px);
+        height: calc(100vh - 300px);
       }
       .footer_btns {
         padding: 16px 0;
@@ -77,9 +77,12 @@
   /* TODO 待使用 */
   .right-bar {
     margin-left: 16px;
-    width: 241px;
+    width: 304.07px;
     height: calc(100vh - 300px);
     overflow-y: scroll;
+    background: #fafbff;
+    border-radius: 4px;
+    border: 1px solid rgba(21, 77, 221, 0.1);
   }
   #workspace {
     flex: 1;
@@ -90,6 +93,7 @@
 }
 /* 选择设备栏位 */
 .deviceSelect_toolbar {
+  font-size: 14px;
   .deviceSelect_list {
     li {
       border-radius: 2px;
@@ -99,11 +103,38 @@
       }
     }
   }
+  .bind_tag {
+    width: 52px;
+    height: 24px;
+    background: rgba(82, 196, 26, 0.05);
+    border-radius: 2px;
+    border: 1px solid #52c41a;
+    font-size: 12px;
+    color: #52c41a;
+    line-height: 24px;
+  }
+  .device_info_btn {
+    color: #333333;
+  }
+}
+.device_info_box {
+  .device_info_items {
+    & > li {
+      padding-bottom: 12px;
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
 }
 /* 设备属性栏位 */
 .deviceAtrr_toolbar {
+  padding: 12px;
   .el-radio__label {
     display: flex;
     align-items: center;
   }
+  .el-form-item__label {
+    color: #000000;
+  }
 }