|
|
@@ -6,9 +6,9 @@
|
|
|
<template #title>
|
|
|
<div class="flex" style="justify-content: space-between;width: 100%;">
|
|
|
<div class="cu-title" @click.stop>
|
|
|
- <el-radio-group v-model="item.type" @change="actionTypeChange(item)">
|
|
|
+ <el-radio-group v-model="item.type" @change="actionTypeChange(item)" :disabled="!!item.saved">
|
|
|
<el-radio v-if="actions.indexOf('device') >= 0" :label="'device'">设备控制 </el-radio>
|
|
|
- <el-radio v-if="actions.indexOf('alarm') >= 0" :label="'alarm'">告警消息 </el-radio>
|
|
|
+ <el-radio v-if="actions.indexOf('alert') >= 0" :label="'alert'">告警消息 </el-radio>
|
|
|
<el-radio v-if="actions.indexOf('scene') >= 0" :label="'scene'">场景控制 </el-radio>
|
|
|
<el-radio v-if="actions.indexOf('http') >= 0" :label="'http'">http推送 </el-radio>
|
|
|
<el-radio v-if="actions.indexOf('mqtt') >= 0" :label="'mqtt'">mqtt推送 </el-radio>
|
|
|
@@ -36,6 +36,10 @@
|
|
|
<div class="condition-box" v-if="item.type === 'tcp'">
|
|
|
<TcpAction :config="item" />
|
|
|
</div>
|
|
|
+ <div class="condition-box" v-if="item.type === 'alert'">
|
|
|
+ <AlertAction :config="item" />
|
|
|
+ 保存后,在警告配置中关联此规则
|
|
|
+ </div>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</div>
|
|
|
@@ -43,153 +47,164 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { propTypes } from '@/utils/propTypes'
|
|
|
-import DeviceAction from '../components/DeviceAction.vue'
|
|
|
-import HttpAction from '../components/HttpAction.vue'
|
|
|
-import MqttAction from '../components/MqttAction.vue'
|
|
|
-import KafkaAction from '../components/KafkaAction.vue'
|
|
|
-import TcpAction from '../components/TcpAction.vue'
|
|
|
+ import { propTypes } from '@/utils/propTypes'
|
|
|
+ import DeviceAction from '../components/DeviceAction.vue'
|
|
|
+ import HttpAction from '../components/HttpAction.vue'
|
|
|
+ import MqttAction from '../components/MqttAction.vue'
|
|
|
+ import KafkaAction from '../components/KafkaAction.vue'
|
|
|
+ import TcpAction from '../components/TcpAction.vue'
|
|
|
+ import AlertAction from '../components/AlertAction.vue'
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- list: propTypes.array.def([]),
|
|
|
- actions: propTypes.string.def(''),
|
|
|
-})
|
|
|
-const emits = defineEmits(['update:list'])
|
|
|
-const arr: number[] = []
|
|
|
-for (let i = 0; i < 10; i++) {
|
|
|
- arr.push(i)
|
|
|
-}
|
|
|
-const activeName = ref<number[]>(arr)
|
|
|
-const dataList = ref<any[]>(props.list || [])
|
|
|
-watch(() => dataList.value.length, (newV) => {
|
|
|
- const arr = dataList.value.map(m => {
|
|
|
- if (m.config) {
|
|
|
- const obj = JSON.parse(m.config || '{}')
|
|
|
- return obj
|
|
|
- }
|
|
|
- return m
|
|
|
- })
|
|
|
- dataList.value = arr
|
|
|
- emits('update:list', arr)
|
|
|
-}, {
|
|
|
- // deep: true,
|
|
|
- immediate: true,
|
|
|
-})
|
|
|
-// 新增输出
|
|
|
-const handleAdd = () => {
|
|
|
- dataList.value.push({
|
|
|
- services: [],
|
|
|
+ const props = defineProps({
|
|
|
+ list: propTypes.array.def([]),
|
|
|
+ actions: propTypes.string.def(''),
|
|
|
})
|
|
|
-}
|
|
|
+ const emits = defineEmits(['update:list'])
|
|
|
+ const arr: number[] = []
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ arr.push(i)
|
|
|
+ }
|
|
|
+ const activeName = ref<number[]>(arr)
|
|
|
+ const dataList = ref<any[]>(props.list || [])
|
|
|
+ watch(
|
|
|
+ () => dataList.value.length,
|
|
|
+ (newV) => {
|
|
|
+ const arr = dataList.value.map((m) => {
|
|
|
+ if (m.config) {
|
|
|
+ const obj = JSON.parse(m.config || '{}')
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ return m
|
|
|
+ })
|
|
|
+ dataList.value = arr
|
|
|
+ emits('update:list', arr)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // deep: true,
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // 新增输出
|
|
|
+ const handleAdd = () => {
|
|
|
+ dataList.value.push({
|
|
|
+ services: [],
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-// 删除输出
|
|
|
-const removeListener = (index: number) => {
|
|
|
- dataList.value.splice(index, 1)
|
|
|
-}
|
|
|
+ // 删除输出
|
|
|
+ const removeListener = (index: number) => {
|
|
|
+ dataList.value.splice(index, 1)
|
|
|
+ }
|
|
|
|
|
|
-const deviceActionRef = ref()
|
|
|
-const actionTypeChange = (item) => {
|
|
|
- console.log(item)
|
|
|
- if (item.services.length == 0) {
|
|
|
- if (item.type == 'http') {
|
|
|
- item.services = [
|
|
|
- {
|
|
|
- url: '',
|
|
|
- script: `this.translate=function(msg){
|
|
|
+ const deviceActionRef = ref()
|
|
|
+ const actionTypeChange = (item) => {
|
|
|
+ console.log(item)
|
|
|
+ if (item.services.length == 0) {
|
|
|
+ if (item.type == 'http') {
|
|
|
+ item.services = [
|
|
|
+ {
|
|
|
+ url: '',
|
|
|
+ script: `this.translate=function(msg,device){
|
|
|
+ }`,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ } else if (item.type == 'alert') {
|
|
|
+ item.services = [
|
|
|
+ {
|
|
|
+ script: `this.translate=function(msg,device){
|
|
|
}`,
|
|
|
- },
|
|
|
- ]
|
|
|
- } else if (item.type == 'mqtt') {
|
|
|
- item.services = [
|
|
|
- {
|
|
|
- host: '',
|
|
|
- port: 1883,
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- script: `this.translate=function(msg){
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ } else if (item.type == 'mqtt') {
|
|
|
+ item.services = [
|
|
|
+ {
|
|
|
+ host: '',
|
|
|
+ port: 1883,
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ script: `this.translate=function(msg,device){
|
|
|
}`,
|
|
|
- },
|
|
|
- ]
|
|
|
- } else if (item.type == 'kafka') {
|
|
|
- item.services = [
|
|
|
- {
|
|
|
- services: '',
|
|
|
- ack: '',
|
|
|
- script: `this.translate=function(msg){
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ } else if (item.type == 'kafka') {
|
|
|
+ item.services = [
|
|
|
+ {
|
|
|
+ services: '',
|
|
|
+ ack: '',
|
|
|
+ script: `this.translate=function(msg,device){
|
|
|
}`,
|
|
|
- },
|
|
|
- ]
|
|
|
- } else if (item.type === 'tcp') {
|
|
|
- item.services = [
|
|
|
- {
|
|
|
- host: '',
|
|
|
- port: 1883,
|
|
|
- script: `this.translate=function(msg){
|
|
|
- }`
|
|
|
- },
|
|
|
- ]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ } else if (item.type === 'tcp') {
|
|
|
+ item.services = [
|
|
|
+ {
|
|
|
+ host: '',
|
|
|
+ port: 1883,
|
|
|
+ script: `this.translate=function(msg,device){
|
|
|
+ }`,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-onUnmounted(() => {
|
|
|
- console.log('onUnmounted')
|
|
|
- dataList.value = []
|
|
|
-})
|
|
|
+ onUnmounted(() => {
|
|
|
+ console.log('onUnmounted')
|
|
|
+ dataList.value = []
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.list-box {
|
|
|
- margin-top: 10px;
|
|
|
- .cu-title {
|
|
|
- width: calc(100% - 30px);
|
|
|
- cursor: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .item {
|
|
|
- width: 250px;
|
|
|
- margin-right: 10px;
|
|
|
+ .list-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ .cu-title {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ cursor: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item {
|
|
|
+ width: 250px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-::v-deep(.el-collapse-item__header) {
|
|
|
- background-color: #f2f2f2;
|
|
|
- padding: 0 12px;
|
|
|
-}
|
|
|
-.condition-box {
|
|
|
- background-color: #f2f2f2;
|
|
|
- padding: 15px;
|
|
|
- border-top: 1px solid #d9d9d9;
|
|
|
- .main {
|
|
|
- border: 2px dashed rgb(217, 217, 217);
|
|
|
- .title {
|
|
|
- padding: 12px;
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- border-bottom: 1px solid rgb(217, 217, 217);
|
|
|
- }
|
|
|
- .main-box {
|
|
|
- padding: 10px;
|
|
|
- .box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .item {
|
|
|
- border: 2px dashed rgb(217, 217, 217);
|
|
|
- padding: 6px;
|
|
|
+ ::v-deep(.el-collapse-item__header) {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+ .condition-box {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ padding: 15px;
|
|
|
+ border-top: 1px solid #d9d9d9;
|
|
|
+ .main {
|
|
|
+ border: 2px dashed rgb(217, 217, 217);
|
|
|
+ .title {
|
|
|
+ padding: 12px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid rgb(217, 217, 217);
|
|
|
+ }
|
|
|
+ .main-box {
|
|
|
+ padding: 10px;
|
|
|
+ .box {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-top: 10px;
|
|
|
- flex: 1;
|
|
|
- .param-item {
|
|
|
- margin-bottom: 8px;
|
|
|
+ .item {
|
|
|
+ border: 2px dashed rgb(217, 217, 217);
|
|
|
+ padding: 6px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ flex: 1;
|
|
|
+ .param-item {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
+ // .el-button {
|
|
|
+ // width: 50px;
|
|
|
+ // }
|
|
|
}
|
|
|
- // .el-button {
|
|
|
- // width: 50px;
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-}
|
|
|
</style>
|