场景定义代码优化

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

@@ -11,10 +11,7 @@
             <CircleClose />
           </el-icon>
         </div>
-        <!-- <el-icon size="26" @click="delScene(index)" v-if="index > 0"
-          style="position: relative;font-size: 26px;    top: 18px;left: -14px;">
-          <CircleClose />
-        </el-icon> -->
+
         <div class="flex-warp item_list">
 
           <div v-for="(vo, i) in item" :key="i">
@@ -24,29 +21,32 @@
                 style="background: #fff; color: #000;border: 1px solid #d9cde3;margin-left: 10px;margin-right: 10px;"
                 v-if="i > 0">并且</el-button>
 
-              <el-popover placement="bottom" trigger="click"  ref="popoverRef" v-model:visible="isPopoverVisible">
+              <el-popover placement="bottom" trigger="click" ref="popoverRef" v-model:visible="vo.isPopoverVisible">
                 <template #reference>
-                  <el-button style="background: #9adbff4d; color: #00a4fe;border: 1px solid #00a4fe4d;">{{ vo.parameter_text ||
+                  <el-button style="background: #9adbff4d; color: #00a4fe;border: 1px solid #00a4fe4d;">{{
+                    vo.parameter_text ||
                     '请选择参数' }}</el-button>
                 </template>
                 <div class="popover-content">
                   <ul>
-                    <li v-for="(option, d) in columnList" :key="d"  @click="setParameter(vo,option)">
-                    {{option.name }}
+                    <li v-for="(option, d) in columnList" :key="d" @click="setParameter(vo, option)" >
+                      {{ option.name }}
                     </li>
                   </ul>
                 </div>
               </el-popover>
 
-              <el-popover placement="bottom" trigger="click" v-model:visible="isPopoverVisible1">
+              <el-popover placement="bottom" trigger="click" v-model:visible="vo.isPopoverVisible1">
                 <template #reference>
-                  <el-button style="background: #a3caff4d; color: #2f54eb;border: 1px solid #2f54eb4d;">{{ vo.operator_text ||
+                  <el-button style="background: #a3caff4d; color: #2f54eb;border: 1px solid #2f54eb4d;">{{
+                    vo.operator_text ||
                     '操作符' }}</el-button>
                 </template>
                 <div class="popover-content">
                   <ul>
-                    <li v-for="option in vo.operatorList" :key="option.Key" @click="vo.operator = option.Key;vo.operator_text = option.Name;saveData();isPopoverVisible1=false;">{{ option.Name
-                    }}</li>
+                    <li v-for="option in vo.operatorList" :key="option.Key"
+                      @click="vo.operator = option.Key; vo.operator_text = option.Name; vo.isPopoverVisible1 = false; saveData();">
+                      {{ option.Name }}</li>
                   </ul>
                 </div>
               </el-popover>
@@ -57,12 +57,12 @@
                     '参数值' }}</el-button>
                 </template>
                 <div class="popover-content">
-                   <el-input v-model="vo.value" placeholder="请输入参数值"  @input="saveData"  />
+                  <el-input v-model="vo.value" placeholder="请输入参数值" @input="saveData" />
 
                 </div>
               </el-popover>
 
-              <el-icon size="16" v-if="i > 0" @click="DelSceneItem(i, index)" style="position: relative;top: -13px;">
+              <el-icon size="16" v-if="i>0" @click="DelSceneItem(i, index)" style="position: relative;top: -13px;">
                 <CircleClose />
               </el-icon>
 
@@ -96,32 +96,22 @@
 import { PropType, ref } from 'vue'
 import { CirclePlus, CircleClose, Right } from '@element-plus/icons-vue';
 const emit = defineEmits(['EditPen']);
-const isPopoverVisible = ref(false);
-const isPopoverVisible1 = ref(false);
-const operatorList=ref([{
-  'Key':'',
-  'Name':'',
-}]);
-
 interface IConditionItem {
   [x: string]: any;
   parameter?: string;
   operator?: string;
   value?: string;
 }
-
-interface IValueType {
-  list: IConditionItem[];
+interface Column {
+  termTypes: any[]; 
 }
-
 const props = defineProps({
-
   condition: {
     type: Array as PropType<IConditionItem[]> | undefined,
     default: () => []
   },
   columnList: {
-    type: Array,
+    type: Array as PropType<Column[]>,
     default: () => []
   },
   operate_index: {
@@ -130,21 +120,21 @@ const props = defineProps({
   }
 })
 
-const setParameter=(vo: IConditionItem,item:any)=>{
+const setParameter = (vo: IConditionItem, item: any) => {
   vo.parameter_text = item.name;
   vo.parameter = item.column;
   // operatorList.value=item.termTypes
-  vo.operatorList = item.termTypes; 
-  isPopoverVisible.value = false; // 关闭弹窗
+  vo.operatorList = item.termTypes;
+  vo.isPopoverVisible = false; // 关闭弹窗
 
   saveData();
 }
 
-const saveData=()=>{
+const saveData = () => {
   emit('EditPen', props.operate_index);
 }
 
-const addSceneItem = (index:number) => {
+const addSceneItem = (index: number) => {
   props.condition[index].push({
     'parameter': '',
     'operator': '',
@@ -160,7 +150,6 @@ const DelSceneItem = (index: number, parentIndex: number) => {
 
 }
 
-
 const addScene = () => {
   props.condition.push([{
     'parameter': '',
@@ -172,16 +161,14 @@ const delScene = (index: number) => {
   props.condition.splice(index, 1);
 }
 const initItem = () => {
-  console.log(props.condition,'aaaaaa');
-  console.log(props.columnList,'bbbbbb');
   props.condition.forEach((item) => {
-    item.forEach((vo) => {
-      const operator = vo.operator;
-      const matchedColumn = props.columnList.find((column) =>
-        column.termTypes.some((term) => term.Key === operator)
-      ); 
+    item.forEach((vo:any) => {
+      let operator = vo.operator;
+      let matchedColumn = props.columnList.find((column:any) =>
+        column.termTypes.some((term:any) => term.Key === operator)
+      );
       if (matchedColumn) {
-        vo.operatorList = matchedColumn.termTypes; 
+        vo.operatorList = matchedColumn.termTypes;
       } else {
         vo.operatorList = []; // 如果没有匹配的列，设置为空数组
       }
@@ -192,29 +179,7 @@ initItem();
 
 </script>
 <style scoped lang="scss">
-// ::v-deep .el-divider__text {
-//   background: #f2f3f5  !important;
-
-// }
-
-//先保留
-// ::v-deep .condition_value{
-//    .el-input__wrapper {
-//       width: 120px;
-//       background: #9adbff4d !important;
-//       box-shadow:0px !important;
-//     .el-input__inner{
-//       color: #00a4fe;
-//       text-align: center;
-//     }
-//     .el-input__wrapper .is-focus{
-//       box-shadow:0px !important;
-//     }
-//     .el-input__inner::placeholder{
-//       color: #00a4fe;
-//     }
-//   }
-// }
+
 .popover-content {
   padding: 0px;
 }
@@ -294,6 +259,5 @@ initItem();
     }
   }
 
-}
-</style>
+}</style>
 

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

@@ -2,30 +2,28 @@
 	<el-card class="system-dic-container" style="position: relative;">
 		<div class="content">
 			<div class="flex cont_box">
-				<div class="font26">场景名称：{{detail.name}}</div>
-				<div class="pro-status"><span :class="detail.status == 1 ? 'on' : 'off'"></span>{{ detail.status  == 1
+				<div class="font26">场景名称：{{ detail.name }}</div>
+				<div class="pro-status"><span :class="detail.status == 1 ? 'on' : 'off'"></span>{{ detail.status == 1
 					? '启用' : '未启用' }}</div>
 			</div>
-
 			<div class="flex">
-				<div class="desc">场景描述：{{detail.description}}</div>
+				<div class="desc">场景描述：{{ detail.description }}</div>
 				<div class="edit" @click="addOrEdit(detail)"><el-link type="primary"> <el-icon>
 							<EditPen color="#409eff" />
 						</el-icon>修改</el-link></div>
 			</div>
-
 		</div>
-
 	</el-card>
-	<el-card style="  margin-top: 15px;" >
+	<el-card style="  margin-top: 15px;">
 		<div class="font20">场景定义</div>
-		<SceneItem v-if="showstatus" :sceneList="sceneList" :sceneType="detail.sceneType" @addScenesDetail="addScenesDetail" @delScenesDetail="delScenesDetail" @editScenesDetail="editScenesDetail"></SceneItem>
+		<SceneItem v-if="showstatus" :sceneList="sceneList" :sceneType="detail.sceneType" @addScenesDetail="addScenesDetail"
+			@delScenesDetail="delScenesDetail" @editScenesDetail="editScenesDetail"></SceneItem>
 	</el-card>
-	<el-card style="  margin-top: 15px;" >
+	<el-card style="  margin-top: 15px;">
 		<div class="font20">场景动作</div>
 		<ActionItem :actionList="actionList"></ActionItem>
 	</el-card>
-	
+
 	<EditForm ref="editFormRef" @getList="getDetail()"></EditForm>
 </template>
 <script lang="ts">
@@ -38,43 +36,45 @@ import ActionItem from './component/actionItem.vue';
 import SceneItem from './component/sceneItem.vue';
 import EditForm from './edit.vue';
 import api from '/@/api/scene';
-import product from '/@/api/device';
-
 const editFormRef = ref();
 //原始
 const sceneList = {
 	'productKey': '',
-				'deviceKey': '',
-				'triggerType': '',
-				'timer': '',
-				'triggerSwitch': false,
-				'condition': [[{
+	'deviceKey': '',
+	'triggerType': '',
+	'timer': '',
+	'triggerSwitch': false,
+	'condition': [[{
 
-						'parameter': '',
-						'operator': '',
-						'value': ''
+		'parameter': '',
+		'operator': '',
+		'value': ''
 
-				}]]
+	}]]
 };
-const originalSceneList=ref([{}]);
-
-
+const originalSceneList = ref([{
+	id: 0
+}]);
 export default defineComponent({
-	components: { EditPen, EditForm, DocumentAdd, SceneItem,ActionItem },
+	components: { EditPen, EditForm, DocumentAdd, SceneItem, ActionItem },
 	setup(props, context) {
 		const route = useRoute();
 		const router = useRouter();
 		const state = reactive({
 			developer_status: 2,
-			showstatus : false,
-			detail: {},
-			sourceData:[],
+			showstatus: false,
+			detail: {
+				name: '',
+				status: 0,
+				description: '',
+				sceneType: ''
+			},
 			actionList: [{
-				'seriallist':[{
+				'seriallist': [{
 
 				}],
-				'parallellist':[{
-					
+				'parallellist': [{
+
 				}]
 			}],
 			sceneList: [{
@@ -84,10 +84,9 @@ export default defineComponent({
 				'timer': '',
 				'triggerSwitch': false,
 				'condition': [[{
-
-						'parameter': '',
-						'operator': '',
-						'value': ''
+					'parameter': '',
+					'operator': '',
+					'value': ''
 
 				}]]
 			}],
@@ -104,31 +103,28 @@ export default defineComponent({
 
 		const getOneDetail = () => {
 			const id = route.params && route.params.id;
-			api.manage.getOneDetail({ "sceneId": id,'group':'definition' }).then((res: any) => {
-				if(!res){
+			api.manage.getOneDetail({ "sceneId": id, 'group': 'definition' }).then((res: any) => {
+				if (!res) {
 					addScenesDetail('definition');
 					getOneDetail();
 				}
-				originalSceneList.value=res;
-				const scenes = res.map((scene:any) => {
+				originalSceneList.value = res;
+				const scenes = res.map((scene: any) => {
 					const parsedBodyJson = JSON.parse(scene.bodyjson);
 					return {
 						...parsedBodyJson
 					};
 				});
-
-				state.sceneList=scenes;
+				state.sceneList = scenes;
 				state.showstatus = true;
-
 			})
 		};
-
 		//新增一条场景定义
-		const addScenesDetail=(type:String)=>{
-			let data={
-				sceneId:route.params && route.params.id,
-				group:type,
-				bodyjson:sceneList,
+		const addScenesDetail = (type: String) => {
+			let data = {
+				sceneId: route.params && route.params.id,
+				group: type,
+				bodyjson: sceneList,
 			}
 			api.manage.addDetail(data).then((res: any) => {
 				getOneDetail();
@@ -136,56 +132,36 @@ export default defineComponent({
 		}
 
 		//删除一条场景
-		const delScenesDetail=(index)=>{
-			let ids=originalSceneList.value[index].id;
+		const delScenesDetail = (index: number) => {
+			let ids = originalSceneList.value[index].id;
 			api.manage.delDetail(ids).then((res: any) => {
 				// getOneDetail();
 			});
 		}
-		
 		//修改一条场景
-		const editScenesDetail=(index:number)=>{
-			let saveData=state.sceneList[index];
-			let ids=originalSceneList.value[index].id;
-			api.manage.editDetail({id:ids,bodyjson:saveData}).then((res: any) => {
+		const editScenesDetail = (index: number) => {
+			let saveData = state.sceneList[index];
+			let ids = originalSceneList.value[index].id;
+			api.manage.editDetail({ id: ids, bodyjson: saveData }).then((res: any) => {
 				getOneDetail();
 			});
-			
+
 		}
 		const addOrEdit = async (row?: any) => {
 			editFormRef.value.open(row);
 		};
-		
-
-
-		const freshData = () => {
-			getDetail()
-			ElMessage.success('刷新成功');
-		};
-		const toEdit = () => {
-			router.push(`/iotmanager/network/server/edit/${route.params && route.params.id}`)
-		};
-		onMounted(() => {
-
-		});
-		const handleClick = (tab: TabsPaneContext, event: Event) => {
-			// console.log(tab, event)
-		}
 
 		getDetail();
 
 
 		return {
-			toEdit,
 			addOrEdit,
 			delScenesDetail,
 			addScenesDetail,
 			editScenesDetail,
 			editFormRef,
 			activeName,
-			freshData,
 			getDetail,
-			handleClick,
 			...toRefs(props),
 			...toRefs(state),
 		};