场景联动前端代码同步

src/views/iot/scene/manage/component/actionItem.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="type-item">
+    <div v-for="(item, index) in actionList" :key="index" class="item " :class="index > 0 ? 'biankang' : ''">
+      <div class="conicon" style="width: 100%; text-align: right; position: relative; right: -8px; top: -8px; color: red"
+        v-if="index > 0">
+        <el-icon @click="delAction(index)">
+          <CircleClose />
+        </el-icon>
+      </div>
+      <div class="font16">场景动作</div>
+      <div class="title flex">
+        <div class="icon"></div>串行动作
+      </div>
+      <div class="product flex flex-warp">
+        <ActionSerialItem :seriallist="item.seriallist"></ActionSerialItem>
+
+      
+      </div>
+
+      <div class="title flex">
+        <div class="icon"></div>并行动作
+      </div>
+      <div class="product flex flex-warp">
+            <ActionParallelItem :parallellist="item.parallellist"></ActionParallelItem>
+      
+      </div>
+    </div>
+    <div>
+      <div class="edit">
+        <el-button type="primary" :icon="DocumentAdd" @click="addAction()">新增场景动作</el-button>
+      </div>
+    </div>
+
+
+
+
+ 
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref  } from 'vue'
+import { DocumentAdd, CircleClose } from '@element-plus/icons-vue';
+import ActionSerialItem from './actionSerialItem.vue';
+import ActionParallelItem from './actionParallelItem.vue';
+
+
+interface IConditionItem {
+  param?: string;
+  operator?: string;
+  value?: string;
+}
+
+interface IValueType {
+  seriallist?:IConditionItem[] ;
+  parallellist?:IConditionItem[] ;
+}
+
+const props = defineProps({
+
+  actionList: {
+    type: Array as PropType<IValueType[]>,
+    default: () => []
+  },
+
+})
+
+
+const addAction = () => {
+  props.actionList.push({
+    'seriallist':[{
+
+    }],
+    'parallellist':[{
+      
+    }],
+  });
+  console.log(props.actionList);
+};
+const delAction = (index: number) => {
+  props.actionList.splice(index, 1);
+}
+
+</script>
+<style scoped lang="scss">
+
+.type-item {
+  margin-top: 15px;
+
+  .edit {
+    margin-top: 15px;
+    margin-left: 10px;
+    color: #2041d4;
+  }
+
+  .conicon {
+    width: 55px;
+    height: 25px;
+
+    font-size: 28px;
+    line-height: 28px;
+    cursor: pointer;
+  }
+
+  .item {
+    padding: 20px;
+    background-color: #f2f3f5;
+    margin-top: 20px;
+
+  }
+
+  .biankang {
+
+    border: 1px dashed #959596;;
+    border-radius: 10px;
+  }
+
+
+  .title {
+    height: 40px;
+
+    .icon {
+      margin-left: 2px;
+      margin-right: 10px;
+      width: 5px;
+      height: 20px;
+      background-color: #315efb;
+    }
+  }
+
+  .product {
+
+    .el-form-item {
+      margin-left: 30px;
+      margin-bottom: 10px;
+      margin-top: 10px;
+    }
+  }
+
+}
+</style>
+

src/views/iot/scene/manage/component/actionParallelItem.vue

@@ -0,0 +1,194 @@
+
+<template>
+  <div class="type-item">
+    <div v-for="(item, index) in parallellist" :key="index" class="item " :class="index > 0 ? 'biankang' : ''">
+      <div class="conicon" style="width: 100%; text-align: right; position: relative; right: -8px; top: -8px; color: red"
+        v-if="index > 0">
+        <el-icon @click="delScene(index)">
+          <CircleClose />
+        </el-icon>
+      </div>
+      <div class="product flex flex-warp">
+
+        <el-form-item label="动作类型：" prop="product_key">
+          <el-select v-model="item.product_key" filterable placeholder="请选择产品">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户类型：" prop="device_key">
+          <el-select v-model="item.device_key" filterable placeholder="请选择设备">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="触发类型：" prop="type">
+          <el-select v-model="item.type" filterable placeholder="请选择触发类型">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      
+        <el-form-item label="属性：" prop="type">
+          <el-select v-model="item.type" filterable placeholder="请选择触发类型">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+    
+    </div>
+    <div>
+      <div class=" flex-center">
+        <el-button :icon="DocumentAdd" @click="addScene()" style="border: 1px solid #409eff;color: #409eff;">新增串行动作</el-button>
+      </div>
+    </div>
+
+
+
+
+ 
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref  } from 'vue'
+import { DocumentAdd, CircleClose } from '@element-plus/icons-vue';
+
+
+
+interface IConditionItem {
+  param?: string;
+  operator?: string;
+  value?: string;
+}
+
+interface IValueType {
+  type?: string;
+  product_key?: string;
+  device_key?: string;
+  where?: string;
+  cronExpression?: string;
+  condition?: {
+    list?: IConditionItem[] ;
+  }[];
+}
+
+
+
+interface testIValueType {
+  key: string;
+  name?: string;
+
+}
+
+const props = defineProps({
+
+  parallellist: {
+    type: Array as PropType<IValueType[]>,
+    default: () => []
+  },
+  sourceData: {
+    type: Array as PropType<testIValueType[]>,
+    default: () => [{
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }]
+  }
+})
+
+
+const addScene = () => {
+  props.parallellist.push({
+    'product_key': '',
+    'device_key': '',
+    'type': '',
+    'condition':[{
+								'list': [{
+											'param': '',
+											'operator': '',
+											'value': ''
+										}]
+							}]
+  });
+  console.log(props.parallellist);
+};
+const delScene = (index: number) => {
+  props.parallellist.splice(index, 1);
+}
+
+</script>
+<style scoped lang="scss">
+
+.type-item {
+  width: 100%;
+
+  .edit {
+    margin-left: 10px;
+    color: #2041d4;
+  }
+
+  .conicon {
+    width: 55px;
+    height: 25px;
+    font-size: 28px;
+    line-height: 28px;
+    cursor: pointer;
+  }
+
+  .item {
+    background-color: #f2f3f5;
+    margin-bottom: 20px;
+
+  }
+
+  .biankang {
+
+    border: 1px dashed #959596;;
+    border-radius: 10px;
+  }
+
+
+  .title {
+    height: 40px;
+
+    .icon {
+      margin-left: 2px;
+      margin-right: 10px;
+      width: 5px;
+      height: 20px;
+      background-color: #315efb;
+    }
+  }
+
+  .product {
+    margin-bottom: 20px;
+    .el-form-item {
+      margin-left: 30px;
+      margin-bottom: 10px;
+    }
+  }
+
+}
+</style>

src/views/iot/scene/manage/component/actionSerialItem.vue

@@ -0,0 +1,185 @@
+
+<template>
+  <div class="type-item">
+    <div v-for="(item, index) in seriallist" :key="index" class="item " :class="index > 0 ? 'biankang' : ''">
+      <div class="conicon" style="width: 100%; text-align: right; position: relative; right: -8px; top: -8px; color: red"
+        v-if="index > 0">
+        <el-icon @click="delScene(index)">
+          <CircleClose />
+        </el-icon>
+      </div>
+      <div class="product flex flex-warp">
+
+        <el-form-item label="动作类型：" prop="product_key">
+          <el-select v-model="item.product_key" filterable placeholder="请选择动作类型">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户类型：" prop="device_key">
+          <el-select v-model="item.device_key" filterable placeholder="请选择设备">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="触发类型：" prop="type">
+          <el-select v-model="item.type" filterable placeholder="请选择触发类型">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      
+        <el-form-item label="属性：" prop="type">
+          <el-select v-model="item.type" filterable placeholder="请选择触发类型">
+            <el-option v-for="it in sourceData" :key="it.key" :label="it.name" :value="it.key">
+              <span style="float: left">{{ it.name }}</span>
+              <span style="float: right; font-size: 13px">{{ it.key }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+    
+    </div>
+    <div>
+      <div class=" flex-center">
+        <el-button :icon="DocumentAdd" @click="addScene()" style="border: 1px solid #409eff;color: #409eff;">新增串行动作</el-button>
+      </div>
+    </div>
+
+
+
+
+ 
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref  } from 'vue'
+import { DocumentAdd, CircleClose } from '@element-plus/icons-vue';
+
+interface IConditionItem {
+  param?: string;
+  operator?: string;
+  value?: string;
+}
+
+interface IValueType {
+  seriallist?: IConditionItem[] ;
+}
+
+
+
+interface testIValueType {
+  key: string;
+  name?: string;
+
+}
+
+const props = defineProps({
+
+  seriallist: {
+    type: Array as PropType<IValueType[]>,
+    default: () => []
+  },
+  sourceData: {
+    type: Array as PropType<testIValueType[]>,
+    default: () => [{
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }, {
+      'key': 'test',
+      'name': '测试',
+    }]
+  }
+})
+
+
+const addScene = () => {
+  props.seriallist.push({
+    'product_key': '',
+    'device_key': '',
+    'type': '',
+    'condition':[{
+								'list': [{
+											'param': '',
+											'operator': '',
+											'value': ''
+										}]
+							}]
+  });
+  console.log(props.seriallist);
+};
+const delScene = (index: number) => {
+  props.seriallist.splice(index, 1);
+}
+</script>
+<style scoped lang="scss">
+
+.type-item {
+  width: 100%;
+
+  .edit {
+    margin-left: 10px;
+    color: #2041d4;
+  }
+
+  .conicon {
+    width: 55px;
+    height: 25px;
+    font-size: 28px;
+    line-height: 28px;
+    cursor: pointer;
+  }
+
+  .item {
+    background-color: #f2f3f5;
+    margin-bottom: 20px;
+
+  }
+
+  .biankang {
+
+    border: 1px dashed #959596;;
+    border-radius: 10px;
+  }
+
+
+  .title {
+    height: 40px;
+
+    .icon {
+      margin-left: 2px;
+      margin-right: 10px;
+      width: 5px;
+      height: 20px;
+      background-color: #315efb;
+    }
+  }
+
+  .product {
+    margin-bottom: 20px;
+    .el-form-item {
+      margin-left: 30px;
+      margin-bottom: 10px;
+    }
+  }
+
+}
+</style>
+

src/views/iot/scene/manage/component/condition.vue

@@ -195,7 +195,7 @@ const delScene = (index: number) => {
 
   .item_list {
     background: #fff;
-    border: 1px dashed;
+    border: 1px dashed #959596;
 
     .items {
       padding: 10px;

src/views/iot/scene/manage/component/sceneItem.vue

@@ -200,7 +200,7 @@ const cronclose = () => {
 
   .biankang {
 
-    border: 1px dashed;
+    border: 1px dashed #959596;;
     border-radius: 10px;
   }
 

src/views/iot/scene/manage/detail.vue

@@ -21,6 +21,10 @@
 		<div class="font20">场景定义</div>
 		<SceneItem :sceneList="sceneList"></SceneItem>
 	</el-card>
+	<el-card style="  margin-top: 15px;" >
+		<div class="font20">场景动作</div>
+		<ActionItem :actionList="actionList"></ActionItem>
+	</el-card>
 	
 	<EditForm ref="editFormRef" @getList="getDetail()"></EditForm>
 </template>
@@ -30,6 +34,7 @@ import { ElMessage } from 'element-plus';
 import type { TabsPaneContext } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router';
 import { EditPen, DocumentAdd } from '@element-plus/icons-vue';
+import ActionItem from './component/actionItem.vue';
 import SceneItem from './component/sceneItem.vue';
 import EditForm from './edit.vue';
 import api from '/@/api/network';
@@ -51,18 +56,25 @@ const sceneList = [{
 
 
 export default defineComponent({
-	components: { EditPen, EditForm, DocumentAdd, SceneItem },
+	components: { EditPen, EditForm, DocumentAdd, SceneItem,ActionItem },
 	setup(props, context) {
 		const route = useRoute();
 		const router = useRouter();
 		const state = reactive({
 			developer_status: 2,
 			detail: {},
+			actionList: [{
+				'seriallist':[{
+
+				}],
+				'parallellist':[{
+					
+				}]
+			}],
 			sceneList: [{
 				'product_key': '',
 				'device_key': '',
 				'type': '',
-				'action': [{}],
 				'where': false,
 				'condition': [{
 					'list': [{