ananzhusen 8 ماه پیش
والد
کامیت
7dcd0d7ca2
3فایلهای تغییر یافته به همراه232 افزوده شده و 51 حذف شده
  1. 231 23
      src/views/components/Actions.vue
  2. 1 1
      src/views/components/Conditions.vue
  3. 0 27
      src/views/components/Data.vue

+ 231 - 23
src/views/components/Actions.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="props">
     <div v-for="(a, index) in data.actions" class="mb-12">
-      <div class="flex middle between">
-        <div class="flex middle">动作{{ index + 1 }}</div>
-        <!-- <t-icon
-          name="close"
-          class="hover"
-          @click="data.actions.splice(index, 1)"
-        /> -->
+      <div class="flex middle between" style="position:relative;">
+        <div class="flex middle">
+          动作{{ index + 1 }}
+          <t-tooltip content="单位ms,默认不延迟执行">
+          <t-input-number
+            class="input-none"
+            style="position:absolute;left:76px"
+            v-model="a.timeout"
+            theme="normal"
+            :min="1"
+            placeholder="延迟"
+          />
+        </t-tooltip>
+        </div>
+        
         <close-icon class="hover"
           @click="data.actions.splice(index, 1)"/>
       </div>
@@ -261,15 +269,19 @@
         </template>
         <template v-else-if="a.action == 15">
           <Network v-model="a.network" mode="1" />
-
+          <template v-for="(item,idx) in a.list">
+          <div class="flex middle between mt-16">
+            <div class="flex middle" style="font-size:12px">数据{{ idx+1 }}</div>
+            <close-icon class="hover"  @click="a.list.splice(index, 1)"/>
+          </div>
           <div class="form-item mt-8">
             <label>数据对象</label>
             <t-tree-select
-              v-model="a.params"
+              v-model="item.params"
               :data="penTree"
               filterable
               placeholder="默认自己"
-              @change="getProps(a)"
+              @change="getProps(item)"
             />
           </div>
           <div class="form-item mt-8">
@@ -281,7 +293,7 @@
                 <div class="right">
                   <t-dropdown
                     :min-column-width="160"
-                    @click="onAddValue(a, $event)"
+                    @click="onAddValue(item, $event)"
                   >
                     <add-circle-icon class="hover"/>
                     <!-- <t-icon name="add-circle" class="hover" /> -->
@@ -294,12 +306,12 @@
                         class="input"
                       >
                         <t-input
-                          v-model="a.input"
+                          v-model="item.input"
                           style="pointer-events: auto;"
                           placeholder="自定义"
                           @enter="
-                            onAddValue(a, { key: a.input });
-                            a.input = '';
+                            onAddValue(item, { key: item.input });
+                            item.input = '';
                           "
                         />
                       </t-dropdown-item>
@@ -315,21 +327,21 @@
                 </div>
               </div>
               <template
-                v-if="Object.keys(a.value).length"
+                v-if="Object.keys(item.value).length"
                 class="center gray mt-8"
               >
-                <div class="prop-grid mt-8" v-for="(value, key) in a.value">
+                <div class="prop-grid mt-8" v-for="(value, key) in item.value">
                   <div class="ml-8">
                     <t-tooltip :content="key">
-                      {{ getPropDesc(a, key) }}
+                      {{ getPropDesc(item, key) }}
                     </t-tooltip>
                   </div>
                   <div class="value-input">
-                    <t-input v-model="a.value[key]" @change="valueChange($event,a.value,key)" placeholder="值" />
+                    <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" placeholder="值" />
                   </div>
                   <div class="right px-8" style="line-height: 20px">
                     <delete-icon  class="hover"
-                      @click="delete a.value[key]"/>
+                      @click="delete item.value[key]"/>
                     <!-- <t-icon
                       name="delete"
                       class="hover"
@@ -341,6 +353,14 @@
               <div v-else class="center gray mt-8">暂无数据</div>
             </div>
           </div>
+          
+          </template>
+          <div class="form-item mt-8">
+            <label></label>
+            <t-button style="width:150px" @click="addData(a)">
+              添加数据
+            </t-button>
+          </div>
           <div class="form-item mt-8" v-if="a.network&&a.network.protocol==='http'">
             <label>回调</label>
             <CodeEditor
@@ -421,12 +441,184 @@
             <label>消息名</label>
             <t-input v-model="a.value" placeholder="消息名" />
           </div>
+          <template v-for="(item,idx) in a.list">
+          <div class="flex middle between mt-16">
+            <div class="flex middle" style="font-size:12px">消息数据{{ idx+1 }}</div>
+            <close-icon class="hover"  @click="a.list.splice(index, 1)"/>
+          </div>
+          <div class="form-item mt-8">
+            <label>消息对象</label>
+            <t-tree-select
+              v-model="item.params"
+              :data="penTree"
+              filterable
+              placeholder="默认自己"
+              @change="getProps(item)"
+            />
+          </div>
+          <div class="form-item mt-8">
+            <label>消息数据</label>
+            <div class="w-full">
+              <div class="prop-grid head">
+                <div>属性名</div>
+                <div>属性值</div>
+                <div class="right">
+                  <t-dropdown
+                    :min-column-width="160"
+                    @click="onAddValue(item, $event)"
+                  >
+                    <add-circle-icon class="hover"/>
+                    <t-dropdown-menu>
+                      <t-dropdown-item
+                        key="custom"
+                        value="custom"
+                        disabled="true"
+                        divider="true"
+                        class="input"
+                      >
+                        <t-input
+                          v-model="item.input"
+                          style="pointer-events: auto;"
+                          placeholder="自定义"
+                          @enter="
+                            onAddValue(item, { key: item.input });
+                            item.input = '';
+                          "
+                        />
+                      </t-dropdown-item>
+                      <t-dropdown-item
+                        v-for="prop in cprops"
+                        :key="prop.value"
+                        :value="prop.value"
+                      >
+                        {{ prop.label }}
+                      </t-dropdown-item>
+                    </t-dropdown-menu>
+                  </t-dropdown>
+                </div>
+              </div>
+              <template
+                v-if="Object.keys(item.value).length"
+                class="center gray mt-8"
+              >
+                <div class="prop-grid mt-8" v-for="(value, key) in item.value">
+                  <div class="ml-8">
+                    <t-tooltip :content="key">
+                      {{ getPropDesc(item, key) }}
+                    </t-tooltip>
+                  </div>
+                  <div class="value-input">
+                    <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" placeholder="值" />
+                  </div>
+                  <div class="right px-8" style="line-height: 20px">
+                    <delete-icon  class="hover"
+                      @click="delete item.value[key]"/>
+                  </div>
+                </div>
+              </template>
+              <div v-else class="center gray mt-8">暂无数据</div>
+            </div>
+          </div>
+          
+          </template>
+          <div class="form-item mt-8">
+            <label></label>
+            <t-button style="width:150px" @click="addData(a)">
+              添加消息数据
+            </t-button>
+          </div>
         </template>
         <template v-else-if="a.action == 17">
           <div class="form-item mt-8">
             <label>消息名</label>
             <t-input v-model="a.value" placeholder="消息名" />
           </div>
+          <template v-for="(item,idx) in a.list">
+          <div class="flex middle between mt-16">
+            <div class="flex middle" style="font-size:12px">消息数据{{ idx+1 }}</div>
+            <close-icon class="hover"  @click="a.list.splice(index, 1)"/>
+          </div>
+          <div class="form-item mt-8">
+            <label>消息对象</label>
+            <t-tree-select
+              v-model="item.params"
+              :data="penTree"
+              filterable
+              placeholder="默认自己"
+              @change="getProps(item)"
+            />
+          </div>
+          <div class="form-item mt-8">
+            <label>消息数据</label>
+            <div class="w-full">
+              <div class="prop-grid head">
+                <div>属性名</div>
+                <div>属性值</div>
+                <div class="right">
+                  <t-dropdown
+                    :min-column-width="160"
+                    @click="onAddValue(item, $event)"
+                  >
+                    <add-circle-icon class="hover"/>
+                    <t-dropdown-menu>
+                      <t-dropdown-item
+                        key="custom"
+                        value="custom"
+                        disabled="true"
+                        divider="true"
+                        class="input"
+                      >
+                        <t-input
+                          v-model="item.input"
+                          style="pointer-events: auto;"
+                          placeholder="自定义"
+                          @enter="
+                            onAddValue(item, { key: item.input });
+                            item.input = '';
+                          "
+                        />
+                      </t-dropdown-item>
+                      <t-dropdown-item
+                        v-for="prop in cprops"
+                        :key="prop.value"
+                        :value="prop.value"
+                      >
+                        {{ prop.label }}
+                      </t-dropdown-item>
+                    </t-dropdown-menu>
+                  </t-dropdown>
+                </div>
+              </div>
+              <template
+                v-if="Object.keys(item.value).length"
+                class="center gray mt-8"
+              >
+                <div class="prop-grid mt-8" v-for="(value, key) in item.value">
+                  <div class="ml-8">
+                    <t-tooltip :content="key">
+                      {{ getPropDesc(item, key) }}
+                    </t-tooltip>
+                  </div>
+                  <div class="value-input">
+                    <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" placeholder="值" />
+                  </div>
+                  <div class="right px-8" style="line-height: 20px">
+                    <delete-icon  class="hover"
+                      @click="delete item.value[key]"/>
+                  </div>
+                </div>
+              </template>
+              <div v-else class="center gray mt-8">暂无数据</div>
+            </div>
+          </div>
+          
+          </template>
+          <div class="form-item mt-8">
+            <label></label>
+            <t-button style="width:150px" @click="addData(a)">
+              添加消息数据
+            </t-button>
+          </div>
         </template>
       </div>
     </div>
@@ -574,9 +766,12 @@ const onChangeAction = (action: any) => {
       break;
     case 15:
       action.network = {type: 'publish',protocol: 'mqtt', options: {}};
-      action.params = '';
-      action.value = {};
+      // action.params = '';
+      // action.value = {};
       action.targetType = 'id';
+      action.list = [
+        {params:undefined,value:{}}
+      ];
       getProps(action);
       break;
     default:
@@ -715,12 +910,12 @@ const getPropDesc = (a: any, key: any) => {
 
 const onAddValue = (action: any, data: any) => {
   if (!action.value[data.key]) {
-    action.value[data.key] = undefined;
+    action.value[data.key] = "";
   }
 };
 
 const valueChange = (e,aValue:any,key:any)=>{
-  aValue[key] = changeType(e);
+  aValue[key] = changeType(e)||"";
 }
 
 const codeChange = (e:any,a:any)=>{
@@ -734,6 +929,13 @@ const decimalPlaces = (val: number) => {
   return Math.round(+val * 100) / 100;
 };
 
+const addData = (a:any)=>{
+  if(!a.list){
+    a.list = [];
+  }
+  a.list.push({params:undefined,value:{}})
+}
+
 </script>
 <style lang="postcss" scoped>
 .props {
@@ -747,5 +949,11 @@ const decimalPlaces = (val: number) => {
       padding: 0 8px;
     }
   }
+
+  .input-none{
+    :deep(.t-input){
+      border: none;
+    }
+  }
 }
 </style>

+ 1 - 1
src/views/components/Conditions.vue

@@ -148,7 +148,7 @@
         </template>
       </div>
     </div>
-    <div class="mt-8">
+    <div class="mt-8 mb-8">
       <a @click="addTriggerCondition(data)"> + 添加触发条件 </a>
     </div>
   </div>

+ 0 - 27
src/views/components/Data.vue

@@ -675,8 +675,6 @@ import Network from '@/views/components/Network.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { s8 } from '@/services/random';
 import { useUser } from '@/services/user';
-// import { doSqlCode, subscribeProperties } from '@/services/iot';
-// import * as mqtt from 'mqtt/dist/mqtt.min.js';
 
 const props = defineProps<{
   group: string;
@@ -1223,31 +1221,6 @@ const addNetwork = () => {
 
 const onOkNetwork = async () => {
   const _data = transformData(networkDialog.network, 'toNetwork');
-  // if(_data.data.protocol === 'sql'){
-  //   console.log("data",_data.data);
-  //     await doSqlCode('list',_data.data.dbId,_data.data.sql);
-  //   // return
-  // }else if(_data.data.protocol === 'device'){
-  //   console.log("data",_data.data);
-  //  const res =  await subscribeProperties(_data.data.devices);
-  //  let token = res.token;
-  //  const websocket = new WebSocket(
-  //       'ws://192.168.110.6/api/ws/iot/properties',
-  //       token
-  //     );
-  // websocket.onmessage = (e) => {
-  //    console.log("消息",e);      
-  //  };
-  //  let mqttClient = mqtt.connect('ws://192.168.110.9:8083/mqtt', {
-  //         // clientId: '',
-  //         // username: '',
-  //         // password: '',
-  //       });
-  //       mqttClient.on('message', (topic: string, message: Buffer) => {
-  //         console.log('mqttClient message', topic, message.toString());
-  //       })
-  //       mqttClient.subscribe(`le5le-iot/properties/${token}`);
-  // }
   if (networkDialog.editNetwork === 1) {
     if (['mqtt','websocket','http'].includes(networkDialog.network.protocol)&& !networkDialog.network.url) {
       MessagePlugin.error('URL地址不能为空!');