iotc/ruoyi-ui-vue3/src/views/rules/add.vue

<template>
  <div style="padding: 10px 15px">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span v-show="objId == null">规则定义-新增</span>
          <span v-show="objId != null">规则定义-修改</span>
          <div>
            <el-button type="warning" @click="">复位</el-button>
            <el-button type="primary" @click="saveSensor()">保存</el-button>
            <el-button type="primary" plain @click="router.back();">返回</el-button>
          </div>
        </div>
      </template>
      <el-row>
        <el-col :span="24">
          <el-card>

            <el-descriptions :column="3">
              <el-descriptions-item>
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    <span style="color: red">*</span> 规则编码
                  </div>

                </template>
                <div class="content-w">
                  <el-input placeholder="请输入规则编码" v-model="ruleParam.sn" />
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    <span style="color: red">*</span> 规则名称
                  </div>
                </template>
                <div class="content-w">
                  <el-input placeholder="请输入规则名称" v-model="ruleParam.name" />
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    <span style="color: red">*</span> 触发类型
                  </div>
                </template>
                <div class="content-w">
                  <el-input placeholder="请输入" v-model="ruleParam.type" />
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    <span style="color: red">*</span> 触发条件值
                  </div>
                </template>
                <div class="content-w">
                  <el-input placeholder="请输入" v-model="ruleParam.triggeringCondition" />
                </div>
              </el-descriptions-item>

              <!-- <el-descriptions-item >

                <div class="content-w">
                  <el-input placeholder="请输入"/>
                </div>
              </el-descriptions-item>

              <el-descriptions-item >
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    边界控制
                  </div>
                </template>
                <div class="content-w">
                  <el-switch
                    active-text="上限"
                    inactive-text="下限"
                  />
                </div>
              </el-descriptions-item> -->

              <el-descriptions-item>
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    设备
                  </div>
                </template>
                <div class="content-w">
                  <el-select v-model="ruleParam.equipmentId" value-key="id" filterable placeholder="Select"
                    @change="selectEquipment">
                    <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div style="display: inline-block;min-width: 100px;text-align: right">
                    传感器
                  </div>
                </template>
                <div class="content-w">
                  <el-select v-model="ruleParam.sensorId" value-key="id" filterable placeholder="Select">
                    <el-option v-for="item in sensorList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
              </el-descriptions-item>

            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :span="12" style="padding-right: 5px;margin-top: 10px" v-if="objId != null">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>条件</span>
                <div>
                  <el-button type="primary" plain @click="addFilter()">添加</el-button>
                </div>
              </div>
            </template>
            <el-table :data="tjdata" @cell-click="selectRow">
              <el-table-column label="过滤方式" prop="filterWay"></el-table-column>
              <el-table-column label="过滤算法" prop="filterAlgorithm"></el-table-column>
              <el-table-column prop="sn" label="操作">
                <template #default="scope">
                  <div>
                    <el-button link @click="
                    ">
                      <el-tooltip effect="dark" content="编辑">
                        <el-icon @click="goupdate(scope.row)">
                          <Edit />
                        </el-icon>
                      </el-tooltip>
                    </el-button>
                    <el-popconfirm title="确定删除该编码?" @confirm="">
                      <template #reference>
                        <el-button link><el-tooltip effect="dark" content="删除"><el-icon
                              @click="godelRuleFilter(scope.row)">
                              <Delete />
                            </el-icon></el-tooltip></el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>

              </el-table-column>
            </el-table>

          </el-card>
        </el-col>
        <el-col :span="12" style="padding-left: 5px;margin-top: 10px" v-if="objId != null">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>执行（{{ filterObj.name }}）</span>
                <div>
                  <el-button type="primary" plain @click="goAddRuleEXecute">添加</el-button>
                </div>
              </div>
            </template>
            <el-table :data="zxdata">
              <el-table-column label="设备">
                <template #default="scope">
                  <span>{{ getDeviceName(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="执行动作" prop="executeAction"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <div>
                    <el-button link @click="
                    ">
                      <el-tooltip effect="dark" content="编辑">
                        <el-icon @click="goupdateExecute(scope.row)">
                          <Edit />
                        </el-icon>
                      </el-tooltip>
                    </el-button>
                    <el-popconfirm title="确定删除该编码?" @confirm="">
                      <template #reference>
                        <el-button link><el-tooltip effect="dark" content="删除"><el-icon
                              @click="godelRuleExecute(scope.row)">
                              <Delete />
                            </el-icon></el-tooltip></el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- goupdateExecute -->
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
      <el-form :model="ruleFilterParam">
        <el-form-item label="过滤方式" label-width="140px">
          <el-input v-model="ruleFilterParam.filterWay" placeholder="请输入过滤方式" />
        </el-form-item>
        <el-form-item label="上限" label-width="140px">
          <el-input v-model="ruleFilterParam.upperLimit" placeholder="请输入上限" />
        </el-form-item>
        <el-form-item label="下限" label-width="140px">
          <el-input v-model="ruleFilterParam.lowerLimit" placeholder="请输入下限" />
        </el-form-item>
        <el-form-item label="过滤算法" label-width="140px">
          <el-input v-model="ruleFilterParam.filterAlgorithm" placeholder="请输入过滤算法" />
        </el-form-item>
        <el-form-item label="过滤公式" label-width="140px">
          <el-input v-model="ruleFilterParam.formula" placeholder="请输入公式" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRuleFilter()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormExVisible" :title="dialogExTitle">
      <el-form :model="ruleExecuteParam">
        <el-form-item label="名称" label-width="140px">
          <el-input v-model="ruleExecuteParam.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="设备" label-width="140px">
          <el-select v-model="ruleExecuteParam.equipmentId" value-key="id" filterable placeholder="Select">
            <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="执行动作" label-width="140px">
          <el-input v-model="ruleExecuteParam.executeAction" placeholder="请输入执行动作" />
        </el-form-item>
        <el-form-item label="备注" label-width="140px">
          <el-input v-model="ruleExecuteParam.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormExVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRuleExecute()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Units">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { listEquipmentSbook } from "@/api/data/equipmentSbook";
import { listSensor, addSensor } from "@/api/data/sensor"
import { addRule, getRule, updateRule } from "@/api/data/rule"
import { addRuleFilter, getRuleFilter, updateRuleFilter, listRuleFilter, delRuleFilter } from "@/api/data/ruleFilter"
import { addRuleExecute, getRuleExecute, updateRuleExecute, listRuleExecute, delRuleExecute } from "@/api/data/ruleExecute"

import { ElMessage } from 'element-plus'


const route = useRoute();
const router = useRouter();

let objId = route.query.id

const tjdata = ref([]);
const zxdata = ref([]);
const deviceList = ref([]);
const sensorList = ref([]);
const dialogFormVisible = ref(false)
const dialogFormExVisible = ref(false)
const dialogExTitle = ref("添加执行动作")
const dialogTitle = ref("添加条件")
const ruleFilterParam = ref({
  id: null,
  ruleId: null,
  filterWay: '',
  upperLimit: '',
  lowerLimit: '',
  filterAlgorithm: '',
  formula: ''
})

const ruleExecuteParam = ref({
  id: null,
  ruleId: null,
  filterId: null,
  name: '',
  equipmentId: "",
  executeAction: "",
  remark: ''
})

const filterObj = ref({ id: null, name: "" })

const ruleParam = ref({
  id: "",
  sn: "",
  name: "",
  type: "",
  equipmentId: "",
  sensorId: "",
  time: "",
  triggeringCondition: "",
  description: "",
  remark: ""
})
const getEquipmentSbookList = () => {
  listEquipmentSbook({ pageSize: 10000 }).then(res => {
    deviceList.value = res.rows
    getDetail();
  })
}

const getDeviceName = (item) => {
  for (var index in deviceList.value) {
    if (deviceList.value[index].id = item.equipmentId) {
      return deviceList.value[index].name;
    }
    return item.equipmentId;
  }
}

const selectEquipment = (value) => {
  console.log(value);
  var obj = {
    deviceId: value,
    pageSize: 10000
  }
  listSensor(obj).then(res => {
    console.log(res);
    sensorList.value = res.rows
  })
}

const saveSensor = () => {
  if (objId == null) {
    console.log(ruleParam.value);
    addRule(ruleParam.value).then(res => {
      console.log(res);
      if (res.code == 200) {
        router.back()
      }
    })
  } else {
    updateRule(ruleParam.value).then(res => {
      console.log(res);
      if (res.code == 200) {
        router.back()
      }
    })
  }
}

const getDetail = () => {
  getRule(objId).then(res => {
    console.log(res);
    ruleParam.value = res.data;
    selectEquipment(res.data.equipmentId);
  })
}

const saveRuleFilter = () => {
  ruleFilterParam.value.ruleId = objId;
  console.log(ruleFilterParam.value.id);
  if (ruleFilterParam.value.id != null) {
    updateRuleFilter(ruleFilterParam.value).then(res => {
      if (res.code == 200) {
        getFilterList();
        dialogFormVisible.value = false;
      }
    })
  } else {
    addRuleFilter(ruleFilterParam.value).then(res => {
      if (res.code == 200) {
        getFilterList();
        dialogFormVisible.value = false;
      }
    })
  }
}

const saveRuleExecute = () => {
  if (ruleExecuteParam.value.id != null) {
    ruleExecuteParam.value.ruleId = objId;
    ruleExecuteParam.value.filterId = filterObj.value.id
    updateRuleExecute(ruleExecuteParam.value).then(res => {
      if (res.code == 200) {
        getRuleExecuteList();
        dialogFormExVisible.value = false
      }
    })
  } else {
    ruleExecuteParam.value.ruleId = objId;
    ruleExecuteParam.value.filterId = filterObj.value.id
    addRuleExecute(ruleExecuteParam.value).then(res => {
      if (res.code == 200) {
        getRuleExecuteList();
        dialogFormExVisible.value = false
      }
    })
  }
}

const goupdateExecute = (item) => {
  dialogExTitle.value = "修改执行动作"
  getRuleExecute(item.id).then(res => {
    ruleExecuteParam.value = res.data
    dialogFormExVisible.value = true;
  })
}

const goupdate = (item) => {
  dialogTitle.value = "修改条件"
  getRuleFilter(item.id).then(res => {
    ruleFilterParam.value = res.data
    dialogFormVisible.value = true;
  })
}

const addFilter = () => {
  ruleFilterParam.value = {
    id: null,
    ruleId: null,
    filterWay: '',
    upperLimit: '',
    lowerLimit: '',
    filterAlgorithm: '',
    formula: ''
  }
  dialogFormVisible.value = true
}

const getFilterList = () => {
  listRuleFilter({ ruleId: objId, pageSize: 10000 }).then(res => {
    tjdata.value = res.rows
  })
}

const godelRuleFilter = (item) => {
  delRuleFilter(item.id).then(res => {
    if (res.code == 200) {
      getFilterList();
    }
  })
}

const godelRuleExecute = (item) => {
  delRuleExecute(item.id).then(res => {
    if (res.code == 200) {
      getRuleExecuteList();
    }
  })
}

const openMessage = () => {
  ElMessage({
    message: '请选择规则条件',
    type: 'warning',
  })
}

const goAddRuleEXecute = () => {
  ruleExecuteParam.value = {
    id: null,
    ruleId: null,
    executeId: null,
    name: '',
    equipmentId: "",
    execute_action: "",
    remark: ''
  }
  if (filterObj.value.id != null) {
    dialogFormExVisible.value = true
  } else {
    openMessage();
  }
}

const selectRow = (row, column, event) => {
  filterObj.value.id = row.id;
  filterObj.value.name = row.filterWay;
  console.log(filterObj.value)
  getRuleExecuteList();
}

const getRuleExecuteList = () => {
  listRuleExecute({ filterId: filterObj.value.id, pageSize: 10000 }).then(res => {
    console.log(res);
    zxdata.value = res.rows;
  })
}

getEquipmentSbookList();
if (objId != null) {
  getFilterList();
}

</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content-w {
  display: inline-flex;
  max-width: 160px;
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>