Browse Source

feat:数据

ananzhusen 3 months ago
parent
commit
84905c533c
1 changed files with 67 additions and 7 deletions
  1. 67 7
      src/views/components/Actions.vue

+ 67 - 7
src/views/components/Actions.vue

@@ -213,7 +213,10 @@
           </div>
           </div>
           <template v-for="(d,idx) in a.data">
           <template v-for="(d,idx) in a.data">
             <div class="flex middle actions-data mt-16" style="position:relative" >
             <div class="flex middle actions-data mt-16" style="position:relative" >
-              <t-input class="actions-prop" style="width: 70px;" v-model="d.prop" />
+              <t-tooltip :content="d.prop?(d._label+'('+d.prop+')'):''">
+              <!-- <t-input class="actions-prop" style="width: 70px;" v-model="d.prop" /> -->
+              <div class="actions-prop"> {{ d.label||'请编辑'  }}</div>
+              </t-tooltip>
               <Edit1Icon style="position:absolute;left:56px;height: 32px;" class="hover" @click="selectDeviceProps(d)"/>
               <Edit1Icon style="position:absolute;left:56px;height: 32px;" class="hover" @click="selectDeviceProps(d)"/>
               <!-- <t-input style="width: 100px;" v-model="item.value" /> -->
               <!-- <t-input style="width: 100px;" v-model="item.value" /> -->
@@ -260,8 +263,32 @@
                   </ul>
                   </ul>
                 </template>
                 </template>
               </t-select-input>
               </t-select-input>
-              <t-input v-else class="actions-value"  placeholder="输入值" style="width: 82px;" v-model="d.value" @change="valueDChange($event,d)" />
-              <close-icon   class="hover" @click="delSendData(a.data,idx)"/>
+              <template v-else>
+                <t-switch
+                  size="small"
+                  class="actions-value"
+                  v-if="['switch','bool','boolean'].includes(d.type)"
+                  v-model="d.value"
+                />
+                <t-input-number
+                  class="actions-value"
+                  v-else-if="['integer','number','int','enum','double'].includes(d.type)"
+                  v-model.number="d.value"
+                  theme="column"
+                />
+                <t-button
+                  class="actions-value"
+                  v-else-if="['code','struct','array','object'].includes(d.type)"
+                  shape="square"
+                  variant="outline"
+                  style="width: 24px"
+                  @click="showCode(d)"
+                >
+                  <ellipsis-icon slot="icon" />
+                </t-button>
+                <t-input v-else class="actions-value"  placeholder="输入值" style="width: 82px;" v-model="d.value" @change="valueDChange($event,d)" />
+              </template>
+              <close-icon style="position:absolute;right:2px" class="hover" @click="delSendData(a.data,idx)"/>
             </div>
             </div>
           </template>
           </template>
           <template v-for="(item,idx) in a.list">
           <template v-for="(item,idx) in a.list">
@@ -575,6 +602,16 @@
   </div>
   </div>
   <PropModal v-model:visible="propModal.visible" @change="getProp" />
   <PropModal v-model:visible="propModal.visible" @change="getProp" />
   <MoreModal v-model:visible="more.visible" @change="getMProp" />
   <MoreModal v-model:visible="more.visible" @change="getMProp" />
+  <t-dialog
+    v-if="codeDialog.show"
+    :visible="true"
+    header="下发数据"
+    @confirm="codeDialog.show = false"
+    @close="codeDialog.show = false"
+    :width="800"
+  >
+    <CodeEditor v-model="codeDialog.data.value" style="height: 300px" />
+  </t-dialog>
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
@@ -583,7 +620,7 @@ import PropModal from '@/views/components/common/PropModal.vue';
 import MoreModal from '@/views/components/common/MoreModal.vue';
 import MoreModal from '@/views/components/common/MoreModal.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Network from './Network.vue';
 import Network from './Network.vue';
-import { CloseIcon, AddCircleIcon, DeleteIcon, CheckIcon, Edit1Icon, LinkIcon} from 'tdesign-icons-vue-next';
+import { CloseIcon, AddCircleIcon, DeleteIcon, CheckIcon, Edit1Icon, LinkIcon, EllipsisIcon} from 'tdesign-icons-vue-next';
 import { getPenAnimations, getPenTree ,changeType, getIframeTree} from '@/services/common';
 import { getPenAnimations, getPenTree ,changeType, getIframeTree} from '@/services/common';
 import { deepClone } from '@meta2d/core';
 import { deepClone } from '@meta2d/core';
 
 
@@ -1007,10 +1044,25 @@ const selectDeviceProps = (i)=>{
 }
 }
 
 
 const getProp = (e)=>{
 const getProp = (e)=>{
-  propModal.data.prop = e;
+  propModal.data.prop = e.value;
+  propModal.data.label = e.label;
+  propModal.data._label = e._label
+  propModal.data.type = e.type;
+  propModal.data.class = e.class;
+  propModal.data.token = e.token;
   propModal.visible = false;
   propModal.visible = false;
 }
 }
 
 
+const codeDialog = reactive({
+  show:false,
+  data:null
+});
+
+const showCode = (d)=>{
+  codeDialog.data = d;
+  codeDialog.show = true;
+}
+
 const more = ref({
 const more = ref({
   visible:false,
   visible:false,
   data:null,
   data:null,
@@ -1087,9 +1139,14 @@ const themeOptions = [
       }
       }
     }
     }
     .actions-prop{
     .actions-prop{
-      :deep(.t-input){
+      /* :deep(.t-input){
         width: 70px;
         width: 70px;
-      }
+      } */
+      width: 70px;
+      min-width: 70px;
+      white-space:nowrap; 
+      overflow:hidden; 
+      text-overflow:ellipsis;
     }
     }
     .actions-key{
     .actions-key{
       :deep(.t-input){
       :deep(.t-input){
@@ -1101,6 +1158,9 @@ const themeOptions = [
         width: 82px;
         width: 82px;
       }
       }
     }
     }
+    .t-input-number.t-is-controls-right{
+      width: 82px;
+    }
   }
   }
 }
 }
 </style>
 </style>