SMO/src/views/system/disposition/components/configurationGlobal.vue

<template>
  <el-form :inline="true" :model="formInline" label-position="top" class="form-inline">
    <div style="display: flex;flex-direction: column;height: 86vh">
      <div style="flex-grow: 1;">
        <div class="disposition-title">提示音配置</div>
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isDutyPunctual" :disabled="isDisabled">正点值班时间提醒声音选择</el-checkbox>
              <el-select v-model="formInline.dutyPunctual" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isInstrument" :disabled="isDisabled">仪器检定证提醒声音选择</el-checkbox>
              <el-select v-model="formInline.instrument" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isDispatch" :disabled="isDisabled">自动编发报文提醒声音选择</el-checkbox>
              <el-select v-model="formInline.dispatch" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isFailureSensor" :disabled="isDisabled">传感器故障提醒声音选择</el-checkbox>
              <el-select v-model="formInline.failureSensor" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isFeatures" :disabled="isDisabled">要素缺测提醒声音选择</el-checkbox>
              <el-select v-model="formInline.features" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isWeatherHazardous" :disabled="isDisabled">危险天气提醒声音选择</el-checkbox>
              <el-select v-model="formInline.weatherHazardous" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isCommunication" :disabled="isDisabled">通讯故障提醒声音选择</el-checkbox>
              <el-select v-model="formInline.communication" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="width: 250px">
              <el-checkbox v-model="formInline.isProcess" :disabled="isDisabled">进程管理提醒声音选择</el-checkbox>
              <el-select v-model="formInline.process" :disabled="isDisabled">
                <el-option label="传感器故障.wav" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="disposition-title">全局策略配置</div>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isVisibility" :disabled="isDisabled">能见度</el-checkbox>
              <el-input v-model="formInline.visibility" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.visibility2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isWindVelocity" :disabled="isDisabled">风速</el-checkbox>
              <el-input v-model="formInline.windVelocity" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.windVelocity2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isElectricField" :disabled="isDisabled">大气电场</el-checkbox>
              <el-input v-model="formInline.electricField" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.electricField2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isTemperature" :disabled="isDisabled">温度</el-checkbox>
              <el-input v-model="formInline.temperature" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.temperature2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isHumidity" :disabled="isDisabled">湿度</el-checkbox>
              <el-input v-model="formInline.humidity" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.humidity2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isRainfall" :disabled="isDisabled">雨量</el-checkbox>
              <el-input v-model="formInline.rainfall" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.rainfall2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item>
              <el-checkbox v-model="formInline.isClouds" :disabled="isDisabled">云底高</el-checkbox>
              <el-input v-model="formInline.clouds" placeholder="请输入告警条件" :disabled="isDisabled"></el-input>
              <el-input v-model="formInline.clouds2" placeholder="请输入消警条件" style="margin-top: 10px" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button > 重置 </el-button>
        <el-button type="primary"> 确定 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import {nextTick, onMounted, ref, watch} from "vue";
import { defineModel } from 'vue';
import {getRgDataList} from "@/api/modules/allData";
const modelValue = defineModel();
const isDisabled = ref(true)
const formInline = ref<any>({
  user:"",
  region:"",
  checkboxValue: true,

  dutyPunctual:'',
  isDutyPunctual:false,
  instrument:'',
  isInstrument:false,
  dispatch:'',
  isDispatch:false,
  failureSensor:'',
  isFailureSensor:false,
  features:'',
  isFeatures:false,
  weatherHazardous:'',
  isWeatherHazardous: false,
  communication:'',
  isCommunication:false,
  process:'',
  isProcess:false,

  visibility: '',
  visibility2: '',
  isVisibility:false,

  windVelocity:'',
  windVelocity2:'',
  isWindVelocity:false,

  electricField:'',
  electricField2:'',
  isElectricField:false,

  temperature:'',
  temperature2:'',
  isTemperature: false,

  humidity:'',
  humidity2:'',
  isHumidity: false,

  rainfall:'',
  rainfall2:'',
  isRainfall:false,

  clouds:'',
  clouds2:'',
  isClouds:false

})
onMounted(() => {
  getAllRgDataList()
});
watch(modelValue, (newVal) => {
  // 在这里处理 modelValue 的变化
  dataProcessing()
});

const dataProcessing= async ()=>{
  modelValue.value.forEach(function(item) {
    const itemValue = item.item_value
    if (!itemValue) {
      return;
    }
    if(item.item_key==='28'){
      formInline.value.dutyPunctual = itemValue
      formInline.value.isDutyPunctual = true
    }

    if(item.item_key==='29'){
      formInline.value.instrument = itemValue
      formInline.value.isInstrument = true
    }

    if(item.item_key==='30'){
      formInline.value.dispatch = itemValue
      formInline.value.isDispatch = true
    }

    if(item.item_key==='31'){
      formInline.value.failureSensor = itemValue
      formInline.value.isFailureSensor = true
    }

    if(item.item_key==='32'){
      formInline.value.features = itemValue
      formInline.value.isFeatures = true
    }

    if(item.item_key==='33'){
      formInline.value.weatherHazardous = itemValue
      formInline.value.isWeatherHazardous = true
    }


    if(item.item_key==='34'){
      formInline.value.communication = itemValue
      formInline.value.isCommunication = true
    }
    if(item.item_key==='35'){
      formInline.value.process = itemValue
      formInline.value.isProcess = true
    }

    if(itemValue!=='NULLPTR' && item.item_key==='39'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.visibility = data
      formInline.value.visibility2 = data2
      formInline.value.isVisibility = true
    }

    if(itemValue!=='NULLPTR' && item.item_key==='40'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.windVelocity = data
      formInline.value.windVelocity2 = data2
      formInline.value.isWindVelocity= true

    }

    if(itemValue!=='NULLPTR' && item.item_key==='41'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.electricField = data
      formInline.value.electricField2 = data2
      formInline.value.isElectricField = true
    }

    if(itemValue!=='NULLPTR' && item.item_key==='42'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.temperature = data
      formInline.value.temperature2 = data2
      formInline.value.isTemperature = true
    }

    if(itemValue!=='NULLPTR' && item.item_key==='43'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.humidity = data
      formInline.value.humidity2 = data2
      formInline.value.isHumidity = true

    }

    if(itemValue!=='NULLPTR' && item.item_key==='44'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.rainfall = data
      formInline.value.rainfall2 = data2
      formInline.value.isRainfall = true
    }

    if(itemValue!=='NULLPTR' && item.item_key==='45'){
      const {data,data2} = parseItemValue(itemValue);
      formInline.value.clouds = data
      formInline.value.clouds2 = data2
      formInline.value.isClouds = true
    }


  });
}

const parseItemValue = (itemValue) => {
  const [alarm, alarmCondition, eliminate, eliminateCondition] = itemValue.split(';');
  const [relationshipAlarm, timeAlarm] = alarm.split('|');
  const [relationshipEliminate, timeEliminate] = eliminate.split('|');
  let data = undefined
  let data2 =undefined
  if(alarmCondition.includes('#')){
    const [conditionAlarm, conditionAlarm2] = alarmCondition.split('#');
     data = `${parseCondition(conditionAlarm)}   ${parseCondition(conditionAlarm2)}`;
  }else {
    data = `${parseCondition(alarmCondition)}`;
  }

  if(eliminateCondition.includes('#')){
    const [conditionEliminate, conditionEliminate2] = eliminateCondition.split('#');
     data2 = `${parseCondition(conditionEliminate)}  ${parseCondition(conditionEliminate2)}`;
  }else {
     data2 = `${parseCondition(eliminateCondition)}`;
  }






  return {
    relationshipAlarm,
    timeAlarm,
    relationshipEliminate,
    timeEliminate,
    data,
    data2
  };
}

const parseCondition = (condition) => {
  const [element, operator, value] = condition.split('|');
  return `${findDataName(element)} ${operatorDataName(operator)} ${value}`;
};

// 查询所有人工要素字典表
const elementList =ref<any>([])
const getAllRgDataList = async () => {
  const { data } = await getRgDataList();
  elementList.value = data.list
  dataProcessing()
};

const findDataName = (id) => {
  const item = elementList.value.find(item => item.data_id == parseInt(id));
  if (item) {
    return  item.data_name;
  } else {
    return ''
  }
};


const operatorDataName = (id) => {
  const item = operatorList.find(item => item.value == parseInt(id));
  if (item) {
    return  item.label;
  } else {
    return ''
  }
};

const operatorList= [
  {
    value: 0,
    label: '>',
  },
  {
    value: 1,
    label: '<',
  },
  {
    value: 3,
    label: '=',
  },
  {
    value: 4,
    label: '≠',
  }
]

</script>

<style scoped>
</style>